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. 関連投稿は、ユーザーをウェブサイトの他のコンテンツに引き付けるための素晴らしい方法です。このトピックに関するあなたの記事をいくつか読んだ後、ついにこの機能の力を理解し、それを私の404ページに実装しました。もう存在しないコンテンツを表示する代わりに、ユーザーに代替案や類似の記事を提供します。これにより、ウェブサイトの直帰率が大幅に低下しました。この記事だけでなく、このトピックに関する他の記事もありがとうございました。それらは私の404ページを改善するのに役立ちました。

    Reply

  2. WordPress関連の投稿を修正しようとしていましたが、うまくいかず、このコードを見つけてWordPressファイルに使用したところ、WordPress関連の投稿が正しく表示されるようになりました。

    Reply

  3. 投稿タイトルに基づいて関連投稿を表示する方法はありますか？タグはなく、カテゴリも区別がないため、あまり役に立ちません。

    投稿タイトルに基づいて関連コンテンツを表示するコードがあれば、非常に役立ちます。

    Reply

  6. 素敵な投稿をありがとうございます。

    ここでは、「caller_get_posts」は非推奨なので、「ignore_sticky_posts」を使用する必要があります。

    Reply

    • この方法は、投稿があるカテゴリに投稿を制限します。カテゴリを制限するには、特定のカテゴリを除外するためのif文を作成する必要があります。

      Reply

      管理者

  8. カテゴリ別にX件以上の関連投稿がある場合、例えば3件をランダムに表示することは可能ですか？

    Reply

    • 可能ですが、これにさらに多くの機能を追加する必要があります。そのようなカスタマイズについては、プラグインを検討することをお勧めします。

      Reply

      管理者

  11. 小さなサムネイルを作成する方法を見つけましたが、横ではなく縦に表示されます。これをどのように変更できますか？

    Reply

  12. スクリプトはうまく機能しています。唯一の問題は、サムネイルが非常に大きいことです。それらを小さくする方法はありますか？

    Reply

  13. このコードのショートコードを作成するにはどうすればよいですか？関数は作成しましたが、ページに印刷を返す方法がわかりません。

    Reply

  15. こんにちは。
    WordPress初心者です。
    関連記事を表示したいです。
    メインメニューには「カテゴリA」があり、「カテゴリA」の下に「サブカテゴリA」「B」「C」があります。投稿は「カテゴリA」にありますが、「サブカテゴリA」「B」「C」のいずれかに含まれることもあります。
    関連記事のいずれかを選択すると問題が発生し、最初に選択したサブカテゴリの投稿が正しく表示されなくなります。

    Reply

  16. チュートリアルをありがとうございます。これは信じられないほど役立ち、見事に機能しました！

    Reply

  17. 管理者様、非常に有益な記事です。あなたのサイトはシンプルで分かりやすいので気に入っています。すべての記事は要点を押さえていますが、コードの知識を共有するとなると、非常に技術的になります。訪問者の多くがコーディングの専門家ではないという事実は無視してください。説明に2〜3行追加して、すべての人にとって完全で理解しやすいものにすれば、もっと良くなるのではないでしょうか。とにかく、素晴らしい記事ですが、Wpbeginnerが使用しているコードまたはプラグインは何ですか？

    Reply

  19. あなたの記事の本当に残念な点は、実際に「どうやって」やるのかを全く説明していないことです。single.phpにコードを挿入するように言われても、初心者である私にはそれが何なのか、どこにあるのか分かりません。この種の重要な情報は、私たちが意味を理解している、あるいはそれを理解するためにあなたの記事をすべて読んだと仮定するのではなく、記事に含めることを検討した方が良いでしょう。

    Reply

  20. 素晴らしい投稿をありがとうございます。非常に役立ちました。コードにエラーが見つかったので、将来他の人の役に立つことを願って共有したいと思います。エラーは次のとおりでした。

    WP_Query は、バージョン 3.1.0 で非推奨となった引数で呼び出されました！「caller_get_posts」は非推奨です。代わりに「ignore_sticky_posts」を使用してください。

    そこで単純に置き換えたらうまく動作しました。名前空間も使用しているので、WP_Query を \WP_Query に変更する必要があり、また、以下の順序を変更しました。

    global $post;
    $orig_post = $post;

    またありがとう
    ローズ

    Reply

  21. 様
    カテゴリのコードは正常に動作していますが、1つの問題があります。ホーム ページで同じカテゴリの投稿が2つまたは3つある場合、リンクは黒く表示されますが、次の投稿のカテゴリを表示したいです。

    Reply

  22. こんにちは、

    投稿ありがとうございます。content-single.phpにコードを追加したところ、機能しました。しかし、例のように3列ではなく1列で表示されます。これについて助けていただけますか？関連記事を1行3列で表示したいです。本当にありがとうございます。

    Reply

  23. こんにちは！
    追加ソースの最初のリンクが壊れています。
    コードをありがとうございました。

    Reply

  24. こんにちは、

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

    Reply

  25. Hello,

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

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

    Reply

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

    Reply

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

      Reply

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

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

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

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

    Reply

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

    Reply

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

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

    ありがとう

    Reply

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

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

    ありがとう

    Reply

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

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

    Reply

  35. 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

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

    Reply

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

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

    Reply

  38. 同僚の皆さん、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

  39. それはあなたの個別のテーマとテンプレートによって異なります。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

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

    Reply

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

      Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

        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セキュリティ オンラインストアの構築