WPBeginner - 初心者向けWordPressチュートリアル

最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

プラグインなしでWordPressに関連投稿をサムネイル付きで表示する方法

編集スタッフ | | 読者開示

共有数 173 ChatGPT Perplexity X LinkedIn WhatsApp

プラグインではなくコードを使用して、WordPressウェブサイトに関連記事を表示したいですか？

WPBeginner では、読者とのエンゲージメントを維持し、コンテンツの探索を促すことの重要性をしばしば強調しています。数多くの成功した WordPress サイトで活用されている効果的な戦略の 1 つは、関連記事を表示することです。

ブログ訪問者が興味のある記事を読み終えた後、関連記事のリストを提供することで、エンゲージメントを維持し、新しいコンテンツを見つけるのに役立ちます。

この記事では、プラグイン不要のコードを使用してWordPressで関連記事を表示する方法を説明します。

プラグインなしでWordPressにサムネイル付き関連記事を追加する方法

WordPressで関連記事を表示する理由

WordPressブログが成長すると、ユーザーが同じトピックの他の投稿を見つけるのが難しくなることがあります。

各ブログ投稿の最後に関連記事のリストを表示することは、訪問者をウェブサイトに留め、ページビューを増やすための素晴らしい方法です。また、最も重要なページの可視性を向上させ、最高のコンテンツを簡単に見つけられる場所に表示するのにも役立ちます。

コードに慣れていない場合は、コードなしで関連記事を表示できる多くのWordPress関連記事プラグインのいずれかを選択する方が簡単でしょう。

しかし、プラグインを使用せずに関連記事を表示できるかどうか疑問に思ったことがあるなら、コードのみを使用してサムネイル付きの関連記事を生成するために使用できる2つの異なるアルゴリズムを共有します。

📍 注意: 各関連記事にサムネイルを表示したい場合は、まずそれらの投稿にアイキャッチ画像を追加してください。

方法1：WordPressでタグ別に関連記事を表示する方法

関連記事を見つける効率的な方法の1つは、同じタグを共有する他の投稿を探すことです。タグは、投稿に含まれる特定の詳細に焦点を当てるためによく使用されます。

これを踏まえて、互いに関連付けたい投稿に一般的なタグを追加することを検討してください。WordPressエディタの「タグ」ボックスに入力できます。

WordPressエディターの「タグ」設定ボックス

投稿にタグを追加した後、次に `single.php` テンプレートに次のコードスニペットを追加します。

サイトにコードを追加する方法がわからない場合は、ウェブ上のスニペットをWordPressに貼り付ける方法に関するガイドを参照してください。

$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
   
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
   
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
WPCodeによって愛情を込めてホストされています
WordPressで1クリックで使用

このコードは、ページに関連付けられたタグを検索し、類似のタグを持つページを取得するためにデータベースクエリを実行します。

コードはどこに配置する必要がありますか？それはあなたのテーマによりますが、ほとんどの場合、コードをテーマのsingle.phpテンプレートのメイン投稿の後、コメントセクションの直前に貼り付けることができます。

デモサイトで使用しているTwenty Twenty-Oneテーマを使用している場合、コードを貼り付けるのに適した場所は、template-parts/content/content-single.php ファイルのヘッダーの後、<?php the_content(); の直後です。

タグによる関連記事プレビュー

これにより、WordPressの投稿に自動的に関連コンテンツが表示されます。

カスタムCSSを追加することで、関連投稿のスタイルと外観をテーマに合わせて変更する必要があります。

関連記事の例

ヒント：テーマファイルを編集するとウェブサイトが破損する可能性があるため、WPCodeのようなコードスニペットプラグインの使用をお勧めします。

WPCodeを使用すると、WordPressにカスタムコードを安全かつ簡単に追加できます。さらに、「挿入」オプションが付属しており、投稿の後など、WordPressサイトの特定の場所にスニペットを自動的に挿入して実行できます。

カスタムコードスニペットのWPCode挿入オプション

