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

公開日:2020年7月11日

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

 

タグに画像を登録する

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

フィールド名:tag_img

 

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

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

$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 .'">'; 
}

注意点

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

 

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

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

<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>

 
 

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

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

$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 .'">'; 
}

 
 


参考ページ:WordPressのカテゴリやタグに画像を登録する方法
サイト名:MONOCHROME DESIGN|東京阿佐ヶ谷フリーランスWEBデザイナー。WordPressのホームページ/ウェブサイト制作