課題
WordPressで「Favorites」というお気に入り機能を追加できるプラグインを使っていましたが、デフォルトのままだと出力できるのは タイトル と お気に入りボタン くらい。
そこで、自分のサイトのデザインに合わせて、以下の要素も表示したいという課題が出ました。
- カテゴリー（複数設定されている場合はすべて表示）
- タグ（同上）
- 投稿日（例：2025.02.13 の形式）
- サムネイル画像（無ければ
no_image.webpを表示） - ロック記事用の鍵マーク（ACFのカスタムフィールドを利用）
試したこととコード
1. お気に入り投稿を取得
まず、Favorites の get_user_favorites() を使って投稿IDを取得します。
空配列のまま WP_Query に渡すと「全投稿が取得される」ので、空チェックが必須です。
$favorites_raw = get_user_favorites();
$favorites = array_values(array_filter(array_map('intval', (array) $favorites_raw)));
if (!empty($favorites)) :
$paged = (get_query_var('paged')) ? (int) get_query_var('paged') : 1;
$favorites_query = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => 10,
'ignore_sticky_posts' => true,
'post__in' => $favorites,
'orderby' => 'post__in',
'paged' => $paged,
));
2. サムネイルのフォールバック
サムネイルがある場合は get_the_post_thumbnail_url() を使い、無ければ no_image.webp を表示します。
if (has_post_thumbnail()) {
$thumb_src = get_the_post_thumbnail_url(get_the_ID(), 'medium_large');
$thumb_alt = the_title_attribute(array('echo' => false));
} else {
$thumb_src = esc_url( home_url('/assets/img/common/no_image.webp') );
$thumb_alt = get_the_title();
}
3. カテゴリー・タグをすべて出力
リンクはいらなかったので get_the_terms() を使って <span> で出力しました。
// カテゴリー
$cats_html = '';
$cat_terms = get_the_terms(get_the_ID(), 'category');
if (!is_wp_error($cat_terms) && !empty($cat_terms)) {
foreach ($cat_terms as $t) {
$cats_html .= '<span class="category">' . esc_html($t->name) . '</span> ';
}
}
// タグ
$tags_html = '';
$tag_terms = get_the_terms(get_the_ID(), 'post_tag');
if (!is_wp_error($tag_terms) && !empty($tag_terms)) {
foreach ($tag_terms as $t) {
$tags_html .= '<span class="tag">' . esc_html($t->name) . '</span> ';
}
}
4. 投稿日を出力
希望のフォーマット Y.m.d に整形して出しました。
$date_text = get_the_date('Y.m.d');
5. ロックアイコンをACFで制御
通常の記事と同じく、ACFの lock_mark というフィールドで判定。false のときは nolock_post クラスを付与して、CSSで非表示にします。
$lock_mark = function_exists('get_field') ? get_field('lock_mark') : null;
$lock_mark_class = ($lock_mark === 'false') ? ' nolock_post' : '';
HTML部分ではこうなります👇
<span class="co_lock_icon<?php echo esc_attr($lock_mark_class); ?>">
<img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/img/common/icon_lock.webp' ); ?>" alt="LOCK">
</span>
6. 完成したアイテム構造
最終的に1件分のアイテムはこうなりました。
<a href="<?php echo esc_url(get_permalink()); ?>" class="slide_item article_co">
<div class="co_image_wrapper">
<img src="<?php echo esc_url($thumb_src); ?>" alt="<?php echo esc_attr($thumb_alt); ?>" class="co_image" loading="lazy" decoding="async">
<span class="co_lock_icon<?php echo esc_attr($lock_mark_class); ?>">
<img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/img/common/icon_lock.webp' ); ?>" alt="LOCK">
</span>
</div>
<div class="co_text_wrapper">
<div class="co_text_head">
<div class="category_wrapper"><?php echo $cats_html; ?></div>
<div class="co_time accent_font"><?php echo esc_html($date_text); ?></div>
</div>
<span class="co_title"><?php the_title(); ?></span>
<div class="tag_wrapper"><?php echo $tags_html; ?></div>
</div>
</a>
<?php
// ブックマークボタンは最後に
if (function_exists('get_favorites_button')) {
echo '<div class="favorites-item__actions">' . get_favorites_button(get_the_ID()) . '</div>';
}
?>
最終的な解決方法
WP_Queryにpost__inを渡して、お気に入りの順序通りに取得has_post_thumbnail()+no_image.webpでサムネイルのフォールバックget_the_terms()を使ってカテゴリー・タグをすべて<span>で出力get_the_date('Y.m.d')で日付を表示get_field('lock_mark')でロックアイコン制御
補足・注意点
- 空配列対策必須：Favorites の仕様上、配列が空のまま渡ると全件ヒットしてしまう
- フォールバック画像のパス：テーマに置く場合は
get_stylesheet_directory_uri()、ルートに置くならhome_url() - カテゴリー／タグ：リンクありにしたい場合は
get_the_category_list()やget_the_tag_list()に戻せばOK - ロックアイコン：CSSで
.nolock_post { display:none; }を指定するのを忘れずに
まとめ
「Favorites」プラグインはシンプルな反面、そのままだと情報が足りない。
でも今回のように サムネイル・カテゴリー・タグ・日付・ロックアイコン を追加することで、通常の記事一覧と遜色ない「お気に入り一覧ページ」を実装できました。
👉 備忘録としての教訓
- コードは必ず「空配列対策」から始める
- サムネイルはフォールバックを用意して安心
- ACFなどサイト独自の仕様は早めに反映
- デザインに合わせてHTML構造を揃えると、見た目も統一できる
コメントを残す