制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングWordPressカテゴリに画像のカスタムフィールドを追加する方法[WordPress]

カテゴリに画像のカスタムフィールドを追加する方法[WordPress]

2013年12月02日WordPress プラグイン 
カテゴリに画像のカスタムフィールドを追加する方法[WordPress]記事のアイキャッチ画像

個々のカテゴリに画像を登録したい場合、カテゴリに画像をアップロードできるカスタムフィールドを追加します。その方法を紹介します。『Advanced Custom Fields』プラグインを使用した方法です。

まえがき

WordPressのカテゴリに画像を登録して表示したい時があると思います。
そんな時、KoToRiは『Advanced Custom Fields』というプラグインを使用し、カテゴリに画像をアップロードできるカスタムフィールドを作成します。
正直、WordPressのカスタムフィールドのプラグインは『Custom Field Template』一択なのですが、『Custom Field Template』はカテゴリにカスタムフィールドを作成できません。なのでカテゴリにカスタムフィールドを設定したい場合だけ『Advanced Custom Fields』を『Custom Field Template』と平行して使用します。
記事にカスタムフィールドを追加するだけなら『Custom Field Template』を使用すれば十分かと思います。

Custom Field Templateの使い方[WordPress]

なんかもっといい方法があれば教えてください。

カテゴリに画像のカスタムフィールドを追加する

『Advanced Custom Fields』のインストール

管理画面「プラグイン」→「新規追加」の検索フォームに「Advanced Custom Fields」と入力し「プラグインの検索」をクリックしてインストールするか
下記からファイルをダウンロードしてインストールしてください。

Advanced Custom Fields

インストールしたら有効化してください。

カテゴリにカスタムフィールドを表示するように設定

有効化すると「設定」の下に「カスタムフィールド」という項目が追加されますのでそれをクリックします。

カテゴリにカスタムフィールド01

「フィールドグループ」という設定画面が表示されますので「新規追加」をクリックします。

カテゴリにカスタムフィールド02

「フィールドグループ」のタイトルを入力して「+フィールドを追加」をクリックします。

カテゴリにカスタムフィールド03

カスタムフィールドの設定項目がプルダウンで表示されるので埋めていきます。

カテゴリにカスタムフィールド04

「フィールド名」はコードで使用する名前になるので半角英数で入力しておきましょう。
追加したいカスタムフィールドの種類が画像の場合「フィールドタイプ」は「画像」を選択します。
また、画像の場合は「返り値」を「画像ID」にしておくと出力のときに自分で追加したメディアのサイズを選択できたりするので「画像ID」を選択してください。

メディアのサイズを追加する[WordPress]

その他の項目は必要であれば変更してください。

フィールドを複数設置する場合、再度「+フィールドを追加」をクリックし2つめのカスタムフィールドの種類を同じ要領で設定していきます。

カスタムフィールドの設定ができたら、設定したカスタムフィールドを表示する場所を設定します。
今回はカテゴリにカスタムフィールドを表示したいのでこの様に設定します。

カテゴリにカスタムフィールド05

これで最低限の設定は完了なので最後に「公開」ボタンをクリックします。

カテゴリにカスタムフィールド06

カテゴリのカスタムフィールドに画像を登録

ここまで設定できたら、カテゴリにカスタムフィールドで画像を登録できるようになっているはずなので「投稿」→「カテゴリー」から確認してみてください。

カテゴリにカスタムフィールド07

もちろん既存のカテゴリにもカスタムフィールドが追加され画像を登録できるようになっています。

カテゴリにカスタムフィールドで登録した画像を表示するコード

『Advanced Custom Fields』を使用してカテゴリに登録した画像を表示するコードを2パターン載せておきますね。

カテゴリを画像付きで一覧表示する場合

WordPressに登録したカテゴリを画像付きで一覧表示する場合はこのようなコードになります。

<?php
$categories = get_categories();
//$categories = get_categories('parent=0'); 親カテゴリーのみ
foreach($categories as $category) :

$cat_id = $category->cat_ID;
$post_id = 'category_'.$cat_id; 
  
