Java, UX, HTML, CSS, WEB-design

Как создавать вкладки на страницах настроек WordPress

[ad_1]

  • Элио Риверо

  • 0 Комментарии

Как создавать вкладки на страницах настроек WordPress

  • 6 минут чтения

  • WordPress, Учебники, Вкладки

Краткое резюме ↬

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

Обзор

Чтобы получить представление о вкладках, которые мы будем создавать, перейдите на Appearance/Themes в админке WordPress. Там вы найдете две вкладки: «Управление темами» и «Установить темы». Когда вы нажимаете на один из них, содержимое меняется, а заголовок вкладки выделяется.

Еще после прыжка! Продолжить чтение ниже ↓

вкладка-тема-настройки-wordpress

Процесс на самом деле довольно прост: мы устанавливаем и отправляем 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" class="icon32"><br></div>';
    echo '<h2 class="nav-tab-wrapper">';
    foreach( $tabs as $tab => $name ){
        $class = ( $tab == $current ) ? ' nav-tab-active' : ’;
        echo "<a class="nav-tab$class" href="https://www.smashingmagazine.com/2011/10/create-tabs-wordpress-settings-pages/?page=theme-settings&tab=$tab">$name</a>";

    }
    echo '</h2>';
}

Эта функция будет вызываться позже в содержимом страницы настроек. Сначала мы определяем массив, содержащий все наши вкладки. Первая вкладка, которая отображается первой по умолчанию, homepage, где мы можем настроить внешний вид домашней страницы. Тогда у нас есть generalкоторая может быть страницей с опциями, используемыми на всем веб-сайте, и, наконец, footerчтобы включить код отслеживания в нижний колонтитул.

Затем мы настраиваем URL-ссылки для каждой вкладки и выводим их. Обратите внимание, что если вкладка открыта, дополнительный класс, nav-tab-activeдобавлен.

Отображение содержимого с вкладками

Содержимое страницы настроек отображается в функции обратного вызова для add_theme_page (это абстракция add_submenu_pageс родительским слагом, установленным на темы.php), который в нашей теме будет называться 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 class="form-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 class="submit" style="clear: both;">
      <input type="submit" name="Submit"  class="button-primary" 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, так что вы тоже можете это проверить.

Дальнейшее чтение на SmashingMag:

  • Настройщик темы WordPress
  • Локальная разработка WordPress с помощью MAMP
  • Контрольный список для создания идеального сайта WordPress



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как создавать вкладки на страницах настроек WordPress

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Как создавать вкладки на страницах настроек WordPress

Название: Как создавать вкладки на страницах настроек WordPress . Краткое описание: [ad_1] ⭐ Элио Ри . Дата публикации: 20.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»