WordPress WP原生函数实现归档页面模板实例

2024-09-07 00:51:43

字体：大中小

来源：转载

供稿：网友

本教程我们来用实例代码讲讲WordPress用WP原生态函数归档页面模板,归档函数放在你所在的主题目录的functions.php里面.

1.归档函数

下面代码放到主题文件 functions.php 里面,另外注意代码里面有中文,所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式.

/* Archives list v2014 by zwwooooo | http://zww.me */

function zww_archives_list() {

    if( !$output = get_option('zww_db_cache_archives_list') ){

        $output = '<div id="archives"><p><a id="al_expand_collapse" href="#">全部展开/收缩</a> <em>(注: 点击月份可以展开)</em></p>';

        $args = array(

            'post_type' => 'post', //如果你有多个 post type，可以这样 array('post', 'product', 'news')

            'posts_per_page' => -1, //全部 posts

            'ignore_sticky_posts' => 1 //忽略 sticky posts

        );

        $the_query = new WP_Query( $args );

        $posts_rebuild = array();

        $year = $mon = 0;

        while ( $the_query->have_posts() ) : $the_query->the_post();

            $post_year = get_the_time('Y');

            $post_mon = get_the_time('m');

            $post_day = get_the_time('d');

            if ($year != $post_year) $year = $post_year;

            if ($mon != $post_mon) $mon = $post_mon;

            $posts_rebuild[$year][$mon][] = '<li>'. get_the_time('d日: ') .'<a href="'. get_permalink() .'">'. get_the_title() .'</a> <em>('. get_comments_number('0', '1', '%') .')</em></li>';

        endwhile;

        wp_reset_postdata();

        foreach ($posts_rebuild as $key_y => $y) {

            $output .= '<h3 class="al_year">'. $key_y .' 年</h3><ul class="al_mon_list">'; //输出年份

            foreach ($y as $key_m => $m) {

                $posts = ''; $i = 0;

                foreach ($m as $p) {

                    ++$i;

                    $posts .= $p;

                }

                $output .= '<li><span class="al_mon">'. $key_m .' 月 <em> ( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份

                $output .= $posts; //输出 posts

                $output .= '</ul></li>';

            }

            $output .= '</ul>';

        }

        $output .= '</div>';

        update_option('zww_db_cache_archives_list', $output);

    }//开源软件:Vevb.com

    echo $output;

}

function clear_db_cache_archives_list() {

    update_option('zww_db_cache_archives_list', ''); // 清空 zww_archives_list

}

add_action('save_post', 'clear_db_cache_archives_list'); // 新发表文章/修改文章时

PS:因为查询度有点大,所以有加数据库缓存,只在文章发表/修改时才会更新缓存数据,所以测试时,可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据.

2.复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:

<?php

/*

Template Name: Archives

*/

?>

在 archives.php 找到类似 <?php content(); ?>,在其下面加入如下代码"

<?php zww_archives_list(); ?>

然后新建页面,如叫:归档,选择模版为 Archives

3. 给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了.

wp_enqueue_script('jquery');

4.jQuery 代码:

这次玩了逐个下拉/收缩效果,想着很好,但我博客感觉效果一般,因为文章太多了...如果文章不多,可以把代码里面 2 个 (s-10<1)?0:s-10 改为 s,效果会好看点.

(function ($, window) {

    $(function() {

        var $a = $('#archives'),

            $m = $('.al_mon', $a),

            $l = $('.al_post_list', $a),

            $l_f = $('.al_post_list:first', $a);

        $l.hide();

        $l_f.show();

        $m.css('cursor', 's-resize').on('click', function(){

            $(this).next().slideToggle(400);

        });

        var animate = function(index, status, s) {

            if (index > $l.length) {

                return;

            }

            if (status == 'up') {

                $l.eq(index).slideUp(s, function() {

                    animate(index+1, status, (s-10<1)?0:s-10);

                });

            } else {

                $l.eq(index).slideDown(s, function() {

                    animate(index+1, status, (s-10<1)?0:s-10);

                });

            }

        };

        $('#al_expand_collapse').on('click', function(e){

            e.preventDefault();

            if ( $(this).data('s') ) {

                $(this).data('s', '');

                animate(0, 'up', 100);

            } else {

                $(this).data('s', 1);

                animate(0, 'down', 100);

            }

        });

    });

})(jQuery, window);