wp_list_categoriesで吐き出されるliタグをアイキャッチ画像で表示

Question

素朴な質問ですみません。

wp_list_categories()でカテゴリーがliタグで表示されますが、
このliタグに登録されているアイキャッチ画像を表示させたいと思っております。

検索をかけてみても見当たらず、解決策が見当たらなかったので、ご質問させていただきました。

一辺倒な質問であること、お許しください。
よろしくお願いいたします。

/追記/
wordpressでの標準機能、「アイキャッチ画像」に表示されている画像を表示したく思っております。 現在、 <ul> <?php $list = wp_list_categories('taxonomy=artist&orderby=order&title_li='); ?> </li> としており、表示をさせると、<li>aaaa</li>のように一覧が表示されますが、この一覧を「aaaa」などではなく、 <li><img src="「aaaa」の「アイキャッチ画像」に設定されている画像"></li> というように表示させたく思っております。 よろしくお願いいたします。

/追記/
wp_list_categories()で表示をさせると、taxonomy「artist」の一覧が表示され、「artist名」が表示されます。
taxonomy「artist」はカスタムフィールドを用いて

「アーティスト名」「会場」というほかに「アイキャッチ画像」の3点を追加しております。
このアイキャッチ画像に設定している画像を

<li>aaa</li>の代わりに <li><img src="aaaのアイキャッチ画像.jpg"></li>として表示させたく思います。 度々の追記で申し訳ございません。よろしくお願いいたします。

Comments

[kei344]

カテゴリーにカスタムフィールドを追加されていて、画像が有ると言うことでしょうか。具体的にどのようなHTMLを出力したいかを追記いただけませんか？

[tokiodeluxe]

wordpressでの標準機能、「アイキャッチ画像」に表示されている画像を表示したく思っております。

現在、
<ul>
<?php $list = wp_list_categories('taxonomy=artist&orderby=order&title_li='); ?>
</li>

としており、表示をさせると、<li>aaaa</li>のように一覧が表示されますが、この一覧を「aaaa」などではなく、
<li><img src="「aaaa」の「アイキャッチ画像」に設定されている画像"></li>
というように表示させたく思っております。
よろしくお願いいたします。

[kei344]

カテゴリーに「アイキャッチ画像」はデフォルトでは設定されていません。そのあたりは何かで解決されているのでしょうか。あと、すいませんが、質問文に追記いただけませんか？よろしくお願いします。

[kei344]

回答／編集ありがとうございます。

Answer 1

get_post_thumbnail_id( $artsit->cat_ID ) とされていますが、get_post_thumbnail_id は「投稿」「固定ページ」「カスタム投稿タイプ」のIDを引数にとります。
そのため、カテゴリIDと偶然同じIDの記事についているアイキャッチを取得していると思われます。現在それがたまたま記事カテゴリと一致しているのでは、と推測できます。

【get_post_thumbnail_id:WordPress私的マニュアル】
http://elearn.jp/wpman/function/get_post_thumbnail_id.html

下記記事にあるように、「Advanced Custom Fields」などカスタムフィールドを追加できるプラグインを用いて画像の項目を追加されたのではないかと思います。（質問文に3つのカスタムフィールドを追加したと書かれているので）

【カスタムタクソノミーに画像のカスタムフィールドを追加する方法[WordPress]】
http://kotori-blog.com/wordpress/taxonomy_customfields/

【ACF | Get values from a taxonomy term】
https://www.advancedcustomfields.com/resources/get-values-from-a-taxonomy-term/

The $post_id parameter needed is a string containing the the term’s taxonomy and ID in the following format; "{$term->taxonomy}_{$term->term_id}"

呼び出しはこういう感じになると思います。

$img = wp_get_attachment_image_src( get_field( 'photo', $artsit->taxonomy.'_'.$artsit->term_id ), 'full' );	// photoだった場合
// $img[ 0 ] // 画像URL

---

あと、リンクは下記のように取得します。

$link = get_category_link( $artsit->term_id );

【get_category_link:WordPress私的マニュアル】
http://elearn.jp/wpman/function/get_category_link.html

