當外掛檔案被啟用並載入後，就可以在主檔案內開始撰寫PHP程式碼

WordPress並沒有規定要如何架構外掛程式碼(檔案架構、模組化等等)，但有給出一個Code Style的規範，可參考 PHP Coding Standards, wordpress.org

可以直接就執行一些動作

<?php
// register hook
add_action('wp_head', 'octopuswp_foo_bar');
function octopuswp_foo_bar()
{
    // do something in hooked function
}

// do something
$order = wc_get_order(123);
$order->update_meta_data('_foo', 'bar');
$order->save();

但，這樣的作法可能會有問題，以上列程式碼為例

1. octopuswp_foo_bar 定義在全域下，可能會與其他第三方外掛的名稱衝突
2. 用到了WooCommerce的wc_get_order，如果你的外掛在WooCommerce之前被載入，那這行就會出錯，因為找不到wc_get_order這個function，WordPress會依照資料夾名稱順序去載入外掛

考慮到WordPress的生態系，會用其他第三方外掛，都命名在全域下，會有名稱衝突的風險，因此最好的做法是OOP，將外掛包成一個類別

<?php
// 判斷類別是否已經存在這個Class
if(!class_exists('OctopusWP_Plugin')) {
    class OctopusWP_Plugin
    {
        public function __construct()
        {
            $this->register_hooks();
            $order = wc_get_order(123);
        }

        /**
         * 註冊所有hooks
         */
        private function register_hooks()
        {
            // hook後面給的都是一個"可被呼叫的"的函式名稱，因為foo_bar是這個類別的方法，所以必須要傳入這個類別的實體(instance)，才可在外部被呼叫，且foo_bar必須為public
            add_action('wp_head', [$this, 'foo_bar']);
        }

        public function foo_bar()
        {
            // do something
        }
    }
    // 初始化
    new OctopusWP_Plugin();
}

透過類別，來限制外掛的命名域，類別內方法重複並沒有關係，只要類別名稱不重複就好

呈上述問題2，這樣直接new出來的方式，例如上面程式碼的建構式內還是有用到了wc_get_order，如果外掛在WooCommerce前被載入的話，還是會出錯，假如你的外掛是依賴在某個外掛下面，例如是一個WooCommerce用的金流外掛或是物流外掛，那最好是確保你的外掛載入在WooCommerce後，可以使用

<?php
// 判斷類別是否已經存在這個Class
if(!class_exists('OctopusWP_Plugin')) {
    class OctopusWP_Plugin
    {
        // 存放外掛類別的instance
        public static $instance;

        // 取得此類別的instance
        public static function get_instance()
        {
            // 判斷是否有初始化過
            if(is_null(self::$instance)) {
                self::$instance = new self();
            }
            return self::$instance;
        }

        public function __construct()
        {
            $this->register_hooks();
            $order = wc_get_order(123);
        }

        /**
         * 註冊所有hooks
         */
        private function register_hooks()
        {
            // hook後面給的都是一個"可被呼叫的"的函式名稱，因為foo_bar是這個類別的方法，所以必須要傳入這個類別的實體(instance)，才可在外部被呼叫，且foo_bar必須為public
            add_action('wp_head', [$this, 'foo_bar']);
        }

        public function foo_bar()
        {
            // do something
        }
    }
    // 在特定的hook時間點再初始化外掛
    // WooCommerce載入完之後會呼叫的action hook
    add_action('woocommerce_init', ['OctopusWP_Plugin', 'get_instance']); // 因為get_instance是static函式，所以只要給類別的名稱就行
    // 所有外掛都被載入完之後會呼叫的action hook
    add_action('plugins_loaded', ['OctopusWP_Plugin', 'get_instance']);
}

初始化的方法改成get_instance的方式，可以直接定義在類別內並傳入action hook

初始化的時機點也不是在外掛檔案被載入時馬上初始化，而是再hook到某一個action，在action被呼叫時再初始化

當然，如果你的外掛沒有任何依賴任何其他外掛，或者下列情形，就是直接初始化就好

