Як додати вкладки на сторінках налаштувань у WordPress

Використання вкладок в інтерфейсі користувача може допомогти краще організувати контент, тому цілком логічно, що теми WordPress, які мають багато варіантів налаштувань, виграють від використання вкладок на своїй сторінці налаштувань. За допомогою цього посібника ви навчитеся створювати сторінку налаштувань із вкладками, також ви зможете завантажити тему WordPress, у якій впроваджено розроблений код.

Огляд

Щоб отримати уявлення про вкладки, які ми збираємося створювати, зайдіть в меню Зовнішній вигляд → Теми до адміністратора частини WordPress. Ви побачите там 2 вкладки: « Управління темами » та « Встановити теми ». Якщо ви натиснете одну з них, вміст зміниться і назва вкладки виділиться.

Процес насправді досить простий: ми встановлюємо та відправляємо змінну tab , коли на вкладці клацнули. Запитавши цю змінну потім, за допомогою $_GET['tab'] , ми дізнаємося, яку вкладку вибрано, щоб виділити правильний заголовок та показати відповідну вкладку.

У нашому підході є три моменти, коли нам потрібно буде знати, на якій вкладці користувач зараз:

1. Коли ми показуємо вкладки та поля форми для налаштувань (щоб показати правильний набір полів).
2. Коли користувач зберігає налаштування (щоб зберегти правильні поля).
3. Коли перенаправляємо користувача після збереження налаштувань (щоб перенаправити користувача на правильну вкладку).

Щоб бути лаконічними, ми не пояснюватимемо весь код, а лише ті фрагменти, які відповідають цьому підходу. Тим не менш, ви можете знайти весь код в темі, що додається.

Створення вкладок

Перший фрагмент, який ми розглянемо – код, який створює вкладки:

function ilc_admin_tabs( $current = 'homepage' ) {
    $tabs = array( 'homepage' => 'Home Settings', 'general' => 'General', 'footer' => 'Footer' );
    echo '<div id="icon-themes"><br></div>';
    echo '<h2>';
    foreach( $tabs as $tab => $name ){
        $class = ( $tab == $current ) ? ' nav-tab-active' : '';
        echo "<a class='nav-tab$class' href='?page=theme-settings&tab=$tab'>$name</a>";

    }
    echo '</h2>';
}

Ця функція буде викликана пізніше, у вмісті сторінки налаштувань. Спочатку ми оголошуємо масив, який містить наші вкладки. Перша вкладка, яка показується першою за промовчанням, це homepage , де ми можемо встановити деякі параметри відображення головної сторінки. Далі у нас є general , тобто сторінка, що містить налаштування, які використовуються по всьому сайту, і, нарешті, footer , для вставки коду відстеження в підвалі.

Далі ми встановлюємо посилання URL для кожної вкладки та виводимо їх. Зауважте, що якщо вкладку відкрито, додано додатковий клас nav-tab-active.

Відображаємо вміст у вкладках

Вміст сторінки налаштувань відображається у функції зворотного виклику для add_theme_page (яка є абстракцією add_theme_page ), яка в нашій темі називатиметься ilc_settings_page . Тут ви викликатимете функцію, яку ми розглянули раніше.

