WordPress設定API、カスタムメニューページにタブを実装


8

私はこの男のWordPress設定APIチュートリアルシリーズをフォローしています。

http://wp.tutsplus.com/tutorials/theme-development/the-complete-guide-to-the-wordpress-settings-api-part-1/

これまでのところ、私は基本的なことに成功しています。今、タブを実装するとき、私は問題に直面しています。

問題1:タブが機能しない。すべてのフィールドが両方のタブに表示されています。セクション1はタブ1に、セクション2はタブ2に表示されます。

問題2:オプション2が保存されていません。タブを実装する前は問題なく動作していました。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

コード:

/* ----------------------------------------------------------------------------- */
/* Add Menu Page */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Page Title', // page title 
        'Menu Title', // menu title
        'manage_options', // capability
        'my-menu-slug',  // menu-slug
        'my_menu_page',   // function that will render its output
        get_template_directory_uri() . '/assets/ico/theme-option-menu-icon.png'   // link to the icon that will be displayed in the sidebar
        //$position,    // position of the menu option
    );
}
add_action('admin_menu', 'add_my_menu');
function my_menu_page() {
        ?>
        <?php  
        if( isset( $_GET[ 'tab' ] ) ) {  
            $active_tab = $_GET[ 'tab' ];  
        } else {
            $active_tab = 'tab_one';
        }
        ?>  
        <div class="wrap">
            <h2>Menu Page Title</h2>
            <div class="description">This is description of the page.</div>
            <?php settings_errors(); ?> 

            <h2 class="nav-tab-wrapper">  
                <a href="?page=my-menu-slug&tab=tab_one" class="nav-tab <?php echo $active_tab == 'tab_one' ? 'nav-tab-active' : ''; ?>">Tab One</a>  
                <a href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Tab Two</a>  
            </h2>  

            <form method="post" action="options.php"> 
            <?php
                if( $active_tab == 'tab_one' ) {  

                    settings_fields( 'setting-group-1' );
                    do_settings_sections( 'my-menu-slug' );

                } elseif( $active_tab == 'tab_two' )  {

                    settings_fields( 'setting-group-2' );
                    do_settings_sections( 'my-menu-slug' );

                }
            ?>

                <?php submit_button(); ?> 
            </form> 

        </div>
        <?php
}

/* ----------------------------------------------------------------------------- */
/* Setting Sections And Fields */
/* ----------------------------------------------------------------------------- */ 

function sandbox_initialize_theme_options() {  
    add_settings_section(  
        'page_1_section',         // ID used to identify this section and with which to register options  
        'Section 1',                  // Title to be displayed on the administration page  
        'page_1_section_callback', // Callback used to render the description of the section  
        'my-menu-slug'                           // Page on which to add this section of options  

    );

    add_settings_section(  
        'page_2_section',         // ID used to identify this section and with which to register options  
        'Section 2',                  // Title to be displayed on the administration page  
        'page_2_section_callback', // Callback used to render the description of the section  
        'my-menu-slug'                           // Page on which to add this section of options  
    );

    /* ----------------------------------------------------------------------------- */
    /* Option 1 */
    /* ----------------------------------------------------------------------------- */ 

    add_settings_field (   
        'option_1',                      // ID used to identify the field throughout the theme  
        'Option 1',                           // The label to the left of the option interface element  
        'option_1_callback',   // The name of the function responsible for rendering the option interface  
        'my-menu-slug',                          // The page on which this option will be displayed  
        'page_1_section',         // The name of the section to which this field belongs  
        array(                              // The array of arguments to pass to the callback. In this case, just a description.  
            'This is the description of the option 1',
        )  
    );  
    register_setting(  
        //~ 'my-menu-slug',  
        'setting-group-1',  
        'option_1'  
    );

    /* ----------------------------------------------------------------------------- */
    /* Option 2 */
    /* ----------------------------------------------------------------------------- */     

    add_settings_field (   
        'option_2',  // ID -- ID used to identify the field throughout the theme  
        'Option 2', // LABEL -- The label to the left of the option interface element  
        'option_2_callback', // CALLBACK FUNCTION -- The name of the function responsible for rendering the option interface  
        'my-menu-slug', // MENU PAGE SLUG -- The page on which this option will be displayed  
        'page_2_section', // SECTION ID -- The name of the section to which this field belongs  
        array( // The array of arguments to pass to the callback. In this case, just a description.  
            'This is the description of the option 2', // DESCRIPTION -- The description of the field.
        )  
    );
    register_setting(  
        'setting-group-2',  
        'option_2'  
    );

} // function sandbox_initialize_theme_options
add_action('admin_init', 'sandbox_initialize_theme_options');

