【第 10 天】如何修改 WordPress 的後台設置選項

WordPress 為了使管理介面更容易被建立,並且確保安全和一致性 提供了兩個核心 API 給開發者使用,分別是設置 API 和選項 API。設置 API 被用來提供了一種創建選單和管理選單資料。選項 API 則是我們提供一種簡單的 key-value 方式來管理設置資料。

設置 API

為什麼使用設置 API

WordPress 2.7 之後增加的設置 API 可以讓我們半自動地管理含有設置表單的後台頁面,讓我們自定義設置頁面。讓我們可以輕輕鬆鬆的開發設置頁面。也就是說,我們使用 API 生成介面的元素後,可以確保我們的自定義設置頁面和WordPress 其他的管理介面一致,不會說每個外掛有每個不同的介面,這樣使用外掛的時候肯定很混亂!

如果今天我們創建了自己的設置頁面,WordPress 如果更新了,可能就會破壞我們的自定義設置,所以我們應該使用由 WordPress 核心提供的設置 API 來修改設置頁面。再來,使用 WordPress 設置 API,最直接的好處是,這隻 API 在底層默默的為我們做了很多工作,比如說可以讓我們獲得額外的安全措施、或者是自動為我們清理數據,我們可以省很多工。

使用設置 API

前面介紹了這麼多好處,不如來親自試看看設置 API 吧!

新增設置

我們可以使用 register_setting() 來註冊一個新的設置。此函式會協助我們在資料表({$wpdb->prefix}_options)中插入一條新的記錄。

register_setting(
    string $option_group, 
    string $option_name, 
    callable $sanitize_callback = ''
);

另外,我們可以使用 add_settings_section() 在現有設置頁面上添加新章節。

add_settings_section(
    string $id, 
    string $title, 
    callable $callback, 
    string $page
);

也可以使用 add_settings_field() 將字串新增到現有的章節上面。

章節是我們在 WordPress 設置頁面上看到的帶有同標題的設置群組。在外掛中,我們可以直接對著現有的設置頁面添加新章節,而不是創建一個新頁面。一來我們好維護,二來可以降低用戶的學習和使用成本

<?php
function eric_settings_init(){
   // 為 eric 頁面註冊一個新的設置
   register_setting('eric', 'eric_setting_name');

   // 在 eric 頁面上註冊新章節
   add_settings_section(
      'eric_settings_section',
      'Eric Settings Section',
      'eric_settings_section_cb',
      'reading'
   );

   // eric 頁面中,在 eric_settings_section 章節上註冊新設置
   add_settings_field(
      'eric_settings_field',
      'Eric Setting',
      'eric_settings_field_cb',
      'eric',
      'eric_settings_section'
   );
}
 
/**
 * 註冊 eric_settings_init 到 admin_init action hook 上面
 */
add_action('admin_init', 'eric_settings_init');
 

/**
 *  Callback function
 */
// 回傳章節內容
function wporg_settings_section_cb() {
   echo '<p>WPOrg Section Introduction.</p>';
}
 
// 回傳設定欄位
function wporg_settings_field_cb() {
   // 取得我們剛剛用 register_setting() 註冊的值
   $setting = get_option('eric_setting_name');
   // 輸出
   ?>
   <input type=text name=eric_setting_name value=<?php echo isset( $setting ) ? esc_attr( $setting ) : ''; ?>>
   <?php
}

取得設置

剛剛我們用到了 get_option() 函式,這邊說明一下這個韓式是做什麼用的,簡單來說就是我們可以用這個函式來獲取我們想要的設置資料。

get_option(
   string $option,
    mixed $default = false
);

選項 API

WordPress 1.0 中引入的選項 API 可以讓我們輕鬆的新增、讀取、更新和刪除 WordPress 選項,結合設置 API,我們可以控制設置頁面中的自定義選項。

選項在什麼地方保存?

選項會被存儲在 {$wpdb->prefix}_options 資料表中。

儲存方式

選項可以是單個值或者是陣列的形式存儲在 WordPress 資料表中。

保存為單個值的時候,選項值為單個字符串、整數等。

<?php
// 新增一個選項
add_option('eric_custom_option', 'hello world!');
// 取得選項
$option = get_option('eric_custom_option');

另外一種選項就是,如果我們需要保存大量選項,我們會把這些選項保存為陣列。

【第 09 天】WordPress 的 Shortcode

