プラグインではなくコードを使用して、WordPressウェブサイトに関連記事を表示したいですか？
WPBeginner では、読者とのエンゲージメントを維持し、コンテンツの探索を促すことの重要性をしばしば強調しています。数多くの成功した WordPress サイトで活用されている効果的な戦略の 1 つは、関連記事を表示することです。
ブログ訪問者が興味のある記事を読み終えた後、関連記事のリストを提供することで、エンゲージメントを維持し、新しいコンテンツを見つけるのに役立ちます。
この記事では、プラグイン不要のコードを使用してWordPressで関連記事を表示する方法を説明します。
WordPressで関連記事を表示する理由
WordPressブログが成長すると、ユーザーが同じトピックの他の投稿を見つけるのが難しくなることがあります。
ブログ記事の最後に関連記事リストを表示することは、訪問者をウェブサイトに留まらせ、ページビューを増やすための素晴らしい方法です。また、最も重要なコンテンツを人々が見つけやすい場所に表示することで、最も重要なページの可視性を向上させるのにも役立ちます。
コードに慣れていない場合は、コードなしで関連投稿を表示できる多くのWordPress関連投稿プラグインのいずれかを選択する方が簡単でしょう。
しかし、プラグインを使用せずに関連記事を表示できるかどうか疑問に思ったことがあるなら、コードのみを使用してサムネイル付きの関連記事を生成するために使用できる2つの異なるアルゴリズムを共有します。
注意: 各関連記事にサムネイルを表示したい場合は、まずそれらの投稿にアイキャッチ画像を追加してください。
方法1：WordPressでタグ別に関連記事を表示する方法
関連コンテンツを見つける効率的な方法の1つは、同じタグを共有する他の投稿を探すことです。タグは、投稿に含まれる特定の詳細に焦点を当てるためによく使用されます。
これを踏まえて、互いに関連付けたい投稿に一般的なタグを追加することを検討してください。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();
このコードは、ページに関連付けられたタグを検索し、類似のタグを持つページを取得するためにデータベースクエリを実行します。
コードはどこに配置しますか？それはあなたのテーマによりますが、ほとんどの場合、コードをテーマのsingle.phpテンプレートのメイン投稿の後、コメントセクションの直前に貼り付けることができます。
デモサイトで使用しているTwenty Twenty-Oneテーマを使用している場合、コードを貼り付けるのに適した場所は、template-parts/content/content-single.php ファイルのヘッダーの後、<?php the_content(); の直後です。
これにより、WordPressの投稿に自動的に関連コンテンツが表示されます。
カスタムCSSを追加することで、関連投稿のスタイルと外観をテーマに合わせて変更する必要があります。
ヒント: テーマファイルを編集するとウェブサイトが破損する可能性があるため、WPCodeのようなコードスニペットプラグインの使用をお勧めします。
WPCodeを使用すると、WordPressにカスタムコードを安全かつ簡単に追加できます。さらに、「挿入」オプションが付属しており、投稿の後など、WordPressサイトの特定の場所にスニペットを自動的に挿入して実行できます。
詳細については、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();
これから各投稿の下部に関連記事が表示されます。
関連ページのスタイルと外観を変更したい場合は、テーマに合わせてカスタムCSSを追加する必要があります。
WordPressでの関連記事に関するエキスパートガイド
WordPressで関連記事を表示する方法についてもっと知りたいですか？関連記事に関するこれらの役立つチュートリアルをご覧ください：
- WordPressで関連記事を表示する方法（ステップバイステップ）
- WordPressで著者が同じ関連記事を表示する方法
- WordPressで最近の投稿を表示する方法
- WordPressで特定のカテゴリの最新投稿を表示する方法
- WordPressブログ投稿にインライン関連投稿を追加する方法
- WordPressでランダムな投稿を表示する方法
- WordPressで関連記事を表示する方法
このチュートリアルで、プラグインなしでWordPressに関連投稿をサムネイル付きで表示する方法を学べたことを願っています。また、WordPressサイトへの訪問者を追跡する方法を学ぶか、ウェブサイトを高速化するための24のヒントのリストを確認することもできます。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
関連投稿は、ユーザーをウェブサイトの他のコンテンツに引き付けるための素晴らしい方法です。このトピックに関するあなたの記事をいくつか読んだ後、ついにこの機能の力を理解し、それを私の404ページに実装しました。もう存在しないコンテンツを表示する代わりに、ユーザーに代替案や類似の記事を提供します。これにより、ウェブサイトの直帰率が大幅に低下しました。この記事だけでなく、このトピックに関する他の記事もありがとうございました。それらは私の404ページを改善するのに役立ちました。
WPBeginnerサポート
Glad to hear our content was helpful
管理者
kabir bairwa
WordPress関連の投稿を修正しようとしていましたが、うまくいかず、このコードを見つけてWordPressファイルに使用したところ、WordPress関連の投稿が正しく表示されるようになりました。
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
Jennifer
投稿タイトルに基づいて関連投稿を表示する方法はありますか？タグはなく、カテゴリも区別がないため、あまり役に立ちません。
投稿タイトルに基づいて関連コンテンツを表示するコードがあれば、非常に役立ちます。
aman
サムネイル付きのランダムな投稿とページを表示するコードが欲しいです
WPBeginnerサポート
以下のガイドをご覧ください。
https://www.wpbeginner.com/wp-tutorials/how-to-display-random-posts-in-wordpress/
管理者
karan4official
<? の代わりに、どこでも <?php を使用してください
WPBeginnerサポート
Thank you for your feedback, this article should currently be using the php version everywhere
管理者
モタハル・ホサイン
素敵な投稿をありがとうございます。
ここでは、「caller_get_posts」は非推奨なので、「ignore_sticky_posts」を使用する必要があります。
WPBeginnerサポート
Thanks for pointing that out, we’ll be sure to look into updating the article
管理者
Frank
関連投稿を制限したいカテゴリをどこに追加すればよいか教えていただけますか？
WPBeginnerサポート
この方法は、投稿があるカテゴリに投稿を制限します。カテゴリを制限するには、特定のカテゴリを除外するためのif文を作成する必要があります。
管理者
Greg
カテゴリ別にX件以上の関連投稿がある場合、例えば3件をランダムに表示することは可能ですか？
WPBeginnerサポート
可能ですが、これにさらに多くの機能を追加する必要があります。そのようなカスタマイズについては、プラグインを検討することをお勧めします。
管理者
Akiode obasanjo
CSSは追加されていません
luigi
こんにちは、日付で制限することは可能ですか？去年のものだけを表示できますか？
ルイス
小さなサムネイルを作成する方法を見つけましたが、横ではなく縦に表示されます。これをどのように変更できますか？
ルイス
スクリプトはうまく機能しています。唯一の問題は、サムネイルが非常に大きいことです。それらを小さくする方法はありますか？
WPBeginnerサポート
ルイスさん、こんにちは。
デフォルトのpost-thumbnailサイズを使用しています。新しいサムネイルサイズを作成し、次のようにコードで使用できます：新しいサムネイルサイズ
1-click Use in WordPress
管理者
アナ
このコードのショートコードを作成するにはどうすればよいですか？関数は作成しましたが、ページに印刷を返す方法がわかりません。
Musarrof
なぜこの問題に直面しているのか。構文エラー、予期しないファイルの終わり
助けてください。
マイク
こんにちは。
WordPress初心者です。
関連記事を表示したいです。
メインメニューには「カテゴリA」があり、「カテゴリA」の下に「サブカテゴリA」「B」「C」があります。投稿は「カテゴリA」にありますが、「サブカテゴリA」「B」「C」のいずれかに含まれることもあります。
関連記事のいずれかを選択すると問題が発生し、最初に選択したサブカテゴリの投稿が正しく表示されなくなります。
Anthony Reese
チュートリアルをありがとうございます。これは信じられないほど役立ち、見事に機能しました！
パワン・シン
管理者様、非常に有益な記事です。あなたのサイトはシンプルで分かりやすいので気に入っています。すべての記事は要点を押さえていますが、コードの知識を共有するとなると、非常に技術的になります。訪問者の多くがコーディングの専門家ではないという事実は無視してください。説明に2〜3行追加して、すべての人にとって完全で理解しやすいものにすれば、もっと良くなるのではないでしょうか。とにかく、素晴らしい記事ですが、Wpbeginnerが使用しているコードまたはプラグインは何ですか？
Ahmad
とても参考になりました、ありがとうございます！
トレーシー
あなたの記事の本当に残念な点は、実際に「どうやって」やるのかを全く説明していないことです。single.phpにコードを挿入するように言われても、初心者である私にはそれが何なのか、どこにあるのか分かりません。この種の重要な情報は、私たちが意味を理解している、あるいはそれを理解するためにあなたの記事をすべて読んだと仮定するのではなく、記事に含めることを検討した方が良いでしょう。
Victor Siyaya
同意します。このコードをどこに貼り付ければよいのか全く分かりません。
ローズ
素晴らしい投稿をありがとうございます。非常に役立ちました。コードにエラーが見つかったので、将来他の人の役に立つことを願って共有したいと思います。エラーは次のとおりでした。
WP_Query は、バージョン 3.1.0 で非推奨となった引数で呼び出されました！「caller_get_posts」は非推奨です。代わりに「ignore_sticky_posts」を使用してください。
そこで単純に置き換えたらうまく動作しました。名前空間も使用しているので、WP_Query を \WP_Query に変更する必要があり、また、以下の順序を変更しました。
global $post;
$orig_post = $post;
またありがとう
ローズ
Sanjeev Kumar
様
カテゴリのコードは正常に動作していますが、1つの問題があります。ホーム ページで同じカテゴリの投稿が2つまたは3つある場合、リンクは黒く表示されますが、次の投稿のカテゴリを表示したいです。
Luan
こんにちは、
投稿ありがとうございます。content-single.phpにコードを追加したところ、機能しました。しかし、例のように3列ではなく1列で表示されます。これについて助けていただけますか？関連記事を1行3列で表示したいです。本当にありがとうございます。
Claudio
こんにちは！
追加ソースの最初のリンクが壊れています。
コードをありがとうございました。
WPBeginnerサポート
Claudio様
お知らせいただきありがとうございます。壊れたリンクを削除しました。
管理者