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

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. 嗯,我剛最近看了一個功能,做一個頁面顯示某個或者某些分類的多少篇文章,和這個好像有一些類似~

發表評論

郵箱地址不會被公開。 必填項已用*標註