function page_1_section_callback() {  
    echo '<p>Section Description here</p>';  
} // function page_1_section_callback
function page_2_section_callback() {  
    echo '<p>Section Description here</p>';  
} // function page_1_section_callback

/* ----------------------------------------------------------------------------- */
/* Field Callbacks */
/* ----------------------------------------------------------------------------- */ 

function option_1_callback($args) {  
    ?>
    <input type="text" id="option_1" class="option_1" name="option_1" value="<?php echo get_option('option_1') ?>">
    <p class="description option_1"> <?php echo $args[0] ?> </p>
    <?php      
} // end sandbox_toggle_header_callback  

function option_2_callback($args) {  
    ?>
    <textarea id="option_2" class="option_2" name="option_2" rows="5" cols="50"><?php echo get_option('option_2') ?></textarea>
    <p class="description option_2"> <?php echo $args[0] ?> </p>
    <?php      
} // end sandbox_toggle_header_callback  

私は設定APIについてあまり詳しくありませんが、一見するとすべてのフィールドが単一の設定セクションに属しており、両方のタブで出力しているように見えます。
ミロ

@Milo動作させましたが、WordPress設定APIを理解するのは非常に混乱すると思います。また、公式ドキュメントはほとんどありません。
Omar Tariq

回答:


14

ここに私がそれをする方法があります、注意してください、ポストは広範囲です。

/* Add Menus
-----------------------------------------------------------------*/
add_action('admin_menu', 'ch_essentials_admin');
function ch_essentials_admin() {
    /* Base Menu */
    add_menu_page(
    'Essentials Theme',
    'Essentials Theme',
    'manage_options',
    'ch-essentials-options',
    'ch_essentials_index');
}

例として、設定フィールドの余分なフィールドを削除しました。

これは「フロントページ設定」と「フロントページタブ」用です

