API-ul de Setări WordPress, Implementarea Filelor pe Pagina de Meniu Personalizată

23 dec. 2013, 23:09:51
Vizualizări: 17.5K
Voturi: 10

Am urmărit seria de tutoriale despre API-ul de Setări WordPress de la acest tip:

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

Până acum, am reușit să fac lucrurile de bază. Acum, când încerc să implementez file, am întâmpinat probleme.

Problema 1: Filele nu funcționează. Toate câmpurile sunt afișate pe ambele file. Secțiunea 1 ar trebui să apară pe Fila Unu și Secțiunea 2 pe Fila Doi.

Problema 2: Opțiunea 2 nu se salvează. Funcționa bine înainte de implementarea filelor.

captură de ecran cu problema filelor

captură de ecran cu problema salvării

Cod:

/* ----------------------------------------------------------------------------- */
/* Adăugare Pagină de Meniu */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Titlul Paginii', // titlul paginii 
        'Titlul Meniului', // titlul meniului
        'manage_options', // capabilitate
        'my-menu-slug',  // slug-ul meniului
        'my_menu_page',   // funcția care va randa output-ul
        get_template_directory_uri() . '/assets/ico/theme-option-menu-icon.png'   // link către iconița care va fi afișată în bara laterală
        //$position,    // poziția opțiunii în meniu
    );
}
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>Titlul Paginii de Meniu</h2>
            <div class="description">Aceasta este descrierea paginii.</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' : ''; ?>">Fila Unu</a>  
                <a href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Fila Doi</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
}

/* ----------------------------------------------------------------------------- */
/* Secțiuni și Câmpuri de Setări */
/* ----------------------------------------------------------------------------- */ 

function sandbox_initialize_theme_options() {  
    add_settings_section(  
        'page_1_section',         // ID folosit pentru a identifica această secțiune și cu care se înregistrează opțiunile  
        'Secțiunea 1',                  // Titlul care va fi afișat pe pagina de administrare  
        'page_1_section_callback', // Callback folosit pentru a randa descrierea secțiunii  
        'my-menu-slug'                           // Pagina pe care se adaugă această secțiune de opțiuni  
    );

    add_settings_section(  
        'page_2_section',         // ID  
        'Secțiunea 2',                  // Titlu  
        'page_2_section_callback', // Callback  
        'my-menu-slug'                           // Pagină  
    );

    /* ----------------------------------------------------------------------------- */
    /* Opțiunea 1 */
    /* ----------------------------------------------------------------------------- */ 

    add_settings_field (   
        'option_1',                      // ID  
        'Opțiunea 1',                           // Etichetă  
        'option_1_callback',   // Numele funcției responsabile pentru randarea interfeței  
        'my-menu-slug',                          // Pagina  
        'page_1_section',         // Numele secțiunii  
        array(                              // Argumentele pentru callback  
            'Aceasta este descrierea opțiunii 1',
        )  
    );  
    register_setting(  
        'setting-group-1',  
        'option_1'  
    );

    /* ----------------------------------------------------------------------------- */
    /* Opțiunea 2 */
    /* ----------------------------------------------------------------------------- */     

    add_settings_field (   
        'option_2',  // ID  
        'Opțiunea 2', // Etichetă  
        'option_2_callback', // Callback  
        'my-menu-slug', // Pagină  
        'page_2_section', // Secțiune  
        array(  
            'Aceasta este descrierea opțiunii 2', // Descriere
        )  
    );
    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>Descrierea secțiunii aici</p>';  
} // function page_1_section_callback
function page_2_section_callback() {  
    echo '<p>Descrierea secțiunii aici</p>';  
} // function page_1_section_callback

/* ----------------------------------------------------------------------------- */
/* Funcții Callback pentru Câmpuri */
/* ----------------------------------------------------------------------------- */ 

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  
2
Comentarii

Nu sunt foarte familiarizat cu API-ul de setări, dar la prima vedere se pare că toate câmpurile tale aparțin unei singure secțiuni de setări, pe care le afișezi în ambele file.

Milo Milo
23 dec. 2013 23:20:13

@Milo Am reușit să-l fac să funcționeze, dar aș spune că API-ul de Setări WordPress este foarte confuz de înțeles. De asemenea, are aproape zero documentație oficială.

Omar Tariq Omar Tariq
24 dec. 2013 10:18:49
Toate răspunsurile la întrebare 3
2
16

Iată cum fac eu, atenție, postarea este amplă.

/* Adăugare Meniuri
-----------------------------------------------------------------*/
add_action('admin_menu', 'ch_essentials_admin');
function ch_essentials_admin() {
    /* Meniu de Bază */
    add_menu_page(
    'Tema Essentials',
    'Tema Essentials',
    'manage_options',
    'ch-essentials-options',
    'ch_essentials_index');
}

Acum pentru câmpurile mele de setări, câmpurile suplimentare au fost eliminate, doar ca exemplu.

Aceasta este pentru 'Setările Paginii de Start' și 'Tab-ul Paginii de Start'

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

/* Secțiunea Opțiuni Pagină de Start */
add_settings_section( 
    'ch_essentials_front_page',
    'Opțiuni Pagină de Start Essentials',
    'ch_essentials_front_page_callback',
    'ch_essentials_front_page_option'
);

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

Aceasta este pentru opțiunile header-ului, care este tab-ul 'opțiuni header'

/* Secțiunea Opțiuni Header */
add_settings_section( 
    'ch_essentials_header',
    'Opțiuni Header Essentials',
    'ch_essentials_header_callback',
    'ch_essentials_header_option'
);

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

Înregistrare Setări

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

Toate acestea sunt incluse într-o singură funcție, apoi executate cu un admin_init