// 判斷類別是否已經存在這個Class
if(!class_exists('OctopusWP_Plugin')) {
    class OctopusWP_Plugin
    {
        // 存放外掛類別的instance
        public static $instance;

        // 取得此類別的instance
        public static function get_instance()
        {
            // 判斷是否有初始化過
            if(is_null(self::$instance)) {
                self::$instance = new self();
            }
            return self::$instance;
        }

        public function __construct()
        {
            $this->register_hooks();
        }

        /**
         * 註冊所有hooks
         */
        private function register_hooks()
        {
            // hook後面給的都是一個"可被呼叫的"的函式名稱，因為foo_bar是這個類別的方法，所以必須要傳入這個類別的實體(instance)，才可在外部被呼叫，且foo_bar必須為public
            add_action('wp_head', [$this, 'foo_bar']);
        }

        public function foo_bar()
        {
            // do something

            // 雖然這裡有用到wc_get_order，但是foo_bar方法是在wp_head被呼叫時才會呼叫的，而這時WooCommerce已經被載入完畢了，所以不會出錯
            $order = wc_get_order(123);
        }
    }
    OctopusWP_Plugin::get_instance();
}

總之，這裡只要注意一下程式有載入順序，在外掛初始化時不能呼叫還沒被定義的方法或類別

但如果是在被hook的方法內，因在註冊hook時只會紀錄hook上去的方法資訊，在實際hook被呼叫時才會執行該方法

這篇文章 初始化一個WordPress外掛 最早出現於 OctopusWP | WordPress客製開發專家。

1. 建立外掛資料夾

首先，在WordPress中，外掛的資料夾會放在/wp-content/plugins下，WordPress會將每一個資料夾視為一個外掛(而非外掛名稱)

所以第一步就是在/wp-content/plugins下建立一個資料夾

2. 建立外掛主檔案

WordPress會到外掛資料夾下找尋符合以下條件的PHP檔案

<?php
/**
 * Plugin Name: OctopusWP Demo Plugin
 */

當檔案內有PHP註解並包含 Plugin Name:的，就會是一個有效的外掛主檔案(檔案名稱隨意)；後面加上外掛名稱後，就會出現在外掛列表上

當按下啟用後，WordPress就會將這個檔案載入，

經測試，一個外掛下可放好幾個外掛主檔案，但實務上，還是一個資料夾一個外掛主檔案為原則

其他資訊如描述、作者、作者網址、外掛網址、版本：

<?php
/**
 * Plugin Name: OctopusWP Demo Plugin
 * Description: 外掛描述
 * Author: OctopusWP
 * Author URI: https://www.octopuswp.com
 * Plugin URI: https://www.octopuwsp.com
 * Version: 1.0.0
 */

在外掛列表呈現的結果：

這篇文章 在WordPress中建立外掛的方法 最早出現於 OctopusWP | WordPress客製開發專家。

各種內容的列表頁的表格即是，無論是商品、文章、頁面、作品等等，只要向WordPress註冊了一個文章類型(Post type)，WordPress就會自動幫你產生一個相關的列表管理頁，讓你可管理自訂文章類型的內容，而不用再自己寫管理頁面。

例如WooCommerce提供的shop_order(訂單)這個文章類型的列表頁

之後再來細談列表頁的產生機制，和如何產生自訂內容的列表頁(使用WP_List_Table)

有時候要在列表頁進行一些快速操作或是顯示一些資訊，而不用再點進去編輯頁面看，就會需要在列表頁加上自訂欄位

如本站開發的”WooCommerce 綠界科技B2C電子發票模組專業版“這個外掛，需要在訂單列表內加入一個電子發票欄位，以便進行快速操作

以下示範如何在WooCommerce的商品列表內加入自訂欄位，並顯示商品的重量資訊

1. 加入自訂欄位

使用的filter hook為manage_{$post_type}_posts_columns，$post_type為文章類型，可在某個特定的文章類型列表中加入一個自訂欄位

如果要在所有文章類型的列表中加入，使用manage_posts_columns

<?php
// 商品的post type為product
add_filter('manage_product_posts_columns', 'octopuswp_add_product_weight_column');

/**
 * 加入重量欄位
 * @param array $columns 欄位資訊
 * @return array
 */
function octopuswp_add_product_weight_column($columns)
{
    // $columns會傳入所有欄位的資訊，只需要新增進去即可
    // product_weight為自訂的key
    $columns['product_weight'] = '重量';
    return $columns;
}
?>

