方法: プラグインを使用せずに WordPress でサムネイル付きの関連投稿を作成する


WordPress ウェブサイトに関連投稿のリストを表示したいのですが、プラグインではなくコードを使用したいですか?

ブログの訪問者が興味のある記事を読み終えたときに、関連する投稿のリストを提供すると、訪問者が興味を持ち続け、読むべき新しいコンテンツを見つけやすくなります。

この記事では、プラグインを使わずにコードを使ってWordPressで関連投稿を表示する方法を紹介します。

WordPress で関連ページを表示する理由

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

各ブログ投稿の最後に関連コンテンツのリストを表示することは、訪問者を Web サイトに留めてページビューを増やすための優れた方法です。また、人々が簡単に見つけられる場所に最適なコンテンツを表示することで、最も重要なページの視認性を向上させるのにも役立ちます。

コードに慣れていない場合は、コードなしで関連投稿を表示できる数多くの WordPress 関連投稿プラグインの中から 1 つを選択する方が簡単であることがわかります。

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

注: 関連する各投稿にサムネイルを表示したい場合は、最初に注目の画像をそれらの投稿に追加してください。

方法 1: WordPress で関連投稿をタグ別に表示する方法

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

このことを念頭に置いて、相互に関連付けたい投稿にいくつかの共通のタグを追加するとよいでしょう。 WordPress エディターの「タグ」ボックスにタグを入力できます。

投稿にタグを追加したら、次に次のコード スニペットをテーマの single.php テンプレートに追加します。サイトにコードを追加する際にサポートが必要な場合は、Web から 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 にカスタム コードを追加する方法に関するガイドを参照してください。

方法 2: WordPress の関連投稿をカテゴリー別に表示する方法

関連コンテンツを表示するもう 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();

各投稿の下部に関連コンテンツのリストが表示されます。

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

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

この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。