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

» 2010-04-12 67条评论

给置顶文章标题加个“置顶”(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

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

  1. 疾风 says:

    :mrgreen: 恩 挺好看的 呵呵~·

  2. Vicia says:

    又学到一样。 :wink:

    1. zwwooooo says:

      @Vicia 嘻嘻,小小折腾下

  3. 五蛋大大,我博客挂逼了~~~居然说我“错误:无效用户名”~~但是找回密码又能找得到~诡异啊~

    1. zwwooooo says:

      @托尔·银月 呃~给攻击了?还是数据库出错了?

    2. @zwwooooo 不知道啊~~~很费解~~~

  4. Jinwen says:

    在向博客精细化发展了,大爱 :razz:

    1. zwwooooo says:

      @Jinwen 又开始懒了,所以就小修小改一下

  5. MOPVHS says:

    哇...好细节...

    1. zwwooooo says:

      @MOPVHS 这个的确够细了

  6. 对讲机 says:

    为何要加置顶

    1. zwwooooo says:

      @对讲机 因为这个是主题功能,很多主题没有提示“置顶”文章,而且很多来访这以为你一直没更新 - -

  7. 老饕 says:

    呵呵~PHP是简单~不过css就不会写了

    1. zwwooooo says:

      @老饕 呵呵,css稍微学一下就懂了

  8. 朵未 says:

    :lol: 嘎嘎,收藏先。

  9. 海天 says:

    有直接制定判断代码啊 加上小标志 不错~

    1. zwwooooo says:

      @海天 这个不耗资源,当然也是可有可无的

  10. WordPress日志置顶方法及添加置顶图片标志 | 李思章 says:

    [...] 备注:本文的方法特适用于WP默认主题的扩展版本的使用,如果你的主题完全自定义,请移步:ZWW的教程。 [...]

  11. 有米有把置顶文章的字样调出来的功能,后台只能设置置顶功能。

回复给 Justice ¬
取消回复

昵称 *

网址

B em del U Link Code Quote