WordPress新手问答(四)

在 2009-04-22 发布于 网站相关 下以来已有42,193人读过本文 | 26条评论 发表评论

转眼间,时间又过去了数天,WordPress新手问答系列却一直停滞不前。其实也有些原因,一方面是因为 月夜 最近实在太忙,抽不出时间思考;一方面是为了接下来的内容,必须先介绍一下WordPress的相关函数,也就是侧边栏函数,正是前文用好WordPress不可不知的函数(四);当然,其实最重要的原因还是经过前面数文的演绎,最近突然没有了话题,不知道从何写起。不过今天,我还是找到了一个可供写作的内容,而且这一内容不少,估计只一个问题就可以写一篇博文出来了。

十、问:我看到在你博客上每篇文章都有一个阅读数量计数,如下图:

请问是怎么实现的呢?能给我们介绍一下吗?

答:在每篇文章上添加一个这样的计数,一方面可以为我们自己写博提供一个参考,另一方面也可以为访客朋友们提供一些信息,方便他们在我们的博客上寻找比较受欢迎的文章。

其实这样的功能是通过一个叫做WP-PostViews的插件实现的。插件的下载和安装方法我们在此就不再赘述了,你可以Google搜索一下,然后进行下载并安装。

但是,安装好插件以后,阅读次数并不会直接被显示出来,你还需要在需显示数值的WordPress模板中插入显示数值的代码。该插件用来显示阅读次数的代码如下:

<?php if(function_exists(‘the_views’)) { the_views(); } ?>

我们只需将上面这句代码插入到需要显示阅读次数的模板的适当位置就可以了。如月夜的选择一样,通常,我们需要在如下几个地方显示该数值:

1.首页,也就是模板的index.php文件;

2.单文章页,也就是模板的single.php文件;

3.文章归档页面,即模板的archive.php文件(或archives.php文件);

4.其他的一些页面,即page.php文件;或者留言板等页面,即guestbook.php文件。

找到需要修改的文件之后,接下来我们就可以动手添加代码了。

首先,月夜需要说明的一点是,以上需要修改的几个文件中,需要修改的地方大体相同,在以下的说明中,我们只以修改模板中的index.php为例;至于修改其他文件,比如single.php等,请仿照index自己试着修改。

而且,因为各种模板各不相同,所以,添加代码的地方和方式总有不同。不过无外乎以下几种方式:

1.如月夜使用的bbtheme主题:

我们可以在index.php中找到如下代码块:

<div class=”desc”><ul><li class=”post-date”><?php the_time(‘Y-m-d’); ?></li><li class=”post-cats”><?php the_category(‘, ‘) ?></li><li class=”post-comments”><?php comments_popup_link(‘没有评论’, ‘1条评论’, ‘%条评论’); ?></li></ul> <?php edit_post_link(‘编辑文章’, ”, ”); ?></div>

与此对应的前台界面如下图:

显然,我们可以找到如上代码中对应上图各项的部分;比如<li class=”post-date”><?php the_time(‘Y-m-d’); ?></li>对应其中的日期,<li class=”post-comments”><?php comments_popup_link(‘没有评论’, ‘1条评论’, ‘%条评论’); ?></li>对应其中的评论数量,等等。我们可以将阅读次数添加到分类和评论数量之间,而且,因为其中显示的几项内容都是在<li>标签中显示,所以,我们也应将阅读次数放到<li>标签中添加,最终添加的代码如下:

<li class=”post-views”><?php if(function_exists(‘the_views’)) { the_views(); } ?></li>

将其放到代码中<li class=”post-comments”><?php comments_popup_link(‘没有评论’, ‘1条评论’, ‘%条评论’); ?></li>之前即可。

但,接下来还需修改CSS文件,因为如上添加的代码中有class=”post-views”一项。在style.css文件中找到如上与post-views并列的post-date、post-cats等诸项,以及其父项desc,进行相应的修改即可。

其实,即使不修改CSS文件,阅读次数也会正常显示;修改CSS文件的目的,主要还是为了美观,比如设置各项之间的空隙,以及其前的图标,等等。

2.如iNove主题:

在iNove主题文件夹下的index.php文件中,我们可以找到和上面主题对应的如下代码:

<div class=”info”>
<span class=”date”><?php the_time(__(‘F jS, Y’, ‘inove’)) ?></span>
<div class=”act”>
<span class=”comments”><?php comments_popup_link(__(‘No comments’, ‘inove’), __(‘1 comment’, ‘inove’), __(‘% comments’, ‘inove’)); ?></span>
<?php edit_post_link(__(‘Edit’, ‘inove’), ‘<span class=”editpost”>’, ‘</span>’); ?>
<div class=”fixed”></div>
</div>
<div class=”fixed”></div>
</div>

