You are currently viewing 在 WordPress網站上顯示 Jetpack 流量統計人氣

在 WordPress網站上顯示 Jetpack 流量統計人氣

在 WordPress網站上顯示 Jetpack 流量統計人氣 1

Jetpack是 WordPress官方 Automattic所開發,功能齊全而且非常適合 WP初學者使用的多合一免費外掛。其中網誌統計功能對於懶得進去或不需要 Google Analytics分析這麼龐大的流量分析系統的站長來說,非常方便好用,從後台就能輕鬆了解自己網站的人氣統計。不過在 Jetpack網誌統計所提供的功能中,除了小工具可以顯示整體網站的累計統計人氣外,並沒有原生可以在各篇文章顯示各自人氣的方法,如果你也想要如痞客邦一樣在個別文章顯示人氣,可以參照下面的方法喔!

一、事前準備

  1. 備份與子佈景主題
    要在個別文章中顯示人氣資料,會需要在你的網站原始碼中加入一些代碼,開始實做之前建議你可以先做一個網站或主題的備份,也建議你要使用子佈景主題!使用子佈景主題可以讓你安心地修改,不必擔心改壞或主題更新時原本的修改被移除。關於子佈景主題,你可以參考這裡
  2. 使用 functions.php 或 Code Snippets程式碼片段外掛
    我們會需要加入一些取得統計資料的代碼,這個代碼你可以新增在子佈景主題的 functions.php 中;或是你也可以使用 Code Snippets程式碼片段外掛來安全的新增這個代碼使用,這裡我會推薦使用 Code Snippets外掛。
  3. 確認啟用了 WordPress Jetpack外掛與網誌統計功能

二、加入取得文章人氣的代碼

在 WordPress網站上顯示 Jetpack 流量統計人氣 2
  1. 安裝/啟用 Code Snippets外掛後,按一下你的 WordPress後台左側工具列中的「程式碼片段」
  2. 點選「新增程式碼片段」,在標題的地方幫這段代碼取個名字,例如這裡叫做 Page view
  3. 在下方程式碼的地方貼入以下代碼。由於這個代碼只需要在前台執行,所以我們選擇「僅執行於網站前端」,完成後按下「儲存設定並啟用」。
function get_page_views($post_id) {
 	if (function_exists('stats_get_csv')) {
		$args = array('days'=>-1, 'limit'=>-1, 'post_id'=>$post_id);
		$result = stats_get_csv('postviews', $args);
		$views = $result[0]['views'];
 	} else {
 		$views = 0;
 	}
	return number_format_i18n($views);
}

三、選擇要將人氣顯示在哪裡

在這裡,我們要模仿 Pixnet痞客邦的樣式,放在文章 Meta的地方,這個地方通常會有分類、日期、標籤等。下面的示範可能會和你的主題有些微不同,我示範使用的主題為 OceanWP. 不同的主題可能需要些微的調整代碼。

在 WordPress網站上顯示 Jetpack 流量統計人氣 3
  1. 開啟我們網站中的任何一篇,在文章 Meta的地方按「右鍵」>「檢查」
  2. 這裡我可以知道文章 Meta是<ul class="meta clr">裡面現在把 <ul class="meta clr">複製起來。
    ps. 1. 記得要依照你找到的位置複製起來喔,如果是 OceanWP則可以參考我的步驟 2 複製起來
    ps. 2. 如果你使用的主題是 Astra你可以找 <div class="entry-meta">
    在 WordPress網站上顯示 Jetpack 流量統計人氣 4
  3. 我們需要在佈景主題的檔案哩,找到剛剛複製的代碼在哪一個檔案中,這邊我的搜尋方法是,把我的佈景主題下載回來後,把整個佈景主題拖入 Notepad++文字編輯器中搜尋,這樣很快就可以找到<ul class="meta clr">或是你的代碼藏在哪裡囉!
    例如 OceanWP的<ul class="meta clr">放在 partials 目錄的 single目錄的 meta.php 中。
  4. 確認位置後,接著我們回到後台,在「外觀」>「佈景主題編輯器」,從右側的選單選取正在使用的子佈景主題,然後按下「選取」
  5. 選取子佈景主題的 meta.php檔案,並在左側搜尋<ul class="meta clr">
  6. 將以下代碼放在 <ul class="meta clr"> 之後。完成後,按下左下角的更新檔案。
<li class="meta-cat">
<i class="icon-people" aria-hidden="true" style="color:#e74c3c;"></i>
<?php 
//新增人氣閱讀資訊在Meta START
$post_id = get_the_ID(); 
$pageviews = get_page_views($post_id); 
echo "<span style='color:#3b3b3b;'>$pageviews</span> <span style='color:#e74c3c;'>人氣閱讀</span>"; 
//新增人氣閱讀資訊在Meta END
?></li>

回到前台任一篇文章,在 Meta的地方應該就可以看到囉!這個人氣資訊是隨著 Jetpack更新所更新的,因此不是即時的!新發表的文章會是 0 ,過 24小時之後就會開始顯示累計至昨日的人氣,所以你可以瀏覽一些比較舊的人氣文章看看是不是正確顯示囉!

在 WordPress網站上顯示 Jetpack 流量統計人氣 5

四、其他細節

  1. 人氣閱讀代碼調整
    在 OceanWP中,可以看到 Meta資訊都是由 <li class="meta-*"> </li>包起來的。米字號表示的是各自的類型,例如有 cat, author, date等等。這個也控制了 meta的樣式,因此我們可以複製一個類似的來用,如此一來樣式就會相同了。也因此你會看到我的代碼第一行是 <li class="meta-cat"> ,實際是借用了分類的樣式。
  2. 人氣閱讀圖示
    同樣地為了配合 OceanWP主題的樣式,每個 Meta資料前方有一個圖示,所以我也使用了一個圖示 <i class="icon-people" aria-hidden="true" style="color:#e74c3c;">,其中 icon-people 這個主題是使用了 Simple Line Icons 的圖示,你可以去官往選擇並替換 class就可以。
    或是你的主題可能使用了更有名的 Font Awesome,那麼替換成需要的樣式就可以了。
    如果不需要圖示,那麼把第二行的 <i class=...略...></i> 刪除即可。
  3. 更換顏色
    如果要更換圖示的顏色,請把第二行的 #e74c3c 換成你想要的顏色 HEX碼就可以了。HEX碼選取工具
    如果要更換人氣閱讀文字的顏色,請把人氣閱讀前方的 #e74c3c 換成你想要的顏色 HEX碼就可以了。
    如果要更換數字的顏色,請把 #3b3b3b 換成你想要的顏色 HEX碼就可以了。

以上就是使用 Jetpack 的網誌統計時,在網站文章顯示人氣的方法囉!

Sid

喜愛電腦資訊、歷史、古文明、宇宙、自然生態的主題。喜歡看卡通和科幻主題的電影,有長不大的心情。從事金融業相關工作,分享的技巧多來自工作上的各項應用實作。

This Post Has 2 Comments

  1. han

    Sid大您好
    想問我照您的方法做,但發現有兩個地方有 ,那我是兩個地方都需要改嗎?

    1. Sid

      那可能表示你的佈景主題有分不同的用途,你可以先放第一個然後看看有沒有顯示。

發佈留言