為了安全,在 WordPress 的世界中,是禁止在內容中運行 PHP 程式碼的,不過有時候我們還是希望說可以動態新增一些內容,所以在 WordPress 2.5 版中引入了 shortcode。

shortcode 是用讓我們在不插入 PHP 程式碼的情況下,動態新增內容的一段 code,對文章動態的新增相簿、播放影片、加入表單,或者實現更多自定義的功能。

WordPress 本身就內建了以下幾個 shortcode:

  • caption – 為圖片或影片添加說明
  • gallery – 顯示相簿
  • audio – 嵌入和播放音樂
  • video – 嵌入和播放影片
  • playlist – 顯示影音文件
  • embed – 顯示嵌入式內容

如果有在 WordPress 寫一陣子文章的話,應該常常用到,所以我就不贅述了。

基本 shortcode

新增一個 shortcode

我們可以使用 WordPress 提供的 shortcode API 來添加 shortcode,整個過程很簡單,使用 add_shortcode() 函式來註冊就可以了。

<?php
add_shortcode(
   string $tag,
    callable $func
);

這邊示範一下怎麼註冊 shrotcode

<?php
function eric_shortcode($atts = [], $content = null) {
   // do something to $content
   $content = 'Hello Eric!';
   // always return
   return $content;
}
add_shortcode('eric', 'eric_shortcode');

eric 是我們註冊的 shortcode,我們現在可以使用這個 shortcode

https://ithelp.ithome.com.tw/upload/images/20200909/20121194eZDEv55m2X.png

會調用 eric_shortcode 函式回傳的東西來顯示內容。
https://ithelp.ithome.com.tw/upload/images/20200909/20121194W8mMuxjF7J.png

在外掛中註冊 shortcode

和在主題中註冊 shortcode 不一樣,外掛在 WordPress 的執行過程中,時間點非常早!!因此,我們需要延遲添加 shortcode 的操作到 WordPress 初始化完成之後。網路上是建議使用 init action 來實現。

<?php
function eric_shortcodes_init() {
   function eric_shortcode($atts = [], $content = null) {
      // do something to $content
      $content = 'Hello Eric!';
      // always return
      return $content;
   }
   add_shortcode('eric', 'eric_shortcode');
}
add_action('init', 'eric_shortcodes_init');

刪除 shortcode

當我們不再需要一個 shortcode 時,也可以使用 remove_shortcode() 來刪除他。

<?php
remove_shortcode(
   string $tag
);

檢查 shortcode 是否存在

如果需要檢查 shortcode 是否已被註冊,我們可以使用 shortcode_exists() 函式來檢查。

Enclose Shortcode

WordPress 中有兩種形式的 shortcode:

  1. 開合 Shortcode: 類似於 HTML 中 br, img 這種不需要左右包起來的標籤。
  2. 自關閉 Shortcode: 類似於 HTML 中的 div, p 這種需要左右包起來的標籤。

如何解析

拿剛剛一開始寫的那段 eric_shortcode 函式來看

<?php
function eric_shortcode($atts = [], $content = null) {
   // do something to $content
   $content = 'Hello Eric!';
   // always return
   return $content;
}
add_shortcode('eric', 'eric_shortcode');

我們可以看到,我們定義的函式接受兩個參數,分別是 $atts 和 $content,其中就是這個 $content ,他預設值為 null,我們可以使用 PHP 函式 is_null() 來區他是哪種標籤。

舉例來說,剛剛自己定義了 shortcode 是 [eric]、其中包含的內容和結束標記 [/eric] 會被 shortcode 的callback function 的回傳值替換。

Shortcode 可以餵參數嗎?

可以,在這之前我們先看看餵參數是怎樣的餵法

[eric title=happy] Having fun with shortcodes. [/eric]

所以要怎麼達成這件事情呢?我們來寫一段簡單的程式碼:

<?php
function eric_shortcode($atts = [], $content = null){
    $atts = shortcode_atts(
        array(
            'title' => 'no title'
        ), $atts, 'eric' );

    return "Hello, ".$atts['title'];
}
add_shortcode('eric', 'eric_shortcode');

我們看看剛剛寫的 eric_shortcode 這個函式。
我會先用 shortcode_atts() 來指定預設的參數值,萬一在 shortcode 中沒有帶入參數的話的時候會使用預設值 Hello World。然後我們會回傳 "Hello, ".$atts['title'],這樣我們今天有參數就會用參數,沒參數也會用預設值。

