WordPress Top 10 熱門文章外掛 - 使用 Top 10 在文章資訊欄上增加瀏覽人次

WordPress Top 10 熱門文章外掛 – 使用 Top 10 在文章資訊欄上增加瀏覽人次

最近發現有些佈景主題在 Article Post、Blog 以及 Single Post頁面的meta文章資訊欄位中,除了常見的日期作者標題之外,還有顯示該篇的文章瀏覽人數,瀏覽人數可以刺激瀏覽者點擊文章,增加網站的單次工作階段頁數,當瀏覽者停留在網站的時間越久,網站的瀏覽量越高,如果網站是購物車網站時,在這些高瀏覽的文章中,適度穿插一些商品資訊 ( 如商品輪播 ),就有機會增加網站的轉換。

目前大多數POST VIEW的外掛,都只能讓外掛自動掛載瀏覽人數、手動掛載短碼 ( shortcode ) 以及利用主題編輯器手動插入PHP Code,這三種方式各有以下這些缺點:

1、外掛自動掛載:
無法指定瀏覽人數顯示的位子,大多只能顯示在文章開頭或是文章結尾,無法併行在文章meta欄位。

2、手動插入短碼:
雖然此方法可以將瀏覽人數隨意插入想要顯示的位子,但需要使用類似 elementor 的編輯器才可以讓瀏覽人數併行在文章meta欄位,不然也是只能顯示在文章開頭、文章當中以及文章結為。

3、利用主題編輯器插入PHP程式碼:
此方法適合懂得一點PHP程式碼的使用者,稍不小心就會讓網頁發生錯誤,而且此方法在升級佈景主題時,都要重新插入一次程式碼。

本篇 WordPress TOP 10 熱門文章外掛安裝教學 – 使用 Top 10 外掛,在外部使用程式碼編輯器 ( 例如 Visual Studio Code ) 編輯佈景主題的PHP檔案,插入TOP 10提供的 PHP Code,讓文章資訊欄上增加瀏覽人次,使用的主題是付費版的OceanWP,頁面編輯器使用的是Elementor PRO,接下來開始製作,如果大家照著本篇WordPress教學,實做過後有什麼問題,歡迎點選頁面旁的FB聊天圖示,或是填寫聯絡表單小編會盡快回覆您的問題。

( 點圖前往官網 )

目錄

安裝 WordPress Plugin:Top 10 – Popular posts plugin

(1) 安裝 Top 10 – Popular posts plugin 熱門文章工具

進入WordPress後台以後,外掛 ->安裝外掛 -> 搜尋 「Top 10 – Popular posts plugin」,安裝後啟動。

(2) Top 10 控制台工具

進入WordPress後台以後,可開啟本日熱門文章列表( Daily Popular posts )以及本站熱門文章列表( Popular posts )

(3) Top 10 小工具

可在側欄 ( Sidebar ) 開啟本站熱門文章列表 ( Popular posts ) 以及本頁瀏覽人數 ( Overall count )

取得文章資訊meta欄位的 class name

本篇設定教學的佈景主題使用OceanWP,因每個佈景主題的文章資訊列表HTML結構都會不同,所以請依自己的狀況記下自己佈景主題的class name。

(1) 至文章列表頁面或是文章頁面

將滑鼠移至文章資訊欄位處,點選右鍵

點選檢查,或是開啟Chrmoe設定中的開發人員工具

(2) 查看文章ID,記下文章ID編號

尋找 ul 以及 li 的 class name ,此佈景主題的文章資訊欄位的 ul class name 為「meta」,li class name 為「meta- *」。

設定Top 10 – Popular posts plugin for wordpress

進入WordPress後台以後,Top 10  -> Settings -> Counter/Tracker。

(1) 取消 Display number of views on 項目

本篇教學使用外部的程式碼編輯器插入 TOP10 所提供的 PHP code,所以這邊將Display number of views on的所有項目取消

(2) 修改 Format to display the post views

因外掛的預設的設定為 (Visited %totalcount% times, %dailycount% visits today) 也就是總瀏覽人數以及本日瀏覽人數,本篇教學只使用全部瀏覽人數,所以修改為「%totalcount%人瀏覽

