如何:在没有插件的 WordPress 中使用缩略图的相关文章


您想在 WordPress 网站上显示相关帖子的列表,并且更喜欢使用代码而不是插件吗?

当您博客的访问者读完他们感兴趣的文章时,提供相关帖子列表将使他们保持参与并帮助他们找到新的内容来阅读。

在本文中,我们将向您展示如何使用代码使用 WordPress 显示相关帖子,无需任何插件。

为什么在 WordPress 中显示相关页面?

当您的 WordPress 博客开始增长时,用户找到同一主题的其他帖子可能会变得更加困难。

在每篇博客文章的末尾显示相关内容列表是让访问者留在您的网站并增加综合浏览量的好方法。它还可以通过在人们可以轻松找到的地方显示您的最佳内容,帮助提高最重要页面的可见性。

如果您不熟悉代码,那么您会发现选择众多 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();

此代码查找与页面关联的标签,然后运行数据库查询以获取具有相似标签的页面。

您应该将代码放在哪里?这取决于您的主题,但在大多数情况下,您应该能够将代码粘贴到主题的 single.php 模板中,位于主帖子之后、评论部分的正上方。

如果您像我们在演示网站上一样使用 Twenty Twenty-One 主题,那么粘贴代码的好位置是在 template-parts/content/content-single.php 文件中的标头以及 <?php the_content(); 之后。

这将自动在任何 WordPress 帖子上显示相关内容。您需要通过添加自定义 CSS 来更改相关帖子的样式和外观以匹配您的主题。

提示:我们建议使用 WPCode 等代码片段插件,而不是编辑主题文件,这可能会破坏您的网站。

WPCode 使在 WordPress 中添加自定义代码变得安全且轻松。此外,它还附带“插入”选项,可让您在 WordPress 网站上的特定位置自动插入和执行片段,例如在帖子之后。

有关更多详细信息,请参阅有关如何在 WordPress 中添加自定义代码的指南。

方法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 网站的访问者,或者查看我们的 24 条提示列表,以加快您的网站速度。

如果您喜欢这篇文章,请订阅我们的 WordPress 视频教程 YouTube 频道。您还可以在 Twitter 和 Facebook 上找到我们。