沒有參數的時候:

https://ithelp.ithome.com.tw/upload/images/20200909/20121194BzrIunokcd.png

有參數的時候:
https://ithelp.ithome.com.tw/upload/images/20200909/20121194iHUr7UcPFr.png

Shortcode 的一些限制

Shortcode 解析器會不能處理把 開合 Shortcode 包在 自關閉 Shortcode,舉例:

[wporg] non-enclosed content [wporg] enclosed content[/wporg]

解析器在解析內容的時候,會把上面 Shortcode 中的 non-enclosed content [wporg]enclosed content 視為單個 shortcode 來看,而不是作為被 non-enclosed content 分隔的兩個 shortcode ,這邊可能要注意一下!

【第 08 天】WordPress 管理選單

好了,我們現在會新增一個外掛,也會對外掛做點事情了,但是總覺得還是少點什麼,是不是可以更好?

對了,就是少了一個管理選單!管理選單是 WordPress 後台左側顯示的後台管理功能選單,可以讓我們為外掛或是主題客製化一個設置選項頁面,像是這樣

https://ithelp.ithome.com.tw/upload/images/20200908/20121194b7NRCKYffb.png

選單在 WordPress 後台的左側顯示,可以在裡面塞進子選單。

第一層選單

接著,我們來看看如何添加一個選單到我們的 WordPress 後台。我們可以使用 add_menu_page() 函式來做新增。

<?php
add_menu_page(
    string $page_title,
    string $menu_title,
    string $capability,
    string $menu_slug, 
    callable $function = '',
    string $icon_url = '',
    int $position = null
);

看起來一堆參數,好像很複雜。我們馬上來試試看,假設我們今天想新增一個 LOVE_WP 的選單。

第一步,我們需要有一個函式來輸出我們選單頁面的 HTML :

<?php
function love_wp_options_page_html() {
   // 先確認 user 是否有權限使用選單
   if (!current_user_can('manage_options')) {
      return;
   }
   ?>
   // 下面開始寫一些你想呈現的 HTML
    ...
   <?php
}

第二步,把剛剛的函式放到 admin_menu action hook 上面。

<?php
function love_wp_options_page() {
   add_menu_page(
      'LOVE WP', // 頁面標題
      'LOVE WP', // 選項標題
      'manage_options', //這個選單給用戶的功能
      'love_wp', // 選單的 slug 名稱(必須唯一)
      'love_wp_options_page_html', // 要輸出此頁面內容的函式
      plugin_dir_url(__FILE__) . 'images/icon_test.png', // 這個選單的的 icon 的URL
      20 // 選單顯示的順序位置
   );
}
add_action('admin_menu', 'love_wp_options_page');

這樣我們就可以為我們的第一個外掛,建立第一個選單了!

https://ithelp.ithome.com.tw/upload/images/20200908/20121194GNBlJvBWQk.png

使用 PHP 創建 HTML

為了讓我們的程式碼提高可移植性,所以最佳實踐會是創建一個包含 callback function 的文件。網路上建議把一個文件路徑作為 $menu_slug 參數傳遞給 $function 參數,用這種方法註冊選單:

<?php
function love_wp_options_page()
{
   add_menu_page(
      'LOVE WP',
      'LOVE WP',
      'manage_options',
      plugin_dir_path(__FILE__) . 'admin/view.php', // 把 view 提取出來
      null,
      plugin_dir_url(__FILE__) . 'images/icon_test.png',
      20
   );
}
add_action('admin_menu', 'love_wp_options_page');

刪除頂級菜單

我們也可以刪除後台中已經註冊好的選單,使用 remove_menu_page() 函式。

remove_menu_page(
    string $menu_slug
);

例如說,我今天想要從 WordPress 後台刪除 工具 這個選單。這裡我們的優先權設定為 99 ,是因為在刪除之前,我們需要確保已經註冊了這個選單。所以,刪除的優先級應該要比註冊的低。

<?php
function want_to_remove_options_page(){
   remove_menu_page('tools.php');
}
add_action('admin_menu', 'want_to_remove_options_page', 99);

我們的工具就被移除囉!

https://ithelp.ithome.com.tw/upload/images/20200908/20121194aIyKdumQYK.png

子選單

如果我們需要添加一個子選單到 WordPress 後台,跟剛剛的選單新增方式很像,但是,這次是使用 add_submenu_page() 函式。

