创建按日期排序伸缩效果显示文章数量的归档页面
一,把以下代码保存为一个Php文件,如:Archives.php,放在主题根目录下 <?php func…
一,把以下代码保存为一个Php文件,如:Archives.php,放在主题根目录下
<?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="#" rel="nofollow noopener" >全部展开/收缩</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() . '" rel="nofollow noopener" >' . 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,引用先前建立的文件
/**
* 自定义引用归档函数
*/
include('archives.php');
三,然后创建一个模板文件:archives_gd.php页面模板
<?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://icss.me/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://icss.me/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>
四,最后在新建一个页面
模板选择添加,这里你自定义是叫变量就引用引用之模板,是其他名字就引用其他名字就行。
类别:WordPress技巧、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!