2. 加入自訂欄位的資料

加入欄位之後，再來就是要把欄位資料放上去，使用manage_{$post_type}_posts_custom_column這個action hook

如果不指定文章類型，則使用manage_posts_custom_column

<?php
// 商品的post type為product
add_action('manage_product_posts_custom_column', 'octopuswp_print_product_weight_to_column', 10, 2);

/**
 * 加入重量欄位的資料
 * @param string $column_name 欄位名稱
 * @param int $post_id 文章ID
 */
function octopuswp_print_product_weight_to_column($column_name, $post_id)
{
    // WordPress在對於表格的每一行與每個欄位都會呼叫一次這個action hook，並將當下的欄位名稱及文章ID傳入
    // 所以要判斷當下的欄位是不是剛剛新增的，如果是的話，再顯示資料
    // product_weight為剛剛新增的欄位key
    if('product_weight' == $column_name) {
        $product = wc_get_product($post_id);
        echo $product->get_weight();
    }
}
?>

這篇文章 加入自訂欄位至WordPress後台列表頁 最早出現於 OctopusWP | WordPress客製開發專家。

在寫Javascript的過程中，有時會遇到需要將後端的資料傳到Javascript內的問題，如多國語系字串、設定檔等，讓Javascript可以使用這些資料

多國語系字串是最常見的情境，因為WordPress的翻譯機制依賴後端處理mo檔案來產生本地化字串，如果你的Javascript內需要控制顯示某些訊息，但這些訊息又要跟著翻譯檔案來翻譯成本地化訊息的話，就會需要特別處理過這個訊息的取得方式

1. 在Javascript內使用翻譯過後的字串

使用wp_localize_script這個function，在註冊過script之後定義需要傳入的資料以及資料的物件名稱

wp_localize_script有3個參數：

• handle，需要套用的Javascript檔案handle名稱
• object_name，Javascript全域物件名稱，WordPress會將這些資訊包在這個物件內
• data，需要傳入的資料

<?php
add_action('wp_enqueue_scripts', 'octopuswp_enqueue_scripts');
/**
 * 傳送後端資料到Javascript
 */
function octopuswp_enqueue_scripts()
{
    // 取得子主題的目錄URL

    $stylesheet_dir_uri = get_stylesheet_directory_uri();

    // 註冊Javascript

    wp_register_script('octopuswp-single-post', $stylesheet_dir_uri . '/assets/js/single-post.js', ['jquery']);

    // 註冊此Javascript的需要用到的資料
    
    wp_localize_script('octopuswp-single-post', 'OctopusWP_Single_Post', [
        // 使用翻譯函式來翻譯字串Hello World
        'helloWorld' => __('Hello World', 'octopuswp')
    ]);

    // 引入(enqueue)
    
    if(is_single() && 'post' == get_post_type()) {
        wp_enqueue_script('octopuswp-single-post');
    }
}
?>

WordPress會在這個Javascript被引入(enqueue)時，在html下產生一個全域的Javascript物件，再將資訊放在裡面

因此在Javascript內就可以使用OctopusWP_Single_Post物件去存取裡面的資訊

alert(OctopusWP_Single_Post.helloWorld)

當然wp_localize_script內可傳入的不只是本地化字串，任何資訊都行，端看需求而定

這篇文章 WordPress如何將後端資料傳給自訂的Javascript檔案內使用 最早出現於 OctopusWP | WordPress客製開發專家。

如果是自己寫的程式碼，有的人會選擇將程式碼寫在後台主題或外掛提供的自訂CSS或Javascript設定內，但對於有版本控制需求的人，還是必須寫在檔案內才能控制

1. 引入外部CSS檔案或JS檔案

可以使用兩個hook：

wp_enqueue_scripts：前台使用

admin_enqueue_scripts：後台使用

<?php
add_action('wp_enqueue_scripts', 'octopuswp_enqueue_scripts');
/**
 * 引入外部CSS或JS檔案
 * 以下示範在單一文章頁面引入自訂的Javascript與CSS檔案
 * 已經在子主題assets/js放入了single-post.js檔案，在assets/css放入了single-post.css檔案
 */
