用Elementor Pro为WordPress添加一个相关文章模块

昨天看到Elementor居然已经支持相关文章了,想到又可以少装一个插件,马上用Elementor做除了网站的相关文章,下面就分享下Elementor添加相关文章的过程吧

因为这里需要用到Posts部件,确保你已经升级到了Elementor Pro版本

进入网站后台,选择Templates – 创建一个模板,类型选Section

1589198528-4dc5546a6559a8b

我们把Posts组件拖动到页面中

1589198529-e13d3809562fb04

因为样式的设计很简单,和设计文章页都是一样的,这里就不再多说,下面主要介绍一下相关文章需要用到的Query这个模块

首先最重要的一点把文章的源设置为Related,意思就是把Elementor Posts小工具设置为相关文章的模型,这样下面的所有选项,都是文章展示相关的设置了

(设置为相关文章模型后,可能会出现一些杂乱的文章,可以通过设置中的Preview Settings把预览页面改为一篇常规的文章)

Include By是分类的依据,比如可以根据作者进行关联、或者根据分类目录、标签等找出相关的文章,比如下面我选择的就是分类目录筛选,这样每篇下面的相关文章都是同一个分类下面的

Fallback指的是没有相关文章的情况,这时可以展示近期文章或者手动筛选

1589198532-04323eb71612cb0

另外在最下方可以设置排序相关,可以按日期、标题、随机等进行筛选

1589198538-fc0338540993326

这时候相关文章模块基本就做完了,剩下的事情就是把它添加到主题中去了

怎么把相关文章模块集成到主题中呢?

最简单的方法就是通过小工具,比如你可以在侧边栏的区域插入一个Elementor Library,然后选择刚刚创建的相关文章模块

1589198539-065be793a21b299

不过这种方法有个缺点就是大部分主题你只能放到固定的几个位置,有些局限

另外一种方法就是我们可以借助Elementor中短代码

在elementor模板列表中,每个模板有一个Shortcode,我们可以通过Shortcode来调用指定的Elementor模板

1589198541-f729cb2a9694499

如果你的主题是带Hooks系统的,比如GeneratePress、Astra、OceanWP 等(都需要高级版),可以直接添加短代码Hooks,把代码复制进去就行了,如果你还不知道Hooks怎么用,可以查看GeneratePress中使用Hooks的方法

如果你的主题没有Hooks系统的话,也可以通过修改主题中的代码来添加模块,找到需要添加的位置,插入下面的代码,就可以调用相关文章了

 <?php echo do_shortcode('这里填写你的elementor代码'); ?>

最终的效果如下图

1589198543-ee7081848550343

虽然说相关文章只是Elementor中的一个小小的模块,但是对比我之前使用过的一些相关文章推荐插件真的是非常强大了,而且Elementor还有一个很大的优势就是我们可以自己调整样式,加入更多元素,这是其他的插件不能比的

免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 搜5G网无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
本站资源素材仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
本站所有图片素材均享自由版权下创作共用CC0协议。
搜5G资源网,5G资源网 » 用Elementor Pro为WordPress添加一个相关文章模块

发表评论

搜5G网永久会员限时优惠中,不限下载,免费更新

立即查看 了解详情