本章以計數器外掛與 Widget 作為實作主題，練習把功能、資料儲存、前台輸出與後台設定組合成更完整的外掛。

本章學習目標

能規劃計數器外掛，儲存使用次數，並建立可放入側邊欄或頁尾的小工具。

13.1 計數器外掛介紹

計數器可用來統計瀏覽次數、按鈕點擊、下載次數或表單送出次數。設計時要先決定計數範圍：全站、單篇文章、單一使用者或特定事件。

資料儲存選擇

  • 簡單全站數值：可用 options。
  • 文章相關數值：可用 post meta。
  • 大量事件紀錄：應考慮自訂資料表。

計數器需求分析

開始寫程式前，先釐清計數器到底要統計什麼。不同需求會導向不同資料結構：

  • 統計全站總瀏覽數：使用 option 即可。
  • 統計每篇文章瀏覽數：使用 post meta 較直覺。
  • 統計每日瀏覽趨勢：需要日期維度，可能要自訂資料表。
  • 統計使用者行為：要考慮隱私、登入狀態與資料保留政策。

本章示範以文章瀏覽計數為主，因為它能練習 post meta、前台更新與列表顯示。

避免灌水與效能問題

單純每次載入文章就加一，容易被重新整理灌水，也可能在高流量網站造成資料庫寫入壓力。簡化教學可以先接受這個限制；正式網站則可加入 cookie、快取或排程批次寫入。

13.2 計數器外掛實作

以下是使用 option 儲存全站計數的簡化範例：

function wp2026_increment_counter() {
    $count = (int) get_option('wp2026_counter', 0);
    $count++;
    update_option('wp2026_counter', $count);
    return $count;
}

文章瀏覽數 post meta

若要統計每篇文章瀏覽數，可以把數值存到該文章的 post meta。以下範例只在單篇文章頁、主查詢中增加瀏覽數。

add_action('wp', 'wp2026_track_post_views');
function wp2026_track_post_views() {
    if (!is_singular('post')) {
        return;
    }

    $post_id = get_queried_object_id();
    $views = (int) get_post_meta($post_id, '_wp2026_views', true);
    update_post_meta($post_id, '_wp2026_views', $views + 1);
}

這個版本適合教學理解，但正式環境可再加入 cookie 或 transient，避免同一使用者短時間內重複計數。

前台顯示

add_shortcode('wp2026_counter', function () {
    $count = (int) get_option('wp2026_counter', 0);
    return '<span class="wp2026-counter">' . esc_html($count) . '</span>';
});

若要顯示單篇文章瀏覽數，可以改讀目前文章的 post meta：

function wp2026_get_post_views($post_id = null) {
    $post_id = $post_id ?: get_the_ID();
    return (int) get_post_meta($post_id, '_wp2026_views', true);
}

add_shortcode('wp2026_post_views', function () {
    return esc_html(wp2026_get_post_views()) . ' 次瀏覽';
});

在後台文章列表加入欄位

為了讓管理者快速看到瀏覽數，可以在文章列表新增欄位。

add_filter('manage_post_posts_columns', 'wp2026_add_views_column');
function wp2026_add_views_column($columns) {
    $columns['wp2026_views'] = '瀏覽數';
    return $columns;
}

add_action('manage_post_posts_custom_column', 'wp2026_render_views_column', 10, 2);
function wp2026_render_views_column($column, $post_id) {
    if ('wp2026_views' === $column) {
        echo esc_html(wp2026_get_post_views($post_id));
    }
}

13.3 建立小工具 Widget

Widget 可讓管理者把功能放在側邊欄、頁尾或支援 Widget 的區域。區塊主題中傳統 Widget 的使用情境減少，但理解它仍有助於維護舊網站。

Widget 設計重點

  • 後台表單欄位要清楚。
  • 前台輸出要轉義。
  • 預設值要合理，避免空白畫面。
  • 功能不應依賴特定主題。

Widget 類別骨架

傳統 Widget 會繼承 WP_Widget，並實作前台輸出、後台表單與更新設定三個方法。

class WP2026_Views_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wp2026_views_widget',
            'WP2026 瀏覽數小工具',
            ['description' => '顯示目前文章瀏覽數']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<p>' . esc_html(wp2026_get_post_views()) . ' 次瀏覽</p>';
        echo $args['after_widget'];
    }
}

註冊 Widget：

add_action('widgets_init', function () {
    register_widget('WP2026_Views_Widget');
});

Widget 與區塊小工具

新版 WordPress 的小工具區也能放區塊，因此傳統 Widget 並不是唯一選擇。若你維護舊網站，傳統 Widget 很有用；若開發新功能，則可以評估用 shortcode、block 或 pattern 呈現。

本章練習

  1. 建立一個計數器 option。
  2. 用 shortcode 顯示目前數字。
  3. 設計一個 Widget 顯示計數器與標題。
  4. 測試停用外掛後前台是否不再輸出。