詳細については、WordPressにカスタムコードを追加する方法に関するガイドをご覧ください。また、プラグインの詳細については、詳細なWPCodeレビューもご覧ください。

方法2：カテゴリ別に関連記事を表示する方法

関連記事を表示するもう1つの方法は、同じカテゴリの投稿をリストすることです。この方法の利点は、関連記事のリストが空白になることがほとんどないことです。

方法1と同様に、コードスニペットをテーマのsingle.phpテンプレートまたはWPCodeのようなコードスニペットプラグインに追加する必要があります。詳細については、方法1およびWordPressにカスタムコードを追加する方法に関するガイドを参照してください。

$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
WPCodeによって愛情を込めてホストされています
WordPressで1クリックで使用

これから各投稿の下部に関連記事が表示されます。

関連ページのデザインと外観を変更したい場合は、テーマに合わせてカスタムCSSを追加する必要があります。

WordPressで関連記事を表示する方法についてもっと知りたいですか？関連記事に関するこれらの役立つチュートリアルをご覧ください：

このチュートリアルがお役に立ち、プラグインなしでWordPressに関連投稿をサムネイル付きで表示する方法を学べたことを願っています。また、WordPressサイトへの訪問者を追跡する方法を学ぶか、ウェブサイトを高速化するための24のヒントリストをご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。

WPBeginnerで現在人気があります！

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです！

今すぐダウンロード

読者とのインタラクション

