请选择 进入手机版 | 继续访问电脑版

易运营交流社区

 找回密码
 立即注册
搜索
热搜: 运营 推广 seo
文字广告位6元包月-1文字广告位6元包月-2文字广告位6元包月-3文字广告位6元包月-4文字广告位6元包月-5
文字广告位招租中6文字广告位招租中7文字广告位招租中8文字广告位招租中9文字广告位招租中10
文字广告位招租中11文字广告位招租中12文字广告位招租中13文字广告位招租中14文字广告位招租中15
文字广告位招租中16文字广告位招租中17文字广告位招租中18文字广告位招租中19文字广告位招租中20
文字广告位招租中21文字广告位招租中22文字广告位招租中23文字广告位招租中24文字广告位招租中25
查看: 68.9K|回复: 177

[建站知识] WordPress主题首页添加最新更新文章列表功能

  [复制链接]

3

主题

265

帖子

404

积分

中级会员

Rank: 3Rank: 3

积分
404
QQ
发表于 2019-11-20 21:53:00 | 显示全部楼层 |阅读模式
如何在WordPress的主题首页添加一个最新文章列表的功能呢?
        许多主题都无法直接显示最新文章,特别是cms的主题,在首页最开始往往都会显示各种模块。
        那么自己添加一个最新文章列表就更加方便老用户观看了,这里分享的方法同样适用于dux主题。
        首页添加最新文章列表
        首先然我们开看看添加之后的效果图吧:
        这个列表显示的地方大家可以自定义选择。
        教程开始:
        这里以dux主题为例,其他的主题一样操作即可:
        新建 module_recently_updated_posts.php 文件
        新建一个名为 module_recently_updated_posts.php 的文件,然后复制以下代码至文件中即可,注意选择 UTF-8 编码格式。
        将保存后的文件丢到主题文件夹下,DUX 主题丢到 modules 文件夹下即可。
  1. get_option('sticky_posts'),
  2. 'post_status' => 'publish',
  3. 'posts_per_page' => -1,
  4. 'orderby'=> 'modified',
  5. );
  6. query_posts($args);
  7. while ( have_posts() && $i < $num ) : the_post();
  8. if (current_time('timestamp') - get_the_time('U') > 60*60*24*$days) {
  9. $i++;

  10. $t1=get_the_modified_date("Y-m-d H:i:s");
  11. $t2=date("Y-m-d H:i:s");
  12. $diff=(strtotime($t2)-strtotime($t1))/86400;
  13. if( $diff < 1){
  14. $color = red;
  15. } else {
  16. $color = "";
  17. }

  18. $the_title_value = get_the_title();
  19. $recently_updated_posts.= ''.$the_title_value.' 更新于:'.get_the_modified_time('Y.m.d').'';
  20. }
  21. endwhile;
  22. wp_reset_query();
  23. if ( !empty($recently_updated_posts) ) update_option('recently_updated_posts', $recently_updated_posts);
  24. }
  25. $recently_updated_posts = ($recently_updated_posts == '') ? '暂无最新更新文章' : $recently_updated_posts;
  26. echo '
  27. '.QGG_Options('recently_updated_posts_title').'
  28. '.$recently_updated_posts.'
  29. ';
  30. }
  31. recently_updated_posts($num,$days);

  32. ?>
复制代码
代码主要用于生成最近更新的文章列表,然后将其保存在名为 recently_updated_posts 的数据库字段里,你可以在 wp_options 数据表里找到它。主要是为了减少数据库查询量而设置的。
        functions.php 文件修改:
        由于上面生成的文章列表以静态的形式保存在了 wp_options 数据表里,为了我们每次发布/更新文章后都能生成新的最新更新文章列表,需要清空原有 recently_updated_posts 字段信息并生成新的信息,所以需要将以下代码丢到主题的 functions.php 文件中,以确保每次发布/更新文章时都能清空 recently_updated_posts 的字段信息。
  1. //新发表文章/修改文章时清空 recently_updated_posts 选项
  2. function clear_rup_cache() {
  3.     update_option('recently_updated_posts', '');
  4. }
  5. add_action('save_post', 'clear_rup_cache');
