WordPress 外掛開發設定選單

2022.06.11 在 WordPress 外掛開發設定選單時參考了許多文章，也參考了 WordPress 開發官網的 Custom Settings Page，結果無論哪篇文章我都是無法理解，所有範例照著做也都無法呈現該有的結果，最後終於找到不須花太大腦力的網站：WORDPRESS OPTION PAGE GENERATOR，只需幾個問題就可生出程式碼，測試結果如下：

安裝步驟：

步驟 1：開啟 WORDPRESS OPTION PAGE GENERATOR 並輸入。

Page Options 輸入的是標題這裡示範輸入的是 "new plugin"，真正使用請輸入外掛英文名稱，不然最後要改的地方很多，紅色星號欄位為必輸入，以下所有步驟內容請先都輸入容易記的英文，因為有些變數會是我們輸入的英文，事後再改程式碼即可，右邊 Menu Options 如果不想改可以不用改，Parent 指的是設定頁要在哪個選項下，Icon 可以挑一個，事後再改程式碼也可，Position 指的是設定頁要放在哪個選項附近，也可事後改。

步驟 2：輸入 Fields 並 Generate PHP。

Fields 就是需要的設定的欄位，這裡只示範兩個，分別 text1 及 radio1 ，命名要多加數字(或是唯一的即可)，以免最後搜尋取代時出錯，Options 也有示範兩個，一樣不要跟所有名字重複，最後 Generate PHP 。

步驟 3：程式碼放入檔案並執行。

/**

 * Generated by the WordPress Option Page generator

 * at http://jeremyhixon.com/wp-tools/option-page/

 */

class NewPlugin {

private $new_plugin_options;

public function __construct() {

add_action( 'admin_menu', array( $this, 'new_plugin_add_plugin_page' ) );

add_action( 'admin_init', array( $this, 'new_plugin_page_init' ) );

}

public function new_plugin_add_plugin_page() {

add_menu_page(

'new plugin', // page_title

'new plugin', // menu_title

'manage_options', // capability

'new-plugin', // menu_slug

array( $this, 'new_plugin_create_admin_page' ), // function

'dashicons-admin-generic', // icon_url

2 // position

);

}

public function new_plugin_create_admin_page() {

$this->new_plugin_options = get_option( 'new_plugin_option_name' ); ?>

<div class="wrap">

<h2>new plugin</h2>

<p></p>

<?php settings_errors(); ?>

<form method="post" action="options.php">

<?php

settings_fields( 'new_plugin_option_group' );

do_settings_sections( 'new-plugin-admin' );

submit_button();

?>

</form>

</div>

<?php }

public function new_plugin_page_init() {

register_setting(

'new_plugin_option_group', // option_group

'new_plugin_option_name', // option_name

array( $this, 'new_plugin_sanitize' ) // sanitize_callback

);

add_settings_section(

'new_plugin_setting_section', // id

'Settings', // title

array( $this, 'new_plugin_section_info' ), // callback

'new-plugin-admin' // page

);

add_settings_field(

'text1_0', // id

'text1', // title

array( $this, 'text1_0_callback' ), // callback

'new-plugin-admin', // page

'new_plugin_setting_section' // section

);

add_settings_field(

'radio1_1', // id

'radio1', // title

array( $this, 'radio1_1_callback' ), // callback

'new-plugin-admin', // page

'new_plugin_setting_section' // section

);

}

public function new_plugin_sanitize($input) {

$sanitary_values = array();

if ( isset( $input['text1_0'] ) ) {

$sanitary_values['text1_0'] = sanitize_text_field( $input['text1_0'] );

}

if ( isset( $input['radio1_1'] ) ) {

$sanitary_values['radio1_1'] = $input['radio1_1'];

}

return $sanitary_values;

}

public function new_plugin_section_info() {

}

public function text1_0_callback() {

printf(

'<input class="regular-text" type="text" name="new_plugin_option_name[text1_0]" id="text1_0" value="%s">',

isset( $this->new_plugin_options['text1_0'] ) ? esc_attr( $this->new_plugin_options['text1_0']) : ''

);

}

public function radio1_1_callback() {

?> <fieldset><?php $checked = ( isset( $this->new_plugin_options['radio1_1'] ) && $this->new_plugin_options['radio1_1'] === 'option-one' ) ? 'checked' : '' ; ?>

<label for="radio1_1-0"><input type="radio" name="new_plugin_option_name[radio1_1]" id="radio1_1-0" value="option-one" <?php echo $checked; ?>> Option One</label><br>

<?php $checked = ( isset( $this->new_plugin_options['radio1_1'] ) && $this->new_plugin_options['radio1_1'] === 'option-two' ) ? 'checked' : '' ; ?>

<label for="radio1_1-1"><input type="radio" name="new_plugin_option_name[radio1_1]" id="radio1_1-1" value="option-two" <?php echo $checked; ?>> Option Two</label></fieldset> <?php

}

}

if ( is_admin() )

$new_plugin = new NewPlugin();

/* 

 * Retrieve this value with:

 * $new_plugin_options = get_option( 'new_plugin_option_name' ); // Array of All Options

 * $text1_0 = $new_plugin_options['text1_0']; // text1

 * $radio1_1 = $new_plugin_options['radio1_1']; // radio1

 */

程式碼如上，如果懶得改只需要把所有內容放入自行開發的外掛開始的檔案中，外掛如果有啟用就會出現如一開始的結果，甚至如果嫌太亂可以把

    if ( is_admin() )
        $new_plugin = new NewPlugin();

這兩行以外內容先放入另一個 PHP 檔在外掛主檔先 include 進來後，貼上這兩行即可。

步驟 4：更改程式碼及使用。

更改設定頁最上方請改 <h2>new plugin</h2> 中間的 new plugin

Settings 在 'Settings', // title

其餘其實只要改 // title 前的內容即可。

如果要用搜尋取代請先取代 radio1_1 跟 text1_0，再取代 radio1 跟 text1。

如何使用程式最後四行有說明。