wp美化教程 | 创建按日期排序伸缩效果显示文章数量的归档页面

释放双眼,带上耳机,听听看~!

一、把以下代码保存为一个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="#">全部展开/收缩</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="'%20.%20get_permalink()%20.%20'">' . 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://ciyol.cn/wp-content/uploads/2020/05/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://ciyol.cn/wp-content/uploads/2020/05/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>

四、最后在新建一个页面

模板选择添加,这里你自定义是叫变量就引用引用之模板,是其他名字就引用其他名字就行。

注:第三步中已经包含CSS,Jquery,可以根据自己的风格来修改。

如果想像西柚的文章归档

wp美化教程 | 创建按日期排序伸缩效果显示文章数量的归档页面-西柚乐

1、新建timeLine.php文件,或者下载附件

<?php
/*
Template Name: 时间轴模板
*/
get_header();?>
<?php
$frontpage_carousels_type = _opt('frontpage_carousels_type');$type = strstr($frontpage_carousels_type, 'full') ? 'single-imageflow-full':'single-imageflow';get_topSlider(array($post->ID),$type);?><div class="container postListsModel"><div class="row"><?php
if (_opt('is_single_post_hide_sidebar')) {$leftClass = 'col-xs-12 no-sidebar';$rightClass = 'hidden';} else {$leftClass = 'col-md-9 col-lg-9_5';$rightClass = 'col-md-3 col-lg-2_5 hidden-xs hidden-sm';}?><div class="<?php echo $leftClass; ?>"><div class="col-xs-12">
<div class="row postLists"><div class="toggle_sidebar" @click="this.single_toggle_sidebar()" data-toggle="tooltip" data-placement="auto top" title="切换边栏"><i class="fas fa-angle-right"></i></div>
<div class="article_wrapper post clearfix page">
	<article class="clearfix">
	<style>
	.archives-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px}    
	.archives li a{padding:8px 0;display:block}
	.archives li a:hover .atitle:after{background:#ff5c43}
	.archives li a span{display: inline-block;width:100px;font-size:12px;text-indent:20px;}
	.archives li a .atitle{display: inline-block;padding:0 15px;position:relative}
	.archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}
	.archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}
	.archives{position:relative;padding:10px 0}
	.archives:before{height:100%;width:4px;background:#eee;position:absolute;left:100px;content:"";top:0}
	.m-title{position:relative;margin:10px 0;cursor:pointer}    
	.m-title:hover:after{background:#ff5c43}
	.m-title:before{position:absolute;left:93px;background:#fff;height:0px;width:18px;border-radius:6px;top:3px;content:""}
	.m-title:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}
	</style>
	<div class="archives">
			<?php
			$previous_year = $year = 0;
			$previous_month = $month = 0;
			$ul_open = false;
			$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
			
	
    
	

			foreach($myposts as $post) :
				setup_postdata($post);
				$year = mysql2date('Y', $post->post_date);
				$month = mysql2date('n', $post->post_date);
				$day = mysql2date('j', $post->post_date);
				if($year != $previous_year || $month != $previous_month) :
					if($ul_open == true) : 
						echo '</ul>';
					endif;
					echo '<h3 class="m-title">'; echo the_time('Y-m'); echo '</h3>';
										
					echo '<ul class="archives-monthlisting">';
					$ul_open = true;
				endif;
				$previous_year = $year; $previous_month = $month;
			?>

			<?php //初始参数
			$posttype = get_post_type();switch ($posttype) {case 'post':
			$thumbnail = get_the_post_thumbnail_url();$tags = get_the_tags();break;case 'gallery':
			$gallery_images = get_post_meta(get_the_id(), "gallery_images",true);$gallery_images = $gallery_images ? $gallery_images : array();switch (get_option('gallery_thumbnail')) {case 'first':
			$thumbnail = $gallery_images[0];break;case 'last':
			$thumbnail = $gallery_images[count($gallery_images) - 1];break;default:
			$thumbnail = count($gallery_images) > 0 ? $gallery_images[array_rand($gallery_images,1)] : '';break;}$tags = get_the_terms(get_the_ID(),'gallery-tag');break;default:
			$thumbnail = '';break;}
			?>
			
				<div class="wp-block-pandastudio-single" posttype="post">
					<div class="single-wrapper">
						<a class="cover" style="background-image:url(<?php echo $thumbnail; ?>);" href="<?php%20the_permalink();%20?>"></a><!-- 获取文章图片 地址  -->
						<div class="single-meta">
							<a class="post-title" href="<?php%20the_permalink();%20?>"><!-- 获取文章地址  -->
								<h4><?php the_title(); ?></h4><!-- 获取文章标题  -->
							</a>
							<div class="summary">
								<span class="date"><i class="far fa-clock"></i> <?php the_time('Y-m-j'); ?></span><!-- 获取时间 -->
								<span class="likes"><i class="fas fa-heart"></i> <?php $like = get_post_meta($post->ID,'bigfa_ding',true) ? get_post_meta($post->ID,'bigfa_ding',true) : "0" ; echo $like;?></span><!-- 获取点赞数量 -->
								<span class="comments"><i class="fas fa-comments"></i> <?php echo $post->comment_count ?></span><!-- 获取评论数量 -->
							</div>
						</div>
					</div>
				</div>
				
			<?php endforeach; ?>
			</ul>
	</div>
	<script>
	$('.archives ul.archives-monthlisting').hide();
	$('.archives ul.archives-monthlisting:first').show();
	$('.archives .m-title').click(function() {
		$(this).next().slideToggle('fast');
		return false;
	});
	</script>
	</article>
</div>
<?php comments_template(); ?>
</div></div></div>
	<div class="<?php echo $rightClass; ?>">
		<div class="row">
			<div class="sidebar sidebar-affix">
				<div manual-template="sidebarMenu"></div>
				<div manual-template="sidebar"></div>
			</div>
		</div>
	</div>
</div>
</div>
<?php get_footer(); ?>
 

2、后台页面-新建页面-标题输入”文章归档“-输入别名“archives“

wp美化教程 | 创建按日期排序伸缩效果显示文章数量的归档页面-西柚乐

3、模板选择”时间轴模板“-然后点发布即可

wp美化教程 | 创建按日期排序伸缩效果显示文章数量的归档页面-西柚乐
最后修改: 2020-09-3 01:01

人已赞赏
WordPress美化

轻拟物niRvana主题教程 | WordPress添加【博客统计】信息

2020-5-11 11:30:53

WordPress美化

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

2020-6-21 15:33:38

免责声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索