实现归档及页面浏览量的代码更改

1. functions中增加归档函数

主题文件 functions.php 中写入代码:

P.S. 因为有中文,所以 functions.php 编码需 UTF8 无 BOM 格式。

/* Archives list v2014 by zwwooooo | https://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);
	}
	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'); // 新发表文章/修改文章时

P.S. 因为查询度较大,所以作者有加数据库缓存,只在文章发表/修改时才会更新缓存数据,所以测试时,需去后台点“快速编辑”文章然后点更新来更新缓存数据。原则上,每次做代码修改后都最好先编辑任何一篇文章,然后再刷新归档页面。

2016.12.07 作者新增“年份后面显示此年份文章数”版本:

/* Archives list v2014 by zwwooooo | https://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' => array('archives', 'post', 'zsay'),
			'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) {
			$y_i = 0; $y_output = '';
			foreach ($y as $key_m => $m) {
				$posts = ''; $i = 0;
				foreach ($m as $p) {
					++$i; ++$y_i;
					$posts .= $p;
				}
				$y_output .= '<li><span class="al_mon">'. $key_m .' 月 <em>( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份
				$y_output .= $posts; //输出 posts
				$y_output .= '</ul></li>';
			}
			$output .= '<h3 class="al_year">'. $key_y .' 年 <em>( '. $y_i .' 篇文章 )</em></h3><ul class="al_mon_list">'; //输出年份
			$output .= $y_output;
			$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'); // 新发表文章/修改文章时

「非礼勿言」融合上方内容新增viewed功能:

/* Archives list v2014 by zwwooooo feiliwuyan.com */
function zww_archives_list() {
	if( !$output = get_option('zww_db_cache_archives_list') ){
		$output = '<div id="archives"><p><a id="al_expand_collapse" href="#" class="alexco">全部收起 / 展开</a> <em>(注: 点击各月份可单独收起/展开)</em></p>';
		$args = array(
			'post_type' => array('archives', 'post', 'zsay'),
			'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>(阅读'. getPostViews(get_the_ID()) .', 评论'. get_comments_number('0', '1', '%') .')</em></li>';
		endwhile;
		wp_reset_postdata();

		foreach ($posts_rebuild as $key_y => $y) {
			$y_i = 0; $y_output = '';
			foreach ($y as $key_m => $m) {
				$posts = ''; $i = 0;
				foreach ($m as $p) {
					++$i; ++$y_i;
					$posts .= $p;
				}
				$y_output .= '<li><span class="al_mon">'. $key_m .' 月 <em>( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份
				$y_output .= $posts; //输出 posts
				$y_output .= '</ul></li>';
			}
			$output .= '<h3 class="al_year">'. $key_y .' 年 <em>( '. $y_i .' 篇文章 )</em></h3><ul class="al_mon_list">'; //输出年份
			$output .= $y_output;
			$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'); // 新发表文章/修改文章时

/* 显示文章浏览次数 */
function getPostViews($postID){
$count = get_post_meta($postID,'views', true);
if($count==''){
delete_post_meta($postID,'views');
add_post_meta($postID,'views', '0');
return "0";
}
return $count.'';
}
function setPostViews($postID) {
$count = get_post_meta($postID,'views', true);
if($count==''){
$count = 0;
delete_post_meta($postID,'views');
add_post_meta($postID,'views', '0');
}else{
$count++;
update_post_meta($postID,'views', $count);
}
}

2. 增加一个页面模板

复制一份主题的 page.php更名为 archives.php,在最顶端的模板信息中修改为:

<?php
/*
Template Name: Archives
*/
?>

3. jQuery相关

若主题未加载 jQuery 库 functions.php 中追加下面这句。

wp_enqueue_script('jquery');

然后修改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);

上述代码应用后默认最新一个月的是展开的状态,其他均为收起状态。本文调整语句顺序修改为默认全部打开:

(function ($, window) {
	$(function() {
		var $a = $('#archives'),
			$m = $('.al_mon', $a),
			$l = $('.al_post_list', $a),
			$l_f = $('.al_post_list:first', $a);
		$l.show();
		$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).slideDown(s, function() {
					animate(index+1, status, s);
				});
				
			} else {
				$l.eq(index).slideUp(s, function() {
					animate(index+1, status, s);
				});
			}
		};
		$('#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);

P.S. 也可直接打开 header.php 并找到 <?php wp_head(); ?>,在其下面加上

<script type="text/javascript">
复制上述 jQuery 代码
</script>

P.S. 以上内容主要来源于ZWW博客:

4. CSS样式修改

不写也不影响使用。写的话,HTML结构:

<div id="archives">
     <p>[<a id="al_expand_collapse" href="#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>
     <h3 class="al_year">'年份</h3>
     <ul class="al_mon_list">
         <li><span class="al_mon">月份<em> (本月文章数量)</em></span>
             <ul class="al_post_list">
                 <li>号数: <a href="文章链接">文章标题</a> <em>(评论数量)</em></li>
             </ul>
         </li>
     </ul>
 </div>

将CSS样式代码写入style.css即可。某网友优化CSS代码样式:

#archives {
    position: relative;
    /*top: -60px;
    left: 150px;*//*原文这两行代码就是影响我最上面“全部展开/收缩”效果的,我删除了这个*/
}
 
#archives h3 {
    margin-bottom: 0;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 20px;/*这个字体大小和下面的我都做了一些修改*/
    font-weight: 400;
    text-align: center;
    letter-spacing: 5px
}
 
#archives ul {
    list-style: none;
    margin: 0 30px;
    padding: 10px 0 20px 10px;
    border-left: 1px solid #ddd;
    font-size: 18px
}
 
#archives li {
    list-style: none;/*这一行代码是我自己添加的,不加这个就会出现ul标签前面的黑色小方块,很难看*/
    position: relative;
    line-height: 30px
}
 
#archives ul ul {
    margin: -15px 0 0 0;
    padding: 15px 0 10px 0
}
 
#archives ul ul li {
    padding: 0 0 0 15px
}
 
