使用WP post view插件和roundaboutJS制作的博客热门文章展区

不知道是什么原因，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制作的博客热门文章展区

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

相关文章:

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论