魏艾斯笔记想要在GeneratePress主题显示相关文章是需要手动设置的，GeneratePress主题是目前 WordPress主题中速度较快的一款主题，默认GeneratePress主题文件小于30 kb，因此这款主题中缺少某些常规内容。考虑到主题打开速度，GeneratePress主题作者没有添加这个功能。不过通过使用插件也可以在网站上显示相关文章。老魏会在本文中指导大家如何在GeneratePress主题中显示相关文章。
为什么要添加相关文章
在文章区域下面添加相关文章，有助于吸引用户驻留和点击，增加页面PV和访问时长，同时还促进了搜索引擎蜘蛛顺着链接路径索引和抓取，既能增加用户体验也对seo优化有好处。可以说WordPress相关文章是一个WordPress网站的必备功能。
我们平时使用的很多WordPress主题默认自带了相关文章显示功能，因此大家平时都不太关注这个。比如DUX主题默认在每页文章内容区域的下面自带了相关文章。如下图所示就是魏艾斯笔记文章内容区域最下面的相关文章区域。
你在本文最下面也能看到类似的相关文章推荐。
魏艾斯笔记文章内容区域最下面的相关文章区域
而GeneratePress主题需要使用 WP Show Posts插件来实现这个功能。WP Show Posts插件的开发者与GeneratePress主题开发者是同一个人，这也使得两款插件兼容性极佳。
国外建站主题及插件选择2核4G内存3M带宽能流畅运行。国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱）， 不知道如何选择地域、配置请在页面右侧+老魏的联系方式，我们一起研究。
外贸网站、B2C/C2C等建议在国外注册域名。打开namesilo官网，在搜索框里输入要注册的域名，选择好之后注册，付费之前记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题
安装WP Show Posts插件
这款插件是免费安装使用的， 我们在 WordPress仪表盘>插件>安装插件，搜索WP Show Posts，安装并启用。
安装WP Show Posts插件
WP Show Posts插件设置相关文章参数
安装好之后是在仪表盘左侧项目列表的文章posts下面能看到。点击 Add New新增一个列表，并且起名为 Related Posts（注意这个名字很重要，后面会用到）。
如下图所示有以下可设置参数：
- 文章posts：Post type选择post，Taxonomy选择 category，Terms选择已经发布的分类，Posts per page设置3，或者根据实际情况设置。一般有设置3/4/8个的，比如魏艾斯笔记这块区域就默认8个（本文开头截图）；
- 列columns：Columns选择3，Columns gutter默认为2em；
- 图片images：勾选images会显得页面内容更丰富些。Image width (px)输入200，Image height (px)输入150，数字不是唯一的后面根据实际效果自行修改。Image alignment选择Center，Image location选择 above title；
- 内容content：Content type选择none，Excerpt length (words)输入30，勾选Include title，Title element选择P，其他默认；
- 元Meta：全都取消勾选；
- 更多设置more settings：勾选Exclude current和 Ignore sticky posts，Order是按照 Descending和Ascending这两个发布先后顺序显示，Order by是另外一种显示规则，里面有 ID、title、data、random等等很多种排序方式供选择。建议选择 no order、data、random等。其他选项默认即可；
WP Show Posts插件设置相关文章参数
GeneratePress主题添加Hook代码
接下来去WordPress仪表盘中外观 > GeneratePress > Elements > Activate，激活元素功能。
然后在Elements > Add New添加新元素。
选择 Element Type 为 Hook钩子. 起名 Related Post（中文名也行，知道用途就行）。Hook是GeneratePress主题高级功能，要提前安装GP Premium插件后才能使用。
不熟悉GeneratePress高级插件的朋友请看GP Premium插件安装部署详细图文教程。
把下列代码粘贴到 Hook里面。
<div class=”wpsp-related-posts1 grid-container”>
<h2>Related Posts</h2>
<?php
if ( is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
} else {
$cat = get_category( get_query_var( ‘cat’ ) );
}$cat_slug = $cat->slug;
$list = get_page_by_title( ‘related’, ‘OBJECT’, ‘wp_show_posts’ );
wpsp_display( $list->ID, ‘tax_term=”‘ . $cat_slug . ‘”‘ );
?>
</div>
- Setting：Hook选择 generate_after_content 和勾选 Execute PHP，其他参数默认；
- Display Rules：Location选择 All Singular，Exclude选择 page，all pages，其他参数默认；
- 下图中红色箭头所示的就是WP Show Posts插件新建list的名字，这二者是靠这个名字关联到一起，所以这两处必须相同。有人新建list名与代码中的名字不符就会无法显示。
GeneratePress主题添加Hook代码
相关文章样式
懂CSS代码的同学可以在 WordPress仪表盘>外观>自定义>额外css中添加代码，让相关文章区域更好看。
相关文章在新窗口打开
有的人喜欢在新窗口打开相关文章，需要添加代码。
WordPress仪表盘中外观>Elements > Add New添加新元素，Element Type 为 Hook钩子. 起名 Open Related Post in the New blank page，或者中文名字都行。
代码如下：
<script>
jQuery(function($){
$( document ).on( ‘click’, ‘#wpsp-286 a’, function(e) {
e.preventDefault();
var url = $(this).attr(‘href’);
window.open(url, ‘_blank’);
});
});</script>
提示：上面代码中的数字 286 是WP Show Posts插件创建新列的时候生成的 shortcode post id，在本文第一步的那个创建页面右侧能看到，如下图所示：
GeneratePress主题Hook的shortcode ID
Hook的具体设置参数如下：
- Setting：Hook选择 generate_after_footer，其他参数默认；
- Display Rules：Location选择 All Singular，Exclude选择 page，all pages，其他参数默认；
点击发布update。
然后去刷新前台文章页面，试试能否是否在新页面打开。
老魏为本文制作的相关文章例子如下图所示。
GeneratePress主题相关文章例子
老魏点评
在GeneratePress主题显示相关文章需要用到WP Show Posts插件和Elements元素，在插件中添加相关文章代码是负责文章内容显示参数的，Elements元素来控制相关文章在哪里显示，和在哪些页面显示（以及排除某些页面），这样就可以正常显示相关文章了。