(3) 記下 TOP 10 提供的 PHP code

Display number of views on 項目底下有反灰的一段PHP code,複製這段Code。

<?php if ( function_exists( 'echo_tptn_post_count' ) ) { echo_tptn_post_count(); } ?>

(4) 點選 Save changes 儲存設定

利用程式碼編輯器插入TOP10 的 PHP Code

本篇設定教學的佈景主題使用OceanWP,因每個佈景主題的文章資訊列表PHP結構都會不同,所以請依自己的狀況修改PHP檔案。

修改佈景主題PHP檔時,一定要先備份!!一定要先備份!!一定要先備份!!很重要所以要講三遍!!

(1) 修改文章列表頁面 ( Article Post )

OceanWP 的文章列表頁面 ( Article Post ) ,文章資訊 meta X欄位的檔案位置在
/public_html/wp-content/themes/oceanwp/partials/entry/meta.php

打開 PHP 檔案,使用搜尋( ctrl + F )的方式,找到 2.2 章節提到的 ul 以及 li 的位置

ul 下方為佈景主題的迴圈( LOOP ),所以要將TOP10 的 PHP Code 加至這個範圍的下面。

Code 參數說明:

<i class=”far fa-eye”></i>
修改 class name 可以變更瀏覽人數前方的ICON

<?php if ( function_exists( ‘echo_tptn_post_count’ ) ) { echo_tptn_post_count(); } ?>
也就是 3.3 章節所提到TOP 10 提供的 PHP code

以下為小編修改過後的程式碼:

<li style="display: inline-flex;"><i class="far fa-eye"></i><?php if ( function_exists( 'echo_tptn_post_count' ) ) { echo_tptn_post_count(); } ?></li>

(2) 修改文章頁面 ( Single Post )

OceanWP 的文章列表頁面 ( Article Post ) ,文章資訊 meta X欄位的檔案位置在
/public_html/wp-content/themes/oceanwp/partials/single/meta.php

打開 PHP 檔案,使用搜尋( ctrl + F )的方式,找到 2.2 章節提到的 ul 以及 li 的位置

ul 下方為佈景主題的迴圈( LOOP ),所以要將TOP10 的 PHP Code 加至這個範圍的下面。

Code 參數說明:

<i class=”far fa-eye”></i>
修改 class name 可以變更瀏覽人數前方的ICON

<?php if ( function_exists( ‘echo_tptn_post_count’ ) ) { echo_tptn_post_count(); } ?>
也就是 3.3 章節所提到TOP 10 提供的 PHP code

以下為小編修改過後的程式碼:

<li style="display: inline-flex;"><i class="far fa-eye"></i><?php if ( function_exists( 'echo_tptn_post_count' ) ) { echo_tptn_post_count(); } ?></li>

大功告成,至前台確認文章列表頁面及文章頁面

文章列表頁面 ( Article Post )

文章頁面 ( Single Post )

本篇資訊參考於:https://www.digit-seed.com/top10-show-pageviews/

這個風風雨雨個社會  欲怎樣開花

少年家怎樣落地 咱攏是為著愛情來浪流連

Elementor 文章列表教學-使用Posts Table with Search & Sort 及 elementor 先列出文章日期再列出文章標題

Elementor 文章列表教學-使用Posts Table with Search & Sort 及 elementor 先列出文章日期再列出文章標題

近年來網頁的前端技術越來越進步,文章列表的呈現方式也有非常大的轉變,從以前制式化的條列式文章列表,轉變到近代的作品集或是多區塊的顯示方式,條列式的顯示方式只呈現日期、作者、標題,雖然前端版面的設計上比較單調,但可供用戶快速閱讀瀏覽;而作品集和多區塊,主要會先呈現精選圖片,吸引用戶的目光,利用視覺設計吸引操作者點擊文章,因此在前端版面的設計上就會比較豐富美觀。

