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

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

方法：プラグインなしでWordPressでサムネイル付きの関連記事を表示する

Editorial Staff | | Reader Disclosure

Shares 192 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();
Hosted with ❤️ by WPCode
1-click Use in WordPress

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

コードはどこに配置しますか？それはあなたのテーマによりますが、ほとんどの場合、コードをテーマの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 と同様に、テーマの 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();
Hosted with ❤️ by WPCode
1-click Use in WordPress

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

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

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

WPBeginnerで今すぐ人気！

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

究極のWordPressツールキット

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

今すぐダウンロード

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

184 CommentsLeave a Reply

  1. こんにちは、

    WordPressのテーマに「関連記事」オプションがあり、すでに使用しています。コンテンツの後に6つの投稿を表示していますが、問題は、関連投稿が3つしか表示されず、残りの3つは横にスライドしないと見えないことです。そのオプションは不要で、サイトには6つの投稿すべてが一度に表示されるようにしたいです。どうすればよいか教えていただけますか？

    Reply

  2. Hello,

    あなたのガイダンスは素晴らしかったのですが、関連投稿から特定のカテゴリを除外して表示しないようにするにはどうすればよいですか？

    前もって感謝いたします。
    敬具
    LAszlo Gyuricza

    Reply

  6. 素晴らしい解決策ですが、私の要求には決定的ではありません。実際、主な問題は、このコードが同じカテゴリまたはタグ内の関連記事を最新のものから並べ替えることです。その結果、カテゴリ/タグ内で閲覧すると、常に同じ最後の数件の投稿が表示され、サイトの古い投稿が非常に制限されてしまいます。これは正しい結論でしょうか？試された方がいらっしゃいましたら、ご意見をお聞かせください！

    Reply

    • 1. ‘caller_get_posts’=>1 の後にカンマ(,)を入れます。
      2. Enterキーを押します [次の行]
      3. ‘orderby’=>’rand’ を追加します。
      これで完了です。関連投稿がランダムに表示されるようになります。ありがとうございました。

      Reply

  7. このコードはうまく機能します。コードのこの部分が何をするのか説明していただけますか？

    $orig_post = $post;
    global $post;
    …
    $post = $orig_post;

    残りの部分が何をしているのかは理解できたと思いますが、これは私を混乱させています。

    素晴らしいコンテンツをありがとうございます！

    Reply

  8. 公開されている「カテゴリ別関連記事」のコードについて質問させてください。ありがとうございます。

    Reply

  9. Twentyfifteenのデフォルトテーマで、single.phpファイルにこのコードをどこに挿入すべきですか？ endwhile; の上に挿入すると構文エラー、unexpected 'endwhile' が表示され、endwhile; の下に挿入しても endif; の上に挿入すると構文エラー、unexpected 'endif' が表示されます。

    これに対する解決策はありますか？

    ありがとう

    Reply

  10. Twentyfifteen のデフォルトテーマで、このコードを single.php ファイルのどこに挿入すればよいですか？ enwhile の上に挿入すると構文エラー「unexpected ‘endwhile’」が表示され、enwwile の下、endif の上に挿入すると構文エラー「unexpected ‘endif’」が表示されます。

    これに対する解決策はありますか？

    ありがとう

    Reply

  11. こんにちは！素晴らしい投稿です！

    現在のカテゴリでのみ関連タグを呼び出すために、両方のオプションを組み合わせる方法はありますか？

    Reply

  12. my single.php のレイアウト：

    //the_content bla bla bla code here

    //ここにタグ別関連記事コードをコピー＆ペースト

    //comments_template bla bla bla code here

    ——————————-
    結果としてエラーが発生しました：
    Parse error: syntax error, unexpected ‘endwhile’ (T_ENDWHILE) in …
    ——————————-
    ” <? } " を " <?php } " に変更した後、動作しました。

    just sugestion, maybe it better if you put complete php open tag
    thanks :)

    Reply

  13. 完璧に動作します。関連記事タグから特定のタグを除外するにはどうすればよいですか？現在の投稿が持つタグのいずれか（例えばタグ595を除く）を持つ他の投稿を見つけてリスト表示する際に、コードをどのように変更すればよいですか？

    Reply

  14. 素晴らしいコードをありがとうございます。
    うまく動作しますが、このセクションをより美しくするためのCSSコードが何も追加されていません。お願いできますか？私はコーディング初心者で、いくつかのコードを試しましたが、うまくいきませんでした。あなたのコードには以下があります：
    echo ‘Related Posts’;
    しかし、他のリソースで見つけた類似のコードのいくつかは次のようになっています：

    そしてCSSでは、以下のようなコード:
    .relatedposts {
    font-size: 12px;
    width: 640px;
    }
    .relatedposts h3 {
    font-size: 20px;
    margin: 0 0 5px;
    }
    で素敵な見た目になりますが、あなたのコードではうまくいきませんでした。
    ありがとうございます

    Reply

  15. 同僚の皆さん、single.phpファイルにこのコードを貼り付ける際にエラーが発生しています。正確にどこに貼り付けるべきか教えていただけますか。

    Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\beingusefull\wp-content\themes\TechPlus\single.php on line 78

    Reply

  16. それはあなたの個別のテーマとテンプレートによって異なります。WordPressループが開始された後に条件付きタグを追加する必要があります。この行の後：
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    Reply

    • 私もそのエラーが発生しました。これが更新されたコードです：
      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, // 表示される関連記事の数。
      ‘caller_get_posts’=>1
      );
      $my_query = new wp_query( $args );
      if( $my_query->have_posts() ) { ?>
      関連記事
      have_posts() ) : $my_query->the_post(); ?>
      <a href="” rel=”bookmark” title=””>

      <a href="” rel=”bookmark” title=””>

      Reply

  17. Facebookで共有したときに、サムネイルが関連記事から取得されますが、メインページからサムネイルを取得できますか？よろしくお願いします。

    Reply

    • Yoast の WordPress SEO プラグインを使用している場合、投稿のソーシャル タブの下でサムネイル URL を指定できます。ソーシャル タブが表示されない場合は、WordPress 管理メニューの Yoast SEO リンクをクリックしてから「ソーシャル」をクリックする必要があります。ソーシャル ページで、「Open Graph メタデータを追加」オプションをオンにして保存します。投稿に戻ると、投稿が共有されるときに使用したいサムネイル画像を特定できます。投稿画像を明示的に設定しない場合、ユーザーはページに表示される任意の画像を選択できるため、最近の投稿画像が記事リンクを共有したときに取得されています。

      Reply

  20. これは single.php では機能しません。関連投稿がページの一番下に表示されてしまいます。loop.php では機能しますが、ホームページにも表示されてしまいます。シングル投稿のみに表示され、ホームページには表示されないようにする修正方法のアイデアはありますか？

    Reply

  21. こんにちは、これを正しくできていないのは私だけかもしれません。私のテーマはアイキャッチ画像をサポートしており、このコードを single.php ファイルのコメントの前に追加しました。コードの正確な挿入場所について何かヒントはありますか？

    Reply

  22. 見つかるコードはどれも機能しません。または、ページに何も変更されなかったり、エラーメッセージが表示されたりします。他に何をすればいいのかわかりません！

    Reply

  23. 関連記事クエリにページネーションを追加する方法はありますか？ single.php 内のセカンダリクエリでページネーションを機能させることができないようです。よろしくお願いします！

    Reply

  24. こんにちは、質問があります。関連投稿をカテゴリとタグでまとめて表示する方法はありますか？よろしくお願いします。

    Reply

  25. サムネイルが大きすぎます、助けてください。関連記事のサムネイルを制限するにはどうすればよいですか？

    Reply

  26. 単一のカテゴリ（「ブランド」と呼びましょう）を選択し、そのブランドの下のサブカテゴリに関連付けられた関連記事のみを表示する方法はありますか？つまり、カテゴリの階層はブランド > JCPennyとなります。JCPennyの関連記事のみを表示したいです。ただし、そのサブカテゴリは投稿ごとに異なる可能性があります。投稿が異なるサブカテゴリを使用している場合、そのサブカテゴリの関連記事が表示されます。このコードをそのように変更することは可能ですか？

    Reply

  27. こんにちは、コードありがとうございます。サムネイルとしてアイキャッチ画像を取得する代わりに、投稿内の最初の画像を取得することはできますか？ありがとうございます

    Reply

      • それについて投稿していただけると嬉しいです。どうもありがとうございます。投稿されたら、お知らせいただけると嬉しいです。投稿されたことがわかるように、ここに通知を投稿していただけると幸いです。

        Reply

  28. 素晴らしい投稿、ありがとうございます！私はWPを投稿よりもCMSとして、多数のページを持つウェブサイトを運営しています。これを関連ページとして行うことはできますか？つまり、関連投稿ではなく関連ページを取得するようにできますか？もしそうなら、どのようにすればよいですか。

    Thanks for the help :)

    Reply

  30. これは素晴らしいです。WPEngine は、例外を除いて、関連投稿プラグインを許可しないのも理解できます。いくつか試しましたが、あまり好きではありませんでした。このコードを single.php に貼り付けたところ、うまくいきました！ありがとうございます。

    Reply

  31. これは良いのですが、タグやカテゴリではなく、投稿のタイトルでやりたいのです。何か提案はありますか、syedさん！！

    Reply

  32. こんにちは、友達。ちょっとした問題があります。「構文エラー：構文エラー、予期しない「endwhile」（T_ENDWHILE）がC:\xampp\htdocs\z1\wp-content\themes\mytheme\single.phpの65行目にあります」というエラーが見つかりました。 しかし、これは何でしょうか？よろしくお願いします。

    Reply

  33. このコードは素晴らしいです。いつも使っています！質問があります。コードで特定のタグを除外する方法はありますか？

    Reply

  34. 関連記事のカテゴリコードを見てください。PHPを追加しないと機能しません。エコーで始める前の3文字です。PHPを追加すると無視されなくなります。どちらの場合も無視され、WordPressは常にエラー通知で泣きます。ちなみにコードをありがとう、それは私の仕事をずっと楽にしてくれました。本当にありがとう、そしてそれを調整してください。

    Reply

  35. また、もう一つ質問があります。

    特定のタグを含む特定の投稿をすべての投稿に表示したい場合は、どうすればよいですか？

    Reply

  36. こんにちは、これは本当に素晴らしいです！これで関連投稿プラグインを削除できます。本当にありがとうございます！

    関連投稿を2列で表示するにはどうすればよいですか？

    もう一度になりますが、これは私にとって非常に大きな助けとなりました！

    Reply

  37. こんにちは！コーディングの知識が全くないけれど、ブログを持ちたいと思っている私のような人にとって、役立つ情報を提供してくれてありがとう！「タグ別の関連投稿」のコードを single post ファイルに組み込みました。ただし、写真が表示されません。関連投稿のタイトルがリストのように縦に並んで表示されます。何が間違っていますか？お返事お待ちしています！

    Reply

  38. こんにちは、

    このコードは素晴らしいです！本当にありがとうございます。別のサイトから関連投稿を表示する方法はありますか？つまり、私が下に表示している別のサイトの投稿を、私のサイトの関連投稿として検索するようにできますか？

    ありがとうございます！

    Reply

  39. こんにちは。
    カスタム投稿に対応したテーマを使用しています。あなたのコードを試した場合、通常の投稿ではなく、カスタム投稿のみを表示するにはどの部分を編集すればよいか教えていただけますか？

    ありがとう

    Reply

  40. こんにちは – あなたのチュートリアルが初めて機能するものを見つけましたが、リストを縦にしたいです。そのためのCSSの例を教えていただけますか？

    Reply

  41. こんにちは、

    コードを挿入する必要がある single.php が見つかりません。

    問題は、Balance Theme + Genesis を使用していることです。Genesis では Single.php が見つかりますが、「いかなる状況でも編集しないでください」と書かれています。実際にコードを貼り付けたのですが、サイトのページが一切開かなくなってしまいました。
    そして、Child Balance Theme には Single.php がありません…。

    何か提案はありますか？

    Reply

    • はい、フレームワークファイルを編集しないでください。Genesisのフックとフィルターに慣れる必要があります。その後、functions.phpファイルを使用して、単一ページ用のループフックのいずれかにコードを追加します。残念ながら、フレームワークが多数あるため、すべてのフレームワークのヒントを網羅することはできません。

      Reply

      管理者

  42. こんにちは、サムネイルのサイズを変更する方法はありますか？関連記事が1つしか表示されず、そのサムネイルが大きすぎます

    Reply

  43. こんにちは！これは非常に役立つコーディングですね。サムネイル付きのサイトマップのような、すべての投稿を表示するカスタムページを作成するためにこれを使用することは可能ですか？このような感じです：

    カテゴリ 1
    —– 関連投稿コード（そのカテゴリの全投稿） ——

    カテゴリ 2
    —– 関連記事コード（そのカテゴリの全投稿） ——

    など。投稿数の少ないカテゴリの素晴らしいショーケースになります。お読みいただき、ありがとうございます！

    Reply

  44. こんにちは、

    あなたの「カテゴリ別の関連投稿」は非常に便利です。

    プラグインを使用するよりも、生のコードを追加する方が、それほど拡張性がない場合があると思います…

    ありがとうございます！

    Reply

  46. Thank you thank you thank you!! A simple copy paste bit of code that just gets on with it and works – does exactly what it says. This is exactly what I was looking for :)

    Reply

  50. こんにちは！

    少し手伝ってもらえませんか…

    カテゴリをフィルタリングするにはどうすればよいですか？ただし、親カテゴリと子カテゴリがあり、子投稿のみを表示する場合。例：

    – 製品（すべての製品、これは親です）（ID 104）

    – KindOfProducts (サブカテゴリ、これは子です) (id 109)

    – KindOfProductsTwo (サブカテゴリ、これは子です) (ID 110)

    製品にはすべての投稿がありますが、子：KindOfProducts から関連投稿のみを表示する必要があります。

    これで試してみます：

    $args = array(

    ‘category__in’ => $category_ids,

    ‘category__not_in’ => 104,

    ‘post__not_in’ => array($post->ID),

    ‘orderby’=> ‘rand’,

    ‘showposts’ => 100,

    ‘ignore_sticky_posts’ => 1

    );

    でも何も表示されない…

    そして、この他のものも試しました。

    $args = array(

    ‘category__in’ => $category_ids,

    ‘child_of’ => 104,

    ‘post__not_in’ => array($post->ID),

    ‘orderby’=> ‘rand’,

    ‘showposts’ => 100,

    ‘ignore_sticky_posts’ => 1

    );

    そして何も

    ヘルプ？ありがとう！

    Reply

返信する

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

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

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

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

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

人気の検索:

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