复制代码
options.php 文件修改
        由于博客目前使用的主题采用的 然后我们修改下主题下的 Options Framework 做的后台控制选项,所以我也基于此设置了对应的后台选项。当然其他主题直接修改 module_recently_updated_posts.php 文件中的代码以符合自己网站也是可以的。
  1. // 首页最新更新文章列表
  2. $options[] = array(
  3. 'name' => __('最新更新文章', 'QGG'),
  4. 'desc' => __('开启', 'QGG'),
  5. 'id' => 'recently_updated_open',
  6. 'std' => true,
  7. 'type' => 'checkbox');

  8. $options[] = array(
  9. 'name' => __('最新更新文章-标题文字', 'QGG'),
  10. 'desc' => __('显示在最新更新文章列表左上角的标题文字', 'QGG'),
  11. 'id' => 'recently_updated_posts_title',
  12. 'std' => __('最新更新文章', 'QGG'),
  13. 'type' => 'text');

  14. $options[] = array(
  15. 'name' => __('最新更新文章-显示文章数', 'QGG'),
  16. 'desc' => __('纯数字,最多允许多少篇最新文章显示', 'QGG'),
  17. 'id' => 'recently_updated_posts_num',
  18. 'std' => 5,
  19. 'class' => 'mini',
  20. 'type' => 'text');

  21. $options[] = array(
  22. 'name' => __('最新更新文章-多少天外', 'QGG'),
  23. 'desc' => __('纯数字,多少天以外的文章更新后才显示。不明白?点击这里 进行留言。', 'QGG'),
  24. 'id' => 'recently_updated_posts_days',
  25. 'std' => 7,
  26. 'class' => 'mini',
  27. 'type' => 'text');
复制代码
将以上代码丢到 options.php 文件中去即可,修改完成后应该会在主题后台看到如下选项:
        控制前端显示代码
在主题的 index.php 文件中合适的位置插入如下代码,注意代码中的路径改成第一步中 module_recently_updated_posts.php 文件的实际路径。
  1. [/code]        保存后台配置选项,刷新首页应该就能看到前端显示的内容了。
  2.         [b]CSS 样式美化[/b]
  3. 默认的样式不太好看,这里简单美化一下,CSS 不合适的大家自行调整下即可。
  4. [code]/* 最新更新文章列表 */
  5. .posts_list_block{
  6. margin: 5px 0px;
  7. }
  8. .posts_list_block_bg {
  9. background:#FFF;
  10. padding:1px 20px;
  11. margin:10px 0px;
  12. border-radius:4px;
  13. }
  14. .posts_list_block_bg ul{
  15. padding: 20px 10px;
  16. list-style-position: inside !important;
  17. list-style: disc;
  18. overflow: hidden;
  19. }
  20. .posts_list_block_bg li{
  21. line-height: 24px;
  22. white-space: nowrap;
  23. overflow: hidden;
  24. clear: both;
  25. text-overflow: ellipsis;
  26. }
  27. .posts_list_block_bg ul>li>span{
  28. color: #999;
  29. font-size: 12px;
  30. line-height: 24px;
  31. float: right;
  32. }
复制代码
最后,复制时记得要复制全部代码。否则会导致出现错误。
广告位招租中(此广告位500/月)
回复 论坛版权

举报

0

主题

204

帖子

405

积分

中级会员

Rank: 3Rank: 3

积分
405
QQ
发表于 2022-1-9 06:18:04 | 显示全部楼层
支持一下,下面的保持队形!

0

主题

252

帖子

478

积分

中级会员

Rank: 3Rank: 3

积分
478
QQ
发表于 2022-1-9 19:02:27 | 显示全部楼层
经典!
广告位招租中(此广告位500/月)

0

主题

222

帖子

370

积分

中级会员

Rank: 3Rank: 3

积分
370
QQ
发表于 2022-1-9 19:22:48 | 显示全部楼层
楼主就是我的榜样哦

0

主题

236

帖子

395

积分

中级会员

Rank: 3Rank: 3

积分
395
QQ
发表于 2022-1-12 15:38:40 | 显示全部楼层
楼上的真不讲道理!
广告位招租中(此广告位500/月)

0

主题

244

帖子

436

积分

中级会员

Rank: 3Rank: 3

积分
436
QQ
发表于 2022-1-13 23:14:19 | 显示全部楼层
看帖不回帖的人就是耍流氓,我回复了!

0

主题

266

帖子

428

积分

中级会员

Rank: 3Rank: 3

积分
428
QQ
发表于 2022-1-14 04:01:04 | 显示全部楼层
灌水不是我的目的!
广告位招租中(此广告位500/月)

0

主题

246

帖子

395

积分

中级会员

Rank: 3Rank: 3

积分
395
QQ
发表于 2022-1-14 05:20:03 | 显示全部楼层
内容很有深度!

1

主题

257

帖子

389

积分

中级会员

Rank: 3Rank: 3

积分
389
发表于 2022-1-14 05:20:08 | 显示全部楼层
易运营人气好旺!
广告位招租中(此广告位500/月)

0

主题

258

帖子

486

积分

中级会员

Rank: 3Rank: 3

积分
486
QQ
发表于 2022-1-15 05:27:27 | 显示全部楼层
楼主说的我也略懂!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|易运营交流社区

GMT+8, 2024-2-28 12:46

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表