WordPress主题首页添加最新更新文章列表功能

tengxunyun cera

如何在WordPress的主题首页添加一个最新文章列表的功能呢?

许多主题都无法直接显示最新文章,特别是cms的主题,在首页最开始往往都会显示各种模块。

那么自己添加一个最新文章列表就更加方便老用户观看了,这里分享的方法同样适用于dux主题。

首页添加最新文章列表

首先然我们开看看添加之后的效果图吧:

这个列表显示的地方大家可以自定义选择。

教程开始

这里以dux主题为例,其他的主题一样操作即可:

新建 module_recently_updated_posts.php 文件

新建一个名为 module_recently_updated_posts.php 的文件,然后复制以下代码至文件中即可,注意选择 UTF-8 编码格式。

将保存后的文件丢到主题文件夹下,DUX 主题丢到 modules 文件夹下即可。

<?php
/**
* 无作为分享:www.wuzuowei.net
*/

$num = QGG_Options('recently_updated_posts_num');
$days = QGG_Options('recently_updated_posts_days');
function recently_updated_posts($num = 5,$days = 7) { 
if( !$recently_updated_posts = get_option('recently_updated_posts') ) {
$i=0;
$args = array( 
'post__not_in' =>get_option('sticky_posts'),
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby'=> 'modified',
); 
query_posts($args);
while ( have_posts() && $i < $num ) : the_post();
if (current_time('timestamp') - get_the_time('U') > 60*60*24*$days) {
$i++;

$t1=get_the_modified_date("Y-m-d H:i:s");
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/86400;
if( $diff < 1){ 
$color = red;
} else {
$color = "";
} 

$the_title_value = get_the_title(); 
$recently_updated_posts.= '<li style="color:'.$color.';"><a style="color:'.$color.';" href="'.get_permalink().'" title="'.$the_title_value.'">'.$the_title_value.'</a><span style="color:'.$color.';"> 更新于:'.get_the_modified_time('Y.m.d').'</span></li>';
}
endwhile;
wp_reset_query();
if ( !empty($recently_updated_posts) ) update_option('recently_updated_posts', $recently_updated_posts);
}
$recently_updated_posts = ($recently_updated_posts == '') ? '<li>暂无最新更新文章</li>' : $recently_updated_posts;
echo '<div class="posts_list_block">
<div class="title"><h3>'.QGG_Options('recently_updated_posts_title').'</h3></div>
<div class="posts_list_block_bg"><ul>'.$recently_updated_posts.'</ul></div>
</div>';
}
recently_updated_posts($num,$days);

?>

代码主要用于生成最近更新的文章列表,然后将其保存在名为 recently_updated_posts 的数据库字段里,你可以在 wp_options 数据表里找到它。主要是为了减少数据库查询量而设置的。

functions.php 文件修改

由于上面生成的文章列表以静态的形式保存在了 wp_options 数据表里,为了我们每次发布/更新文章后都能生成新的最新更新文章列表,需要清空原有 recently_updated_posts 字段信息并生成新的信息,所以需要将以下代码丢到主题的 functions.php 文件中,以确保每次发布/更新文章时都能清空 recently_updated_posts 的字段信息。

//新发表文章/修改文章时清空 recently_updated_posts 选项
function clear_rup_cache() {
    update_option('recently_updated_posts', ''); 
}
add_action('save_post', 'clear_rup_cache');

options.php 文件修改

由于博客目前使用的主题采用的 然后我们修改下主题下的 Options Framework 做的后台控制选项,所以我也基于此设置了对应的后台选项。当然其他主题直接修改 module_recently_updated_posts.php 文件中的代码以符合自己网站也是可以的。

// 首页最新更新文章列表
$options[] = array(
'name' => __('最新更新文章', 'QGG'),
'desc' => __('开启', 'QGG'),
'id' => 'recently_updated_open',
'std' => true,
'type' => 'checkbox');

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

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

$options[] = array(
'name' => __('最新更新文章-多少天外', 'QGG'),
'desc' => __('纯数字,多少天以外的文章更新后才显示。不明白?<a rel="nofollow" href="https://www.wuzuowei.net/link?url=aHR0cHM6Ly9ibG9nLnF1aWV0Z3VvZ3VvLmNvbQ==">点击这里</a> 进行留言。', 'QGG'),
'id' => 'recently_updated_posts_days',
'std' => 7,
'class' => 'mini',
'type' => 'text');

将以上代码丢到 options.php 文件中去即可,修改完成后应该会在主题后台看到如下选项:

控制前端显示代码
在主题的 index.php 文件中合适的位置插入如下代码,注意代码中的路径改成第一步中 module_recently_updated_posts.php 文件的实际路径。

<?php 
if( QGG_options('recently_updated_open') ){
include get_stylesheet_directory() . '/modules/module_recently_updated_posts.php';
}
?>

保存后台配置选项,刷新首页应该就能看到前端显示的内容了。

CSS 样式美化
默认的样式不太好看,这里简单美化一下,CSS 不合适的大家自行调整下即可。

/* 最新更新文章列表 */
.posts_list_block{
margin: 5px 0px; 
}
.posts_list_block_bg {
background:#FFF;
padding:1px 20px;
margin:10px 0px; 
border-radius:4px;
}
.posts_list_block_bg ul{
padding: 20px 10px;
list-style-position: inside !important; 
list-style: disc;
overflow: hidden;
}
.posts_list_block_bg li{
line-height: 24px;
white-space: nowrap; 
overflow: hidden; 
clear: both;
text-overflow: ellipsis;
}
.posts_list_block_bg ul>li>span{
color: #999;
font-size: 12px;
line-height: 24px;
float: right;
}

