2010年04月14日 93条评论

给最新的文章标题加个“NEW”提示图片

经常来我博客的朋友应该发现我博客的最新一篇文章的标题上会显示“NEW”提示图片,这个跟我前天的文章《给置顶文章标题加个“置顶”提示图片》是差不多的功能,但实现方法不同,而且跟万戈折腾的用文章发表时间跟现在时间相比较来判断的方法不同,我还记得QiQiBoy也写过类似功能的文章。

我的方法是通过调用最新文章代码提取最新的那篇文章 ID 和主页文章列表的文章 ID 比较来判断

下面是实现方法:

1. 当然是做个提示用的“NEW”图片,具体自个画吧,我这里说明的图片大小为:20×15,做好的图片放在主题所在目录的 images 文件夹里面

2. 设置显示图片位置的 css,这里我用名为 new-post 的 class 来定义,我用绝对位置,css 参考如下

(假如你的文章区是用 post 这个 class,所以记得在 post 这个 class 加个 position:relative; 属性)

.post .new-post{
position:absolute;
top:0;
left:17px;
width:20px;
height:15px;
background:url("images/new-post.gif") no-repeat 0 0;
}

3. 打开主题文件 index.php

找到 <?php if (have_posts()) : while (have_posts()) : the_post();?> ,在其上面加入以下代码

<?php
$myposts = get_posts('numberposts=1&offset=0&category=0');
foreach($myposts as $post) : setup_postdata($post);
$newpostid = get_the_ID();
endforeach;
?>

这段代码是取得最新一篇文章的 ID 赋值给 $newpostid 变量

4. 继续修改 index.php

在<div class=post></div>之间加入以下代码

<?php
$postid = get_the_ID();
if ($newpostid == $postid) {echo '<div class="new-post"></div>';}
?>

这段代码是把首页显示的文章 ID 逐个跟第 3 步取得最新文章 ID 的 $newpostid 对比,唯一相同 ID 文章添加 NEW 图片标示

效果看我博客首页/如下图

OK,搞定,同样是细节小功能,而且是可要可不要或者说多此一举的折腾,玩玩吧。

目前只用在我现在所使用的 zLEI 主题里面,不知道此方法是否“太老土”,如果各位朋友有更好的方法欢迎指教。

zww
or
oooo

“给最新的文章标题加个“NEW”提示图片”有93条评论

  1. Kars says:

    沙发~

  2. A.shun says:

    板凳~

  3. A.shun says:

    文囧到这种地步, :cool: 就不能和前面那篇一起写么

    1. zwwooooo says:

      @A.shun - - 我懒 + 文囧

  4. 阿修 says:

    我以为和添加sticky是一篇,仔细一看,这不新文章嘛~ :evil: 分开写多点是不?

    1. zwwooooo says:

      @阿修 嘘!知道就好,别说出来 :wink:

  5. 帅哥 says:

    利用CSS定位+文章ID完成,找个好看点的new图片换上,那图片不怎么好看 :razz:

    1. zwwooooo says:

      @帅哥 嘻嘻,根据自己喜好做吧, 我懒,用简单的

  6. 万戈 says:

    是个新方法,不错呀

    1. zwwooooo says:

      @万戈 哈,玩儿

  7. QiQBoY says:

    不同的方法,相同的目标。。 :lol: :lol: :lol:

    1. zwwooooo says:

      @QiQBoY 多个方法好 :mrgreen:

  8. 不错 就是我没有尝试!

    1. zwwooooo says:

      @风云春秋博客 有兴趣才去尝试吧

  9. alswl says:

    我是关闭.cn,原来的文章都在.com,需要修改的是Feed,嘿嘿~麻烦啦~

    1. zwwooooo says:

      @alswl 呃~难道我今天跑到你那cn那里去了 :arrow:

  10. 加个new有好处吗????

    1. zwwooooo says:

      @电话交换机 没有好处,喜欢就加

  11. 对讲机 says:

    呵呵,加new!!!!

  12. pazz7ven says:

    最前面不就是最新的文章吗
    哈哈 不折腾你累啊 :mrgreen:

    1. zwwooooo says:

      @pazz7ven 文章说了“可要可不要或者说多此一举的折腾”,你就当作花俏一下主题好了

  13. Lazyyyyyyyyyyyyyyyyy says:

    如果想显示在标题右上角呢?

    1. zwwooooo says:

      @Lazyyyyyyyyyyyyyyyyy left:17px;
      改为
      right:17px;

      17px根据自己的主题设定

    2. Lazyyyyyyyyyyyyyyyyy says:

      @zwwooooo
      明白了~谢谢~
      哪天把主题改得差不多了就弄这个折腾一下,呵呵~

  14. GEZ鸽子 says:

    小Z的沙发总是抢不到!哎~~~

    1. zwwooooo says:

      @GEZ鸽子 呃~我的文章现在一般在19:30发布,一般人我不告诉他 :mrgreen:

    2. Lazyyyyyyyyyyyyyyyyy says:

      @zwwooooo
      昨天的19:30你没发布……

    3. zwwooooo says:

      @Lazyyyyyyyyyyyyyyyyy 我是说有文章的话 :grin:

  15. 久酷 says:

    :mrgreen: :mrgreen: 大叔以后开发插件吧,看你整天挺闲的 :mrgreen:

    1. zwwooooo says:

      @久酷 我不会,没折腾过 :mrgreen:

  16. 久酷 says:

    刚开始我以为这篇文章跟上篇文章重复了呢.

    1. zwwooooo says:

      @久酷 本来是一起写的,但上篇写到一半就忙其他事先发表了

  17. Louis Han says:

    这样就好多了

  18. 球犯 says:

    嘿嘿,确实不一样,和我之前的一些想法类似,学习了~

    1. zwwooooo says:

      @球犯 话说你好久没更新了

    2. 球犯 says:

      @zwwooooo
      嘿嘿,忙着一大堆学习任务呢~ :lol:

    3. zwwooooo says:

      @球犯 学业为重

  19. 苏扬 says:

    继续表示围观!

  20. diyidu says:

    哎,可惜我不是用WP...

回复给 QiQBoY ¬
取消回复

昵称 *

网址

B em del U Link Code Quote