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

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

    Reply

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

    Reply

    • もう結構です…とにかくコメントシステムに求めているものはこちらの方が近いので、Livefyreに切り替えました…ありがとうございます！

      Reply

  7. お願いします

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

    左から右へ..

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

    Reply

    • こんにちは、

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

      ——————

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

      ——————

      開始タグを

      に置き換え、終了タグを

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

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

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

      お役に立てば幸いです。

      Reply

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

    Reply

  9. @wpbeginner こんにちは

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

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

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

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

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

    Reply

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

    Reply

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

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

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

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

    どうすればできますか？

    Reply

  13. こんにちは、

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

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

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

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

    Reply

  15. Hi

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

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

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

    ありがとう

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

    Reply

  16. Hi

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

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

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

    ありがとう

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

    Reply

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

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

    Reply

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

    Reply

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

      Reply

      管理者

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

    Reply

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

      Reply

      管理者

  22. この記事をありがとうございます。手動で入力せずに投稿を自動タグ付けする方法があるかどうか疑問に思っていました。

    Reply

  23. 素晴らしい！
    サムネイルなしでカテゴリ別の関連記事を表示したい場合はどうすればよいですか？
    ありがとうございます

    Reply

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

    Reply

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

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

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

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

    Reply

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

    Reply

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

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

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

      Reply

  30. こんにちは、

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

    ありがとう

    Reply

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

    Reply

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

    Reply

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

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

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

      Reply

      管理者

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

    質問がありますか？

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

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

    you will save my life :-)

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

    Reply

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

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

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

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

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

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

    事前に多謝いたします！

    クイン

    Reply

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

    ありがとうございます！

    Reply

  40. これが機能しません。コメントの近くのレイアウト全体が台無しになります。何か見落としていますか？サイトから削除しなければなりませんでした

    Reply

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

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

    Reply

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

    Reply

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

      Reply

      管理者

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

    まだPHPを勉強中です。

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

    Reply

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

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