184件のコメント返信する

  4. これについて質問があります。子カテゴリと親カテゴリから投稿を取得するコードに苦労しています。何かアドバイスはありますか？

    返信する

  6. カテゴリ別の関連記事を使用しようとしていますが、コードはメインループのコメントの前に来る必要があると記載されていました。私のコードでは、関連記事をループ内のコメントの後に表示したいです。これを実行すると、Disqusコメントプラグインの読み込みに時間がかかることに気づきました。これはコメントのエラーによるものですか、それとも正常ですか？

    返信する

  7. お願いします

    このスクリプトをカスタマイズして、関連記事を横並びで表示できるように手伝ってくれる人はいますか？

    左から右へ..

    現在、縦方向に上から下へ表示するのではなく…

    返信する

    • こんにちは、

      私がやった方法は、コードを独自のHTMLとCSSに置き換えたことです。コードは各投稿のリストを作成し、通常は縦方向に表示されます。

      ——————

      ——————

      開始タグを

      に置き換え、終了タグを

      に置き換えました。これは私のHTMLタグです。次に、ウェブサイトの特定のdivクラスのニーズに合わせてCSSを作成します。たとえば、サンプルpleftクラスは次のようになります。

      .pleft {float:left; padding:2px; margin:10px; width:278px; height:190px;}

      投稿を横方向に移動させるためにCSSでfloat:セレクタを使用し、各投稿の間隔を空けるためにマージンとパディングを使用しています。追加の例として、特定の幅と高さを追加しました。

      お役に立てば幸いです。

      返信する

  8. 関連タグは確かにありますが、コードを追加しても何も表示されません。また、カスタム投稿タイプに制限するためにコードを追加するとエラーが発生します。投稿タイプを特定の投稿タイプに変更しました。

    返信する

  9. @wpbeginner こんにちは

    早速のご回答ありがとうございます…

    でも、言われていることは全くの初心者なんです…

    例を少し教えていただけますか？

    あなた自身のブログのように横並びにするには？

    メールで連絡できます: khiloc at gmail dot com

    返信する

  10. @subzerokh スタイリングを編集する必要があります。それほど難しくありません。各投稿をdivで囲みます。そのdivの幅を指定し、float leftプロパティを設定します。マージンなどを調整すれば完了です。

    返信する

  11. 皆さん、こんにちは！この素晴らしいスクリプトをありがとうございます！

    やりたかったことを正確にやってくれた唯一のものです!!!

    しかし、関連記事が縦に（上から下へ）表示されるだけです。

    左から右（水平方向）に表示したいです

    どうすればできますか？

    返信する

  13. こんにちは、

    素晴らしい投稿です！助けていただけますか：

    定義されていない場合は、自動サムネイルが表示されます。

    if ($thumb_array[‘thumb’] == ”) $thumb_array[‘thumb’] = ‘リンクをデフォルトのサムネイル画像に設定’;return $thumb_array;

    さて、私の質問は、各カテゴリのサムネイルを定義する方法です。これは、投稿で定義されていない場合に使用されます。

    返信する

  15. こんにちは

    素晴らしい投稿をありがとうございます..

    しかし、カテゴリ別の投稿を取得する方法はありますか？ただし、ulとliではなく、サムネイルでもない方法で。

    関連記事に、ホームページに表示されるような、続きを読むリンク付きの完全な投稿が表示されるということです。

    ありがとう

    返信をお待ちしています..

    返信する

  16. こんにちは

    素晴らしい投稿をありがとうございます..

    しかし、カテゴリ別の投稿を取得する方法はありますか？ただし、ulとliではなく、サムネイルでもない方法で。

    関連記事に、ホームページに表示されるような、続きを読むリンク付きの完全な投稿が表示されるということです。

    ありがとう

    返信をお待ちしています..

    返信する

  19. これは素晴らしいです、まさに私が探していたものです。しかし、上記の2つをどのように組み合わせることができるか、そしてタグがない場合は同じカテゴリの投稿を表示できるか疑問に思いますか？

    これを理解しようとしていますが、まだあまり進んでいません

    返信する

  20. コードをありがとうございます。動作しましたが、どのようにスタイルを設定すればよいですか？あなたのサイトのように、4つのストーリーを横並びにしたいです。私のサイトでは、あなたのサイトのようにリストされるのではなく、縦に1つずつリストされています。

    返信する

    • それはCSSです。関連記事を表示するためにこのコードは使用していません。次に、サイドバーの注目の記事について話していると思います。サイトでそれに関する別の投稿を書いています。

      返信する

      管理者

  21. 関連投稿で、フィーチャー画像や投稿サムネイルを使わずにサムネイルを表示する方法はありますか？
    つまり、投稿内で使用されている任意の画像を使用するということです…

    返信する

    • はい、他の開発者が共有したフォールバック技術を利用して、投稿の最初の画像を取得することができます。しかし、WordPressの投稿サムネイルを使用することをお勧めします…

      返信する

      管理者

  25. こんにちは。WordPressのウェブサイトをゼロから構築しており、このコードはWP 3.1で完璧に動作します。あとはCSSのスタイリングと、投稿用のサムネイルを用意するだけです。コードのご協力に感謝します。

    返信する

  27. こんにちは、カテゴリを除外する方法はありますか？ 2つのメインカテゴリがあり、すべてのカテゴリがそこに割り当てられています。メインカテゴリにはサブカテゴリがあり、サブカテゴリの関連投稿のみを表示したいのですが。

    メインカテゴリのIDを除外して、これは可能ですか？

    アドバイスありがとうございます！

    ところで…コードは素晴らしいですし、うまく機能しますよ！！！

    返信する

  29. ただ一つの質問ですが、同じ投稿タイプからのみタグを取得する方法はありますか？例えば「post_type=videos」のようなものを使用しますか？

    返信する

    • ところで、これも解決しました。

      配列に追加するだけです。

      $args=array( ‘category__in’ => $category_ids, ‘post__not_in’ => array($post->ID), ‘posts_per_page’=> 2, // 表示される関連記事の数。 ‘caller_get_posts’=>1, ‘post_type’=>’videos’ );

      返信する

  30. こんにちは、

    このチュートリアルをありがとうございます。ただ、関連製品をランダムに表示する方法はありますか？同じカテゴリの異なる製品を確認しましたが、同じ関連製品が表示されました。

    ありがとう

    返信する

  32. このコードをコピーしてsingle.phpに何も変更せずに貼り付けましたが、何も出力されません。私のコードに何か問題がありますか？ pastebin.com/kg0SkrAg

    返信する

  33. これではサムネイルが表示されません。コードに画像を表示する呼び出しすらありません。これが機能すると思う人がいるとは思いません。

    返信する

    • 画像のコードは次のとおりです: the_post_thumbnail(); << これは静的なHTMLではなく、img srcコードが表示される場所ではありません。この関数はデータベースに呼び出しを行い、各記事に添付されたサムネイル（フィーチャー画像）を検索します。見つかった場合、画像が出力されます。テーマで投稿サムネイルが有効になっていない場合は、まずそれを追加する必要があります。

      https://www.wpbeginner.com/wp-themes/how-to-add-post-thumbnails-in-wordpress/

      記事には注記セクションにその旨が明記されています。よく読むことをお勧めします。

      返信する

      管理者

  34. やあ、君のブログ大好きだよ！

    質問がありますか？

    同じトリックを「著者別」でできますか？

    著者の最新投稿を表示していますか？

    命を救ってくれてありがとう :-)

    ところで、このウェブサイトをありがとうございます！

    返信する

  35. このコードをありがとうございます。試してみましたが、ある程度は機能します。

    関連する記事のリストを取得できます。これは大きなメリットです。

    しかし、画像が何も表示されません。

    このコードがスクレイピングする場合、記事には画像があります。

    カスタムタグ「relatedthumb」で各投稿に画像を作成しましたが、やはり画像は表示されません。

    他に何かする必要がありますか？

    事前に多謝いたします！

    クイン

    返信する

  38. カスタム投稿タイプのカテゴリで使用するために、彼のコードを変更しようとしています。誰か手伝ってもらえませんか？PHPはほとんど初心者です。

    ありがとうございます！

    返信する

  42. こんにちは！
    この情報ありがとうございます！まさに探していたものです。
    写真と一緒に抜粋を追加する方法はありますか？

    再度、ご協力いただきありがとうございます！

    返信する

  44. 共有ありがとうございます。このコードはしばらく使っていますが、問題があります。投稿にタグを追加すると、WordPressは追加した優先度に関係なくタグをアルファベット順に並べ替えます。そのため、このコードは最初のタグに一致する関連投稿のみを表示し、時には関連性が低くなります。
    WordPressによるタグの自動並べ替えを防ぐ方法や、その他の解決策について何かアイデアはありますか？

    返信する

    • Doug様、ライブリンクの例を添えてフォームからお問い合わせください。お手伝いさせていただきます。クライアントのサイトのいくつかがこのコードを使用しているため、機能することはわかっています。

      返信する

      管理者

  47. 素晴らしいチュートリアルです。このコードを使った動作するsingle.phpを誰か見せてくれませんか？

    まだPHPを勉強中です。

    残念ながら
    構文エラー: 予期しない T_ENDIF が C:\xampplite\htdocs\mock\wp-content\themes\scwd\single.php の 76 行目で発生しました。

    返信する

  50. この記事をありがとうございます。記事にサムネイルを表示するために長い間探していましたが、実行できませんでした。多くのWordPressプラグインを試しましたが、うまくいきませんでした。これが私の助けになることを願っています

    返信する

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。

Copyright © 2009 - 2026 WPBeginner LLC. All Rights Reserved. WPBeginner® は登録商標です。

管理元：Awesome Motive | SiteGroundによるWordPressホスティング

WordPress® の商標は WordPress Foundation の知的財産です。このウェブサイトでの WordPress® およびその名称の使用は、識別目的のみであり、WordPress Foundation による承認を意味するものではありません。WPBeginner は WordPress Foundation によって承認、所有、または提携されていません。

私は…について助けが必要です

人気の検索:

ブログの始め方 WordPress SEO WordPressのパフォーマンス WordPressのエラー WordPressセキュリティ オンラインストアの構築