WordPressの投稿に複数の画像を表示できたらいいのにと思いませんか？特に注目を集める複数のビジュアルがある場合、その単一のアイキャッチ画像だけでは物足りないことがあります。
しかし、デフォルトでは、WordPressでは投稿ごとに1つの画像しかハイライトできません。これは、最高の写真や商品画像がページの下の方に埋もれてしまうことが多いことを意味します。
ブロガー、ポートフォリオ所有者、eコマースサイトなど、多くの人がこの問題に悩まされているのを見てきました。
しかし、良いニュースがあります。適切なツールを使えば、複数のフィーチャー画像を簡単に追加でき、投稿をさらに魅力的でクリックしたくなるものにすることができます。
このチュートリアルでは、コーディング不要でWordPressの投稿に複数のアイキャッチ画像を追加する最も簡単な方法をご紹介します。🙌
WordPressで複数のアイキャッチ画像を追加する理由
答えは簡単です。1つの画像では十分でない場合があるからです。
複数のアイキャッチ画像を追加することで、ホームページ、ブログアーカイブ、カテゴリページなど、サイトのさまざまなセクションでより多くのビジュアルを表示できます。同じ画像を繰り返したり、素晴らしいコンテンツを投稿の奥深くに隠したりすることなく、すべて可能です。
現在、アイキャッチ画像はWordPressの標準機能であり、すべてのWordPressテーマで見つけることができます。コンテンツに活気を与え、ブログ記事をより魅力的にするのに役立ちます。さらに、ユーザーの注意を引き、記事をクリックさせるのに役立ちます。
しかし、WordPress ウェブサイトに複数の投稿サムネイルを追加する必要がある状況もあります。
クライアントが複数のサムネイルを使用する特別な要件を持っている場合や、ウェブサイトのデザインでさまざまな画像が必要な場合があります。
例えば、ホームページやアーカイブページ（ブログやカテゴリーセクション）のようなセクションでは、異なる画像サイズが必要になります。このような場合、複数のサムネイルを表示できるオプションがあると非常に便利です。
WPBeginnerでは、アーカイブページ、ソーシャルメディア、およびブログ記事に表示されるサムネイルに複数のアイキャッチ画像を使用しています。
ブログ記事内に表示されるサムネイルはこちらです。
一方、アーカイブページに表示される画像は異なります。
WPBeginner のブログセクションでサムネイルがどのように表示されるかを見てみましょう。
WordPressで複数のサムネイル画像を追加する方法と、ボーナスのヒントをご紹介します。このガイドで説明するトピックの概要を以下に示します。
- WordPressで複数のアイキャッチ画像をプラグインなしで追加する方法
- ボーナスのヒント：カテゴリーごとにアイキャッチ画像を割り当てる
- 複数のフィーチャー画像に関するよくある質問
- WordPressで画像を使用するためのヒントとコツ
準備はいいですか？始めましょう。
WordPressで複数のアイキャッチ画像をプラグインなしで追加する方法
プラグインなしで複数のアイキャッチ画像を追加する最も簡単な方法は、WordPressコンテンツエディタで手動でコンテンツ内に配置することです。
まず、WordPressのコンテンツエディターのデフォルトのアイキャッチ画像オプションを使用して、プライマリサムネイルをアップロードできます。
右側の設定パネルを開くには、上部にある歯車アイコンをクリックし、「フィーチャー画像」セクションに移動します。
その後、[アイキャッチ画像を設定] エリアをクリックすると、WordPressのメディアアップローダーが表示されます。
画像をアップロードするか、既存のメディアライブラリから画像を選択してください。
画像を選択したら、「アイキャッチ画像を設定」ボタンをクリックするだけです。
次のステップは、コンテンツ内のどこかに画像ブロックを追加して、別のアイキャッチ画像を挿入することです。
これを行うには、「+」ボタンをクリックし、2番目のアイキャッチ画像を表示したい場所に画像ブロックを追加します。
画像ブロックを追加したら、サムネイルをブログ記事にアップロードするだけです。
または、WordPressサイトのメディアライブラリから既存の画像を選択するか、「URLから挿入」オプションを使用することもできます。
これで、[更新] または [公開] をクリックして公開できます。
その後、WordPressのウェブサイトにアクセスして、複数のアイキャッチ画像を確認できます。
📝 代替案: WordPress では、ギャラリーブロックを使用して複数のアイキャッチ画像を表示することもできます。これは、オンラインストアを運営している場合や、多数の高品質な商品画像を表示する必要がある場合に特に役立ちます。
より高度なオプションをお探しの場合は、Envira Galleryプラグインをお勧めします。これにより、ライトボックス効果を備えたレスポンシブな画像ギャラリーを表示したり、コンテンツを保護するために透かしを追加したり、エンゲージメントを高めるためにソーシャル共有ボタンを含めたりできます。
詳細については、WordPressで画像ギャラリーを作成する方法に関するガイドをご覧ください。
ボーナスのヒント：カテゴリーごとにアイキャッチ画像を割り当てる
特定のカテゴリの記事に異なるフィーチャー画像を表示したい場合は、Category Featured Imageプラグインを使用するのが最善の解決策です。
まず、Category Featured Imageプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをこちらでご確認ください。
プラグインがアクティブになったら、WordPressダッシュボードから投稿 » カテゴリに移動します。新しいカテゴリまたはサブカテゴリを追加する際に、新しい「フィーチャー画像」オプションが表示されます。
開始するには、[新しい画像を追加] ボタンをクリックするだけです。
ボタンをクリックすると、WordPressのメディアアップローダーが表示されます。
コンピューターのローカルドライブから画像をアップロードするか、WordPressのメディアライブラリから選択できます。その後、「アイキャッチ画像を設定」ボタンをクリックするだけです。
ウェブサイトの既存のカテゴリを編集してアイキャッチ画像を追加することもできます。
これを行うには、まず現在のカテゴリーのいずれかにカーソルを合わせ、「編集」オプションをクリックします。
その後、「アイキャッチ画像」セクションまでスクロールします。
「新しい画像を追加」ボタンをクリックして、カテゴリのアイキャッチ画像（featured image）をアップロードしてください。
完了したら、「更新」ボタンをクリックすることを忘れないでください。
それで終わりです！
これで、WordPress管理画面の「カテゴリ」ページに戻り、各カテゴリのアイキャッチ画像を確認できます。
複数のフィーチャー画像に関するよくある質問
WordPressで複数のアイキャッチ画像を使用することについて、よく寄せられる質問をいくつかご紹介します。
WordPressで投稿のサムネイルを追加するにはどうすればよいですか？
アイキャッチ画像（投稿サムネイルとも呼ばれます）を追加するには、投稿またはページの編集画面を開きます。右側にあるアイキャッチ画像パネルを探し、アイキャッチ画像を設定をクリックして、メディアライブラリから画像をアップロードまたは選択します。次に、再度アイキャッチ画像を設定をクリックして確定します。
WordPressでアイキャッチ画像を自動設定するにはどうすればよいですか？
最も簡単な方法は、Default Featured Imageのようなプラグインを使用することです。これにより、メディア設定にフォールバック画像をアップロードするための簡単なオプションが追加されます。WordPressは、アイキャッチ画像が設定されていない投稿またはページにその画像を自動的に使用します。
投稿がソーシャルメディアでも見栄えが良いことを確認したいですか？All in One SEO (AIOSEO)をお勧めします。これにより、FacebookやTwitterなどのプラットフォームのデフォルト画像を 1 つ設定できるため、アイキャッチ画像を追加し忘れた場合でも、コンテンツは適切なビジュアルで表示されます。
WordPressでアイキャッチ画像をまとめて編集できますか？
はい、WordPressでアイキャッチ画像を一括編集する最も簡単な方法は、Quick Featured Imagesのようなプラグインを使用することです。
プラグインをインストールし、フィルター（カテゴリや投稿タイプなど）を選択し、適用したい新しい画像を選択して、ワンクリックで一括更新を実行するだけです。
たくさんの画像を追加すると、ウェブサイトの表示速度は遅くなりますか？
はい、複数の高解像度画像を読み込むと、ウェブサイトのパフォーマンスに影響を与える可能性があります。アップロードする前に、必ず画像をウェブ用に最適化してください。
これは品質をあまり犠牲にすることなくファイルサイズを圧縮するため、訪問者にとってページが引き続き高速に読み込まれることを保証します。
WordPressで画像を使用するためのヒントとコツ
この記事で、WordPressで複数の投稿サムネイル/フィーチャー画像を追加する方法を学んでいただけたことを願っています。次に、次のガイドをご覧ください。
- WordPressで基本的な画像編集を行う方法
- WordPressでクリック時に画像を拡大する方法
- WordPressでフリップボックスのオーバーレイとホバーを作成する方法
- WordPressで画像の周りに境界線を追加する方法
- WordPressにFlickrウィジェットを追加する方法
- WordPressで注目のコンテンツスライダーを適切に追加する方法
- WordPressで画像を簡単に遅延読み込みする方法
- WordPressで画像の盗難を防ぐ方法
- おすすめのWordPressギャラリープラグイン
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
THANKGOD JONATHAN
複数の投稿サムネイルを持つことは、このチュートリアルを見つけるまで複雑なタスクのように思えましたが、あなたの説明と推奨プラグインのおかげで簡単になりました。プロセスを簡略化してくれてありがとう！
WPBeginnerサポート
Glad our guide was helpful
管理者
Thodoros Athineos
これは、特別な画像が必要な多くの目的（例：モバイル画像）に非常に便利です。
しかし、将来の計画で、単一ではなく、画像の配列の機能を提供することは可能ですか？
例えば、開発者はアルバム画像インスタンスを追加する必要があるかもしれません。これにより、ユーザーはアルバムに提供する複数の画像を選択できるようになります。
WPBeginnerサポート
将来的に追加することを検討しますが、そのレベルのカスタマイズにはプラグインを検討する必要があるかもしれません。
管理者
Robin Parker
こんにちは、この段落まで全て機能しています。
「WordPress管理画面で2番目のアイキャッチ画像を追加できても、テーマを設定しないとサイトには表示されません。表示したい投稿ループ内の適切な場所に、以下のコードを追加するだけです。これはsingle.php（単一投稿用）、archive.php（アーカイブページのみ）などに記述できます。」
このコードの一部をテーマのどこに配置すればよいか、もう少し詳しく説明していただけますか？よろしくお願いします！
WPBeginnerサポート
それはあなたの特定のテーマによって異なります。通常、コンテンツを表示するためのコードが含まれており、その領域にコードを配置することになります。ループを理解するには、次のページをご覧ください：https://www.wpbeginner.com/glossary/loop/
どのようにしたいかコードを配置する場所については、テーマのサポートに問い合わせる必要があります。
管理者
Parvez
検索エンジン、アーカイブ、ホームページ、または表示されるその他の場所で使用するサムネイル画像と、読者がコンテンツを読んでいるときにのみ表示されるフィーチャー画像（アイキャッチ画像）の2つの画像を追加したいです。
私の問題に対する解決策はありますか？
WPBeginnerサポート
そのようなカスタマイズについては、使用しているテーマのサポートに問い合わせる必要があります。
管理者
リサ
こんにちは。古い記事を更新していただけますか？この記事では、2年以上更新されていないプラグインを使用しています。
ただ気になったので。
Kashif Riaz
こんにちは、2番目のサムネイルにアクセスする方法を教えてください。例えば、デフォルトのアイキャッチ画像は「the_post_thumbnail()」でアクセスできます。
Otaku Desu
お願い… 誰か助けてくれませんか？
画像のURLだけ取りたいんです。
どうすればいいですか？
Kristina
「Multiple Post Thumbnails」はなぜ更新されないのですか？最後に更新されたのが2年前と表示されています。2〜3年前から更新されていないプラグインを使用できない人もいるため、更新が必要です…
レスリー
お手伝いいただけますでしょうか。このプラグインで私のやりたいことが実現できるか教えていただけますか？
複数のカテゴリに属する投稿（またはカスタム投稿タイプ）に2番目のアイキャッチ画像を追加できるようにする必要があります。カテゴリのいずれかのアーカイブページでは2番目のアイキャッチ画像のサムネイルを表示し、サイトの他のすべての場所では最初のアイキャッチ画像のサムネイルを表示する必要があります。
何か教えていただけることがあれば、よろしくお願いします！
WPBeginnerサポート
レスリーさん、こんにちは。
このプラグイン単体でそれができるかは不明です。おそらく、これを実現するにはテーマファイルを編集する必要があります。
管理者
Nick W
私はGenesisを使用していますが、このスニペットをどこに貼り付ければ、2番目のアイキャッチ画像がホームページとカテゴリページでサムネイルとしてのみ表示されるのか分かりません。助けてください。
ランチ
素晴らしいプラグインです！2番目の画像が設定されている場合に、その2番目の画像のみが表示されるようにすることは可能ですか？
yasir kham
とても助かりました。ありがとうございます。
Brian
管理画面の1つのページだけにそれを追加できますか？例えば、front-page.phpファイルだけに管理画面に追加したい場合、他のページを編集しに行ったときに管理画面に表示されないようにするにはどうすればよいですか？
birjit
セカンダリフィーチャー画像のIDを取得する方法
Neil desucatan
Hi i’m new with wordpress and i hope you can help me
with this
サイドバー.phpでこれを使用したいのですが、セカンダリ画像が表示されません
アナス・イグバル
こんにちは、NewsPaper WordPressテーマでこのプラグインを使用していますが、常にすべての投稿に追加された最新の2番目の画像が表示されます。
例えば、サイドバーに6つの投稿を表示していて、セカンダリ画像は最初の2つの投稿にのみ追加しましたが、同じ画像が6つの投稿すべてに表示されます。
NewsPaper WordPressテーマでこれをどのように使用できますか？
ジョセフ
これは私にはうまくいきません。2番目のアイキャッチ画像がページエディタに表示されません。
バレット・ヘミングス
カテゴリを選択したときに、二次アイキャッチ画像を割り当てるためにこの方法を使用できますか？私は再生木材を扱う会社のウェブサイトを構築しており、さまざまな種類のプロジェクトを行っています。プロジェクトの写真の中には、複数のカテゴリに属するものがあります。たとえば、あるプロジェクトでは家全体にわたるアイテムを扱っており、アイキャッチ画像に棚が写っていない投稿に「棚」というカテゴリを追加しました。そのプロジェクトは棚のページに表示され、アイキャッチ画像はカウンタートップの写真になります。このカテゴリに表示されるときに、棚の写真の1つを表示させる方法はありますか？
アンキタ
どの投稿タイプにも常にIDがありますので、あなたの場合は「shelves」であれば、コードに「'post_type' => 'shelves'」が含まれます。
tareq
投稿では正常に機能しています。しかし、カスタム投稿に設定したいのですが。カスタム投稿に複数のアイキャッチ画像を追加するにはどうすればよいですか？
Patrick Buntsma
とても簡単なことかもしれませんが、どうしても上手くいきません…
すべての投稿タイプに表示させるにはどうすればよいですか？ ‘post_type’ => ‘post’ では、WP投稿にしか利用できません。‘page’ や ‘event’ でも利用できるようにする必要があります。
アドバイスをお願いします。
Abdul wahab
2番目のアイキャッチ画像が表示されません。画像IDを取得するにはどうすればよいですか？
デビッド
追加サムネイルのIDを取得するにはどうすればよいですか？
Anas Naqvi
複数のアイキャッチ画像を表示するには、このコードをfunctions.phpにコピーしてください
if (class_exists(‘MultiPostThumbnails’)) {
for($i=2; $i ‘Secondary Image-‘.$i,
‘id’ => ‘secondary-image-‘.$i,
‘post_type’ => ‘page’
));
}
}
アイキャッチ画像を表示するには、single.php/page.phpのループ内の画像を表示したい場所にこのコードを貼り付けてください。
if (class_exists(‘MultiPostThumbnails’)) :
for($i=2; $i<=5; $i++)
{
MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image-'.$i);
}
endif;
Rajith Gunawardena
これは非常に役立つチュートリアルです。管理者がウィジェットにアクセスする必要がなく、すべてのアイテムを一度に追加できます（アイテムがその投稿/ページに固有の場合）。皆さんのうち、アイキャッチテキストと投稿内の追加テキストエリアで同様のものを取得する方法を知っている人はいますか？
Rajith Gunawardena
これは非常に役立ち、問題なく動作させることができました。FEATURED TEXT や MULTiPLE FEATURED TEXT で同様のことを行う方法をご存知ですか？
amitmojumder
2つ以上のアイキャッチ画像を表示したい場合はどうすればよいですか？例えば10〜12個など？
KyawNaing Tun
I solved it like this
// function.php内
if (class_exists(‘MultiPostThumbnails’)) {
new MultiPostThumbnails(array(
‘label’ => ‘セカンダリ画像’,
‘id’ => ‘secondary-image’,
‘post_type’ => ‘product’
) );
new MultiPostThumbnails(array(
‘label’ => ‘3番目の画像’,
‘id’ => ‘third-image’,
‘post_type’ => ‘product’
) );
}
// テンプレート内
if (class_exists(‘MultiPostThumbnails’)) :
MultiPostThumbnails::the_post_thumbnail(get_post_type(), ‘secondary-image’);
endif;
if (class_exists(‘MultiPostThumbnails’)) :
MultiPostThumbnails::the_post_thumbnail(get_post_type(), ‘third-image’);
endif;
MatsDagerlind
この記事、そのコメント、その他の情報源で提供されているコードに基づいて、私はこのように解決しました。
MultiPostThumbnails::the_post_thumbnail(get_post_type(), ‘secondary-image’, NULL, ‘medium’);
$mptId = MultiPostThumbnails::get_post_thumbnail_id(‘post’, ‘secondary-image’, $post->ID);
$p = get_post($mptId);
echo “”;
echo apply_filters(‘the_excerpt’,$p->post_excerpt);
echo “”;
MatsDagerlind
他のトピック（https://www.wpbeginner.com/wp-tutorials/how-to-display-wordpress-post-thumbnails-with-captions/）で、サムネイルのキャプション（抜粋）を取得して表示する方法を説明してくださったことは承知していますが、上記のコンテキストでこれをどのように行うのか、よく理解できません。もし、キャプションをサムネイルの下に表示するためにコードサンプルに追加すべきことを示していただける方がいれば、大変感謝いたします。
Vinnie James
テンプレートファイル内で呼び出す際に、画像URLのみを返却し、タグを含めないようにすることは可能ですか？例えば、次のような方法で:
//サムネイルURLを取得 $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array(320,240), false, "" ); echo $src[0];
編集：はい、あります。こちらを使用してください —
$custom = MultiPostThumbnails::get_post_thumbnail_id(‘post’, ‘secondary-image’, $post->ID); $custom=wp_get_attachment_image_src($custom,’post-secondary-image-thumbnail’); echo $custom[0];
KyawNaing Tun
Vinnie Jamesさん、ありがとうございます
Masood
この記事をありがとうございます。私のような初心者にはとても役立ちます。
gunadi
こんにちは、このプラグインは完璧です。
しかし、このプラグインでスライダーを作成できますか？
thank’s
Mehdi
Hi, Thank you for your work
このプラグインを使用して、1つ以上の追加のサムネイル画像を追加できますか？
ありがとうございます。
WPBeginnerサポート
はい、できます。
管理者
Mehdi
素晴らしい！しかし、バックオフィスからはセカンダリ画像を1つしか追加できないようです。どうすれば実現できますか？
ありがとうございます。
Mehdi
すみません、このようにできます。
// functions.php に追加します
// マルチサムネイルコード
if (class_exists(‘MultiPostThumbnails’)) {
for($i = 1; $i ‘ギャラリー画像’.$i,
‘id’ => ‘image-‘.$i,
‘post_type’ => ‘post’
));
}
}
ありがとうございます。
Steve
素晴らしい記事です！
まさに探していたものです。
しかし、カスタム投稿タイプでこれを機能させるにはどうすればよいですか？
abid
わかりました。この関数を必要なだけコピー＆ペーストし、IDとラベルを変更してください…:)
abid
最大5つまたは6つのフィーチャー画像を簡単に追加する方法は…？
abdul
WordPressのデフォルト画像とアイキャッチ画像の違いは何ですか？/////////////??????????
WPBeginnerサポート
アイキャッチ画像とは、投稿編集エリアのアイキャッチ画像ボックスを使用して投稿に添付できる画像のことです。必要に応じて、アイキャッチ画像のデフォルトのフォールバック画像を設定できます。このデフォルトのアイキャッチ画像は、投稿にアイキャッチ画像が設定されていない場合に表示されます。
管理者
Gunaseelan
ページタイトル、フィーチャー画像、コンテンツを表示するプラグインを作成しました。
アイキャッチ画像の代わりに、プラグイン経由でアップロードされた二次画像を表示する必要があります。
これを達成するにはどうすればよいですか？私のプラグインの一部を共有します。確認してください。
function widget($args, $instance) { extract( $args ); $title = apply_filters(‘widget_title’, $instance[‘title’]); $page_id = $instance[‘page_id’]; $featured_image = get_the_post_thumbnail($page_id); $image = $instance[$featured_image]; echo $featured_image;
?>
post_content;
$content = strip_shortcodes($content);
$content = apply_filters(‘the_content’, $content);
echo $this->break_text($content, $page_id);
?>
<!––>
<!––>
WPBeginnerサポート
WordPress.org のプラグインページにあるサポートタブをご利用ください。また、FAQ もご確認ください。
管理者
Eoghan
リサイズの部分がうまくいきません。
functions.php に画像サイズを追加しました。
add_image_size(‘small-featured-image-size’, 250, 150);
私の画像を挿入します：
if (class_exists(‘MultiPostThumbnails’)) {
new MultiPostThumbnails(
array(
‘label’ => ‘小さい注目の画像’,
‘id’ => ‘smaller-featured-image’,
‘post_type’ => ‘product’
)
);
}
そして：
if( class_exists(‘MultiPostThumbnails’) ) {
MultiPostThumbnails::the_post_thumbnail(‘product’, ‘smaller-featured-image’, NULL, ‘small-featured-image-size’);
}
画像がページに元のサイズで表示され続けます。誰か助けてもらえませんか？
WPBeginnerサポート
Eoghanさん、まず「smaller-featured-image」という画像サイズを作成する必要があります。WordPressで追加の画像サイズを作成する方法についてはこちら、その後サムネイルを再生成する方法についてはこちらをご覧ください。
管理者
wgoodman
このページにあるコードをコピーしてfunctions.phpに貼り付けて動作させようとしました。スマートアポストロフィを貼り付けていたことに気づくまで動作しませんでした。それらを変更したところ、うまく動作しました。これがEOGHANに起こったことだと思います。このウェブページを作成していただきありがとうございます。私のプロジェクトに本当に役立っています。
デビッド
ヘイ、ありがとう!!
質問があります。
これをシングルページのスライダーに表示できますか？
WPBeginnerサポート
スライダーを追加するために使用しているコードまたはプラグインによって異なります。
管理者
Joshua
こんにちは、このコードブロックをループの外（投稿ループの後にあるforeachループ内）で使用できる配列に変換する方法を調べています。
if (class_exists(‘MultiPostThumbnails’)) :
MultiPostThumbnails::the_post_thumbnail(get_post_type(), ‘secondary-image’);
endif;
これをどのように行いますか？素晴らしいチュートリアルです！
Rajeev
コードを使用してフロントエンドから2つのアイキャッチ画像を追加するアイデアを教えてください。
オーラ・アイデ
この記事は、長い間探していたものだったので、ここで見つけました。すぐに実践します。チュートリアルは非常に明確です。頑張ってください！
Travis Pflanz
このアイデアをさらに発展させるには、カスタムメタボックス/フィールドプラグインを使用するか、カスタム繰り返しフィールドを作成して、「投稿サムネイル」の数を変更できるようにすることができます。