如何在没有插件的情况下添加WordPress相关文章

使用WordPress的一大优势是插件。 WordPress插件几乎涵盖了您可以想象到的所有内容,从将博客扩展到CMS到添加漂亮的功能以及针对搜索引擎优化博客–可能性无穷无尽(并且请不要忘记所有不同的主题)。

但是,如果使用过多的插件,则冒着堵塞WordPress博客的风险,而在最坏的情况下,您可能会“破坏”它。 有许多插件互不兼容的实例,以及使博客运行缓慢的插件。

某些最受欢迎的WordPress插件类别基于在博客中添加“ 相关帖子 ”。 由于WordPress对此没有任何标准,因此每个人都必须使用某种插件来在其网站上显示相关帖子。

本文将教您如何在不使用任何插件的情况下将带有缩略图的相关文章添加到您的博客中,从而使一切简单,轻松和易于访问。 让我们开始吧!

但是首先,为什么要避免使用插件?

有很多原因导致您应始终尝试使用内置代码和服务而不是插件的WordPress。 主要好处是您无需依靠第三方(插件开发人员)即可使博客正常运行。 在许多情况下,流行的插件被开发人员所抛弃,使无数站点所有者陷入了过时且可能易受攻击的软件中。

另一个原因是,您不会冒使用using肿的插件的风险,该插件会使您的网站变慢,甚至更糟,其中包含恶意代码,尽管这种情况很少见,只要您从官方WordPress目录中获取插件即可。 。

入门:带缩略图的相关文章

与大多数其他功能一样,此“相关帖子”功能旨在放置在您的主文章页面(single.php)上,但是只要将其保留在WordPress循环内,您就可以在几乎任何地方使用它。 为了获得相关的帖子,我们将使用为各个文章提供的帖子标签。

缩图

WordPress现在具有内置的缩略图系统,我们将在这里使用它。 为了启用它,请将此代码添加到主题文件夹中的functions.php文件中(大多数情况下已经存在)。

add_theme_support( 'post-thumbnails' );

您还可以通过在代码中添加另一行来设置缩略图的宽度和高度:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true );

重要提示:将图像添加到帖子中时,要创建缩略图,必须在图像上传面板中选择“用作特色图像”。 这将为帖子创建缩略图。

代码

<div class="relatedposts">
<h3>Related posts</h3>
<?php
	$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'=>4, // Number of related posts to display.
	'caller_get_posts'=>1
	);
	
	$my_query = new wp_query( $args );

	while( $my_query->have_posts() ) {
	$my_query->the_post();
	?>
	
	<div class="relatedthumb">
		<a rel="nofollow" target="_blank" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
		<?php the_title(); ?>
		</a>
	</div>
	
	<? }
	}
	$post = $orig_post;
	wp_reset_query();
	?>
</div>

代码段the_post_thumbnail(array(150,100)设置将显示的缩略图的大小,在这种情况下,宽度为150px,高度为100px。

CSS

我们在这里有两个div类,“。relatedposts”是整个​​div容器,“。relatedthumb”是各个。缩略图以及.relatedposts中的链接。 我们假设帖子的宽度是标准的640px。 CSS:

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

上面CSS将以150像素的宽度呈现帖子缩略图,这意味着我们需要4个缩略图来填充640像素的宽度(包括它们之间的边距)。 您可以根据需要进行调整。 如果要5张缩略图,则需要.relatedthumb宽度约125像素。

重要提示:请确保将在WordPress媒体设置中生成的缩略图的宽度设置为与您在CSS中设置的缩略图相匹配。 此外,它必须匹配php代码中指定的大小: the_post_thumbnail(array(150,100)

游戏博客DigitalBattle(使用本文所述的确切技术)使用了相关的帖子,如下所示:

类似技术

这不是在没有插件的情况下发布相关帖子的唯一方法-那里有很多技术和指南向您展示了如何在没有插件的情况下添加相关帖子,以下是其中一些:

结论

我们可以利用WordPress提供的内置功能来做很多事情,而且在许多情况下,我们无需借助第三方插件即可完成工作。 下次您需要为WordPress博客使用插件时,请查看是否无需插件即可实现相同功能。 挖掘周围,在网上搜索替代方案。 您会惊讶于WordPress开箱即用的可能性。


翻译自: https://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值