トップレベルメニューを追加する|WordPressテーマ作成

WordPressのテーマ作成でトップレベルのメニューに設定ページを追加する方法です。
add_menu_page()を使ってトップレベルのメニューページを追加します。
下記はfunctions.phpに追加用のクラスを記述し、生成することで設定の追加を行うサンプルです。

設定画面の追加

<?php
/*
 * トップレベルメニューを追加.
 */
class My_Theme_Settings_Page {
    public static $option_name = 'mt_option_name';

    private $options;

    function __construct() {
        add_action( 'admin_menu', array( $this, 'add_theme_page' ) );
        add_action( 'admin_init', array( $this, 'page_init' ) );
    }

    /**
     * 設定画面の追加.
     */
    public function add_theme_page() {
        add_menu_page(
            'My Theme Settings', // Page title
            'My Theme 設定', // Menu title
            'manage_options', // Capability
            'mt-admin-slug', // Menu slug
            array( $this, 'create_page' )
        );
    }

    /**
     * 画面の出力.
     */
    public function create_page() {
        if ( !current_user_can( 'manage_options' ) ) {
            wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
        }

        // Set class property
        $this->options = get_option( self::$option_name );
        ?>
        <div class="wrap">
            <h1>My Theme Settings</h1>
            <form method="post" action="options.php">
            <?php
                // This prints out all hidden setting fields.
                settings_fields( 'mt_option_group' );
                do_settings_sections( 'mt-admin-slug' );
                submit_button(); 
            ?>
            </form>
        </div>
        <?php
    }

    /**
     * 設定の追加.
     */
    public function page_init() {
        register_setting(
            'mt_option_group', // Option group
            self::$option_name, // Option name
            array( $this, 'sanitize' ) // Sanitize
        );

        add_settings_section(
            'setting_section_id', // ID
            'Section 1', // Title
            array( $this, 'print_section_callback' ), // Callback
            'mt-admin-slug' // Page (Menu slug)
        );

        add_settings_section(
            'setting_section_id2', // ID
            'Section 2', // Title
            array( $this, 'print_section_callback' ), // Callback
            'mt-admin-slug' // Page (Menu slug)
        );

        add_settings_field(
            'id_number', // ID
            'Number', // Title 
            array( $this, 'number_callback' ), // Callback
            'mt-admin-slug', // Page (Menu slug)
            'setting_section_id' // Section
        );

        add_settings_field(
            'id_title', 
            'Title', 
            array( $this, 'title_callback' ), 
            'mt-admin-slug',
            'setting_section_id'
        );

        add_settings_field(
            'id_number2', // ID
            'Number2', // Title 
            array( $this, 'number2_callback' ), // Callback
            'mt-admin-slug', // Page (Menu slug)
            'setting_section_id2' // Section
        );
    }

    public function sanitize( $input ) {
        $new_input = array();
        if ( isset( $input['id_number'] ) ) {
            $new_input['id_number'] = absint( $input['id_number'] );
        }

        if ( isset( $input['id_title'] ) ) {
            $new_input['id_title'] = sanitize_text_field( $input['id_title'] );
        }

        if ( isset( $input['id_number2'] ) ) {
            $new_input['id_number2'] = absint( $input['id_number2'] );
        }

        return $new_input;
    }

    /**
     * セクション説明.
     */
    public function print_section_callback() {
        print 'Enter your settings below:';
    }

    /**
     * Get the settings option array and print one of its values.
     */
    public function number_callback() {
        printf(
            '<input type="text" id="id_number" name="' . self::$option_name . '[id_number]" value="%s" />',
            isset( $this->options['id_number'] ) ? esc_attr( $this->options['id_number']) : ''
        );
    }

    /**
     * Get the settings option array and print one of its values
     */
    public function title_callback() {
        printf(
            '<input type="text" id="id_title" name="'. self::$option_name . '[id_title]" value="%s" />',
            isset( $this->options['id_title'] ) ? esc_attr( $this->options['id_title']) : ''
        );
    }

    /**
     * Get the settings option array and print one of its values.
     */
    public function number2_callback() {
        printf(
            '<input type="text" id="id_number2" name="' . self::$option_name . '[id_number2]" value="%s" />',
            isset( $this->options['id_number2'] ) ? esc_attr( $this->options['id_number2']) : ''
        );
    }
}

if ( is_admin() ) {
    $my_settings_page = new My_Theme_Settings_Page();
}

page_init() の処理

add_settings_field()で設定値を定義します。パラメータにadd_settings_section()のIDを記述して、設定画面内の表示位置を決定します。
register_setting()で設定を登録します。

追加されたメニュー

add_menu_page 1

設定画面

add_menu_page 2

設定値の使用例

<?php $options = get_option( My_Theme_Settings_Page::$option_name ); ?>
<?php echo esc_html( $options['id_title'] );?>

参考

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です