$catimg = get_field('catimg',$post_id);
$img = wp_get_attachment_image_src($catimg, 'full');
?>
<div><?php echo $category->cat_name; ?></div>
<div><a href="category/<?php echo $category->category_nicename; ?>"><img src="<?php echo $img[0]; ?>" alt="<?php echo $category->cat_name; ?>" /></a></div>
<?php endforeach; ?>

基本は「get_field()」関数でカスタムフィールドの値を取得するんですね。引数にpost_idを指定するのですが、カテゴリの場合は「category_1」のようにcategory_の後にカテゴリのIDが入る形式です。
画像の出力自体はこの記事と同じですね。

アイキャッチ画像の「URL,横幅,高さ」を取得する[WordPress]

例に出したコードでは10行目で「’full’」を指定していますがお好きなサイズを設定してください。
設定できるサイズを追加する方法はこの記事を参考にしてください。

メディアのサイズを追加する[WordPress]

親カテゴリーのみを表示したい場合は2行目を削除して3行目のコメントアウトを消してください。

category.phpで現在表示しているカテゴリの画像を表示する場合

現在表示しているカテゴリ1つだけの画像を取得する場合のコードはこんな感じになります。

<?php
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id; 

$catimg = get_field('catimg',$post_id);
$img = wp_get_attachment_image_src($catimg, 'full');
?>
<div><?php single_cat_title(); ?></div>
<div><img src="<?php echo $img[0]; ?>" alt="<?php single_cat_title(); ?>" /></div>

基本は「カテゴリを画像付きで一覧表示する場合」と同じでただカテゴリIDの取得方法が違うだけですね。
これも取得する画像のサイズはお好きなように変更してください。

画像以外のカスタムフィールドの値の取得方法

因みに普通のテキストフィールド等の値はこれで取得できます。

<div><?php the_field('name',$post_id); ?></div> //「name」というフィールド名の場合

「the_field()」関数でフィールドの値をHTMLに出力します。
「$post_id」は上で例に出しているコードで使用している変数です。
画像の取得の際にも使用しているが「get_field()」関数だと、直接出力はせずphpとして値を取得できます。

まとめ

