在你的WordPress安裝目錄中，進入wp-content/plugins資料夾，新增一個資料夾：

wp-content/plugins/simple-announcement/

接著在裡面新增一個檔案：simple-announcement.php

<?php
/**
 * Plugin Name: Simple Announcement
 * Description: 在每個頁面頂端顯示公告訊息。
 * Version: 1.0
 * Author: 你的名字
 */

// 1. 前端顯示公告
function sa_display_announcement() {
    $message = get_option('sa_announcement_text', '本站目前維護中，請稍後再試。');
    echo "<div style='background:#ffeb3b;padding:10px;text-align:center;font-weight:bold;'>$message</div>";
}
add_action('wp_body_open', 'sa_display_announcement');

// 2. 後台設定選單
function sa_add_admin_menu() {
    add_options_page('公告設定', '公告設定', 'manage_options', 'simple-announcement', 'sa_settings_page');
}
add_action('admin_menu', 'sa_add_admin_menu');

// 3. 後台設定頁面內容
function sa_settings_page() {
    ?>
    <div class="wrap">
        <h1>公告訊息設定</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('sa_settings_group');
            do_settings_sections('simple-announcement');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// 4. 註冊設定欄位
function sa_register_settings() {
    register_setting('sa_settings_group', 'sa_announcement_text');

    add_settings_section('sa_section', '公告內容', null, 'simple-announcement');

    add_settings_field(
        'sa_announcement_text',
        '公告文字',
        'sa_announcement_field_callback',
        'simple-announcement',
        'sa_section'
    );
}
add_action('admin_init', 'sa_register_settings');

function sa_announcement_field_callback() {
    $value = get_option('sa_announcement_text', '');
    echo '<input type="text" name="sa_announcement_text" value="' . esc_attr($value) . '" style="width:100%">';
}

可以看到後台已經多了一個 Plugin 可以啟用

進入網站就會發現上方多了黃色的公告囉！

額外說明

function sa_display_announcement() {
    $message = get_option('sa_announcement_text', '本站目前維護中，請稍後再試。');
    echo "<div style='background:#ffeb3b;padding:10px;text-align:center;font-weight:bold;'>$message</div>";
}
add_action('wp_body_open', 'sa_display_announcement');

add_action()：把這段輸出掛在 wp_body_open 的 hook 上，確保它出現在頁面的最上方。

function sa_add_admin_menu() {
    add_options_page('公告設定', '公告設定', 'manage_options', 'simple-announcement', 'sa_settings_page');
}
add_action('admin_menu', 'sa_add_admin_menu');

在 WordPress 後台「設定」選單中，新增一個「公告設定」子頁面。
add_options_page 是用來在「設定（Settings）」底下新增子選單項目的。

後台能夠輸入要更新的公告文字

也可以直接進入資料庫查看資料是否有儲存

儲存設定的關鍵在這行：

register_setting('sa_settings_group', 'sa_announcement_text');

它會儲存在資料庫的 wp_options 資料表中，可以用 SQL 查詢確認：

SELECT option_name, option_value
FROM wp_options
WHERE option_name = 'sa_announcement_text';

今天的內容就到這囉
Keep going, you’re getting stronger.
下篇文章，見～