最后,为了避免复制代码导致的错误,上面所有用到的代码文后会提供下载。

cera aliyun tengxunyun cloudiplc

相关推荐

大前端wordpress主题618限时6.8折促销|其中xiu主题218元|热门的dux主题544元

大前端wordpress主题提供还是有多年时间了,同时也是维护时间较长的主题商家,比如14年发布的XIU主题现在还在维护、更新之中,而更早之前的热门wordpress主机D8也是维护之中,只是维护的频率不如DUX等更加热门的主题。在2020年618来临之际,大前端推送了最新的旗下wordpress主题限时6.8折,优惠之后DUX主题544元,XIU主题218元,D8主题168元,TOB主机266元等,相对于平时来说还是比较不错的,有打算需求的用户可以关注一下。 大前端主题不限制域名个人,只要是同一注册信息下的域名均可以使用,可以满足科技博客、个人站、各类图片、摄影展示站、企业站、淘宝客和各种展示站点!目前小七博客使用的就是XIU主题,也是使用期限最长久的一款主题,期间更换几次,最终还是使用这一款,便宜、实惠,可以满足自己的个人需求。 活动地址:大前端官网 活动时间:2020年6月11日-2020年6月18日; 活动内容: 旗下公开发行的wordpress主题6.8折折扣!

wordpress主题DUX修改熊掌号为站长平台快速收录

百度移动平台的熊掌号已经废了。至少一个月没有正常收录了。刚好百度站长平台又上线了一款叫“快速#收录#”的功能。简单查看了下。貌似就是熊掌号的替代品。目前如果需要使用快速收录,就得取消熊掌号的配额。 将熊掌号改为站长平台快速收录的方法非常简单。在站长平台快速收录处选择继承熊掌号配额即可。然后熊掌号的配额会归零。快速收录数量变为10,后续看自己提交量提升。 反正熊掌号已经没有用了,那就切换成快速收录把,没准有用呢! 下面简单介绍下wordpress的DUX主题,把熊掌号模块修改成快速收录。 1、找到主题文件夹下的“functions-xzh.php”。小白使用的是DUX 6.3 ,将“熊掌号 新文章发布时实时推送”下面的 $api = ‘http://data.zz.baidu.com/urls?appid=’. _hui(‘xzh_appid’) .’&token=’. _hui(‘xzh_post_token’) .’&type=realtime’; 修改为 $api = ‘http://data.zz.baidu.com/urls?site=’. _hui(‘xzh_appid’) .’&token=’. _hui(‘xzh_post_token’) .’&type=daily’; 2、到#dux##主题#后台熊掌号处替换 百度熊掌号 Appid 里内容填写为你的网址。举例小白的为:https://yangmaodang.org/ ,带/ 。 百度熊掌号 推送密钥 token内容填写 快速收录API中的token= 后面部分 不含&以及后面。 大功告成,实测可以自动推送到百度快速收录。 备注:切换后熊掌号会失去权益。如果你之前熊掌号收录还可以,暂时不要改。

WordPress DUX主题修改favicon.ico地址

默认WordPress会使用WP目录下的#favicon.ico#作为网站图标。今天就遇到个奇葩的IP,刷了我这个图标1万7千次。也不知道他想干什么。浪费流量。那么如何修改这个图标到图床呢?下面小白详细介绍下。 1、找到#主题#目录下的“header.php”,DUX 6.3版本,在第12行。 原来的: <link rel=”shortcut icon” href=”<?php echo home_url() . ‘/favicon.ico’ ?>”> 修改成 <link rel=”shortcut icon” href=”你的图标图床网址链接”> 2、保存下,如果服务器有#memcached#等缓存记得清一下。图标其实不一定要ico格式,PNG格式也是可以的。JPEG或者JPG都可以,看自己喜欢。使用的是PNG。 测试下是否成功,最好操作前备份一下。省的弄错了。

wordpress 主题如何添加百度自动推送|以提高站点新增网页发现速度

以前百度官方推出了链接自动提交的wordpress插件,可惜已经有相当长一段时间无法使用了,对于插件多了或多或少会影响网站打开的速度的。为了方便百度能够快速的提高站点新增网页的发现速度,可以添加链接提交百度自动推送代码,不管有没有效果,个人认为还是有必要添加一下的。下面的百度官方对于链接提交的解释: 1、链接提交说明 1. 链接提交工具是网站主动向百度搜索推送数据的工具,本工具可缩短爬虫发现网站链接时间,网站时效性内容建议使用链接提交工具,实时向搜索推送数据。本工具可加快爬虫抓取速度,无法解决网站内容是否收录问题 2. 百度搜索资源平台为站长提供链接提交通道,您可以提交想被百度收录的链接,百度搜索引擎会按照标准处理,但不保证一定能够收录您提交的链接。 2、链接提交分类与操作方法 可以分为自动提交与手动提交,在百度搜索资源平台(原百度站长平台),如下图   对于主动推送这个可以找相关的插件!这里小七选择的是自动推送,把以上的代码安装到要提交的页面</body>前,比如wordpress程序可以将上述JS代码粘贴到当前正在使用主题的footer.php文件的</body>前前即可。其他的程序可以参照这种方式添加即可。 说明:代码小七就不粘贴过来了,毕竟每个站代码是有一点点区别的;一定要选择当前网站哦! 如果觉得直接安装代码不美观,影响心情,可以创建名为“baidu_js_push.php”的文件,文件内容是上述自动推送JS代码;然后在需要的PHP模板页文件中的 <body> 标记后面添加一行代码: <?php include_once(“baidu_js_push.php”) ?>即可!这样看起来就美观一些!  

微信扫一扫,分享到朋友圈

WordPress主题首页添加最新更新文章列表功能