<?php
add_submenu_page(
   string $parent_slug,
    string $page_title,
    string $menu_title,
    string $capability,
    string $menu_slug,
    callable $function = ''
);

假設,我們今天想在剛剛的選單中,添加一個子選單

第一步,我們一樣也要有個函式來輸出我們的 HTML。

<?php
function love_wp_sub_options_page_html() {
   // check user capabilities
   if (!current_user_can('manage_options')) {
      return;
   }
   ?>
    //也是寫一堆 HTML
    ....
   <?php
}

第二步,把上面的函式放到 admin_menu Action hook 上

<?php
function love_wp_sub_options_page() {
   add_submenu_page(
      'love_wp', // 第一層選單的 slug
      'Options',
      'Options',
      'manage_options',
      'love_wp_option',
      'love_wp_sub_options_page_html'
   );
}
add_action('admin_menu', 'love_wp_sub_options_page');

太好了,我們這樣就有選單和子選單了

https://ithelp.ithome.com.tw/upload/images/20200908/20121194LWX7BK4Oio.png

刪除子菜單

刪除子選單的方法和刪除第一層選單是一樣的。

輔助函數

順帶一提, WordPress 提供了了許多好用的輔助函式,我們只需要設置好了 $parent_slug 參數,就可以使用相應的函式,快速的新增頁面到我們的第一層選單。以下是 WordPress 為我們定義好的輔助函式。

add_dashboard_page() –index.php
add_posts_page() –edit.php
add_media_page() –upload.php
add_pages_page() –edit.php?post_type=page
add_comments_page() –edit-comments.php
add_theme_page() –themes.php
add_plugins_page() –plugins.php
add_users_page() –users.php
add_management_page() –tools.php
add_options_page() –options-general.php
add_options_page() –settings.php

【第 07 天】WordPress 如何 Debug?

前幾天,我們開始試著在 WordPress 埋了 hook ,用了自己的 hook ,也用了 WordPress 提供的幾個好用的 hook 。在這過程,應該有些人跟筆者有一樣的困擾,就是噴了狀態碼 500 ,也只能雙手一攤盲測(誤)

其實,WordPress 也有提供 debug mode 可以使用,接著就來講講 WordPress 提供的 debug mode。

開啟 WordPress Debug

我們打開 WordPress 根目錄底下的 wp-config.php 檔案,裡面可以找到 define(‘WP_DEBUG’, false),就如同字面上的意思,這是 WordPress debug mode 的開關,預設值是關閉的。

我們可以把 false 改成 true ,打開後可以協助我們縮小問題的範圍,快速的找到 bug。

Debug Log

還有一個地方是 define( 'WP_DEBUG_LOG', true ); ,我也會習慣把它打開,啟動後,錯誤日誌會被放在 / wp-content 目錄中,打開 debug.log 文件後,可以清楚地看到錯誤發生的紀錄。

儲存查詢

最後一個是, define('SAVEQUERIES', true); ,這我通常也會打開一起服用,他會同時會將 SQL 的查詢也記錄下來,方便我們除錯。開啟這些設定後,都會將資訊寫至 wp-content/debug.log 檔案中。

不過要注意 SAVEQUERIES 可能會比較耗系統資源,非必要的時候還是把它關掉會比較好!

自定義 Log file 位置

如果想要自己定義 log file 要放在哪,也可以自己定義:

define('WP_DEBUG', true); 
ini_set('log_errors', 'On');
define( 'WP_DEBUG_DISPLAY', false );
ini_set('error_log', 'path_you_want_to_put');

一定要 SSH 進去看 Log?

不一定,有些 WordPress 外掛 會提供一個 GUI 介面,不過我個人比較不習慣這樣用,我看了網路上推薦的是 [WP Log Viewer](https://wordpress.org/plugins/wp-log-viewer/),裝好之後,就可以直接在 WordPress 介面上看到錯誤訊息。

但是,看起來好像很久沒有維護了,上次維護是三年前,所以大家就斟酌用:)

我之後會拉一天來聊聊好用的開發工具

【第 06 天】WordPress 啟用、停用、刪除外掛

啟用、停用、刪除外掛?阿不就去 WordPress 後台的外掛列表,動動手指頭按下去就好了?

當然不是這樣了,不然我這是來搞笑的嗎?

