给置顶文章标题加个“置顶”提示图片

» 2010-04-12 69条评论

给置顶文章标题加个“置顶”(Sticky)图片:这是我这两天无聊给最新主题 zLEI 加的一个小功能,折腾过 WordPress 的朋友肯定会说很简单,但我逛了那么多博客,没发现有介绍这个小功能的文章,所以简单写出来给需要的朋友,并且解决一下日益严重的“文囧”问题。

不过真的很简单,因为 WordPress 内置了一个置顶文章的判断函数:is_sticky(),所以只要用它来判断哪篇文章置顶,然后加入图片的div,在css定义图片div的class即可。

效果请看我现在博客的首页置顶文章的日期旁边,或者如下图:(黄字sticky红底图片)

下面简单说一下方法

1. 当然制作图片啦,图片大小和样式根据自己的主题制作,这里拿我的置顶图片说明

图片大小:30×15(图中的 Sticky 即“置顶”)

图片命名:sticky.gif

把制作好的图片放在主题文件夹里面的 images 目录下

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

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

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

(top:0; 是图片距离post上边边距,left:17px; 是图片距离post左边边距)

3. 用文本编辑器打开主题文件 index.php

在类似 <div id="post-<?php the_ID(); ?>"> 下面加入下面代码

<?php if (is_sticky()) {echo '<div class="sticky-post"></div>';} ?>

ok,简单吧,无聊吧,那就玩玩吧。

zww
or
oooo

“给置顶文章标题加个“置顶”提示图片”有69条评论

  1. zrqx008 says:

    很不错的ideal

  2. 万戈 says:

    河南省新野县献华机械修理厂。。。。
    这spam在我那里也出现了,是人肉spam,还留着假邮箱,想骂回去都骂不着 :mad:

    1. 阿修 says:

      @万戈 我下午也收了俩!~~

    2. zwwooooo says:

      @万戈 汗~那些人真无聊,删了

  3. 万戈 says:

    另外,你这里的头像怎么不显示了?

    1. zwwooooo says:

      @万戈 图片服务器挂了,现已修好

  4. Justice says:

    img 子域名下的都挂了?

    1. zwwooooo says:

      @Justice 对,已经修复了

    2. Justice says:

      @zwwooooo 我那里其实有这个功能...只不过没有置顶的文章 =.=

    3. zwwooooo says:

      @Justice 置顶是wp自带的,只是样式要主题设置

  5. Kars says:

    图挂了?

    1. zwwooooo says:

      @Kars 哈哈,服务器挂了

    2. Kars says:

      @zwwooooo _( ̄0 ̄)_[哦~]~

  6. A.shun says:

    。。。
    沙发没了 :!: :!: :!: :!: :!: :!:

  7. A.shun says:

    挺简单的,下次折腾折腾

    1. zwwooooo says:

      @A.shun 非常简单

  8. 阿修 says:

    呃,给stickypost加图片,这样发文也可以……
    and. imzww.com被墙了?

    1. zwwooooo says:

      @阿修 嘻嘻,其实很少博客这样做,我写写玩儿

    2. 阿修 says:

      @zwwooooo 中国联通,还是看不到文章的图……

    3. zwwooooo says:

      @阿修 此文章的图丢了,现在已经重新上传了

  9. yun77op says:

    <div id="post-" >
    The function post_class() outputs the class="sticky" piece for posts marked as sticky posts.

    1. 阿修 says:

      @yun77op 我记得要把post_class()加入到这一行才行

    2. yun77op says:

      @zwwooooo 不知怎的,截断了;我说用post_class()就会为置顶贴自动加上"sticky"类的

    3. zwwooooo says:

      @yun77op wp本来就会自动加上sticky这个class的,所以主题作者可以在css里面定义sticky的样式。(向我置顶主题的文章标题和背景颜色)
      截断了是因为评论不允许直接贴php函数——要转换为html码才行。

  10. 帅哥 says:

    图片失效了。。

    1. zwwooooo says:

      @帅哥 现在已经好了

  11. 你真是能钻研

  12. Timothy says:

    ZWW同学WP功底越来越强了……

    1. zwwooooo says:

      @Timothy 玩多了就稍微熟悉了

  13. 龙崽 says:

    麦斯不难嘛 :razz:

    1. zwwooooo says:

      @龙崽 对,非常简单,简单的文章是用来凑数的 :mrgreen:

  14. laofan says:

    是很简单,可是现在我却没有折腾的心境了

    1. zwwooooo says:

      @laofan 没有心情就以后吧

  15. 郑永 says:

    是的,我也刚发了一篇,哈哈。。凑个数。

    1. zwwooooo says:

      @郑永 哈,大家凑凑数,不过文章还是有用的,起码不是水文

  16. young says:

    我也想发一贴,凑个数 :razz:

    1. zwwooooo says:

      @young 凑数可以,但不要老是发水文 :mrgreen:

  17. 苏扬 says:

    越是看你们这些文章 我就越有优越感 因为我用PJ

    1. zwwooooo says:

      @苏扬 没有,这个是给主题新手用的,不是一般写文章的用户。

      说实在的PJ的评论方式我不喜欢

  18. 球犯 says:

    最新文章加个"NEW"的图片还是蛮有味的~

    1. zwwooooo says:

      @球犯 明天写一下方法,我的方法和目前网上的不同

    2. winy says:

      @zwwooooo 嗯,搬个板凳等

  19. 集趣 says:

    加个标记,非常的醒目

    1. zwwooooo says:

      @集趣 细节问题

  20. GEZ鸽子 says:

    不错!挺明显的!

发表评论

昵称 *

网址

B em del U Link Code Quote