WPBeginner Sites»WPBeginner»ブログ»テーマ»方法WordPressでプラグインを使わずにサムネイル付きの関連投稿をする。

方法WordPressでプラグインを使わずにサムネイル付きの関連投稿をする。

By Editorial Staff | Reviewed by Syed Balkhi | 6月 7, 2024 | Reader Disclosure

シェアツイートシェア WhatsApp 電子メール

WordPressサイトに関連投稿のリストを表示したいが、プラグインではなくコードを使いたいとお考えですか？

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

この投稿では、WordPressで関連投稿をプラグイン必須でなくコードを使って表示する方法を紹介する。

How to: Related Posts with Thumbnails in WordPress Without Plugins

なぜWordPressで関連投稿を表示するのか？

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

各ブログ記事の最後に関連コンテンツのリストを表示することは、訪問者をサイトにとどめ、ページビューを増やす素晴らしい方法です。また、人々が見つけやすい場所に最高のコンテンツを表示することで、最も重要なページの視認性を向上させることもできます。

もしあなたがコードに詳しくないのであれば、コードなしで関連投稿を表示できるWordPressの関連投稿プラグインを選ぶ方が簡単だろう。

しかし、プラグインを使わずに関連投稿を表示できないかと思ったことがある方のために、コードだけでサムネイル付きの関連投稿を生成できる2つの異なるアルゴリズムをご紹介します：

Method 1: How to Show Related Posts in WordPress by Tags
Method 2: How to Show Related Posts in WordPress by Category
Expert Guides on Related Posts in WordPress

注：関連投稿にサムネイルを表示させたい場合は、まずそれらの投稿にアイキャッチ画像を追加してください。

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

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

このことを念頭に置いて、投稿に共通のタグを追加しておくとよいでしょう。タグはWordPressエディターの「タグ」ボックスに入力できます。

The ‘Tags’ Settings Box in the WordPress Editor

投稿にタグを追加したら、次にすることは、テーマの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サイト上の特定の場所にスニペットを自動的に挿入して実行できる「挿入」オプションが付属しています。

WPCode insertion options for custom code snippets

詳細については、WordPressでカスタムコードを追加する方法についてのガイドを参照してください。また、プラグインの詳細については、WPCodeの詳細なレビューをご覧ください。

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

関連コンテンツを表示するもう一つの方法は、同じカテゴリーにある投稿をリストアップすることです。この方法の利点は、関連投稿のリストがほとんど空白にならないことです。

方法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 サイトの訪問者をトラッキングする方法や、ウェブサイトを高速化するための 24 のヒントもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

WPBeginnerで人気今すぐだ！

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源をご覧ください。3$編集プロセスをご覧ください。

について Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

182件のコメント返信を残す

kabir bairwa

I was trying to correct WordPress-related posts but it was not happening when I saw this code and I used this code in my WordPressfile so now my WordPress-related posts coming properly

返信
- WPBeginner Support
  
  Happy to hear our guide could help you!
  
  返信
  
  管理者
Jennifer

Is there a way to have related post based on the post title. I do not have tags and my categories really don’t do the trick since there is no distinction between them.

This would be of great help if you had a code to show related content based on the post title.

返信
aman

I want code to display random posts and pages with thumbnail

返信
- WPBeginner Support
  
  You would want to take a look at our guide below:
  
  https://www.wpbeginner.com/wp-tutorials/how-to-display-random-posts-in-wordpress/
  
  返信
  
  管理者
karan4official

Instead of using <? use <?php everywhere

返信
- WPBeginner Support
  
  Thank you for your feedback, this article should currently be using the php version everywhere
  
  返信
  
  管理者
Motahar Hossain

Thank you for your nice post.

Here “ignore_sticky_posts” should be used instead of “caller_get_posts”. Because “caller_get_posts” is deprecated.

返信
- WPBeginner Support
  
  Thanks for pointing that out, we’ll be sure to look into updating the article
  
  返信
  
  管理者