/* Opțiuni
-----------------------------------------------------------------*/
add_action('admin_init', 'ch_essentials_options');
function ch_essentials_options() { 
    /* Codul afișat mai sus */
}

Funcții de Apel:

/* Funcții de Apel
-----------------------------------------------------------------*/
function ch_essentials_front_page_callback() { 
    echo '<p>Opțiuni de Afișare Pagină de Start:</p>'; 
}
function ch_essentials_header_callback() { 
    echo '<p>Opțiuni de Afișare Header:</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($args) { 
     
    $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>';
     
     
}

Acum aceasta este partea de afișare, cu tab-urile..

Dacă ai secțiunile și câmpurile de setări făcute exact așa, atunci vei putea implementa tab-urile fără probleme.

/* Pagina de Afișare
-----------------------------------------------------------------*/
function ch_essentials_index() {
?>
    <div class="wrap">  
        <div id="icon-themes" class="icon32"></div>  
        <h2>Opțiuni Tema Essentials</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' : ''; ?>">Opțiuni Pagină de Start</a>  
            <a href="?page=ch-essentials-options&tab=header_options" class="nav-tab <?php echo $active_tab == 'header_options' ? 'nav-tab-active' : ''; ?>">Opțiuni Header</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
}

-----EDITARE-----

și am observat în postarea ta că ai 'elseif' și nu 'else if' pe pagina ta reală de afișare la secțiunea de tab-uri

24 dec. 2013 02:04:50
Comentarii

Aceasta a fost destul de utilă pentru mine. Aveam probleme în a converti o singură pagină într-o pagină cu file. Singurele lucruri pe care le-am adăugat au fost o verificare empty() pe array-ul $option pentru fiecare câmp de intrare. Altfel, primeam o eroare când valoarea nu era setată. De asemenea, am adăugat un al treilea argument la register_settings(). Acesta acceptă un array opțional pentru a configura lucruri precum sanitizarea. În general, acesta a fost un post foarte bun cu cod de calitate.

benjaminadk benjaminadk
10 mar. 2020 06:43:49

de ce cuvântul 'options' este la plural în template, dar la singular în add_settings_field?

Philip Philip
25 sept. 2023 02:35:45
0

Codarea asta a funcționat pentru mine:

<?php 

/* ----------------------------------------------------------------------------- */
/* Adăugare Pagină de Meniu */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Titlul Paginii', // titlul paginii
        'Titlul Meniului', // titlul meniului
        'manage_options', // capabilitate
        'my-menu-slug',  // slug meniu
        'my_menu_page',   // funcție care va afișa conținutul
        get_template_directory_uri() . '/assets/ico/theme-option-menu-icon.png'   // link către iconița care va fi afișată în bara laterală
        //$position,    // poziția opțiunii în meniu
    );
}
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>Titlul Paginii de Meniu</h2>
            <div class="description">Aceasta este descrierea paginii.</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 Unu</a>  
                <a href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Tab Doi</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
}

/* ----------------------------------------------------------------------------- */
/* Secțiuni și Câmpuri de Setări */
/* ----------------------------------------------------------------------------- */ 

function sandbox_initialize_theme_options() {  
    add_settings_section(  
        'page_1_section',         // ID folosit pentru identificarea secțiunii și înregistrarea opțiunilor  
        'Secțiunea 1',                  // Titlul afișat pe pagina de administrare  
        'page_1_section_callback', // Funcția callback pentru afișarea descrierii secțiunii  
        'my-menu-slug-1'                           // Pagina pe care se adaugă această secțiune  

    );

    add_settings_section(  
        'page_2_section',         // ID  
        'Secțiunea 2',                  // Titlu  
        'page_2_section_callback', // Callback  
        'my-menu-slug-2'                           // Pagină  
    );

    /* ----------------------------------------------------------------------------- */
    /* Opțiunea 1 */
    /* ----------------------------------------------------------------------------- */ 

    add_settings_field (   
        'option_1',                      // ID  
        'Opțiunea 1',                           // Etichetă  
        'option_1_callback',   // Callback  
        'my-menu-slug-1',                          // Pagină  
        'page_1_section',         // Secțiune  
        array(                              // Argumente adiționale  
            'Aceasta este descrierea opțiunii 1',
        )  
    );  
    register_setting(  
        'setting-group-1',  
        'option_1'  
    );

    /* ----------------------------------------------------------------------------- */
    /* Opțiunea 2 */
    /* ----------------------------------------------------------------------------- */     

    add_settings_field (   
        'option_2',  // ID  
        'Opțiunea 2', // Etichetă  
        'option_2_callback', // Callback  
        'my-menu-slug-2', // Pagină  
        'page_2_section', // Secțiune  
        array(  
            'Aceasta este descrierea opțiunii 2',
        )  
    );
    register_setting(  
        'setting-group-2',  
        'option_2'  
    );

} // sfârșit funcție sandbox_initialize_theme_options
add_action('admin_init', 'sandbox_initialize_theme_options');

function page_1_section_callback() {  
    echo '<p>Descrierea secțiunii aici</p>';  
} // sfârșit funcție page_1_section_callback
function page_2_section_callback() {  
    echo '<p>Descrierea secțiunii aici</p>';  
} // sfârșit funcție page_1_section_callback

/* ----------------------------------------------------------------------------- */
/* Funcții Callback pentru Câmpuri */
/* ----------------------------------------------------------------------------- */ 

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      
} // sfârșit funcție option_1_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      
} // sfârșit funcție option_2_callback  

?>
11 nov. 2016 14:35:30
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-2' );

        }
    ?> 

Schimbă my-menu-slug în my-menu-slug-1 și my-menu-slug-2

12 mar. 2015 10:08:42