今天要聊的是三個的 hooks!透過這三個 hook 可以在自己的外掛被啟用、停用或是刪除的這一瞬間,做點事情。

Set the activation hook for a plugin.

首先第一個是 register_activation_hook() ,官方的介紹是『Set the activation hook for a plugin.』,簡單來說就是設置外掛啟動時的 action hook。我們直接拿官方文件上的範例來看。

function pluginprefix_setup_post_type() {
    // 註冊 book 自定義文章類型
    register_post_type( 'book', ['public' => 'true'] );
}
add_action( 'init', 'pluginprefix_setup_post_type' );
 
function pluginprefix_install() {
    // 拿剛剛定義的副程式來用
    pluginprefix_setup_post_type();
 
    // 註冊文章類型後,更新固定連結的規則
    flush_rewrite_rules();
}

// 
register_activation_hook( __FILE__, 'pluginprefix_install' );

外掛啟動後,就會新增了一個 book 這個 post type

Set the deactivation hook for a plugin.

register_deactivation_hook() ,在我們暫停運行外掛的時候,我們可以透過這個 hook 來清理一些臨時的資料。

inprefix_deactivation() {
    // 取消註冊文章類型
    unregister_post_type( 'book' );
    // 更新固定連結規則
    flush_rewrite_rules();
}

register_deactivation_hook( __FILE__, 'pluginprefix_deactivation' );

再回去剛剛的那篇 post ,就會發現 WordPress 提示說『無效的內容類型。』

今天如果我又重啟了這個外掛,會發現 這篇 post 又正常運作囉!

Set the uninstallation hook for a plugin.

最後就是要來介紹下 register_uninstall_hook() ,在我們刪除外掛的時候會使用到,舉剛剛的例子來說

register_uninstall_hook(__FILE__, 'pluginprefix_function_to_run');

今天我們第一次認識了 WordPress 提供的 hooks,而且還三個!然後在我寫這篇文章的時候,發生一件很討厭的事情,就是我出錯的話就直接 return status code ,讓我不知道怎麼 debug ,所以明天就來聊聊 debug 吧!

【第 05 天】聊聊 WordPress 的 Filter Hooks

今天來介紹一下 Filter Hooks ,這是 WordPress 的另一種 hook,可以讓我們通過某個 Filter 鉤子上的呼叫函式來修改某些函式產生的數據。

如同昨天,在使用 filter hook 之前,我們來看看怎麼埋的。

WordPress 同樣的,提供了一個好用的函式讓我們可以埋 filter hook ,叫做 apply_filters()

$c = apply_filters('do_something',$a, $b); // 埋下一個名叫 do_something 的 filter hook

這邊跟昨天的 action hook 有點不同,就是它會有回傳值。

接著,我們可以通過兩個步驟新增一個函數到剛剛埋的 filter hook 上面。

  1. 創建一個自己定義的回呼函式(Callback function)
  2. 使用 add_filter() 函式,把這個函式增加到對應的 filter上面

add_filter() 也一樣至少需要兩個參數,第一個是 hook 名稱(也就是你要去觸發哪個 hook )和回呼函式(就是剛剛你創建的那個回呼函式)

下面示範一個在剛剛埋的 action hook (do_something)上,插入我的自定義 love_wp 回呼函式:

<?php
function love_wp($love) {
    return $love;
}

add_filter('do_something', 'love_wp');

這裡可以看到和昨天的 action hook 有點不同,那就是, love_wp 需要 return 。

最後Madd_filter() 和 add_action() 相同,也可以接受兩個額外的參數,分別是優先級,和 定義傳遞給回呼函式的參數數量。

【第 04 天】Filter Hooks

今天來介紹一下 Filter Hooks ,這是 WordPress 的另一種 hook,可以讓我們通過某個 Filter 鉤子上的呼叫函式來修改某些函式產生的數據。

接著我們要來試看看 filter hook !

我們可以通過兩個步驟新增一個函數到某個 filter  上面。

  1. 創建一個自己定義的回呼函式(Callback function)
  2. 使用 add_filter() 函式,把這個函式增加到對應的 filter上面

add_filter() 也一樣至少需要兩個參數,第一個是 hook 名稱(也就是你要去觸發哪個 hook )和回呼函式(就是剛剛你創建的那個回呼函式)

接著做個示範,假設我們今天有一篇標題為『我愛 WordPres』的文章,透過下面的示範,會在顯示標題時把標題修改為新的標題 『文章:我愛 WordPress』

 