Answer 2

imgタグで出したいのであればwp_list_categoriesではなくget_categoriesを使うのがいいと思います。

関数リファレンス/get categories - WordPress Codex 日本語版

$artists = get_categories('taxonomy=artist&orderby=order');
foreach($artists as $artsit){
  //$img = get_field('カスタムフィールド名', $artsit=>cat_ID);
  $img = get_field('カスタムフィールド名', $artsit->cat_ID);
}

こんな感じで画像が取得できると思います。
$imgの値がID、URL、オブジェクトのどれになるかはカスタムフィールドの設定に依存しているので一度var_dump($img)で確認したほうがいいと思います。

IDが返ってくるようならwp_get_attachment_image_srcでURLを取得するなどする必要があるかもしれません。

---

「アイキャッチ」はカスタムフィールドではないとのことなので下記でどうでしょうか

$artists = get_categories('taxonomy=artist&orderby=order');
foreach($artists as $artsit){
  //$img = wp_get_attachment_image_src(get_post_thumbnail_id($artsit=>cat_ID));
  $img = wp_get_attachment_image_src(get_post_thumbnail_id($artsit->cat_ID));
  $img_url = $img[0];
}

Comments

[tokiodeluxe]

ご回答ありがとうございます。
ためしてみたところ、うまく画像が取得されませんでした。
$img = get_field('カスタムフィールド名', $artsit=>cat_ID);のカスタムフィールド名には

「アーティスト名」「会場」「アイキャッチ画像」のカスタムフィールドを作ったpost_type=event

$img = get_field('event', $artsit=>cat_ID);と表示していますが、認識が間違っていたりしますでしょうか

[退会済みユーザー]

post_typeは投稿タイプですのでフィールド名ではありません。
「アーティスト名」「会場」「アイキャッチ画像」のカスタムフィールドを追加した際にフィールド名を指定しているはずなので「アイキャッチ画像」のフィールド名を確認してみてください。

[tokiodeluxe]

ご回答ありがとうございます。
「アーティスト名」「会場」はフィールド名を指定しておりますが
「アイキャッチ画像」についてはwordpress標準で搭載されているものを用いております。
普段ですと、<?php the_post_thumbnail(); ?>という感じで表示をさせるとは思うのですが、今回は標準搭載のものになるのでどのようにすればよいのか悩んでおります。

[退会済みユーザー]

回答に追記しましたので試して見てください。

[tokiodeluxe]

ありがとうございます。
試してみた結果、ページ自体にエラーコード500が出てしまい、ページが表示されなくなってしまいました。
いただいたソースをコピーしてみると$img = wp_get_attachment_image_src(get_post_thumbnail_id($artsit=>cat_ID));の部分でエラー表示が出てしまっている状態となりました。
度々申し訳ございません。

[退会済みユーザー]

$artsit->cat_ID
でしたすみません

[tokiodeluxe]

いただいたコードを一部編集し、正常に画像が表示されました！「->」が「=>」になってしまっている等、本来私の知識があればすぐに気づけるような点まで、ご丁寧に訂正してくださり、本当に頭が上がりません。
長時間お付き合いいただき、貴重なお時間をいただいてしまいました。
申し訳ございません。

[退会済みユーザー]

上手くいったようで何よりです。、余談ですがini_set( 'display_errors', 1 ); を追加するとエラーの際に真っ白ではなくエラーメッセージが出る場合はこれを追加してエラーメッセージを確認するといいですよ

[tokiodeluxe]

了解いたしました。こちらも試してみようと思います！
お礼しておいて申し訳ございませんが、この表示されている画像をクリックするとarchiveページに飛ぶようにするにはどのようにすればよろしいのでしょうか？
get_category_link()を使いましたがうまくいかず・・・

[退会済みユーザー]

kei344さんが詳しく書いてくださったのでそちらをご覧下さいー

>kei344 ツッコミありがとうございます。

Answer 3

li の StyleSheet の background-image にアイキャッチ画像を指定してください。

Comments

[tokiodeluxe]

ご回答ありがとうございます。
いただいたもので一度試してみようと思います。