本篇 Elementor 文章列表教學,使用的主題主題是付費版的 OceanWP ,頁面編輯器使用的是 Elementor PRO ,因客戶需要的文章列表類型是條列式的文章列表,並且還提出了以下幾點需求:

1、文章列表 顯示的順序必需為發表日期、文章標題。
2、頁面需要列出四種分類的文章列表,不希望篩選器有all的項目。
3、每頁10篇,且切換到下一頁時不會轉跳頁面。

為了滿足客戶的以上幾點需求,需要安裝 TAB套件 ( Tab plugin ) 以及 文章列表套件 ( Post list plugin ):

(1) Tab套件 的部分,因需要達到客戶要求的視覺效果,所以選擇安裝了 Element Pack pro ,此套件需要付費,如果有買OceanWP的人可以直接使用 OceanWP Elementor Widgets
(2) 文章列表 選擇安裝 Posts Table with Search & Sort,此套件使用免費的即可。

接下來開始製作文章列表,如果大家照著本篇elementor 教學,實做過後有什麼問題,歡迎點選頁面旁的FB聊天圖示,或是填寫聯絡表單小編會盡快回覆您的問題。

( 點圖前往官網 )

目錄

安裝 WordPress Plugin:Posts Table with Search & Sort、Element Pack pro

(1) 安裝 TablePress 文章列表工具

進入WordPress後台以後,外掛 ->安裝外掛 -> 搜尋 「Posts Table with Search & Sort」,安裝後啟動。

(2) 安裝 Elementor 第三方擴充套件: Element Pack pro

因 Element Pack pro 需要購買才能安裝,因此這邊不會多做說明,如果需要此外掛請點前往購買

新增文章分類、查看文章分類ID,並記錄ID

(1) 至文章分類,輸入分類名稱,點選新增分類按鈕

(2) 查看文章ID,記下文章ID編號

將滑鼠移至分類名稱上方,左下角會出現此分類的連結,連結中有一段文字 「taxonomy=category&tag_ID=34」,category&tag_ID也就是此分類的ID

如果覺得怕看錯,也可以對著連結按滑鼠右鍵,點選複製連結網址,在記事本貼上複製的網址,即可得到如下呈現的網址,此網址就是剛剛上述中提到,右下角顯示的網址。
https://www.dradvice.com.tw/wp-admin/term.php?taxonomy=category&tag_ID=34&post_type=post&wp_http_referer=%2Fwp-admin%2Fedit-tags.php%3Ftaxonomy%3Dcategory

新增 Elementor 樣板 ( Elementor Saved Templates )

(1) 至Elementor樣板 -> Saved Templates -> 新增

(2) 輸入樣板名稱

在這邊取名為產業訊息頁-健保公告,接著點選發佈即可。

(3) 編輯產業訊息頁-健保公告,插入短碼工具

點選使用Elementor編輯器,進入編輯畫面

進入編輯畫面後,至左方工具中尋找「短碼工具」,以拖曳的方式將工具拖至右方區塊

(3) 插入Posts Table with Search & Sort短碼

依需求自行修改設定
官方短碼說明文件

columns:title(標題)、content(內容)、date(發表日期)、author(文章作者)、category(分類名稱)
category:分類id,即上方2-2記下之ID
rows_per_pag:每一頁顯示文章的數量

此篇文章設定之短碼如下:
[posts_data_table columns="date,title" category ="34"  rows_per_page="10"]

(4) 點選下方更新

(5)退出編輯器

編輯並設定Element Pack pro 之 TAB 套件

(1) 插入 Tabs 工具

如果沒有 Element Pack pto 外掛的人,可以使用 OceanWP Elementor Widgets 的TAB工具。

(2) 設定 Tabs 工具

在 Tab items 新增一個項目,在這邊取名為健保公告,接著 Select Source 來源選擇 Elementor Template

下方的 Select Template 項目中,選擇第3步驟所新增的 Elementor Template 樣板

(3) 點選下方更新,退出編輯器

大功告成,至前台確認文章列表有無異常

這個風風雨雨個社會  欲怎樣開花

少年家怎樣落地 咱攏是為著愛情來浪流連