function ilc_settings_page() {
   global $pagenow;
   $settings = get_option( "ilc_theme_settings" );

//generic HTML and code goes here

if ( isset ( $_GET['tab'] ) ) ilc_admin_tabs($_GET['tab']); else ilc_admin_tabs('homepage');

Якщо вкладка – це вкладка за промовчанням, то $_GET['tab'] не визначена, у такому разі поточна вкладка буде homepage і, відповідно, вона буде виділена. Інакше виділеною буде вкладка, визначена в $_GET['tab'].

Далі потрібно показати правильний набір полів. Залежно від значення $tab ми будемо відображати поля для вкладки налаштувань головної сторінки або для однієї з інших вкладок:

<form method="post" action="<?php admin_url( 'themes.php?page=theme-settings' ); ?>">
<?php
wp_nonce_field( "ilc-settings-page" );

if ( $pagenow == 'themes.php' && $_GET['page'] == 'theme-settings' ){

   if ( isset ( $_GET['tab'] ) ) $tab = $_GET['tab'];
   else $tab = 'homepage';

   echo '<table>';
   switch ( $tab ){
      case 'general' :
         ?>
         <tr>
            <th>Tags with CSS classes:</th>
            <td>
               <input id="ilc_tag_class" name="ilc_tag_class" type="checkbox" <?php if ( $settings["ilc_tag_class"] ) echo 'checked="checked"'; ?> value="true" />
               <label for="ilc_tag_class">Checking this will output each post tag with a specific CSS class based on its slug.</label>
            </td>
         </tr>
         <?php
      break;
      case 'footer' :
         ?>
         <tr>
            <th><label for="ilc_ga">Insert tracking code:</label></th>
            <td>
               Enter your Google Analytics tracking code:
               <textarea id="ilc_ga" name="ilc_ga" cols="60" rows="5"><?php echo esc_html( stripslashes( $settings["ilc_ga"] ) ); ?></textarea><br />

            </td>
         </tr>
         <?php
      break;
      case 'homepage' :
         ?>
         <tr>
            <th><label for="ilc_intro">Introduction</label></th>
            <td>
               Enter the introductory text for the home page:
               <textarea id="ilc_intro" name="ilc_intro" cols="60" rows="5" ><?php echo esc_html( stripslashes( $settings["ilc_intro"] ) ); ?></textarea>
            </td>
         </tr>
         <?php
      break;
   }
   echo '</table>';
}

?>
   <p style="clear: both;">
      <input type="submit" name="Submit"  value="Update Settings" />
      <input type="hidden" name="ilc-settings-submit" value="Y" />
   </p>
</form>

Усі налаштування зберігатимуться в одному масиві, щоб запобігти генерації кількох запитів.

Зберігаємо поля із вкладок

Тепер нам потрібно знати, які позиції у масиві зберігати. Залежно від того, яка вкладка відображається, буде відображено деякі опції з масиву налаштувань. Якщо ми просто збережемо всі позиції масиву, перезапишемо деякі позиції, які не відображаються на поточній вкладці і, отже, не повинні були зберігатися.

function ilc_save_theme_settings() {
   global $pagenow;
   $settings = get_option( "ilc_theme_settings" );

   if ( $pagenow == 'themes.php' && $_GET['page'] == 'theme-settings' ){
      if ( isset ( $_GET['tab'] ) )
           $tab = $_GET['tab'];
       else
           $tab = 'homepage';

       switch ( $tab ){
           case 'general' :
         $settings['ilc_tag_class'] = $_POST['ilc_tag_class'];
      break;
           case 'footer' :
         $settings['ilc_ga'] = $_POST['ilc_ga'];
      break;
      case 'homepage' :
         $settings['ilc_intro'] = $_POST['ilc_intro'];
      break;
       }
   }
   //code to filter html goes here
   $updated = update_option( "ilc_theme_settings", $settings );
}

Ми знову використовували умову switch , щоб зробити запит значення $tab і зберегти правильні значення масиву. Після цього ми оновили опції у базі даних WordPress.

Перенаправляємо користувача на правильну вкладку

Тепер, коли вміст збережено, нам потрібно, щоб WordPress перенаправив користувача назад на вкладку сторінки налаштувань.

function ilc_load_settings_page() {
  if ( $_POST["ilc-settings-submit"] == 'Y' ) {
   check_admin_referer( "ilc-settings-page" );
   ilc_save_theme_settings();

   $url_parameters = isset($_GET['tab'])? 'updated=true&tab='.$_GET['tab'] : 'updated=true';
   wp_redirect(admin_url('themes.php?page=theme-settings&'.$url_parameters));
   exit;
  }
}

Залежно від того, чи встановлено значення $_GET['tab'] , ми використовуємо wp_redirect , щоб надіслати користувача на вкладку за промовчанням або одну з інших вкладок.

Тепер наші вкладки працюють, показують правильний набір полів, зберігають правильні поля і відправляють користувача на правильну вкладку.

Завантаження теми

Майже кожна тема із помірною кількістю опцій виграє від вкладок на сторінці налаштувань. Але пам'ятайте, що це лише один із підходів. Інший підхід дозволить додати кілька блоків, що згортаються, як на сторінці додавання матеріалів, і автоматично згортати блоки, які використовуються не часто. Тим не менш, вкладки дозволять вам краще відокремити кожний набір налаштувань.

Нарешті, ось тема, щоб ви могли розглянути краще:

• Тема із вкладками на сторінці налаштувань

Тема також включає функцію, де кожен тег виводиться з окремим класом CSS, так що ви можете подивитися також і на неї.

Джерело: SmashingMagazine

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/