Frank

Can you direct me as to where to add what categories I would like to limit the related posts to?

返信
- WPBeginner Support
  
  This method limits the posts to the category the post is in. To limit the categories you would need to create an if statement to exclude certain categories.
  
  返信
  
  管理者
Greg

Is it possible where there are more than X related posts by category that are related that you can randomise say 3 posts?

返信
- WPBeginner Support
  
  While it is possible, it would require adding far more to this, you may want to look into a plugin for that type of customization.
  
  返信
  
  管理者
Akiode obasanjo

No CSS is added

返信
luigi

Hi, is it possible to limit them by date? Show only those of the last year?

返信
Luis

I found a way to make the smaller thumbnails, but it shows them in a column and not horizontally. How can this be modified?

返信
Luis

The script is working well. The only problem I have is that the thumb-nails are very large. Would there be some way to make them smaller?

返信
- WPBeginner Support
  Hi Luis,
  
  It uses the default post-thumbnail size. You can create a new thumbnail size and then use it in the code like this:
```
<?php the_post_thumbnail( 'your-custom-size-name' ); ?>
```
  Hosted with ❤️ by WPCode
  
  1-click Use in WordPress
  返信
  
  管理者
Ana

how to do for create a shortcode for this code, I created the function but I do not know how to return the print to the page.

返信
Musarrof

Why I’m facing this problem. syntax error, unexpected end of file
Please help me.

返信
Mike

Hello,
I’m a beginner in WorldPress.
I’d like to show Related Posts.
In the main menu I have Category A, and in Category A – Subcategories A, B and C. The posts are in Category A, but they can also be present in all 3 Subcategories.
When choosing one of the Related Posts something goes wrong and the posts from the initially chosen Subcategory don’t show correct anymore.

返信
Anthony Reese

Thanks for the tutorial. This was incredibly useful and worked like a charm!

返信
pawan singh

Hi Admin, Very informative article. I like your site because of simplicity and straightforwardness. All articles are to the point but when it comes to sharing the knowledge of code you become too technical. Just ignore the fact that much of the visitors are not coding expert. Wouldn’t it be much better if you just add 2or 3 more lines in your explanation to make it complete and easily understandable to all. Anyway, great article But I want to know which code or plugin is Wpbeginner using?

返信
Ahmad

really helpful, thanks !

返信
Tracy

what really sucks about your articles is you never actually say HOW to do something. It’s all well and good to tell me to put code into my single.php, but as a beginner I don’t know what that is or where to find it. You might want to think about putting this kind of critical information into your articles instead of assuming we know what it means, or that we have surfed every one of your articles to figure it out.

返信
- Victor Siyaya
  
  I Agree. I have no idea where to paste this code too.
  
  返信
Rose

Thanks for the great post, very useful. I came across an error in the code so wanted to share in hope it may be useful for others in the future. The error was:

WP_Query was called with an argument that is deprecated since version 3.1.0! “caller_get_posts” is deprecated. Use “ignore_sticky_posts” instead.

So I simply replaced it and it worked fine. I am also using namespacing so I needed to change WP_Query to \WP_Query plus I changed the order of the below:

global $post;
$orig_post = $post;

Thanks again
Rose

返信
sanjeev Kumar

sir
I am using the code of categories working properly but one thing is when on home page same category of 2 or 3 post then the link show balack but i want to show to show category which is next post

返信
Luan

Hi,

Thanks for your post. I added the code in content-single.php and it worked. However, it displays as 1 column not 3 columns like your example. Could you please help me on this? I want my related posts to be displayed in 1 row, 3 columns. Thanks so much.

返信
Claudio

Hello!
The first link on Aditional Sources, is broken.
Thank you by the code.

返信
- WPBeginner Support
  
  Hi Claudio,
  
  Thank you for notifying us. We have removed the broken link.
  
  返信
  
  管理者

« 古いコメント

« 1 2 3