なんかわざわざカテゴリにカスタムフィールド追加するだけのために普段使用している『Custom Field Template』に加えて『Advanced Custom Fields』を追加で導入するのはKoToRi的にもあまりスマートじゃないな~とは思うのですが、他にいい感じの方法が無いのとこれに慣れちゃったのでずっとこの方法をとってます。
なにかオススメの方法があったら是非教えてください。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント

  • Pingback: カテゴリに画像のカスタムフィールドを追加する方法[WordPress] - ちゅどん道中記()

  • Pingback: wordpresインストール後の初期設定 | らんぷ()

  • Pingback: wordpressプラグイン | ranpu()

  • Pingback: スラッグでURLを作る | ど素人から毛を生やす。()

  • カテゴリではなくタグの場合はどうやって画像を取得すれば良いのでしょうか?

    • kotoriblog

      えさん
      こんばんは。
      コメントありがとうございます。

      えさんの質問に対して記事を書いたのですが「タグ」を「タクソノミー」と勘違いして記事を書いてしまいました。
      が、タグも言ってしまえばタクソノミーなので下記記事を参考にしていただければ画像を取得できます。
      /wordpress/taxonomy_customfields/

      タグのtaxonomyidは「post_tag」です。記事内のコードの「mupacat」となっている部分を「post_tag」に変えてあげればいけると思います。
      お試しください!

      • ご返信が遅くなりました。
        わざわざページを作って説明していただきありがとうございます!!

        てこずりましたが、何とか本日無事に思い通りの動作になりました!

        また1つ質問をさせていただきたいのですが、
        「Advanced Custom Fields」でカテゴリに「あ~わ」をラジオボタンで選択できる「50音」の項目を作りました。

        その「あ~わ」が選択されているカテゴリ項目をそれぞれのページで一覧で表示させる場合はどのようにしたらよいのでしょうか。

        表示例>
        http://ドメイン名/50音/あ/(URLイメージ)

        「あ」の一覧
        ・アイス(3)

        ・アーモンド(4)
        ・飴(2)

        50音のフィールド名を[tagname]にした場合、
        http://ドメイン名/tagname/あ/
        のようなものだと思っていたのですが、うまくいかずまた行き詰ってしまいました。。

        お時間があるときでよろしいので、ご回答のほどどうぞよろしくお願いいたします。

        • kotoriblog

          えさん
          こんばんは!
          お返事が遅れてしまって申し訳ないです。

          カテゴリに「カスタムフィールド」であ~わを選択できるようにして
          例えば「あ」にチェックが入ったカテゴリだけソートして表示したい。
          ということですかね?

          おそらくなんですが、カテゴリをカスタムフィールドの値でソートするタグは用意されてないんじゃないでしょうか。

          あと、カスタムフィールドを追加したからといって
          http://ドメイン名/tagname/あ/
          のようなURLは生成されません。

          文面から察した感じで一番スマートかなと思う方法は
          カテゴリの階層を利用するかな

          あ行(親カテゴリ)
          -アイス(子カテゴリ)
          -アーモンド(子カテゴリ)
          -飴(子カテゴリ)

          みたいな感じで親カテゴリとして設定しておけば
          /wordpress/category_list/
          上記の記事を参考にして
          $categories = get_categories(‘parent=0′);
          ↑このコードのparentの数値をあ行のIDに変更すれば
          あ行に属するカテゴリの一覧を引っ張ってこれます。

          検討違いのこといってたらすいません笑

          • ご返信頂き、誠にありがとうございます。

            やはり、親カテゴリ、子カテゴリで展開していく方法しかなさそうですね。。。
            何とか理想の形になるよう頑張ってみたいと思います。

            おかげさまで、この度は大変参考になりました。
            今後とも皆さんの役立つブログを書いていってください!

  • にしお(WP初心者)

    いつもよく見させていただいてます。
    簡単な質問になってしまうのかと思うのですが、ぜひ教えて頂きたくコメントさせて頂きます。
    指定したカテゴリIDの画像のみ出力するのは、どのように書けばよいのでしょうか?
    大変恐縮ですがお願い致します。

    • kotoriblog

      にしおさん

      こんにちは!コメントありがとうございます。

      $cat_id = 3; //ここにカテゴリIDを指定
      $post_id = ‘category_’.$cat_id;

      $catimg = get_field(‘catimg’,$post_id); //catimgはカスタムフィールド名
      $img = wp_get_attachment_image_src($catimg, ‘full’);

      出力したいところで
      <img src="” alt=”” />

      みたいな感じで行けますかね。動作未確認です。

      • にしお

        さっそくのお返事ありがとうございます!(><)
        とても助かります!
        無事できました!
        また、勉強させて頂きます!

  • COCO

    いつも参考にさせていただいております。
    上記設定で、カスタムタクソノミ―の画像の設定は出来たのですが、
    記事の属する(チェックした)タクソノミ―名と画像だけを取得する場合はどうしたらよいのでしょうか。
    (※single-xxx.phpに表示予定です。)

    いろいろ調べたのですが上手く表示できません。
    ご教授頂けると幸いです。
    宜しくお願いいたします。

    • kotoriblog

      COCOさん
      コメントありがとうございます。

      下記記事の「taxonomy.phpで現在表示しているタームの画像を表示する場合」のコードがあります
      /wordpress/taxonomy_customfields/

      このコードをsingle.php用に書き換えてあげます。
      とりあえずは現在の記事が属するタクソノミーIDを「get_the_taxonomy」で取得できれば、上記URLのコードの「get_queried_object()->term_id;」を差し替えてあげれば希望の動作が実現できると思います。

      • COCO

        早速ご返信いただきありがとうございます。
        教えていただいたページも拝見してはいるのですが、get_the_taxonomyの設定方法がよくわかっておらず、表示エラーになってしまいます。。。

        • kotoriblog

          COCOさん
          「get_the_taxonomy」ではなく「get_the_term」の間違いでした。失礼しました。

          「taxonomy.phpで現在表示しているタームの画像を表示する場合」
          /wordpress/taxonomy_customfields/
          に「single.phpで記事が属しているタームの画像を表示する場合」のコードを追記しました。

          是非参考にしてください!!!!

          • COCO

            わざわざ追記頂き有り難うございます!
            おかげさまで、大変助かりました。

            今後もいろいろとこちらのサイトで勉強させていただきます。