【wordpress】タグに画像を登録して、foreachで一覧表示(クリックでタグを登録している記事一覧へ)

プラグイン「Advanced Custom Fields(ACF)」利用しています(利用方法は以下のページを参照してください。分かりやすいです)
https://monochrome-design.jp/blog/357

 

タグに画像を登録する

プラグイン:Advanced Custom Fields(ACF)の設定画面で、画像を登録するフィールドを作成

フィールド名:tag_img

 

登録した画像を表示するコード

Advanced Custom Fields(ACF)で作成したフィールド名を指定

[php]
$terms = get_terms(‘post_tag’);

foreach ($terms as $term) {
$term_id = $term->term_id; // タグのIDを取得
$post_id = ‘post_tag_’. $term_id; // post_tag_1 の様な形にする
$term_imgid = get_field(‘tag_img’, $post_id); // tag_imgはフィールド名を入力
$tag_img = wp_get_attachment_image_src($term_imgid, ‘full’)[0];

echo ‘<img src="’. $tag_img .’">’;
}
[/php]

注意点

  • get_field()の第二引数に$post_idを指定
  • WordPressの「タグ」は「post_tag」という名前で扱われる
  • その為、$post_idは「post_tag_1」の様な形にする必要あり

 

画像付きタグを一覧表示するコード(タグ一覧ページへリンク)

テンプレートに以下のコードを記述
TOPページなどループ外で表示するコードです。

[php]
<ul>
<?php
$terms = get_terms(‘post_tag’, Array(‘number’ => 20)); // 数字 "20"は表示件数
foreach ($terms as $term) {
$term_id = $term->term_id; // タグのIDを取得
$post_id = ‘post_tag_’. $term_id; // タグIDを付けて、post_tag_1 の様な形にする
$term_imgid = get_field(‘tag_img’, $post_id); // tag_imgはフィールド名
$tag_img = wp_get_attachment_image_src($term_imgid, ‘full’)[0];
if( !empty($term_imgid) ) {
echo "<li>";
echo ‘<img src="’. $tag_img .’">’;
$result_list = [];
$i = (get_term_link( $term, ‘post_tag’ ));
echo "<a href=’".$i."’><br>".$term->name."</a></li>";
}
}
?>
</ul>
[/php]

 
 

カテゴリーに画像を登録する場合

タグではなく、カテゴリーに画像を登録することも可能
その場合の画像を表示するコード

[php]
$categories = get_categories();

foreach ($categories as $category) {
$cat_id = $category->cat_ID; // カテゴリのIDを取得
$post_id = ‘category_’. $cat_id; // カテゴリIDを付けて、category_1 の様な形にする
$cat_imgid = get_field(‘cat_img’, $post_id); // cat_imgはフィールド名を入力

$cat_img = wp_get_attachment_image_src($cat_imgid, ‘full’)[0];

echo ‘<img src="’. $cat_img .’">’;
}
[/php]