Old

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

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

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

67 comments

  1. zrqx008 zrqx008 Firefox 3 Firefox 3 Windows 7 Windows 7

    很不错的ideal

    沙发
  2. 万戈 万戈 Firefox 3 Firefox 3 Windows XP Windows XP

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

    板凳
  3. 万戈 万戈 Firefox 3 Firefox 3 Windows XP Windows XP

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

    地板
  4. ......
  5. 疾风 疾风 Firefox 3 Firefox 3 Windows 7 Windows 7

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

    21楼
  6. Vicia Vicia Opera 10 Opera 10 Windows 7 Windows 7

    又学到一样。 :wink:

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

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

    23楼
  8. Jinwen Jinwen Firefox 3 Firefox 3 Windows Vista Windows Vista

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

    24楼
  9. MOPVHS MOPVHS Google Chrome 4 Google Chrome 4 Windows XP Windows XP

    哇...好细节...

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

    为何要加置顶

    26楼
    • zwwooooo zwwooooo Firefox 3 Firefox 3 Windows 7 Windows 7

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

  11. 老饕 老饕 Firefox 3 Firefox 3 Windows 7 Windows 7

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

    27楼
  12. 朵未 朵未 Maxthon 3 Maxthon 3 Windows XP Windows XP

    :lol: 嘎嘎,收藏先。

    28楼
  13. 海天 海天 Google Chrome 6 Google Chrome 6 Windows XP Windows XP

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

    29楼
  14. WordPress日志置顶方法及添加置顶图片标志 | 李思章 - pingback on 2011/04/17/ 08:05
    30楼
  15. 向日葵媒体设计 向日葵媒体设计 Google Chrome 18 Google Chrome 18 Windows 7 Windows 7

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

    31楼

Leave a Reply