• Skip to primary navigation
  • Skip to main content

丘壑博客

一丘一壑也风流

  • 精品资源
    • WordPress精品插件大全
    • Genesis主题教程
    • 命令行工具精品
  • About me
You are here: Home / WordPress / 在Genesis主题中手动添加WordPress相关文章

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

2019-02-20 by 丘壑 Leave a Comment

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

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

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

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

Genesis中使用ACF的相关文章

我使用的是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个帖子。选择的时候,你可以使用目录进行过滤。

相关文章后端 -  ACF

这样就可以了。

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


译后记

翻译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 alansari.io
Genesis主题中手动添加WordPress相关文章" trackback:ping="https://bestscreenshot.com/create-related-posts-genesis-using-acf/trackback/" /> -->

Filed Under: WordPress Tagged With: Advanced Custom Fields, Genesis, 代码, 插件, 相关文章

Reader Interactions

Related Posts

  • 神级WordPress主题框架Genesis 2.8发布:容易引起极大舒适感
  • Genesis框架从入门到精通(1):什么是框架?
  • 在Genesis主题中手动添加WordPress相关文章

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2019. Hosting on SiteRubix. Theme by Genesis Framework.