不知道是什么原因，WordPress没有自带文章浏览次数记录的功能，但是这样的插件还是很多的，因为我的主题叫People（大众脸），所以就挑了很多人用的WP-PostViews插件来制作我的热门文章展区，尽管我连文章都还没几篇……
上个图先
热门文章展区截图
如果你是直接浏览我的博客中的此文的话，是看不见这个展区的……我个人是认为如果你点击一篇文章之后是想关注其内容而非其他，浏览完毕之后可能还会想这文章不错看看还有没有别的，所以我设置了只有在其他页面才会展示这个展区。
WP-postviews插件提供了一个侧边栏小工具可供显示你网站上的热门文章，或者某个类别下的热门文章，你可以把它拖拽到侧边栏或底部边栏，它还提供了模板编辑，你可以*编辑这个小工具的html模板。但是这个小工具的模板只能配置一个，现在我需要放在侧边栏和顶部展区的热门文章有不同的展示形式，我希望在侧边栏的热门文章只显示标题和阅读次数，而顶部展区还需要显示文章摘要。这下要在代码里做手脚了。
1 |
### Function: Display Most Viewed Page/Post |
2 |
/**此函数原为get_most_viewed ，存在于wp-postviews.php中 被我复制到我主题的functions.php中 以便分开处理 |
3 |
* 按理说不该这样又增加一个方法的，但无奈我还不了解php语法什么的，修改原来的函数以达到我的目的太麻烦了
|
4 |
* 先就这样硬编码一个模板供我使用好了，只要在需要的地方调用此函数就能显示带摘要的热门文章了
|
5 |
*/
|
6 |
if(!function_exists('get_most_viewed_by_lizn_template')) {
|
7 |
//参数 $mode是说展示热门文章，热门页面，还是both，$limit 数量限制
|
8 |
//$chars 摘要的字数限制 这个变量也不好好命名搞的我要吐血了 为0的时候就是没有摘要，也不写注释
|
9 |
//害我调用的时候没传参数进来 搞不懂怎么我调用的摘要就显示‘…’而侧边栏小工具是正常的
|
10 |
function get_most_viewed_by_lizn_template($mode = '', $limit = 5, $chars = 0, $display = true) {
|
11 |
global $wpdb;
|
12 |
$views_options = get_option('views_options');
|
13 |
$where = '';
|
14 |
$temp = '';
|
15 |
$output = '';
|
16 |
if(!empty($mode) && $mode != 'both') {
|
17 |
$where = "post_type = '$mode'";
|
18 |
} else {
|
19 |
$where = '1=1';
|
20 |
}
|
21 |
$most_viewed = $wpdb->get_results("SELECT DISTINCT $wpdb->posts.*, (meta_value+0) AS views FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID WHERE post_date < '".current_time('mysql')."' AND$where AND post_status = 'publish' AND meta_key = 'views' AND post_password = '' ORDER BY views DESC LIMIT $limit");
|
22 |
if($most_viewed) {
|
23 |
foreach ($most_viewed as $post) {
|
24 |
$post_views = intval($post->views);
|
25 |
$post_title = get_the_title($post);
|
26 |
if($chars > 0) {
|
27 |
$post_title = snippet_text($post_title, $chars);
|
28 |
}
|
29 |
$post_excerpt = views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password,$chars);
|
30 |
//这里的html是我硬编码进来的，原来是读取用户配置的模板
|
31 |
$temp = stripslashes('<li><div class="widget"><h2 class="h2"><a href="%POST_URL%" title="%POST_TITLE%">%POST_TITLE%</a></h2><h5>%VIEW_COUNT% 次阅读</h5><p> %POST_EXCERPT% </p></div></li>');
|
32 |
$temp = str_replace("%VIEW_COUNT%", number_format_i18n($post_views), $temp);
|
33 |
$temp = str_replace("%POST_TITLE%", $post_title, $temp);
|
34 |
$temp = str_replace("%POST_EXCERPT%", $post_excerpt, $temp);
|
35 |
$temp = str_replace("%POST_CONTENT%", $post->post_content, $temp);
|
36 |
$temp = str_replace("%POST_URL%", get_permalink($post), $temp);
|
37 |
$output .= $temp;
|
38 |
}
|
39 |
} else {
|
40 |
$output = '<li>'.__('N/A', 'wp-postviews').'</li>'."\n";
|
41 |
}
|
42 |
if($display) {
|
43 |
echo $output;
|
44 |
} else {
|
45 |
return $output;
|
46 |
}
|
47 |
}
|
48 |
} |
然后我在主题的footer.php中调用以下代码在页面底部制造一个showcase区域，添加jquery和roundabout.js（一个jquery效果插件），还有我的展区处理代码。
1 |
<?php if ( !is_singular() ): ?>
|
2 |
<div id="showcase" class="showcase">
|
3 |
<div class="inner clearfix">
|
4 |
<ul id="display-list" class="list">
|
5 |
<?php get_most_viewed_list('both',5,200) ?>
|
6 |
</ul>
|
7 |
</div>
|
8 |
</div>
|
9 |
<script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/jquery-1.5.1.min.js"></script>
|
10 |
<script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/jquery.roundabout.js"></script>
|
11 |
<script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/display.js"></script>
|
12 |
<?php endif; ?>
|
展区处理代码
1 |
$(document).ready(function() {
|
2 |
var ROUNDABOUT = {
|
3 |
//展区ul的引用 后面的自动循环展示会频繁用到所以缓存下来
|
4 |
context : $('#display-list'),
|
5 |
//自动循环展示用setTimeout做的 这里存放其引用以便控制流程
|
6 |
displayTimeout : null,
|
7 |
//自动循环展示方法
|
8 |
display : function (){
|
9 |
//roundabout的api 以动画方式聚焦到前一个节点
|
10 |
this.context.roundabout_animateToPreviousChild();
|
11 |
ROUNDABOUT.displayTimeout = window.setTimeout(function (){
|
12 |
ROUNDABOUT.display();
|
13 |
},10000);
|
14 |
},
|
15 |
//开始自动循环，这里是为了延迟10s再开始自动循环
|
16 |
start : function (){
|
17 |
ROUNDABOUT.displayTimeout = window.setTimeout(function (){
|
18 |
ROUNDABOUT.display();
|
19 |
},10000);
|
20 |
},
|
21 |
init : function (){
|
22 |
this.context.roundabout({
|
23 |
startingChild : 1
|
24 |
});
|
25 |
//给文章块绑定鼠标hover处理，移入时取消自动循环，移出时等待10s再开始自动循环
|
26 |
$('.roundabout-moveable-item').hover(function (){
|
27 |
window.clearTimeout(ROUNDABOUT.displayTimeout);
|
28 |
},function (){
|
29 |
ROUNDABOUT.start();
|
30 |
});
|
31 |
//因为js处理之前这个showcase会占很大一部分空间，直接放在博客顶部会很难看
|
32 |
//而且用js处理后会有明显的变动，很突兀
|
33 |
//所以选择把这块放在最后，等js初始化完毕后再把showcase块插入到博客顶部
|
34 |
//hide先把整块隐藏了然后调用slideDown显示 效果比直接出现一块内容更好一点
|
35 |
//可惜在IE7中slideDown会造成展区错位，而在其他浏览器包括IE6中都有很好的效果
|
36 |
//因此不得不把show的效果改为fadeIn 视觉效果大打折扣哎……
|
37 |
$('#showcase').hide().insertAfter('#header').fadeIn('slow');
|
38 |
ROUNDABOUT.display();
|
39 |
}
|
40 |
};
|
41 |
ROUNDABOUT.init();
|
42 |
}); |
这样就搭出了基本结构。再配上直接抄袭roundabout主页demo的配色 -。- （我喜欢美观的设计和配色，可是我还不会配色，希望能在之后学习一下设计和美术什么的，以后就不用赤果果的抄袭了！）
1 |
.roundabout-holder { padding: 0; height: 240px;width:80%;margin:0 auto;}
|
2 |
.roundabout-moveable-item { |
3 |
padding: 20px;
|
4 |
width: 310px;
|
5 |
height: 210px;
|
6 |
width: 350px\9;
|
7 |
height: 250px\9;
|
8 |
cursor: pointer;
|
9 |
background: #E9E9E9;
|
10 |
background: -o-linear-gradient(90deg, #bbb 0%, #fcfcfc 100%);
|
11 |
background: -moz-linear-gradient(90deg, #bbb 0%, #fcfcfc 100%);
|
12 |
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #bbb), color-stop(1.0, #fcfcfc));
|
13 |
border: 1px solid #999;
|
14 |
} |
15 |
.roundabout-in-focus { cursor: auto; }
|
16 |
.roundabout-moveable-item .widget{width:100%;height:100%;overflow:hidden;}
|
这样就制作出一个热门文章展区了。做成插件什么的还不会，甚至集成到主题里都有困难，因为用到了第三方的插件。
希望能够得到大家的意见。
原文地址: 使用WP post view插件和roundaboutJS制作的博客热门文章展区