實現歸檔及頁面瀏覽量的代碼更改

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博客：

標題：WordPress 歸檔頁面模板[WP原生函數實現2014版]
鏈接：https://zww.me/wordpress-archive-page-template-wp-primary-function-2014-edition.z-turn

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頁面，如果你的主題中包含了很多頁面之間調用的操作，請參考。

目前的問題：

本站複製模板自full-width-page.php，然而實際上並未實現全寬頁面功能，貌似兩個全頁面寬度有衝突，css中修改無果。暫擱置；（20200515更新：換新主題後無全寬模板）
用戶首次進入歸檔頁面，收起/展開的功能沒有生效，需刷新/強制刷新後才可。可能原因是js代碼修改產生的問題，也可能是緩存插件的影響；
莫名地顯示私密文章，後來又莫名地不顯示私密文章……（已摸清，因為歸檔頁面用了緩存，所以每次編輯之後第一位歸檔頁面的訪問者決定了該頁面的內容。20200515更新：按照大致建議在查詢的參數里增加post_status=publish）

P.S.由於本站點關閉了複製功能，需要代碼可以留言或者直接去本文參考的網頁。其中，歸檔功能為ZWW，瀏覽量功能點此，CSS樣式點此。感謝各位網友對互聯網做出的貢獻。

作者：椰林物語

博士，摩托車手。發布內容為：生活、站點、其他。查看椰林物語的所有文章

《實現歸檔及頁面瀏覽量的代碼更改》有20個想法

大致說道：

2020-05-06 15:50

兩個小問題:
1，查詢的參數里應該增加post_status=publish，不然草稿也會顯示出來。
2，清緩存的時機不好。傳附件，自動保存什麼的都會觸發save_post這個鉤子，所以緩存會經常性處於沒內容的狀態。以及，不光save，delete的時候不搞一下不也會造成緩存跟實際不一致嗎？查了一下，save_post的鉤子里有三個參，其中第二個是WP_Post，應該能夠輕易地判斷出post的類型。或者用save_post_{$post->post_type}這個鉤子更準確。

回復
1. 椰林物語說道：
  
  2020-05-06 17:22
  
  多謝建議，我其實代碼小白，也沒去看wp的開發文檔，從網上找的東西改動的時候看有變化了就放上……
  第一個問題，剛看了一下，實際上草稿目前沒有顯示出來。
  私密文章會顯示進列表，應該加個 ‘ignore_private_posts’ => 1 ？沒查是不是叫private_posts……🤣
  第二個問題，把最後那句修改成你建議的了：😊
  add_action(‘save_post_{$post->post_type}’, ‘clear_db_cache_archives_list’);
  
  回復
  1. 大致說道：
    
    2020-05-07 09:24
    
    我從來不用中文後台，所以有些名詞搞混了。
    第一個指的就是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. 椰林物語說道：
      
      2020-05-08 23:31
      
      好的，我回頭再試試~把wp重裝了一個全新的，然後之前的內容導了進來。現在新的網站還沒有這個功能……
      
      回復
2. 椰林物語說道：
  
  2020-05-06 17:50
  
  改了之後編輯文章再刷新歸檔頁面沒有更新……
  
  回復
Yan說道：

2020-05-02 22:34

辛苦了。搞了一晚上吧？我目前都用作者默認送的了，太懶……

還可以搞一個最近瀏覽，最近評論，最多評論，最多瀏覽，……的頁面，沒事瞅瞅也很有意思。

回復
1. 椰林物語說道：
  
  2020-05-02 23:26
  
  功能代碼倒是沒費多少時間，主要css搞了好久……前幾天先在測試站弄的，沒睡覺鼻子上又起包了，現在都沒下去……
  嗯，回頭可以搞搞這些功能，到時候看能不能放首頁側邊欄，還空不少位置
  
  回復
  1. 格子老師說道：
    
    2020-05-04 13:05
    
    不會用原生函數，就自己寫了數據庫查詢代碼，我的加了不少類似的功能。查看地址：https:/suibi.qian.lu
    
    回復
  2. 格子老師說道：
    
    2020-05-04 13:06
    
    文章中說加了數據庫緩存，也沒看出來哪裡是，主要是也不懂！！
    
    回復
    1. 椰林物語說道：
      
      2020-05-04 16:06
      
      貌似在post rebuilt到update option那裡。
      
      回復
      1. 格子老師說道：
        
        2020-05-04 17:30
        
        我看懂了，是最後四行。你說的地方，是先建一個空數組，然後重新組合一個月份鏈接格式，存儲到空數組中，下面的 foreach 就是一個一個讀取之前存儲的數組，並挨個輸出年份和月份文章數，每個月份下輸出對應的文章存檔，是個子循環。
        
        回復
        
        椰林物語說道：
        
        2020-05-04 18:29
        
        對，仔細一看人家還用漢語注釋了，哈哈~
        
        回復
        
        格子老師說道：
        
        2020-05-04 19:13
        
        我剛剛是手機看的，沒細看注釋。我睡一覺起來，發現讀這個代碼感覺更清晰了！！
        
        回復
        
        椰林物語說道：
        
        2020-05-04 19:16
        
        👍👍👍
        
        回復
        
        格子老師說道：
        
        2020-05-04 19:49
        
        最近用我自己的站點 https://suibi.qian.lu/baogao 這個頁面，對php操作數據庫的查詢、修改、刪除增加了很多理解，這一個頁面實現了數據列表、查詢、數據展示，以及數據刪除（管理員才可刪除）所有功能。當然，刪除功能是剛剛加好的！！
        
        回復
        
        椰林物語說道：
        
        2020-05-04 20:18
        
        這個好像也是一個歸檔的頁面，可能顯示的內容可以自由更改？
        數據庫操作其實就是那4條語句，只是在一個站點應用起來需要結合著網站的代碼和數據庫去寫……反正我是基本都忘光了，哈哈……
        （最近akismet一直抽風，評論總是會被移到審核的隊列里……抱歉）
        
        格子老師說道：
        
        2020-05-04 20:22
        
        沒事。這個頁面就是一個直接讀取數據的頁面，類似你說的歸檔吧！！實際上跟文章系統的列表頁差不多，然後每一個報告的顯示頁就相當於文章頁！！這個是單獨建的數據表！！然後wordpress後台加的單頁模板，所有php操作數據庫的代碼都在模板文件里。
        
        椰林物語說道：
        
        2020-05-05 00:01
        
        嗯，我剛最近看了一個功能，做一個頁面顯示某個或者某些分類的多少篇文章，和這個好像有一些類似~
        
        格子老師說道：
        
        2020-05-05 00:24
        
        你說的功能不難！！雖然我不會原生函數，但是直接讀取數據庫實現，也不難。
        
        椰林物語說道：
        
        2020-05-05 00:32
        
        對，那個很簡單，新建一個頁面把那段功能代碼放進去就OK了。

作者： 椰林物語

《實現歸檔及頁面瀏覽量的代碼更改》有20個想法

回復 椰林物語 取消回復

作者：椰林物語

回復椰林物語取消回復