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

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

Огляд

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

Процес насправді досить простий: ми встановлюємо та відправляємо змінну таб, коли на вкладці клацнули. Запитавши цю змінну потім, за допомогою $_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>';
}

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

Далі ми встановлюємо посилання 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'] не визначено, у такому разі, поточна вкладка буде домашня сторінка і, відповідно, її буде виділено. Інакше виділеною буде вкладка, визначена в $_GET['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 );
}

Ми знову використали умову перемикання, щоб зробити запит значення $ вкладка та зберегти правильні значення в масиві. Після цього ми оновили опції у базі даних 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/