如何在wordpress中置顶精华文章？

上一篇：palm or wm？下一篇：大腕(中国移动版)

如何在wordpress中置顶精华文章？

2008年09月23日 | 18:20分类：wordpress | 标签：wordpress | 浏览: 1,337

很多博主有这样的烦恼，一些精华文章随着时间流逝而慢慢沉底，那在wordpress中如何将这些精华文章置顶呢，就像论坛的置顶文章一样？答案是肯定的，一种方法是通过WP-sticky这个插件，不过功能有限，仅能对一篇文章进行置顶，我们不做深究；另一种方法就是手工调整源代码了，在页面中增加“精华文章区块”，废话少说，先来看看效果图：

这个截图来自于http://www.geekishblog.com/，博主用的是Organic这个主题，该主题的sidebar.php里有一个包含两个标签页的区块，第一个标签页的内容是Recent Post，第二个是Recent Comments，接着再通过样式表和tabber.js这个类来实现ajax的效果，那我们也可以利用它做一个“精华文章区块”来放置精华文章。先下载tabber.js

一、解压到主题根目录下

压缩包里面有多个示例文件和两个js文件，还有一个样式表，将tabber-minimized.js和exmaple.css解压到主题的根目录下，并重新命名为tabber.js和tabber.css。

说明：两个javascript文件的内容完全一样，tabber-minimized.js是tabber.js的优化版本，文件尺寸小，能加速网页的浏览速度。另外，这是一个遵循GPL的自由软件，用户可以免费使用。

二、修改header.php

标签页的效果是利用无序列表+CSS+javascript来实现的，因而在header.php中指定这两个文件的URL。

<link media="screen" href="&lt;?php echo bloginfo(stylesheet_directory). '/tabber.css'; ?&gt;" type="text/css" rel="stylesheet" /> 
<script type="text/javascript" src="&lt;?php echo bloginfo(stylesheet_directory) .'/tabber.js'; ?&gt;"></script>

bloginfo是wordpress的函数，stylesheet_directory是bloginfo的参数，整个语句的意思是构造tabber.js的绝对路径，这样用户的浏览器就可以正确的下载该文件了。最后加上这段：

<script type="text/javascript">
   document.write('<style type="text/css">.tabber{display:none;}<\/style>'); 
</script>

默认情况下浏览器会在tabber类加载前优先显示标签页的内容，这会影响影响用户的体验，这段代码的作用是保证tabbe类加载之后方显示“精华文章区块”。

三、确定“精华文章区块”位置

在网页的哪个位置放置“精华文章区块”呢？这个问题还蛮挺重要的，很多主题都将类似的功能区块放在右边栏，因为这样有利于用户导航，而本网站使用的是ProSense这个主题，侧边栏的位置大小有限，所以把它放在第一和第二篇文章之间，这样也能醒目展示“精华文章”。

下面是ProSense主题中index.php的源代码：

<?php if (have_posts()) : ?> 
   <?php $count = 1 ?>
   <?php while (have_posts()) : the_post(); ?> 
      <div class="post" id="post-<?php the_ID(); ?>"> 
         显示文章 
      </div><!-- post end--> 
      <?php if ($count==1) {  ?> 
         <div>
            精华文章区块 
         </div><!--在第一篇文章之后显示“精华文章区块” --> 
      <?php } ?> 
   <?php endwhile; ?> 
   <div class="navigation"> 
      显示导航链接 
   </div> 
<?php else : ?> 
   显示目前无文章 
<?php endif; ?>

整段代码的意思是：如数据库有文章则使用while……endwhile这个循环将所有文章显示出来，加入计数器count，当count=1时插入“精华文章区块”（亦即第一篇文章之后）。关键语句就是跟计数器相关的两句：

<?php $count = 1 ?> 
...
<?php if ($count==1) { 显示精华文章区块 } ?>

依葫芦画瓢，只要将这两句加入到您到index.php就可以了，切记将第一句放在while之前，第二句放在while和endwhile之间。

四、添加精华文章

alfie的精华文章内容如下：

<div class="tabber">
  <div class="tabbertab">
     <h2>最新文章</h2>
      <ul>
        <?php
          $recentposts = new WP_query();
          $recentposts->query('showposts=5&amp;orderby=date&amp;order=DESC');
        ?>
        <?php while ($recentposts->have_posts()) : $recentposts->the_post(); ?>
          <li>
              <a href="&lt;?php the_permalink() ?&gt;"><?php the_title() ?></a>
              <span><?php if(function_exists('the_views')) { the_views(); } ?> | <?php comments_popup_link('发表评论', '1 条评论?', '% 条评论?'); ?> | <?php the_time('Y-m-d') ?></span>
 
        <?php endwhile; ?>
      </li></ul>
  </div>
  <div class="tabbertab">
     <h2>精品推荐</h2>
     <ul>
      <li>该功能未完工，请耐心等候。
    </li></ul>
  </div>
</div>

为了方便日后的维护，alfie将这部分内容单独放入一个文件(suggestions.php)，index.php里只需要简单的include它就可以了。于是在index.php中:

<?php if ($count==1) { include('suggestions.php'); } ?>

五、修改样式表

对应的样式表是tabber.css，读者需要自行修改之，以使该区块能跟整个网页的风格相协调。www.linuxabc.net.cn的tabber.css如下：

----clip---- 
/*-------------------------------------------------- 
ul.tabbernav = the tab navigation list 
li.tabberactive = the active tab 
--------------------------------------------------*/ 
ul.tabbernav { 
   margin:0; 
   padding: 3px 0; 
   border-bottom: 1px solid #663200; 
   font: bold 14px Verdana, sans-serif; 
} 
 
ul.tabbernav li { 
   list-style: none; 
   margin: 0; 
   display: inline; 
} 
 
ul.tabbernav li a { 
   padding: 3px 0.5em; 
   margin-left: 3px; 
   border: 1px solid #663200; 
   border-bottom: none; 
   background: #FBF5DF; 
   text-decoration: none; 
} 
 
ul.tabbernav li a:link { color: #CC3300; } 
ul.tabbernav li a:visited { color: #663320; } 
 
ul.tabbernav li a:hover { 
   color: #CC3300; 
   background: #EDE0B3; 
   border-color: #663200; 
} 
 
ul.tabbernav li.tabberactive a { 
   background-color: #EDE0B3; 
   border-bottom: 1px solid #EDE0B3; 
} 
 
ul.tabbernav li.tabberactive a:hover { 
   color: #CC3300; 
   background: EDE0B3; 
   border-bottom: 1px solid 663200; 
} 
 
/*-------------------------------------------------- 
.tabbertab = the tab content 
Add style only after the tabber interface is set up (.tabberlive) 
--------------------------------------------------*/ 
.tabberlive .tabbertab { 
   padding:5px; 
   border:1px solid #663200; 
   border-top:0; 
   font-size: 12px; 
   background: #EDE0B3; 
} 
 
.tabberlive .tabbertab ul li { 
   display: block; 
   color: #CC3300; 
   border-bottom:1px dotted #bbb; 
   padding-left:20px; 
   padding-top:2px; 
   padding-bottom:2px; 
   background: url(images/star.gif) no-repeat left 1px; 
   line-height: 1.4em; 
} 
 
.tabberlive .tabbertab ul li span{ 
   display: block; 
   color: #663200; 
} 
----clip----