#archives ul ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    border-top: 5px dashed transparent;
    border-bottom: 5px dashed transparent;
    border-left: 10px solid #ddd
}
 
#al_expand_collapse {
    display: inline-block;
    line-height: 24px;
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    background: linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent;/*这个颜色和下面的我都做了一些修改*/
    background: -webkit-linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent
}
 
#al_expand_collapse:hover {
    background: linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent
}
 
#archives em {
    padding-left: 5px;
    font-size: 12px;
    color: #777
}
 
#archives .al_mon {
    padding-left: 5px;
    font-size: 14px;
    font-weight: 700
}
 
#archives .al_mon:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 15px;
    width: 10px;
    height: 1px;
    background: #ddd
}
 
#archives .al_mon em {
    font-size: 12px;
    font-weight: 400
}

本文修改后:

/*归档 feiliwuyan.com*/
#archives {
    position: relative;
    top: -80px; 
}
 
#archives h3 {
    margin-bottom: 0;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 25px;/*年份字体*/
    font-weight: 400;
    text-align: center;
    letter-spacing: 5px
}
 
#archives ul {
    list-style: none;
    margin: 0 30px;
    padding: 10px 0 10px 0; /*10px 0 10px 10px; */
    /*border-left: 1px solid #ddd; 左侧竖向线*/
    font-size: 18px
}
 
#archives li {
    list-style: none;/*取消ul标签前面的黑色小方块*/
    position: relative;
    line-height: 30px
}
 
#archives ul ul {
    margin: -15px 0 0 0;
    padding: 15px 0 10px 0
}
 
#archives ul ul li {
    padding: 0 0 0 15px
}
 
#archives ul ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    border-top: 5px dashed transparent;
    border-bottom: 5px dashed transparent;
    border-left: 10px solid #2b2a9d /* 三角形样式 */ 
}
 
#archives a{ color:#030303} 
#archives a:visited{ color:#AAAAAA }/* 定义已访问过链接的样式 */ 
#archives a:hover{ color:#FB6CE1}/* 鼠标经过悬停字体颜色 */ 
#archives a:active{ color:#F02E3A }/* 定义鼠标点击链接时的样式 */ 

#archives a.alexco { color:#030303} 
#archives a.alexco:hover{ color:#FB6CE1}/* 鼠标经过悬停字体颜色 */ 

#al_expand_collapse {
    display: inline-block;
    line-height: 27px;
    padding: 0 10px;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    background: linear-gradient(to bottom, #afeeee 20%, #fff5ee 80%) repeat scroll 0 0 transparent;/*按钮颜色*/
    background: -webkit-linear-gradient(to bottom, #afeeee 20%, #fff5ee 80%) repeat scroll 0 0 transparent
}
 
#al_expand_collapse:hover {
    background: linear-gradient(to bottom, #fff5ee 20%, #afeeee 80%) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(to bottom, #fff5ee 20%, #afeeee 80%) repeat scroll 0 0 transparent
}
 
#archives em {
    padding-left: 5px;
    font-size: 12px;
    color: #777
}
 
#archives .al_mon {
    padding-left: 5px;
    font-size: 25px;
    font-weight: 700;
    cursor:pointer;
}
 
#archives .al_mon:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 15px;
    width: 10px;
    height: 5px; /* 月份前短杠 */ 
    background: #2b2a9d
}
 
#archives .al_mon em {
    font-size: 12px;
    font-weight: 400
}

5. 文章页面等展示存档功能

在需要显示浏览量的地方,包括首页,分类页,文章页均可,(wordpress模板更多信息:wordpress模板制作教程)添加浏览量调用代码:

<?php setPostViews(get_the_ID()); echo number_format(getPostViews(get_the_ID())); ?>

本文加在了主题的模板content.php页面中。因为主题文件中的single.php调用了content.php页面,如果你的主题中包含了很多页面之间调用的操作,请参考。

