前两天有位网友向我询问DUX主题给最新发布的文章添加“NEW”标记的问题,网上有很多添加“NEW”图标的教程,但是直接拿到DUX主题上来并不适用,于是自己今天仔细看了下DUX主题的文件结构,经过几番周折终于实现了这一功能,现将具体实现方法记录如下希望可以帮助到同样需要此功能的小伙伴们。
此次主题修改主要是对 excerpt.php 与 single.php 两个文件进行了修改,在修改之前还是建议大家先备份一下这两个文件以避免由于操作失误引起的网站无法访问。
源码整理
对于WordPress添加New图标网上有很多相关代码,这里整理了一下目前我所见到的相对简洁高效的源码两例以方便其他主题用户使用,理论上来讲这两段代码适用于任何主题,代码主要是通过获取文章发布的时间来判断是否添加“NEW”标记。
文字版代码
<?php $t1=$post->post_date; $t2=date("Y-m-d H:i:s"); $diff=(strtotime($t2)-strtotime($t1))/3600; if($diff<24){echo "<em>New</em>";} //数字24表示文章发布24小时内的添加标记 else{echo "";} //如果超过设定的时间则显示为空白 ?>
图标版代码
<?php $t1=$post->post_date; $t2=date("Y-m-d H:i:s"); $diff=(strtotime($t2)-strtotime($t1))/3600; if($diff<24){echo "<img src='new.gif' />";} // new.gif为你上传的NEW图标地址 else{echo "";} ?>
代码完善
为了避免因时区不同而引起的时间误差,我们可以在上述代码中限制文章发布时间所依据的时间,对于国内用户来讲可在上述代码中添加如下代码设置为中国所处的时区即可:
date_default_timezone_set('PRC'); //调整默认时区为中国
图标上传
通过上述代码我们基本上可以了解实现最新文章添加NEW标记的原理了,下面我们即对DUX主题进行修改以实现最新文章添加 NEW 标记。首先我们需要自己制作一个 NEW 图标,或者你也可以从网上搜索一个 new.gif ,然后我们将这个图标上传至主题目录下,具体目录你可以根据自己喜好设置,这里我放在了新建的“/diy/img”文件夹下。
excerpt.php文件修改
DUX主题首页因为要实现禁止某一分类或者某一ID的文章显示以及文章显示模式等的判断,如果将这些代码全写入 index.php 文件中未免显得臃肿,所以主题作者对于首页文章列表的获取是通过 excerpt.php 文件来实现的,如果我们要想使得首页文章列表中显示 NEW 图标则需要编辑这个文件。在该文件下搜索下面这段代码:
echo '<h2><a'._post_target_blank().' href="'.get_permalink().'" title="'.get_the_title().get_the_subtitle(false)._get_delimiter().get_bloginfo('name').'">'.get_the_title().get_the_subtitle().'</a></h2>';
然后在其后添加如下代码:
date_default_timezone_set('PRC'); $t1=$post->post_date; $t2=date("Y-m-d H:i:s"); $diff=(strtotime($t2)-strtotime($t1))/3600; if($diff<72){ echo '<img src=" '.get_stylesheet_directory_uri().'/diy/img/new.gif"/>'; }
如此修改并上传文件后刷新首页应该就可以查看到如下效果了:
single.php文件修改
通过修改 excerpt.php 文件我们可以实现在首页上最新发布的文章添加NEW图标,但是当我们点击打开最新发布的文章后,在文章页面并不会再显示 NEW 标记,如果你也希望在文章页中显示这个标记可以通过修改 single.php 文件来实现,具体实现方法如下:
在 single.php 文件中搜索 <?php the_title(); ?> ,大概位置应该是文件的第12行,在这句代码的 a 标签后面添加下面这段代码即可:
<?php $t1=$post->post_date; $t2=date("Y-m-d H:i:s"); $diff=(strtotime($t2)-strtotime($t1))/3600; if($diff<72){ echo '<img src=" '.get_stylesheet_directory_uri().'/diy/img/new.gif"/>'; } // new.gif 替换成你的图片 else{echo "";} //时间超过时候显示空白 ?>
修改完成后文章页面显示效果如下:
好了,添加完上述代码基本上就可以实现最新文章添加 NEW 标记了,如果还有什么疑问可以在文章下方留言。需要注意的是,这里我将 new.gif 文件丢到了主题目录下的“/diy/img”文件夹下,如果你需要放在其他文件夹下则需要修改相关路径,同时这里我使用 get_stylesheet_directory_uri() 获取的当前主题的路径,你也可以将整个img标签的src地址改写成你的图标文件地址。
评论 (12)
如果要跟你一样代码是不是·要修改一下?同样的主题
博客有文章,搜一下。
标记的过期时间时多久?
代码中是3天(72h),你可以自定义为自己所需时间。
我需要跟你网站一样的怎么弄?
博客有文章,找一下。
博主有时间帮我看一下吗
看什么?
new文字版的样式显示不出来,置顶的样式显示出来了。
F12查看下原因
钟水洲博客来访,祝贵站2018快乐,不忘初心,一路坚持
欢迎来访,新的一年共同努力。