<?php
function eric_filter_title($title) {
    return '文章:' . $title;
}
add_filter('the_title', 'eric_filter_title');

add_filter() 和 add_action() 相同,也可以接受兩個額外的參數,分別是優先級,和 定義傳遞給回呼函式的參數數量。

以下是個範例,今天要在 <body> 滿足特定條件時,向標籤添加 CSS 類別:

<?php
function eric_css_body_class($classes) {
        $classes[] = 'eric-is-awesome';
    return $classes;
}
add_filter('body_class', 'eric_css_body_class');

明天再來介紹怎麼在自已的外掛字定義 hook 吧!

【第 03 天】第一個 WordPress 外掛

接著,我們要開始來建立第一個 WordPress 外掛囉!

在這之前,我們先來快速地檢視看看,WordPress 怎麼去知道我們的一個外掛。就是 WordPress 會搜索 wp-content/plugins 目錄(及其子目錄,也就是插件自己的目錄),來查找帶有 WordPress 外掛 header comments 的PHP 文件。

建立第一個外掛

整個流程大概是這樣的,因此我們第一步就先到 WordPress 的 wp-content/plugins 路徑下創建一個全新的資料夾吧,資料夾命名為這個外掛的名稱,接著切換到這個資料夾中,創建一個 PHP 檔案(我個人習慣和資料夾同名稱,你也可以自己隨意命名)。

如果你是 CLI 介面下,就是依序輸入這些指令:

$ cd wp-content/plugins
$ mkdir eric-plugin
$ cd eric-plugin
$ vim eric-plugin.php

打開剛剛建立好的的 PHP 檔案之後,我們就可以開始開發 WordPress 外掛了喔!

定義外掛

首先,為了剛剛提到的要讓 WordPress 去查找外掛 header comments 的 PHP 文件,我們需要為外掛添加一個昨天我們提到的 DocBlock,這是一個特殊格式的 PHP 註解,來定義外掛的基本資料。

<?php
/*
Plugin Name: YOUR PLUGIN NAME
*/

這份註解呢,至少需要包含外掛名稱,也可以選擇性的包含以下幾個部分:

