WordPress サイトに分類画像やカテゴリアイコンを追加すると、カテゴリを際立たせることができます。
ただし、WordPressではデフォルトでこれらの画像をアップロードするオプションは提供されていません。アーカイブページにはカテゴリまたはタクソミー名のみが表示されます。これはシンプルで退屈に見える可能性があります。
このチュートリアルでは、WordPressにタクソノミー画像またはカテゴリアイコンを追加する方法を説明します。また、アーカイブページにそれらを表示する方法も学び、サイトをより魅力的で使いやすいものにします。
WordPressでタクソミー画像を追加する理由
デフォルトでは、WordPressウェブサイトには、カテゴリやタグ（またはその他のカスタムタクソミー）などのタクソミーに画像を追加するオプションは含まれていません。
カテゴリアーカイブや分類アーカイブページなど、あらゆる場所で分類名を使用します。
これは退屈に見えます。
タクソノミページに多くの検索トラフィックがある場合は、より魅力的に見せたいと思うかもしれません。
テキスト中心の退屈なページが、関連する画像を追加するだけで魅力的なページに変わるのを見てきました。画像が特別だったからではなく、人間はテキストよりも視覚的な手がかりを好むからです。
これらのページをよりユーザーフレンドリーで魅力的にするために、分類画像やカテゴリアイコンを追加できます。
その良い例は、ヘッダーにカテゴリアイコンを使用しているNerdWalletのようなサイトです。
ホームページに美しいナビゲーションセクションを作成するためにも使用できます。
Bankrate のウェブサイトからの例を次に示します。
それでは、WordPressで分類画像を簡単に追加する方法を見ていきましょう。
WordPressでタクソノミー画像を簡単に追加する
まず、Categories Images プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化すると、投稿 » カテゴリページに移動するだけです。既存のカテゴリのプレースホルダー画像がプラグインによって表示されていることに気づくでしょう。
カテゴリアイコンを自分で選択するには、カテゴリの下にある「編集」リンクをクリックする必要があります。
カテゴリー編集ページで、一番下までスクロールすると、独自のタクソノミー画像をアップロードするためのフォームがあります。
使用したい画像をその特定のカテゴリにアップロードするには、‘画像をアップロード/新規追加’ボタンをクリックするだけです。
変更を保存するには、「カテゴリを追加」または「更新」ボタンをクリックすることを忘れないでください。
次に、他のカテゴリの画像をアップロードするプロセスを繰り返すことができます。タグやその他の分類法用の画像もアップロードできます。
問題は、画像を追加した後、カテゴリページにアクセスしても、そこにカテゴリ画像が表示されないことです。
それを表示するには、WordPressテーマまたは子テーマを編集するか、WPCodeプラグインを使用してコードを追加する必要があります。
両方の方法をご紹介しますので、ご自身でやりやすい方をお選びください。
オプション1. WPCodeを使用してカテゴリ画像アイコンを表示する（推奨）
この方法は、どのテーマファイルを変更する必要があるかを把握する必要がなく、サイトを壊すことなく安全にコードを追加できるため、より簡単です。
サイトエディターをサポートするブロックテーマを使用しているユーザーにも推奨されます。
まず、WPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。
有効化したら、WPCode » + スニペットを追加ページに移動し、「カスタムコードを追加（新規スニペット）」ボックスの下にあるスニペットを使用ボタンをクリックします。
次の画面で、スニペットを識別しやすいタイトルを付けます。
その後、コードタイプとしてPHPスニペットを選択します。
コードプレビューボックスで、次のコードスニペットをコピーして貼り付けます。
if( is_category() ) { ?>
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / >
</div>
<?php
} else {
//do nothing
}
次に、挿入セクションまでスクロールダウンし、挿入方法としてショートコードを選択します。
WPCodeが自動的にショートコードを表示することに気づくでしょう。ただし、カスタムショートコードを作成して、覚えやすくすることもできます。
次に、カスタムショートコードの「コピー」ボタンをクリックします。
このショートコードを使用して、アーカイブページにカテゴリ画像を表示できるようになりました。
サイトエディターでのショートコードの追加
サイトエディターをサポートするブロックテーマを使用している場合は、**外観 » エディター**ページに移動してサイトエディターを起動します。
ここで、アーカイブタイトルのブロックの直前にショートコードブロックを追加できます。
先ほどコピーしたショートコードをショートコードブロックに貼り付けます。
変更を適用するには、変更を保存することを忘れないでください。これで、カテゴリアーカイブページにアクセスして、ショートコードが機能していることを確認できます。
画像が正しく表示されなくても心配しないでください。後でカスタムCSSを使用して修正する方法を説明します。
オプション2.カテゴリー画像アイコンを手動で表示する
この方法では、カスタムコードをWordPressのテーマファイルに追加する必要があります。
WordPressファイルを編集するのが初めての場合は、WordPressでコードをコピー＆ペーストする方法に関するガイドをご覧ください。
まず、FTPクライアントまたはWordPressホスティングのファイルマネージャーを使用してWordPressサイトに接続する必要があります。
接続後、分類アーカイブを表示するテンプレートを見つける必要があります。これは archives.php、category.php、tag.php、または taxonomy.php ファイルである可能性があります。
詳細については、WordPressテーマの編集対象ファイルを見つける方法に関するガイドをご覧ください。
ファイルを見つけたら、コンピューターにダウンロードして、NotepadやTextEditのような テキストエディタ で開く必要があります。
次に、タクソミー画像を表示したい場所に次のコードを貼り付けます。通常は、タクソミータイトルの前、またはthe_archive_title()タグの前に追加したいでしょう。
<?php if( is_category() ) { ?>
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / >
</div>
<?php
} else {
//do nothing
}
?>
コードを追加した後、ファイルを保存し、FTPを使用してウェブサイトに再度アップロードする必要があります。
これで、タクソノミーアーカイブページにアクセスして、タクソノミー画像がどのように表示されるかを確認できます。デモアーカイブページでの表示は次のとおりです。
今はまだ不格好に見えるかもしれませんが、心配しないでください。カスタムCSSを使用してスタイルを設定できます。
カスタムCSSによるカテゴリアイコンのスタイル設定
WordPressテーマにカテゴリアイコンまたはタクソノミー画像を追加した後、画像がそれほど良く見えない場合があります。
それを修正するには、適切に配置するためにCSSコードを追加する必要があります。
WordPressにCSSコードを追加するのが初めての場合は、WordPressにカスタムCSSを追加する初心者向けガイドをご覧ください。
ここにタクソノミー画像に使用したカスタムCSSがあります。
img.taxonomy-img {
float: left;
max-height: 100px;
max-width: 100px;
display: inline-block;
padding: 20px;
}
テーマによっては、アーカイブタイトル、タクソノミータイトル、説明などの周囲の要素をスタイル設定する必要がある場合もあります。
タクソノミーアーカイブのタイトルと説明を<div>要素で囲み、カスタムCSSクラスを追加しました。次に、次のCSSコードを使用してタイトルと説明を調整しました。
.taxonomy-title-description {
display: inline-block;
padding: 18px;
}
こちらが、テストウェブサイトでその後の様子です。
タクソノミー画像の表示からタクソノミーを除外する
さて、一部のユーザーは、特定のタクソノミーにのみタクソノミー画像を使用したい場合があります。
例えば、WooCommerceを使用してオンラインストアを実行している場合、商品カテゴリを除外したい場合があります。
WordPress管理画面の「カテゴリ画像」ページに戻り、除外したいタクソノミーにチェックを入れるだけです。
設定を保存するには、「変更を保存」ボタンをクリックすることを忘れないでください。
この記事が、WordPressにタクソノミー画像を簡単に追加する方法を学ぶのに役立ったことを願っています。また、WordPressのカテゴリハックとプラグイン10選や、WordPressでカテゴリの順序を変更する方法に関する記事も役立つかもしれません。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イヴァン
他の最新プラグインの提案はありますか？ここで提案されているものは最近更新されていないようです。
shiv
wpbeginnerサイトのようなWordPressのサイドバーにカテゴリ画像を追加する方法「手伝ってほしいこと」
pamela
すべてのタームをループして1ページに表示したい場合はどうすればよいですか？
Gabrielle
こんにちは、現在ローカルホストでこのプラグインを使用しています。
このプラグインの奇妙で興味深い使い方を見つけました。
デフォルトのWPメニューを拡張して、カテゴリリンクに
背景画像付きのリンクを表示します。
これをWPメニューに統合して、
各メニューに返す方法を知っている人はいますか？
ケースは複雑です。Walkerクラスを使用する必要がありますか？
ジェス
フロントエンドで使用されている画像を表示するにはどうすればよいですか？ リスティングページがあり、そのページにそのタクソノミーが出力されるたびにタクソノミー画像を表示したいのです。フロントエンドに画像を表示する方法を実際に示しているものは見つかりません。タクソノミーラベルは出力されていますが、画像は出力されていません。
ご協力ありがとうございます。
ジェス
ハルシャ
こんにちは。
私がこの投稿にたどり着いた理由は、WordPressの注目のコンテンツをGoogleで検索したからです。
WordPressで関連コンテンツを改善する方法を探しています。
複数のカテゴリと複数のタグを投稿に選択しているため、WordPressが混乱し、想定どおりに関連コンテンツが表示されないようです。
それでは、タクソノミーは読者に関連投稿を表示する方法を改善する方法なのでしょうか。
そして、このプラグイン Taxonomy Images は2年間更新されていません
WPBeginnerサポート
タクソノミーは、関連投稿を改善する方法になり得ます。しかし、カテゴリとタグをマージおよび一括編集するために使用できる他のツールもあります。
管理者
JW
素晴らしいチュートリアルです！ありがとうございます！
残念ながら、このプラグインはもうサポートされていないようです。代替手段をご存知ですか？
それともコードはまだ有効ですか？
Dan Horvat
最も重要な部分が欠けています – それらの画像を実際にフロントエンドに表示する方法です。
WPBeginnerサポート
詳細な手順については、プラグインページを参照してください。
管理者
patrick raobelina
画像を表示するには:
$url = apply_filters( ‘taxonomy-images-queried-term-image-url’, ” );
if ( ! empty( $url ) ) {
echo ”;
}
Shinkov
プラグインを使わずにこれをコーディングする方法を示す記事を探していました。
Gonzalo
テーマで分類の画像を表示するにはどうすればよいですか？
コードを使用しましたが、動作しません。
print apply_filters( ‘taxonomy-images-queried-term-image’, ” );
ヘルプをお願いします？
Nicholas Worth
タイトルは「WordPressでタクソノミーに画像を追加するのに最適なプラグイン」の方がより適切だと思います。なぜなら、これはタクソノミーに画像を追加する方法のチュートリアルではないからです。気分を害するつもりはありませんが、情報を提供すると主張しながら、実際にはあなたが聞きたかったことを他の人が知っていると言っている記事に来るのは嫌いです。
WPBeginnerサポート
そのように感じられたとのこと、申し訳ございません。タクソノミーに画像を追加する方法について、どのような意味でおっしゃっているのか教えていただけますか？適切な回答を見つけるお手伝いができるかもしれません。
管理者
Jacob Perl
Nicholasさんが考えたことは、この記事を見つけたときに私が考えたことと同じだと思います。つまり、プラグインではなく、コーディングによってカスタム画像フィールドをタクソノミーに追加する方法のチュートリアルだと思ったのです。それでも、プラグインはクールに見えます…試してみるかもしれません。
Luís Felipe
私も同じことを思いました。プラグインを使わずにこれをコーディングする方法を示す記事を探していました。
でも、とにかくこれは良い記事です。
lemonthirst
この素晴らしいプラグインを見つけられて大変嬉しいです。まるで魔法のように動作します。カスタム投稿/分類法でいくつかの小さな問題に遭遇しましたが、すべて解決しました。
皆さん、ありがとうございます！
Mattia
こんにちは、カスタムタクソノミーに関する関連質問があります。プラグインなしで、特定のカスタム投稿タイプ（「work」カスタム投稿タイプなど）内にのみ存在するカスタムタクソノミーを作成するにはどうすればよいですか？
私の問題は、カスタムタクソノミーを作成すると、通常の投稿や他のカスタム投稿タイプの下にも表示されることです…
編集スタッフ
このようにregister_taxonomyを使用する必要があります。
1-click Use in WordPress
ジャンルはタクソノミーで、ブックは投稿タイプになります。
管理者
Mattia
Grazie!
I’ll try and let you know…
Banna
こんにちは、
これを使用していますが、
カテゴリIDで動作させることができません。
表示したいカテゴリIDがあり、そのサムネイルを表示したいので、お手伝いいただけますでしょうか。
タックスIDを使用してサムネイル画像を取得する方法
お知らせください。
ありがとうございます
バナ・ダクシップ
Ruben Boehler
残念ながらこのプラグインを動作させることができません…何も出力されません。何か間違っているのかもしれません？！
プラグインとこのコードを使用し、それをフックしました。
print apply_filters( ‘taxonomy-images-list-the-terms’, ”, array( ‘image_size’ => ‘detail’, ‘taxonomy’ => ‘company’, ‘after’ => ”, ‘after_image’ => ”, ‘before’ => ”, ‘before_image’ => ”, ) );
全く何も出力されません…原因を特定するのを手伝ってもらえませんか？
_mfields
@devinsays 素晴らしい！ヒントをありがとう！
DanielPeiser
面白いですね！サムネイル画像（または投稿内の画像）がないブログ記事がいくつかあり、アーカイブページでは常に同じデフォルト画像がサムネイルとして読み込まれる場合はどうなりますか？プラグインはカテゴリー/タグに関連付けられたものを読み込みますか？
wpbeginner
@DanielPeiser もちろん、そのように設定できます。基本的に手順は次のようになります。まず、投稿のサムネイルが存在するかどうかを確認します…存在しない場合は、分類の画像を確認します…それでも存在しない場合は、デフォルトのサムネイルを返します。