专栏首页一丘一壑在Genesis主题中手动添加WordPress相关文章

在Genesis主题中手动添加WordPress相关文章

相关文章(Related posts )” 或者叫“你可能还感兴趣的文章”,是WordPress中呼声最高的需求之一。许多博客,新闻网站和企业网站都有这个需求。有很多第三方插件都可以提供这个的功能。甚至Automattic,WordPress背后的公司,也有一个插件JetPack提供此功能。

唯一的问题是,大多数插件都太臃肿了,包含太多我不需要的东西。带来了很多累赘。因为我一直在使用强大Wordpress插件ACF(Advanced Custom Fields )来满足我的大部分需求,如果我能用手上现有的东西来实现“相关文章”的功能,为什么还要安装别的东西呢?

我们在这里实现的效果是以网格形式显示三篇相关文章,包括文章特色图像、标题和最多20个单词的摘录,并且允许你自己选择要显示的文章。通过这种方式,你可以更好地控制与某篇文章相关的内容。我不是SEO专家,但我相信手动选择相关文章方式可以对搜索引擎更友好,也是取悦Google的推荐方式 。

这是它完成后的最终样子。

我使用的是Genesis Sample子主题。但是,这应该适用于任何Genesis子主题。

所以,让我们开始吧

第一步:使用ACF创建自定义字段

首先,我们需要创建所需的自定义字段,以帮助我们获取所需的数据,即关系字段类型。请按照下图进行正确设置。还有一个更简单的方法,你可以在这里下载我导出的ACF配置文件,并将文件导入ACF。

related-posts.zipDownload

第二步:创建一个名为single.php的新文件

现在我们需要将数据输出到网站上。在你的子主题文件夹下创建一个名为single.php的文件,并将以下代码添加到其中。

<?php
 
add_action( 'genesis_before_comments', 'io_related_posts' );
function io_related_posts() {
	$relatedPosts = get_field( 'related_posts' );
 
		if( $relatedPosts ): 
			echo '<div class="related-posts-container">';
			echo '<h3>Related Posts</h3>';
			echo '<ul class="related-posts">';
				foreach( $relatedPosts as $relatedPost ): // variable must NOT be called $post (IMPORTANT) 
			    echo '<li>';
			    	echo '<a href="' . get_permalink( $relatedPost->ID ) . '">' . get_the_post_thumbnail( $relatedPost->ID ) .'<h5>' . get_the_title( $relatedPost->ID ) . '</h5></a>';
			    	echo wp_trim_words( get_the_content( $relatedPost->ID ), 20, null );
			    echo '</li>';
				endforeach;
			echo '</ul>';
			echo '</div>';
		endif;
}
 
genesis();

第三:编写样式

将以下代码添加到子主题文件夹下的style.css文件中。以下代码的第29行是处理移动端的布局,如果你想要在450px断点之前处理移动端的视图,那么就更改这一行。

.related-posts-container {
  background-color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 40px;
  padding: 60px;
}
 
.related-posts-container h3 {
  margin-bottom: 5%;
}
 
.related-posts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
 
.related-posts li {
  -ms-flex-preferred-size: 32%;
      flex-basis: 32%;
}
 
@media only screen and (max-width: 450px) {
  .related-posts li {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin-bottom: 10%;
  }
}

第四:添加相关文章

你现在要做的就是编辑文章并开始添加相关文章。

可以从下面的图中看到,你可以完全控制要显示的内容。我们已限制3个帖子,因此你将无法添加超过3个帖子。选择的时候,你可以使用目录进行过滤。

这样就可以了。

如果您发现本文有用,请随时分享,如果您需要任何支持,我会非常乐意为您提供帮助。所以请随时留下您的评论。


译后记

翻译Genesis系列教程的时候,正好需要用到这个“相关文章”的功能把教程组织到一起,和原文作者的想法一致,如果一个需求能在不用插件的情况下实现,那就最好不用。这是“奥姆剃刀”的哲学:

如无必要,勿增实体;两个类似的解决方案,选择最简单的。

原文地址

Create Related Posts in Genesis using ACF • alansari.io

Related posts is one of the mostly looked for features in WordPress. The demand comes from being used in a lot of blogs, news sites, and corporate websites. There are so many choices out there that caters for such a feature. Even Automattic, the guys behind WordPress, has the feature available in their JetPack plugin. The…

alansari.io

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一文说透WordPress的自定义文章类型

    从2004年的1.0版本算起,WordPress在14年间已经迭代开发到了5.x版。如果说这中间哪个版本是一个质的提升的话,那应该算是2010年发布的代号为Th...

    丘壑
  • Genesis框架从入门到精通(2):什么是动作?

    在本系列的前一篇文章中,我解释了Genesis框架和乐高之间的相似性。我列出了Genesis所有内置的“钩子”,把它们比喻成乐高里连接各个积木块的小凸点。

    丘壑
  • Genesis框架从入门到精通(9): 函数介绍

    In previous parts of the Genesis Explained series I talked about actions and fil...

    丘壑
  • Golang-Map

    map是一种无序的基于key-value的数据结构,Go语言中的map是引用类型,必须初始化才能使用。

    PayneWu
  • 图像处理程序框架—MFC相关知识点

    CDC:Windows使用与设备无关的图形设备环境(DC :Device Context) 进行显示 。

    流川疯
  • 使用 Wolfram Mathematica 构建奥林匹克赛车场

    “描述轨道的某些方程式在解析上无法求解,在数值上求解较慢。为了避免这种潜在的障碍,我充分利用了Mathematica的插值函数功能来创建快速计算、可逆的插值函数...

    WolframChina
  • 不会玩阴阳师的我带你一键下载《阴阳师:百闻牌》所有卡牌并调用百度OCR识别文字信息

    一天,一个朋友给我发来一条链接https://ssr.163.com/cardmaker/#/,让我帮他看看怎么能获取到网页中所有的图片链接。我打开链接一看,页...

    cutercorley
  • 分布式强一致性数据库的灵魂 - Raft 算法

    ? 内容来源:2017 年 11 月 18 日,PingCAP首席架构师唐刘在“数据技术嘉年华——分会场五:云架构、数据架构”进行《分布式强一致性数据库的灵魂...

    IT大咖说
  • Python 英文分词

    py3study
  • Hybris Commerce下单时遇到产品库存不足的解决办法

    客户在Storefront下单试图购买一个产品时,遇到out of stock库存不足的错误,无法下单:

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券