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

吾爱互联 · 发表于 2015-5-14 13:49:21

本教程我们来用实例代码讲讲WordPress用WP原生态函数归档页面模板，归档函数放在你所在的主题目录的functions.php里面
</div>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"><a id="al_expand_colla<a href="/fw/photo.html" target="_blank">ps</a>e" href="#">全部展开/收缩</a> (注: 点击月份可以展开)'; 
        $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> ('. get_comments_number('0', '1', '%') .')</li>'; 
        endwhile; 
        wp_reset_postdata(); 
 
        <a href="/tags.php/foreach/" target="_blank">foreach</a> ($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>'. $key_m .' 月 ( '. $i .' 篇文章 )<ul class="al_post_list">'; //输出月份 
                $output .= $posts; //输出 posts 
                $output .= '</ul></li>'; 
            } 
            $output .= '</ul>'; 
        } 
 
        $output .= '</div>'; 
        update_option('zww_db_cache_archives_list', $output); 
    } 
    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: 因为查询度有点大，所以有加<a href="/database/database.html" target="_blank">数据库</a>缓存，只在文章发表/修改时才会更新缓存数据，所以测试时，可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。
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); 
 
PS：不知道怎么写 js 文件然后调用的朋友就直接打开 header.php 并找到 <?php wp_head(); ?>，在其下面加上 
 
<script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>">上面那段 jQuery 代码</script> 
 
因为是放在主题的 the_content() 下面，所以会默认使用主题写好的 h3 ul li 格式，如果要更加有特色，那么就要自己去修改 css 了