function octopuswp_enqueue_scripts()
{
    // 取得子主題的目錄URL
    
    $stylesheet_dir_uri = get_stylesheet_directory_uri();
    
    // 通常分成兩個步驟
    // 1. 先向WordPress註冊你的檔案名稱，檔案來源

    // 註冊Javascript檔案，使用wp_register_script這個function
    // wp_register_script有五個參數：
    // handle，自訂的唯一名稱
    // src，檔案的來源url，可以是本站URL，可以是外部CDN URL
    //   如果是放在子主題，可以用 get_stylesheet_directory_uri()來取得子主題資料夾的url
    //   如果是放在外掛，用plugin_dir_url()，來取得外掛目錄的url
    // dependencies，這個檔案跟依賴哪些檔案，WordPress會幫你依序引入，填入的是其他已註冊好的檔案的handle，WordPress已經有內建一些可以用，如jquery
    //   例如，你的Javascript檔案裡面有用到jquery，那就必須將他引入在jquery後面，否則會發生找不到jquery的錯誤
    // version，這個檔案的版本，WordPress在引入時會自動加上版本的參數，如果有自訂檔案版本，可填，不填的話會自動帶入WordPress版本
    // in_footer，是否是在footer(</body>前)引入，否則的話會引入在head，預設是false

    wp_register_script('octopuswp-single-post', $stylesheet_dir_uri . '/assets/js/single-post.js', ['jquery']);

    // 註冊CSS檔案，使用wp_register_style這個function，參數跟wp_register_script差不多唯獨第五個參數不同
    // media，用在html <link>標籤的media屬性，可定義不同的media typ，預設是all

    wp_register_style('octopuswp-single-post', $stylesheet_dir_uri . '/assets/css/single-post.css');

    // 2. 正式引入
    // 使用wp_enqueue_script與wp_enqueue_style直接傳入handle名稱即可，如此就會在所有頁面中引入

    wp_enqueue_script('octopuswp-single-post');
    wp_enqueue_style('octopuswp-single-post');

    // 如果是要在特定頁面中引入，可以加入判斷條件
    // 當頁面為單一內容頁及文章類型為post的時候引入
    
    if(is_single() && 'post' == get_post_type()) {
        wp_enqueue_script('octopuswp-single-post');
        wp_enqueue_style('octopuswp-single-post');
    }
}

無論是前台的wp_enqueue_scripts，或是後台的admin_enqueue_scripts用法都一樣

唯獨要注意的是，這兩個是分開的，在前台hook註冊的只能在前台引入，在後台hook註冊的只能在後台引入

這篇文章 如何在WordPress中正確引入外部的CSS或Javascript檔案 最早出現於 OctopusWP | WordPress客製開發專家。

1. 預設驗證規則

WooCommerce會先取得結帳欄位的參數(可透過woocommerce_checkout_fields這個filter修改)，預設再幫你驗證一些規則：

• 必填，當required為true時
• 郵遞區號格式，當validate給入postcode時
• 電話格式：當validate給入phone時
• Email格式：當validate給入email時
• 縣市(state)有效性：當validate給入state時

參考WC_Checkout::validate_posted_data這個method

2. 自訂驗證規則

如果要自訂自己的驗證規則(如身分證字號，手機號碼等)，可使用woocommerce_after_checkout_validation這個action hook

以下舉的例子為驗證台灣地區手機號碼的格式：

add_action('woocommerce_after_checkout_validation', 'octopuswp_validate_billing_mobile_number');

/**
 * @param array $fields POST進來的結帳欄位資料
 * @param WP_Error $errors
 */
function octopuswp_validate_billing_mobile_number($fields, $errors)
{
    /**
     * 假如手機號碼欄位key值為billing_mobile_number
     * 要驗證台灣手機號碼，規則是09開頭的10碼數字
     */
    if(!preg_match('/^09\d{8}$/', $fields['billing_mobile_number'])) {
        // 這裡傳入的是一個WP_Error的物件參考，只要在驗證失敗時加入一個錯誤就行
        // 第一個參數是自訂的錯誤代碼，第二個參數是錯誤訊息
        $errors->add('mobile-number-error', '手機號碼格式錯誤，格式為0910123456');
    }
}

這篇文章 WooCommerce驗證結帳欄位的方法 最早出現於 OctopusWP | WordPress客製開發專家。