You are here: Home » All Categories » WordPress » WP Trick » 给置顶文章标题加个“置顶”提示图片

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

Apr 12th, 2010 19:30 | Leave a comment?(65) Go to comments

给置顶文章标题加个“置顶”(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,简单吧,无聊吧,那就玩玩吧。

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25133

Filed under

WP Trick

| Tags:

,

Related Posts

Most Popular

65 Comments.

⊕Leave a comment?
  1. 疾风 疾风 Firefox 3.6.3Windows 7

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

    21楼
  2. Vicia Vicia Opera 10.51Windows 7

    又学到一样。 :wink:

    22楼
  3. 托尔·银月 托尔·银月 Firefox 3.6.3Windows XP

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

    23楼
  4. Jinwen Jinwen Firefox 3.6.3Windows Vista

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

    24楼
  5. MOPVHS MOPVHS Google Chrome 4.1.249.1045Windows XP

    哇...好细节...

    25楼
  6. 对讲机 对讲机 Internet Explorer 6.0Windows XP

    为何要加置顶

    26楼
    • zwwooooo zwwooooo Firefox 3.6.2Windows 7

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

  7. 老饕 老饕 Firefox 3.6.3Windows 7

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

    27楼
  8. 朵未 朵未 Maxthon 3.0.8.11Windows XP

    :lol: 嘎嘎,收藏先。

    28楼
  9. 海天 海天 Google Chrome 6.0.447.0Windows XP

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

    29楼

Leave a Reply


Trackbacks and Pingbacks: