儲存外掛設定，並且回傳至頁面上

我們應用著第三章的程式碼，套入原生的程式碼，可以去請求本身頁面的服務，讓option儲存，我們就不重複一次程式碼的使用，在點擊save 後，我們上面所選的option，會經由這個來做變化。

我們關鍵儲存的是submit_button，不過也有另外一個用法，是可以用get_submit_button且更高的客製性，因為他回傳的是Html本身，所以可以對自己加上不同的程式碼。

我們將一切包裝好吧！

我們還是與Hook息息相關，需要用到admin_init來讓我們做初始化，

你還需要驗證你的option

我們這裡需要驗證使用者輸入的資料是否正確與合乎我們的規則，我們這裡加上只能輸入英文字母為例，不過我們不在前端做驗證，我們靠著後端做驗證，所以我將收到的post以$_POST來做拿取資料，而更深入的資料驗證我們明天來做講解，不過我們就是先前在register section所以提供的$arg中，回傳的sanitize函式。

.
.
 $args = array(
        'type'=> 'string', 
        'sanitize_callback' => 'gogopowerranger_plugin_validate_options',
        'default' => NULL
    );

    register_setting( 'gogopowerranger_options_group', 'gogopowerranger_options', $args );
.
.

function gogopowerranger_plugin_validate_options( $input ) {

    $valid = array();
    $valid['name'] = preg_replace(
        '/[^a-zA-Z\s]/',
        '',
        $input['name'] );

    return $valid;

}

增加一點error setting

我們現在已經有了驗證，但並沒有錯誤的顯示，所以我們要使用add_setting_error來出現錯誤字樣，這邊的interface可以從reference去看好，主要是四個參數。

function gogopowerranger_plugin_validate_options( $input ) {

    $valid = array();
    $valid['name'] = preg_replace(
        '/[^a-zA-Z\s]/',
        '',
        $input['name'] );
    if($valid['name'] !== $input['name']){
       add_settings_error(
            'gogopowerranger__string',
            'gogopowerranger_name_error',
            '錯了，別亂搞',
            'error'
        );
    }

    return $valid;

}

現在兜起來

最後，我們開始將所以的東西拼湊起來，我們從開頭的Hook一一列表在這，就可以組裝出最基礎的設定啦！最後懺悔一下，週六的週末，只想好好的休息，腦袋昏昏沈沈打的程式碼完全就是在MD做的，因為現在的plugin還有太多其他的功能，所以就不從那邊節錄過來，如果有問題，我會再次看更正XD

• admin_init / WebHook
• add_options_page
• add_settings_section
• get_option
• update_option

add_action( 'admin_menu', 'Ranger_add_settings_menu' );

function Ranger_add_settings_menu() {

    add_options_page( 'Ranger Plugin Settings', 'GOGO Settings', 'manage_options',
        'ranger_plugin', 'ranger_option_page' );

}
        
function ranger_option_page() {
    ?>
    <div class="wrap">
        <h2>Ranger plugin</h2>
        <form action="options.php" method="post">
            <?php 
            settings_fields( 'gogopowerranger_plugin_options' );
            do_settings_sections( 'gogopowerranger_plugin' );
            submit_button( 'Save Changes', 'primary' );  
            ?>
        </form>
    </div>
    <?php
}
        
add_action('admin_init', 'gogopowerranger_plugin_admin_init');

function gogopowerranger_plugin_admin_init(){
    $args = array(
        'type'=> 'string', 
        'sanitize_callback' => 'gogopowerranger_plugin_validate_options',
        'default' => NULL
    );

    register_setting( 'gogopowerranger_options_group', 'gogopowerranger_options', $args );
    
    //add a settings section
    add_settings_section( 
        'gogopowerranger_plugin_main', 
        'gogopowerranger Plugin Settings',
        'gogopowerranger_plugin_section_text', 
        'gogopowerranger_plugin' 
    );
    
    //create our settings field for name
    add_settings_field( 
        'gogopowerranger_plugin_name', 
        'Your Name',
        'gogopowerranger_plugin_setting_name', 
        'gogopowerranger_plugin', 
        'gogopowerranger_plugin_main' 
    );

}

// 印出section的header
function gogopowerranger_plugin_section_text() {
    echo '<p>來往這裡來阿斯</p>';
}
        
// 印出所有的field
function gogopowerranger_plugin_setting_name() {

    // 從資料庫取回gogopowerranger_plugin_options
    $options = get_option( 'gogopowerranger_plugin_options' );
    $name = $options['name'];
    // $blabla = $options['blabla']; 你可以加進options中來取回

    // 把這個資料當預設值印出來
    echo "<input id='name' name='gogopowerranger_plugin_options[name]'
        type='text' value='" . esc_attr( $name ) . "' />";

}

// 在這裡驗證輸入的資料是否正確，你可能需要學過一點正規表達式，不過意思是只能有英文
function gogopowerranger_plugin_validate_options( $input ) {

    $valid = array();
    $valid['name'] = preg_replace(
        '/[^a-zA-Z\s]/',
        '',
        $input['name'] );

    return $valid;

}

而最後，因為章節幅度，後面刪了一些想講的，比如說不出現標題與section，只要field顯示，刪除設定與使用wordpress UI元件來讓整體看起來一致性，大家可以多多翻看Wordpress 的指南，像是uninstall中刪除設定就會用到unregister_setting，而在UI的部分也可以從外層的.wrap開始，內容從標題到輸入匡，非常的豐富。

可以使用這個工具，裡頭是教導你該如何去使用wordpress後台的正確格式，以及他應該放置的class，這個小章節講了很多不同的函式處理，了解這些有助於你去更有效益的建構你自己的外掛，不過也千萬別把持著每個method都要用到的想法去做開發，做好規劃再一步一步選擇適當的函式來撰寫，但前提是你已經對這些函式有足夠的了解，下一章來講我之前還是小白時期寫的外掛備注入XSS以及官方指南是怎麼把破損的外掛一一補齊。

reference

Wordpress (3.8) Admin UI Style CSS Classes
add_settings_error
Settings API - format container of setting and setting's description