在如上代码中,各项意义十分明显,比如,<span class=”date”><?php the_time(__(‘F jS, Y’, ‘inove’)) ?></span>表示文章发布的日期;<span class=”comments”><?php comments_popup_link(__(‘No comments’, ‘inove’), __(‘1 comment’, ‘inove’), __(‘% comments’, ‘inove’)); ?></span>表示文章的评论数量;等等。

与上类似,我们可以将代表文章阅览次数的代码(因为并列的各项均包含在<span>中):

<span class=”postviews”><?php if(function_exists(‘the_views’)) { the_views(); } ?></span>

添加到评论和日期之间,将阅览次数显示在适当的位置。

添加代码之后,我们还是需要去修改style.css文件,来修改阅览次数的显示样式。月夜的修改如下:

首先找到文件中的如下代码部分:

.post .date,
.post .tags,
.post .author,
.post .categories,

在其中添加一行代码:.post .postviews,

然后在代码接下来的部分中添加如下的代码小块:

.post .postviews {
background-position:0 -16px;
float:left;
}

当然,如果你要修改阅读次数前的小图标,则需要修改如上的background-position:0 -16px;属性的数值,将-16修改为你想要的内容。

3.如其他各种主题:

其他各种主题的修改也都大体与此类似,大致程序如下:

1) 首先在模板中找到与前台对应的需要插入阅读次数的位置的代码;

2) 将代码<?php if(function_exists(‘the_views’)) { the_views(); } ?>进行适当修改后插入;

3) 在CSS文件中添加该代码部分的样式控制。

最后说一点,可能默认的WP-PostViews插件输出的阅读次数样式和月夜的不同,只需进入WordPress后台,打开WP-PostViews插件的设置面板,如下图:

适当设置其中的Views Template选项,即可得到自己想要的样式,比如设置为“这篇文章得到%VIEW_COUNT%人追捧”,即可实现自己的个性化效果。

26条评论

  1. 虎皮鲨
    2009/06/16 10:29:52

    2.8能用这个么?我还没有升级呢。先问好了再说

    回复评论

  2. kramon
    2009/05/02 15:48:30

    如果你要修改阅读次数前的小图标,则需要修改如上的background-position:0 -16px;属性的数值,将-16修改为你想要的内容。

    这个数值对应的是什么呢?

    回复评论

    kramon 说:

    我也就是想知道,怎样添加前面的那个小图标.

    回复评论

    admin 说:

    背景图片的位置,根据位置的不同,可以显示背景图片上的不同小图标。

    回复评论

    kramon 说:

    我再研究下..多谢指点.

    回复评论

  3. […] 其实今天的第五部分和前文第四部分WordPress新手问答(四)中所讲述的内容顺序有些颠倒,应该首先阅读此部分的内容,再去阅读前文的知识。不过因为影响不大,所以即使顺序有所错位,但并不耽误你的学习和使用。 […]

  4. Showfom
    2009/04/23 17:41:18

    嗯,(*^__^*) 嘻嘻……海洋可以做WordPress老师了哈哈

    回复评论

    admin 说:

    其实,WordPress需要的东西太多了。。我哪有这个能力啊。。我只是随便写写而已。。

    回复评论

  5. Music姐姐
    2009/04/23 13:54:46

    解释得非常非常仔细,赞!

    回复评论

  6. 篮球博客
    2009/04/23 10:35:13

    good! 学到了…

    回复评论

  7. 敏锐的眼睛
    2009/04/23 00:31:57

    嘿嘿 就等着你的更新呢 又学到了点。

    回复评论

    admin 说:

    呵呵。。谢谢支持。。

    回复评论

  8. Sure
    2009/04/22 22:35:05

    学习了。你的文章总是条理清晰,我得学学了……

    回复评论

    admin 说:

    我的博文哪有你说的那样啊。。庞杂、废话比较多。。呵呵。。只适合新手入门。。

    回复评论

  9. 歪歪屋啊
    2009/04/22 22:30:47

    我也去搞个,说实话,如开头所说
    果然一个问题就一篇文章~~

    回复评论

    admin 说:

    呵呵。。是的,这个问题叙述的比较繁杂主要还是怕有朋友知识不牢。。然后就不知道怎么去做。。
    当然,如果高手的话,也不会来这里读了。。呵呵。。

    回复评论

  10. 各种虾米
    2009/04/22 20:58:03

    海洋的文章实用性很高啊

    回复评论

    admin 说:

    谢谢小虾米。。不过只适合新手入门,对如你般的高手就显得太浮浅了。。哈哈。。

    回复评论

  11. 我很卡
    2009/04/22 20:55:19

    感谢之至,无以言表,月夜笑纳。

    回复评论

    admin 说:

    客气了。。希望你能尽快解决问题。。

    回复评论

评论分页: 1 2

发表评论

您的昵称 *

您的邮箱 *

您的网站