add_action('admin_init', 'ch_essentials_options');
function ch_essentials_options() { 

/* Front Page Options Section */
add_settings_section( 
    'ch_essentials_front_page',
    'Essentials Front Page Options',
    'ch_essentials_front_page_callback',
    'ch_essentials_front_page_option'
);

add_settings_field(  
    'featured_post',                      
    'Featured Post',               
    'ch_essentials_featured_post_callback',   
    'ch_essentials_front_page_option',                     
    'ch_essentials_front_page'
);

これはタブの「ヘッダーオプション」である私のヘッダーオプション用です

/* Header Options Section */
add_settings_section( 
    'ch_essentials_header',
    'Essentials Header Options',
    'ch_essentials_header_callback',
    'ch_essentials_header_option'
);

add_settings_field(  
    'header_type',                      
    'Header Type',               
    'ch_essentials_textbox_callback',   
    'ch_essentials_header_option',                     
    'ch_essentials_header',
    array(
        'header_type' 
    ) 
);

登録設定

register_setting('ch_essentials_front_page_option', 'ch_essentials_front_page_option');
register_setting('ch_essentials_header_option', 'ch_essentials_header_option');

これらはすべて1つの関数にラップされ、admin_initで実行されます

/* Options
-----------------------------------------------------------------*/
add_action('admin_init', 'ch_essentials_options');
function ch_essentials_options() { 
    /* Code Shown above */
}

折り返し電話:

/* Call Backs
-----------------------------------------------------------------*/
function ch_essentials_front_page_callback() { 
    echo '<p>Front Page Display Options:</p>'; 
}
function ch_essentials_header_callback() { 
    echo '<p>Header Display Options:</p>'; 
}
function ch_essentials_textbox_callback($args) { 

    $options = get_option('ch_essentials_header_option'); 

    echo '<input type="text" id="'  . $args[0] . '" name="ch_essentials_header_option['  . $args[0] . ']" value="' . $options[''  . $args[0] . ''] . '"></input>';

}
function ch_essentials_featured_post_callback() { 

    $options = get_option('ch_essentials_front_page_option'); 

    query_posts( $args );


    echo '<select id="featured_post" name="ch_essentials_front_page_option[featured_post]">';
    while ( have_posts() ) : the_post();

        $selected = selected($options[featured_post], get_the_id(), false);
        printf('<option value="%s" %s>%s</option>', get_the_id(), $selected, get_the_title());

    endwhile;
    echo '</select>';


}

これがタブ付きの表示パーツです。

設定セクションとフィールドがこのように正確に設定されている場合、タブを完璧に実行できます。

/* Display Page
-----------------------------------------------------------------*/
function ch_essentials_index() {
?>
    <div class="wrap">  
        <div id="icon-themes" class="icon32"></div>  
        <h2>Essentials Theme Options</h2>  
        <?php settings_errors(); ?>  

        <?php  
                $active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'front_page_options';  
        ?>  

        <h2 class="nav-tab-wrapper">  
            <a href="?page=ch-essentials-options&tab=front_page_options" class="nav-tab <?php echo $active_tab == 'front_page_options' ? 'nav-tab-active' : ''; ?>">Front Page Options</a>  
            <a href="?page=ch-essentials-options&tab=header_options" class="nav-tab <?php echo $active_tab == 'header_options' ? 'nav-tab-active' : ''; ?>">Header Options</a>  
        </h2>  


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

            <?php 
            if( $active_tab == 'front_page_options' ) {  
                settings_fields( 'ch_essentials_front_page_option' );
                do_settings_sections( 'ch_essentials_front_page_option' ); 
            } else if( $active_tab == 'header_options' ) {
                settings_fields( 'ch_essentials_header_option' );
                do_settings_sections( 'ch_essentials_header_option' ); 

            }
            ?>             
            <?php submit_button(); ?>  
        </form> 

    </div> 
<?php
}

-----編集-----

あなたの投稿で、タブセクションの実際の表示ページに「elseif」があり、「else if」ではないことに気付きました


これは私にとってかなり役に立ちました。1つのページをタブページに変換するときに問題が発生しました。追加したのは、各入力フィールドの$ option配列に対するempty()チェックだけでした。そうしないと、値が設定されていないときにエラーが発生しました。また、register_settings()に3番目の引数を追加しました。サニタイズなどの設定にはオプションの配列が必要です。全体として、これは高品質のコードを含む非常に優れた投稿でした。
benjaminadk

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

    <?php
        if( $active_tab == 'tab_one' ) {  

            settings_fields( 'setting-group-1' );
            do_settings_sections( 'my-menu-slug-1' );

        } elseif( $active_tab == 'tab_two' )  {

            settings_fields( 'setting-group-2' );
            do_settings_sections( 'my-menu-slug-1' );

        }
    ?> 

をに変更my-menu-slugmy-menu-slug-1my-menu-slug-2


0

このようなコーディングは私にとってうまくいきました:

<?php 

/* ----------------------------------------------------------------------------- */
/* Add Menu Page */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Page Title', // page title 
        'Menu Title', // menu title
        'manage_options', // capability
        'my-menu-slug',  // menu-slug
        'my_menu_page',   // function that will render its output
        get_template_directory_uri() . '/assets/ico/theme-option-menu-icon.png'   // link to the icon that will be displayed in the sidebar
        //$position,    // position of the menu option
    );
}
add_action('admin_menu', 'add_my_menu');

