不知道是什么原因,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( 90 deg, #bbb 0% , #fcfcfc 100% );
|
11 |
background : -moz-linear-gradient( 90 deg, #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制作的博客热门文章展区
相关推荐
安装成功后,当你发布新文章的时候,会看到页面的右下方出现一个“Post Sticky Status”,除了Normal和Sticky外,还有一个Announcement的选项,此三者的差别如下: Announcement:这个选项能实现置顶效果,一直都会...
插件安装多了就会出现占用后台资源以及插件冲突等情况,实在让人厌烦,所以,WP-INSERT这款多功能插件就能帮你很大的忙,它集广告、Feed、谷歌统计、编辑、语法高亮等多项插件功能于一身,是博主管理博客的好工具。...
用WordPress建博客,我们每次都需要登录到后台,去进行相关操作,是否感觉有点小麻烦,为了解决这个小麻烦,就有WordPress爱好者开发了这款WP-UserLogin插件,让你不用敲那么长的地址登录后台,在前台就可以登录到...
WordPress自动采集插件autopost-pro 3.7.8最新版 免授权学习版目前完美运行于的 WordPress 各个版本,请放心使用。WP-AutoPost-Pro 是一款优秀的 WordPress 文章采集器,是您操作站群,让网站自动更新内容的利器! 1...
WordPress采集插件,WordPress自动采集发布插件WP-AutoPost-pro,可采集任何网站内容并自动发布到WordPress站点,使用最简单,功能最强大的WordPress采集插件 WordPress自动采集发布插件WP-AutoPost-pro专业版3.6.3下载...
wordpress采集插件wp-autopost-pro最新破解版wordpress采集插件wp-autopost-pro最新破解版
wordpress采集插件,亲测可用.不同别人的,不测试,浪费精力和C币
【自动采集】wordpress最好用的采集插件,wp-autopost-pro 3.7.8最新版本无何限制版 这款插件好像只开发到了3.7.8?反正这是我前年就下载的资源了,用来采集壁纸、头像等资源都很好用,可惜的就是只支持七牛云、又拍...
免费WP推送插件-免费WP推送插件件包含关键词采集,关键词文章采集,伪原创,自动发布,自动推送搜索引擎。实现全自动SEO优化的免费WP推送插件
WP-AutoBlog 插件可以采集来自于任何网站的内容并全自动更新你的WordPress站点。它使用非常简单,无需复杂设置,并且足够强大和稳定,支持wordpress所有特性。
无需人工干预WP-AutoPost安装十分简单方便,只需几分钟,立即开始自动采集更新您的网站,而且结合开源的wordpress程序,新手也能快速上手,根据所设定的采集方式采集网址,然后自动抓取网页内容,检测文章是否重复,...
wordpress自动采集插件WP-AutoPost-Pro最新免授权无限制版wordpress自动采集插件WP-AutoPost-Pro最新免授权无限制版wordpress自动采集插件WP-AutoPost-Pro最新免授权无限制版wordpress自动采集插件WP-AutoPost-Pro...
WP资源下载管理Wordpress插件适用于资源下载类博客,支持站长发布文章时为访客提供本地下载、百度网盘及城通网盘等多种下载方式下载文章资源,并且支持设置登录会员或者评论回复后下载权限。 插件概述: WP资源下载...
WordPress高亮代码显示,前面我们介绍过WP-Syntax插件,这款插件使用起来有些麻烦,而且还需要修改文件的相关配置,对于不太熟悉程序的朋友来说,有点小困难,经过多方寻觅,今找到一款不错的WP-CodeBox代码高亮插件...
wordpress插件 wprobot自动博客插件
WP-Optimize插件就是帮你解决这个问题的,它可以优化和删除那些存在于数据库中的冗余数据,它具有以下特点: •删除修改后的WordPress中的冗余数据 •删除所有评论中的垃圾数据 •删除无效的留言 •为你的用户...
主要目的是针对wordpress站点,提取wp站点中随时更新的最新文章,有两种情况特别适用,第一种情况是网站的wordpress为子目录建站,网站首页为自制网页,为了提高首页和wp后台博客的互动,需要将wp中最新文章自动在...
WP Maintenance Mode插件可以给你的博客添加一个新页面,告诉访问者“博客正在维护中”。已登录用户则仍然具有完全的登入权限,可以通过插件更改设置。 WP Maintenance Mode有7个以上模板,你也可以在这个插件的...
WP Rocket缓存插件是当前最高效也是最...可以优化你的JS CSS文件结构减少多次请求达到优化速度的目的,还集成了图片延迟加载对最求极致加速的用户不错的选择,通过使用这个插件,能使得你的WordPress博客将显著的提速。
pro破解版。 文件大小1.81M,看清楚这个,做好对比。 支持2.0-4.5。 要正常采集请打开自动摘要功能。