WordPress 给最新文章和置顶文章添加new和top图标

WP教程 欲思 9评论

wordpress发布文章一般类型是置顶或者在默认正常。如果在置顶文章或者是24小时内最新发布的文章标题加上相应的图标,不仅可以增加美观,也可以提高用户浏览网站的点击率。网上有各种漂亮的图标大家可以自己去搜一下。然后上传网站替换下面代码的图片路径即可。

WordPress 给最新文章和置顶文章添加new和top图标
添加最新文章图标方法一:

<?php
function add_title_icon($title)
{
global $post;
$post_date=$post->post_date;
$current_time=current_time('timestamp');
$diff=($current_time-strtotime($post_date))/3600;
$title_icon_new=get_bloginfo('template_directory').'/images/new.gif';
if($diff<24)
{
$title='<img src="'.$title_icon_new.'" />'.$title;
}
return $title;
}
add_filter('the_title','add_title_icon',999);
?>

把以上代码插入在主题文件夹的 functions.php 里就行了,可以修改代码中的24为你想要的数值,则超过规定的时间后图标就会自动消失。

再把 new.gif 图片文件上传到当前主题的images目录下面即可。

添加置顶文章图标方法:

<?php
function add_top_title_icon($title)
{
    global $post;
    $title_icon_top=get_bloginfo('template_directory').'/images/top.gif';
    $sticky = get_option('sticky_posts');
    if($sticky)
    {
    $title=in_array($post->ID,$sticky)?'<img src="'.$title_icon_top.'" />'.$title:$title;
    }
    return $title;
}
add_filter('the_title','add_top_title_icon',999);
?>

使用方法如同添加new图标代码。

用了以上代码后,如果页面列表里的链接也加上了和标题一样的new图标,可以添加以下代码解决:

function strip_page_icon_html($content) 
{
        $content = preg_replace('@<img(\s?)src=(.*?)(\s?)\/>@','',$content);
        $content = preg_replace('@<img(\s?)src=(.*?)(\s?)\/>@','',$content);
        return $content;
}
add_filter('wp_list_pages','strip_page_icon_html',1000);

加上修正代码以后,一切应该正常显示了。

添加最新文章图标方法二:

<?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="'.get_bloginfo('template_directory').'/images/new.gif" alt='24小时内最新' />';}
?>

把这段代码加到需要的地方就行,比如 single.php 中的 <?php the_title(”); ?> 前。

PS:比较一下方法一和方法二的区别,方法一用到了 hook,也就是钩子,打击面一大片,比如说首页和内页的正文标题处、侧边栏的最新文章、甚至是后台控制板编辑文章的标题前也会自动添加 NEW 小图标;而方法二只是在需要的地方添加。

转载请注明:欲思博客 » WordPress 给最新文章和置顶文章添加new和top图标

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (10)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(9)个小伙伴在吐槽
  1. 这个教程很实用,非常不错,学习了;
    楚盟2016-02-08 17:13 回复
  2. 可以分享那两个图标吗0.0
    Hstb2016-01-02 01:03 回复
  3. 能不能写下如何在指定分类文章标题上添加小图标?非常感谢!
    路飞2015-12-05 00:27 回复
  4. 对于用户的体验很有用的。。
    夏日博客2014-05-27 17:18 回复
    • 是的
      欲思博客2014-05-27 17:46 回复
      • 很想知道那一篇给多说加UA识别怎么弄,看了鸡不生蛋的教程,还是没弄出来,太笨了,哈哈
        蠢蛋小丑魚2014-05-27 22:27 回复
        • http://yusi123.com/2917.html已经写的很详细了。看不懂?
          欲思博客2014-05-27 22:50 回复
          • 都看了,原作者的站也看了,但是实现不了,回复的时候可以显示UA,刷新之后就没了,
            蠢蛋小丑魚2014-05-27 22:52
          • 不知道你是不是代码放位置和先后有问题。
            欲思博客2014-05-28 00:18