关闭边栏(ESC)打开边栏(ESC)
本站的文章归档参考了511yj.com中的一篇文章修改而来。以下是实施的步骤：
一、把以下代码保存为一个Php文件，如：Archives.php，放在主题根目录下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?php function zww_archives_list() { if ( !$output = get_option( 'zww_db_cache_archives_list' ) ) { $output = '<div id="archives"><h3><a id="al_expand_collapse" href="#">全部展开/收缩</a> <small class="text-muted">(注: 点击月份可以展开)</small></h3>'; $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> <small class="text-muted">(' . get_comments_number( '0', '1', '%' ) . ')</small></li>'; endwhile; wp_reset_postdata(); foreach ( $posts_rebuild as $key_y => $y ) { $output .= '<h4 class="m-title">' . $key_y . ' 年</h4><ul >'; //输出年份 foreach ( $y as $key_m => $m ) { $posts = ''; $i = 0; foreach ( $m as $p ) { ++$i; $posts .= $p; } $output .= '<li id="limon"><span class="al_mon">' . $key_m . ' 月 <small class="text-muted"> ( ' . $i . ' 篇文章 )</small></span><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' ); // 新发表文章/修改文章时 ?> |
二、在主题根目录下找到 functions.php，引用刚才建立的文件
|
1 2 3 4 |
/** * 自定义引用归档函数 */ include('archives.php'); |
三、然后创建一个模板文件：archives_gd.php页面模板
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<?php /** * Template Name: 归档 */ get_header(); ?> <style> /* ---------------文章归档页面样式--------------------*/ #main-archivest{margin:20px 0;} .m-title{text-align:center;border-bottom:solid 1px #ccc;font-size: 18px;font-weight: normal} .al_mon{font-weight:bold;font-size: 16px;} #archives h3 a{color:#1E8BC3;font-size: 20px;} #archives .text-muted{color: #666} #archives ul li {list-style-type:none;} #archives ul li a{color: #1E8BC3;font-size: 16px;} #archives ul >li{padding:0 0 8px 5px;border-left:solid 1px #ccc;background-image:url(https://css.nli.cn/wp-content/uploads/2016/12/li.png); padding-left:20px; background-repeat:no-repeat;} #archives ul>li>ul{margin:0;padding:0;} #archives ul>li>ul>li{list-style-type:none;background-image:url(https://css.nli.cn/wp-content/uploads/2016/12/li.jpg);background-position:left 0 top 3px; padding-left:20px;background-repeat:no-repeat; border-left:dashed 1px #ccc;} </style> <main class="container"> <div class="row"> <div class="md-10 md-offset-1"> <div><?php zww_archives_list(); ?></div> </div> </div> </main> <?php get_footer(); ?> <script type="text/javascript"> ( 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 ); </script> |
四、最后在新建一个页面，模板选归档，这里你自定义是叫归档就引用归档之个模板，是其它名字就引用其它名字就行。效果可参阅本站的归档。
这个按日期归档的效果还是挺直观，感谢511YJ.COM中有这篇文章