function my_menu_page() {
        ?>
        <?php  
        if( isset( $_GET[ 'tab' ] ) ) {  
            $active_tab = $_GET[ 'tab' ];  
        } else {
            $active_tab = 'tab_one';
        }
        ?>  
        <div class="wrap">
            <h2>Menu Page Title</h2>
            <div class="description">This is description of the page.</div>
            <?php settings_errors(); ?> 

            <h2 class="nav-tab-wrapper">  
                <a href="?page=my-menu-slug&tab=tab_one" class="nav-tab <?php echo $active_tab == 'tab_one' ? 'nav-tab-active' : ''; ?>">Tab One</a>  
                <a href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Tab Two</a>  
            </h2>  

            <form method="post" action="options.php"> 
            <?php
                if( $active_tab == 'tab_one' ) {  

                    settings_fields( 'setting-group-1' );
                    do_settings_sections( 'my-menu-slug-1' );

                } else if( $active_tab == 'tab_two' )  {

                    settings_fields( 'setting-group-2' );
                    do_settings_sections( 'my-menu-slug-2' );

                }
            ?>

                <?php submit_button(); ?> 
            </form> 

        </div>
        <?php
}

/* ----------------------------------------------------------------------------- */
/* Setting Sections And Fields */
/* ----------------------------------------------------------------------------- */ 

function sandbox_initialize_theme_options() {  
    add_settings_section(  
        'page_1_section',         // ID used to identify this section and with which to register options  
        'Section 1',                  // Title to be displayed on the administration page  
        'page_1_section_callback', // Callback used to render the description of the section  
        'my-menu-slug-1'                           // Page on which to add this section of options  

    );

    add_settings_section(  
        'page_2_section',         // ID used to identify this section and with which to register options  
        'Section 2',                  // Title to be displayed on the administration page  
        'page_2_section_callback', // Callback used to render the description of the section  
        'my-menu-slug-2'                           // Page on which to add this section of options  
    );

    /* ----------------------------------------------------------------------------- */
    /* Option 1 */
    /* ----------------------------------------------------------------------------- */ 

    add_settings_field (   
        'option_1',                      // ID used to identify the field throughout the theme  
        'Option 1',                           // The label to the left of the option interface element  
        'option_1_callback',   // The name of the function responsible for rendering the option interface  
        'my-menu-slug-1',                          // The page on which this option will be displayed  
        'page_1_section',         // The name of the section to which this field belongs  
        array(                              // The array of arguments to pass to the callback. In this case, just a description.  
            'This is the description of the option 1',
        )  
    );  
    register_setting(  
        //~ 'my-menu-slug',  
        'setting-group-1',  
        'option_1'  
    );

    /* ----------------------------------------------------------------------------- */
    /* Option 2 */
    /* ----------------------------------------------------------------------------- */     

    add_settings_field (   
        'option_2',  // ID -- ID used to identify the field throughout the theme  
        'Option 2', // LABEL -- The label to the left of the option interface element  
        'option_2_callback', // CALLBACK FUNCTION -- The name of the function responsible for rendering the option interface  
        'my-menu-slug-2', // MENU PAGE SLUG -- The page on which this option will be displayed  
        'page_2_section', // SECTION ID -- The name of the section to which this field belongs  
        array( // The array of arguments to pass to the callback. In this case, just a description.  
            'This is the description of the option 2', // DESCRIPTION -- The description of the field.
        )  
    );
    register_setting(  
        'setting-group-2',  
        'option_2'  
    );

} // function sandbox_initialize_theme_options
add_action('admin_init', 'sandbox_initialize_theme_options');

function page_1_section_callback() {  
    echo '<p>Section Description here</p>';  
} // function page_1_section_callback
function page_2_section_callback() {  
    echo '<p>Section Description here</p>';  
} // function page_1_section_callback

/* ----------------------------------------------------------------------------- */
/* Field Callbacks */
/* ----------------------------------------------------------------------------- */ 

function option_1_callback($args) {  
    ?>
    <input type="text" id="option_1" class="option_1" name="option_1" value="<?php echo get_option('option_1') ?>">
    <p class="description option_1"> <?php echo $args[0] ?> </p>
    <?php      
} // end sandbox_toggle_header_callback  

function option_2_callback($args) {  
    ?>
    <textarea id="option_2" class="option_2" name="option_2" rows="5" cols="50"><?php echo get_option('option_2') ?></textarea>
    <p class="description option_2"> <?php echo $args[0] ?> </p>
    <?php      
} // end sandbox_toggle_header_callback  

?>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.