非常实用的WordPress同分类文章列表小工具教程

投稿   雅兮网  2018-06-19 07:06:52  262 人阅读  17 条评论

WordPress 小工具是一个非常实用的功能,其可视化的后台设置无论是对新手还是大神都非常的方便快捷。通过各种小工具的点缀,可以让 WordPress 主题更加的多样化和个性化。今天飞鸟给大家带来一款雅兮网原创“WordPress 同分类文章列表小工具”。

顾名思义:显示与目前文章相同分类下的其他文章,以列表形式展现。并通过数量、时段、排序依据等来实现不同的列表,其前端效果如下(前端效果在不同的主题上略有区别,仅供参考。后续版本会增加其它前端样式)。

非常实用的WordPress同分类文章列表小工具教程 WordPress 第2张

小工具特点:

  • 前端简洁美观,符合大众审美;
  • 自定义标题,配合不同排序实现多样化小工具;
  • 自定义数量,控制权完全在你手中;
  • 自定义时段,可选一年、一月等多个时段,用户体验为王;
  • 自定义排序,发布时间、更新时间、随机等多种排序方式。

自定义时段

自定义排序

注意事项:按照阅读量排序需主题自带浏览量功能或实用阅读量记录插件,且以自定义栏目记录阅读量,自定义栏目名称为 views,否则可能会导致排序错误。建议只在文章也是用本小工具,否则可能会无法正常显示。

使用方法:

下载本文后方提供的widget-catpost.php,放入你的主题小工具文件/文件夹中,并适当引用,将下文提供的 css 代码放入你的 style.css 文件中

附:常见的小工具使用方法:

方法一:如果你的主题有专门的小工具文件夹如 widget 文件夹,可以将本小工具文件直接放入,并在 functions.php 引用该文件(也有在小工具文件夹中自定义一个 index.php,该文件已被 functions.php 引用,此时只需要在 index.php 引用 widget-catpost.php 即可)。方法二:没有专门的文件夹,只有 widgets.php 文件直接拿出 widget-catpost.php 文件中的代码,放入 widgets.php 中即可。

方法三:将 widget-catpost.php 放入适当的文件夹,并在 functions.php 调用该文件即可。

CSS代码参考

  1. /* 同分类文章小工具样式 by 雅兮网 yaxi.net */
  2. .cat-post{
  3. width: 100%;
  4. overflow:hidden;
  5. }
  6. .cat-post ul{
  7. padding: 15px;
  8. }
  9. .cat-post ul li{
  10. width: 99%;
  11. line-height: 28px;
  12. white-space: nowrap;
  13. word-wrap: normal;
  14. text-overflow: ellipsis;
  15. overflow: hidden;
  16. }
  17. .cat-post ul li a{
  18. font-size: 14px;
  19. }
  20. .cat-post ul li a i{
  21. font-size: 12px;
  22. margin-right: 5px;
  23. }

题外话:本小工具的开发参考了其他作者如知更鸟等大神的代码,算是站在巨人的肩膀上完成的。后续还会新增前端样式、设置等其他功能。如果你有兴趣,敬请期待吧。

历史上的今天:

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,   ,  
原文地址:https://www.yaxi.net/2018-06-09/1815.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
雅兮网

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 土蜂蜜百科网
    土蜂蜜百科网 @回复

    这个挺好的

  2. 积分商城
    积分商城 @回复

    厉害,支持! [嘻嘻]

  3. 清秋暖冬
    清秋暖冬 @回复

    雅兮老司机出的这个功能不错呀!

  4. 电炖锅的那些事
    电炖锅的那些事 @回复

    感谢分享。
    实用的工具,有需要的可以用。

  5. 券都有
    券都有 @回复

    厉害,支持!

  6. 姜辰
    姜辰 @回复

    这个还真的不错呢~挺美观的

  7. 沈唁志
    沈唁志 @回复

    哇撒 雅兮大佬就是稳

  8. 鬼手六
    鬼手六 @回复

    雅兮大佬de好文,支持一个..

  9. 闲鱼
    闲鱼 @回复

    后排支持雅兮大佬,不错的小工具

  10. 里维斯社
    里维斯社 @回复

    这个小工具不错,自定义可以DIY一下

  11. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    可惜了,用的是ZB程序

  12. 菊
     @回复

    这玩意是个好东西 可以出现在该分类下文章的右侧

    • 懿古今
      懿古今2018-06-19 15:02  回复

      @菊是的,而且也可以出现在文章页,显示文章同分类的热门文章也是不错的选择

  13. 小神仙
    小神仙 @回复

    新站流量就是上不去,哎……%……

  14. 雅兮网
    雅兮网 @回复

    好尴尬 没人评论 我坐沙发