Plugin Name:外掛的名稱。
Plugin URI:外掛的網站。
Description:外掛的簡短描述。(不要超過 140 個字)
Version:外掛的當前版本。
Author:外掛作者名字。
Author URI:外掛作者網站或其他網站上的個人資料。
License:外掛授權方式(例如GPL2)。
License URI:外掛授權方式的全文網址連結(例如 https://www.gnu.org/licenses/gpl-2.0.html)。
Text Domain:外掛的 Gettext 。
Domain Path:告訴 WordPress 在哪裡可以找到翻譯。
儲存檔案後,打開 WordPress 後台的外掛列表,就可以看到我們剛剛建立的外掛囉!

Hook

要寫 WordPress 外掛,最重要的就是 hook 了,接著我們要來介紹一下 hook!

還記得前一章說過的嗎?『Don’t touch WordPress core.』,也就是我們不應該去動到 WordPress 的核心程式碼,那這樣怎麼辦呢?正因此,WordPress 提供了許多好用的 hook,讓我們可以在各式各樣的時機和場合,去達成我們想要的目的!

WordPress 的程式中埋了許多 hook ,當程式執行到有放 hook 的地方時,WordPress 就會去找出所有對應到自己的 hook function ,然後去執行他們。至於 hook function ,我們會在裡會放有我們想實作的功能,可能是存取資料庫、修改網頁程式邏輯。所以也就是說,我們在 hook function 裡寫好我們所需的功能後,就可以利用「加入至對應 hook」的語法,把寫好的 hook function鈎到該 hook 上,使得該 hook 被執行到時,也會連帶執行我們想實作的功能。

在 WordPress 世界中 hook 又分為兩種,分別是「Action Hook」及「Filter Hook」。

至於要怎麼分這兩個 hook 呢? 使用 action hook 的時候,就是 WordPress 核心做它該做的事,而你做你想做的事,各自做各自的事情。

而使用 filter hook 的時候,WordPress 核心會期望你拿它提供的參數,拿著這個參數去做完你想做的事後,回傳一個值給WordPress 核心,來接著完成它該做的事。

明天我們再來討論如何埋 actoin hook ,以及如何使用 action hook

【第 02 天】什麼是 WordPress 外掛?為什麼開發自己的 WordPress 外掛?

在最開始,我們先來了解什麼是外掛?以及為什麼開發自己的 WordPress 外掛?

WordPress 外掛

在 WordPress 的世界中,我們會用外掛用來擴展 WordPress 的核心功能,所謂的外掛就是由許多 PHP 程式碼和其他相關資源組成(可能是圖片、JavaScript、CSS 這類的資源),而我們只需要遵循WordPress 開發規範,就可以把一些想法在 WordPress 上面輕鬆的實現!

這也讓我們可以更容易的站在 WordPress 基礎上,添加自己需要的附加功能。舉一個在 WordPress 的世界中,不得不知道、也是最簡單的外掛『Hello Dolly 』,這個外掛只包含了 DocBlock(晚點會提到這是什麼)、一些 PHP function,和一些 Hooks(晚點也會提到這是什麼),我們就可以在 WordPress 的控制台首頁顯示著名歌曲的歌詞!

改 WordPress Core 不就好了?

再來,大家會很好奇,為什麼開發自己的 WordPress 外掛?為什麼不直接去改網站的程式碼就好了呢?

在 WordPress 的世界中,有一個基本準則,那就是:『不要改變 WordPress 核心』(原文:Don’t touch WordPress core.),也就是說,我們不可以通過修改 WordPress 核心文件來達成某些功能,怎麼說呢?舉例說, WordPress 在更新的時候,會直接覆蓋掉所有 WordPress 核心文件,因此之前修改的東西都會因為覆蓋而消失。

所以說,我們要在 WordPress 網站上面添加任何功能都應該去使用 WordPress 所提供的 API,以外掛或是主題的方式去做添加。

也正是在這個基本準則下, 我們可以很輕鬆的為 WordPress 添加很多我們『額外』需要的功能。最酷的是,外掛開發者可以在外掛完成後,免費將這些外掛放到 WordPress.org,而 WordPress 網站主可以在後台很輕鬆的安裝和升級這些外掛,這使得 WordPress 生態圈提供了很大的便利性

【第 01 天】WordPress 遇上 Chatbot,像極了愛情

大家好,我是艾瑞克

聽說第一天開頭,都要先上一點前言

總之,最近想學學 WordPress 外掛的開發,所以我就決定,再接下來的 30 天,把我學習的心得記錄下來,作為我這次鐵人賽的參賽內容。當然,要開發一個有趣的外掛,才會有繼續寫下去的動力(應該吧),所以我決定最後的時間,來寫出一個我熟悉的 LINE chatbot 通知 …的外掛。

然後聽說第一天的第二段,要放上之後的章節規劃,這樣就會感覺自己好像寫完了(誤),所以我也來放一下

【第 01 天】WordPress 遇上 Chatbot,像極了愛情
【第 02 天】什麼是 WordPress 外掛?為什麼開發自己的 WordPress 外掛?
【第 03 天】第一個 WordPress 外掛
【第 04 天】聊聊 WordPress 的 Action Hooks
【第 05 天】聊聊 WordPress 的 Filter Hooks
【第 06 天】WordPress 啟用、停用、刪除外掛
【第 07 天】WordPress 如何 Debug?
【第 08 天】管理選單
【第 09 天】WordPress 的 Shortcode
【第 10 天】如何修改 WordPress 的後台設置選項
【第 11 天】如何管理 WordPress metadata
【第 12 天】自定義 WordPress 文章類型
【第 13 天】自定義 WordPress 分類方法
【第 14 天】WordPress 用戶角色
【第 15 天】WordPress 的 HTTP API
【第 16 天】JavaScript、Ajax 和 jQuery 應用到 WordPress
【第 17 天】WP Cron
【第 18 天】WordPress 操作資料庫
【第 19 天】上架第一個外掛到 WordPress.org
【第 20 天】WordPress 外掛開發者工具
【第 21 天】什麼是 LINE Chatbot notify?
【第 22 天】開一個 LINE OA
【第 23 天】初始化一個 WordPress 外掛
【第 24 天】存資料到 WordPress 資料庫
【第 25 天】找找我們會用到的 WordPress hooks
【第 26 天】WordPress 也會發 LINE 通知囉!
【第 27 天】什麼是 LINE Chatbot push?
【第 28 天】LINE Chatbot push 和 notify 的差異
【第 29 天】讓 WordPress 再次…發送通知
【第 30 天】總結