目前的问题:

  1. 本站复制模板自full-width-page.php,然而实际上并未实现全宽页面功能,貌似两个全页面宽度有冲突,css中修改无果。暂搁置;(20200515更新:换新主题后无全宽模板)
  2. 用户首次进入归档页面,收起/展开的功能没有生效,需刷新/强制刷新后才可。可能原因是js代码修改产生的问题,也可能是缓存插件的影响;
  3. 莫名地显示私密文章,后来又莫名地不显示私密文章……(已摸清,因为归档页面用了缓存,所以每次编辑之后第一位归档页面的访问者决定了该页面的内容。20200515更新:按照大致建议在查询的参数里增加post_status=publish)

P.S.由于本站点关闭了复制功能,需要代码可以留言或者直接去本文参考的网页。其中,归档功能为ZWW,浏览量功能点此,CSS样式点此。感谢各位网友对互联网做出的贡献。

作者: 椰林物语

博士,摩托车手。发布内容为:生活、站点、其他。

《实现归档及页面浏览量的代码更改》有20个想法

  1. 两个小问题:
    1,查询的参数里应该增加post_status=publish,不然草稿也会显示出来。
    2,清缓存的时机不好。传附件,自动保存什么的都会触发save_post这个钩子,所以缓存会经常性处于没内容的状态。以及,不光save,delete的时候不搞一下不也会造成缓存跟实际不一致吗?查了一下,save_post的钩子里有三个参,其中第二个是WP_Post,应该能够轻易地判断出post的类型。或者用save_post_{$post->post_type}这个钩子更准确。

    1. 多谢建议,我其实代码小白,也没去看wp的开发文档,从网上找的东西改动的时候看有变化了就放上……
      第一个问题,刚看了一下,实际上草稿目前没有显示出来。
      私密文章会显示进列表,应该加个 ‘ignore_private_posts’ => 1 ?没查是不是叫private_posts……🤣
      第二个问题,把最后那句修改成你建议的了:😊
      add_action(‘save_post_{$post->post_type}’, ‘clear_db_cache_archives_list’);

      1. 我从来不用中文后台,所以有些名词搞混了。
        第一个指的就是private,不是draft。就照我的办法来,没有ignore_private_posts这个参数,ignore_sticky_posts是忽略sticky。
        第二个,你这样写当然不行。花括号里是个泛指,写的时候要用具体的post_type进行代替,比如save_post_post。用save_post也不是不行,但是加钩子的时候不能用默认,因为有用的东西都在第二个参上。要写成add_action(‘save_post’,’clearXXX’,10,3); clearXXX($post_id, $post, $update){ if($post->post_type==’post’ && !$update) {…} else return; }
        还有,如果不用那个postview的话,wp_get_archives一个函数就能搞定。

        1. 好的,我回头再试试~把wp重装了一个全新的,然后之前的内容导了进来。现在新的网站还没有这个功能……

  2. 辛苦了。搞了一晚上吧?我目前都用作者默认送的了,太懒……

    还可以搞一个最近浏览,最近评论,最多评论,最多浏览,……的页面,没事瞅瞅也很有意思。

    1. 功能代码倒是没费多少时间,主要css搞了好久……前几天先在测试站弄的,没睡觉鼻子上又起包了,现在都没下去……
      嗯,回头可以搞搞这些功能,到时候看能不能放首页侧边栏,还空不少位置

      1. 不会用原生函数,就自己写了数据库查询代码,我的加了不少类似的功能。查看地址:https:/suibi.qian.lu

          1. 我看懂了,是最后四行。你说的地方,是先建一个空数组,然后重新组合一个月份链接格式,存储到空数组中,下面的 foreach 就是一个一个读取之前存储的数组,并挨个输出年份和月份文章数,每个月份下输出对应的文章存档,是个子循环。

                  1. 最近用我自己的站点 https://suibi.qian.lu/baogao 这个页面,对php操作数据库的查询、修改、删除增加了很多理解,这一个页面实现了数据列表、查询、数据展示,以及数据删除(管理员才可删除)所有功能。当然,删除功能是刚刚加好的!!

                    1. 这个好像也是一个归档的页面,可能显示的内容可以自由更改?
                      数据库操作其实就是那4条语句,只是在一个站点应用起来需要结合着网站的代码和数据库去写……反正我是基本都忘光了,哈哈……
                      (最近akismet一直抽风,评论总是会被移到审核的队列里……抱歉)

                    2. 没事。这个页面就是一个直接读取数据的页面,类似你说的归档吧!!实际上跟文章系统的列表页差不多,然后每一个报告的显示页就相当于文章页!!这个是单独建的数据表!!然后wordpress后台加的单页模板,所有php操作数据库的代码都在模板文件里。

                    3. 嗯,我刚最近看了一个功能,做一个页面显示某个或者某些分类的多少篇文章,和这个好像有一些类似~

发表评论

邮箱地址不会被公开。 必填项已用*标注