Статьи

Как создать страницу параметров темы для WordPress

Сентябрь 25, 2018

Если вы когда-либо использовали премиум-тему WordPress, вы бы увидели страницу с пользовательскими настройками темы, которая доступна.

Страница параметров темы, которая находится в меню внешнего вида и позволяет администратору сайта WordPress изменять некоторые параметры темы.

Большинство премиальных тем будут иметь опции для изменения цвета шрифтов, фона, изменения изображений или типов шрифтов … всего, что позволяет стилизовать тему WordPress.

Некоторые из наиболее распространенных полей для изменения:

  • Параметры темы. Чтобы изменить логотип темы, измените таблицу стилей, загрузите новый значок, добавьте код Google Analytics, введите URL своего FeedBurner и добавьте собственный CSS.
  • Параметры стиля — измените цвет фона или фоновое изображение.
  • Шрифты — измените шрифт всех тегов заголовка или основного содержимого.
  • Социальные сети. Предоставление вашей теме с вашими профилями в социальных сетях облегчит ссылки на них в некоторых частях вашей темы или отображение ваших последних твитов.

Страницы опций могут также использоваться на плагинах для изменения настроек и настройки плагина.

Примеры страниц параметров темы

Вот как выглядят некоторые страницы параметров темы из премиум тем.

Как Построить Страницу Варианта Темы

При создании страницы параметров есть несколько вещей, которые необходимо настроить.

  • Добавить меню — если вы хотите отобразить меню в меню внешнего вида или если вы хотите предоставить странице опций свое собственное меню.
  • Добавить разделы — это разделы настроек, которые вы добавляете на страницу параметров.
  • Регистрация настроек — настройки — это различные поля, которые вы добавляете на страницу параметров, их необходимо зарегистрировать в API настроек.
  • Настройки дисплея — API настроек будет использоваться для вызова функции для отображения настроек.
  • Подтвердить настройку — когда пользователь сохранит поле настроек, входные данные должны быть проверены перед сохранением в таблице параметров.
  • Сообщения обратной связи. После сохранения настроек необходимо иметь возможность обратной связи с пользователем, если настройки были успешно сохранены или если во время проверки произошла ошибка.

Чтобы помочь нам выполнить все эти задачи, есть WordPress API, называемый API настроек . Этот API позволяет страницам администратора обрабатывать формы настроек полуавтоматически. С помощью API вы можете определить страницы для настроек, разделы для настроек и поля для настроек.

Это работает путем регистрации полей настроек, которые будут отображаться в разделах, и страница будет отображать эти разделы.

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

Все проверки должны выполняться разработчиком страниц настроек, но API настроек будет контролировать создание формы и сохранение значений в форме в таблице параметров.

Добавить меню в админку WordPress

При добавлении меню на экран администратора WordPress у вас есть масса гибкости, у вас есть возможность добавить новые пункты меню или добавить меню в качестве подменю.

Чтобы добавить меню верхнего уровня, просто используйте следующую функцию add_menu_page ().

<?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); ?>

 

  • $ page_title — заголовок, используемый на странице настроек.
  • $ menu_title — заголовок, используемый в меню.
  • $abilities — меню отображается только в том случае, если пользователь соответствует этой возможности.
  • $ menu_slug — уникальное имя слаг меню.
  • $ function — это функция обратного вызова, запускаемая для отображения страницы.
  • $ icon_url — отображает значок только для меню.
  • $ position — позволяет выбрать, когда пункт меню появляется в списке.

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

<?php
add_action('admin_menu', 'add_appearance_menu');
function add_appearance_menu(){
     add_submenu_page( 'themes.php', $page_title, $menu_title, $capability, $menu_slug, $function);
}
?>

Или вы можете использовать функцию add_theme_page (), которая добавит подменю в меню внешнего вида.

add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function);

Регистрация настроек

Для начала нам нужно зарегистрировать группу настроек, в которой мы собираемся сохранить значения страницы настроек. Это позволит использовать API настроек для определения группы настроек, затем мы добавим настройки в группу. Когда вы сохраняете настройки в этой группе, они сохраняются в таблице базы данных wp_options, чтобы вы могли получить эти значения позже.

Таблица wp_options представляет собой пару значений ключа, хранящихся в базе данных. Это то, что вы должны использовать при хранении долгосрочных данных на вашем сайте WordPress.

Если вы храните много данных, рекомендуется преобразовывать данные в массив и хранить их под одним ключом, а не хранить все значения в нескольких ключах. Это означает, что если у вас есть страница настроек для изменения логотипа сайта, цвета фона, шрифта, размера шрифта и т. Д., У вас не будет возможности для каждого из них, но вы сгруппируете их в группу параметров. Причина, по которой вы делаете это, заключается в том, чтобы повысить эффективность базы данных, не добавляя слишком много строк в базу данных опций.

Для регистрации настроек в API настроек необходимо использовать функцию register_setting () .

<?php register_setting( $option_group, $option_name, $sanitize_callback ); ?>

Параметры, которые вы передаете в это:

  • Группа опций — название группы настроек, которую вы собираетесь сохранить. Это должно соответствовать имени группы, используемому в функции settings_field () .
  • Имя параметра — имя параметра, который будет сохранен. Это ключ, который используется в таблице параметров.
  • Sanitize Callback — эта функция используется для проверки настроек этой группы параметров.

Добавить разделы в настройки

После регистрации настроек мы можем добавить группы разделов в API настроек. Это позволит нам упорядочить настройки на странице, чтобы вы могли добавлять стили для их различного отображения на странице.

Преимущество добавления разделов в вашем API настроек заключается в том, что мы можем вызвать функцию do_settings_sections (), поскольку при этом будут отображены все настройки в этом одном разделе.

Чтобы создать свои собственные настройки, все, что вам нужно сделать, это использовать функцию add_settings_section () .

<?php add_settings_section( $id, $title, $callback, $page ); ?>

Параметры, которые необходимо использовать для этой функции:

  • Id — Строка, используемая для идентификатора раздела.
  • Заголовок — заголовок для использования в разделе.
  • Обратный вызов — это функция, которая отображает настройки на странице.
  • Страница — это страница, на которой отображается раздел, должен соответствовать фрагменту меню страницы.

Добавить поля в разделы

Последняя важная функция, которую мы должны использовать для добавления настроек на страницу — это функция add_settings_field () , которая используется как часть API настроек для определения полей в разделе.

Функция должна знать слаг страницы и идентификатор секции, прежде чем вы сможете определить используемые настройки.

Все настройки, которые вы здесь настроите, будут сохранены в таблице параметров под ключом, используемым в функции register_settings () .

<?php add_settings_field( $id, $title, $callback, $page, $section, $args ); ?>

Для использования этой функции вам необходимо добавить следующие параметры.

  • ID — идентификатор поля
  • Заголовок — Название поля.
  • Callback — функция, используемая для отображения настроек. Это очень важно, поскольку используется для отображения нужного поля ввода.
  • Страница — страница, на которой будет отображаться поле, должна совпадать с настройкой меню в разделе.
  • Раздел — Идентификатор раздела, к которому будет добавлено поле.
  • $ args — Дополнительные аргументы, которые передаются в функцию обратного вызова.

Пример использования API настроек

Для создания этой страницы настроек есть много информации, которая может понадобиться выше, поэтому она может показаться немного сложной, но как только вы разберетесь со структурой, которую использует API настроек, это на самом деле довольно легко понять.

Лучший способ понять, как все это работает, — показать вам пример.

Создать страницу параметров темы с полем текстового поля

В этом примере мы создадим страницу параметров темы и добавим текстовое поле на странице, чтобы добавить дополнительный текст в index.php.

Просто добавьте следующее в ваш файл functions.php, чтобы создать страницу настроек темы.

Сначала мы начнем с создания пункта меню в меню внешнего вида с помощью функции add_theme_page () в действии admin_menu. 

/**
 * Theme Option Page Example
 */
function pu_theme_menu()
{
  add_theme_page( 'Theme Option', 'Theme Options', 'manage_options', 'pu_theme_options.php', 'pu_theme_page');
}
add_action('admin_menu', 'pu_theme_menu');

Как вы можете видеть выше, мы установили функцию обратного вызова на странице параметров темы как pu_theme_page, поэтому нам нужно создать эту функцию для отображения нашей страницы.

Здесь мы создаем форму для отправки в options.php, чтобы сохранить ее в таблице параметров, вызываем settings_fields () для получения настроек в register_settings () и используем функцию do_settings_sections () для отображения наших настроек.

/**
 * Callback function to the add_theme_page
 * Will display the theme options page
 */
function pu_theme_page()
{
?>
<div class="section panel">
<h1>Custom Theme Options</h1>
<form method="post" enctype="multipart/form-data" action="options.php">
        <?php
          settings_fields('pu_theme_options'); 
          do_settings_sections('pu_theme_options.php');
        ?>
<p class="submit">
                <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
            
</form>
Created by <a href="http://www.paulund.co.uk">Paulund</a>.
</div>
    <?php
}

Когда страница готова к отображению настроек, мы можем зарегистрировать настройки и создать разделы.

В действии admin_init мы вызываем функцию pu_register_settings, в которой мы определяем настройки, разделы и поля для разделов. 

/**
 * Register the settings to use on the theme options page
 */
add_action( 'admin_init', 'pu_register_settings' );
/**
 * Function to register the settings
 */
function pu_register_settings()
{
    // Register the settings with Validation callback
    register_setting( 'pu_theme_options', 'pu_theme_options', 'pu_validate_settings' );
    // Add settings section
    add_settings_section( 'pu_text_section', 'Text box Title', 'pu_display_section', 'pu_theme_options.php' );
    // Create textbox field
    $field_args = array(
      'type'      => 'text',
      'id'        => 'pu_textbox',
      'name'      => 'pu_textbox',
      'desc'      => 'Example of textbox description',
      'std'       => '',
      'label_for' => 'pu_textbox',
      'class'     => 'css_class'
    );
    add_settings_field( 'example_textbox', 'Example Textbox', 'pu_display_setting', 'pu_theme_options.php', 'pu_text_section', $field_args );
}

Функция обратного вызова при создании разделов может использоваться для добавления дополнительной информации, которая будет отображаться над каждым разделом, в этом примере мы просто оставляем это поле пустым. 

/**
 * Function to add extra text to display on each section
 */
function pu_display_section($section){ 
}

Функция обратного вызова в функции add_settings_field () называется pu_display_setting , это функция, которая будет отображать любые входные данные на странице.

Параметром этой функции является значение $ args в add_settings_field (), которое мы можем использовать для добавления таких вещей, как идентификатор, имя, значение по умолчанию и т. Д.

Мы хотим получить любые существующие значения из таблицы wp_option для отображения любых значений, ранее введенных пользователем, для этого мы получаем значения из таблицы с помощью функции get_option () .

/**
 * Function to display the settings on the page
 * This is setup to be expandable by using a switch on the type variable.
 * In future you can add multiple types to be display from this function,
 * Such as checkboxes, select boxes, file upload boxes etc.
 */
function pu_display_setting($args)
{
    extract( $args );
    $option_name = 'pu_theme_options';
    $options = get_option( $option_name );
    switch ( $type ) {
          case 'text':
              $options[$id] = stripslashes($options[$id]);
              $options[$id] = esc_attr( $options[$id]);
              echo "<input class='regular-text$class' type='text' id='$id' name='" . $option_name . "[$id]' value='$options[$id]' />";
              echo ($desc != '') ? "<span class='description'>$desc</span>" : "";
          break;
    }
}

Наконец, мы можем проверить значения, добавленные в форму, создав функцию обратного вызова проверки pu_validate_settings .

Все, что он делает в данный момент — это циклически перебирает входящие в него данные и проверяет, является ли это буквой или цифрой.

Возвращение этой функции — это то, что будет добавлено в базу данных.

/**
 * Callback function to the register_settings function will pass through an input variable
 * You can then validate the values and the return variable will be the values stored in the database.
 */
function pu_validate_settings($input)
{
  foreach($input as $k => $v)
  {
    $newinput[$k] = trim($v);
    // Check the input is a letter or a number
    if(!preg_match('/^[A-Z0-9 _]*$/i', $v)) {
      $newinput[$k] = '';
    }
  }
  return $newinput;
}

Если вы скопируете все приведенные выше фрагменты в файл functions.php, вы увидите эту форму параметров в меню внешнего вида.

Использование параметров темы в вашей теме

Теперь, когда вы понимаете, как создать страницу параметров темы, вам необходимо использовать это значение в своей теме, чтобы изменить настройки.

Все настройки хранятся в таблице wp_options вместе с WordPress. Очень легко получить эти значения, все что вам нужно сделать, это использовать функцию get_option ().

<?php
$options = get_option( $option_name );
?>

Имя опции — это имя, которое вы вводите в функцию register_settings () . Так что в нашем примере выше вы будете использовать этот код.

<?php
$options = get_option( 'pu_theme_options' );
?>

Переменная $ options теперь будет хранить массив значений из параметров темы, которые вы можете отобразить с помощью этого фрагмента значения текстового поля, которое мы помещаем на страницу.

<?php
$options = get_option( 'pu_theme_options' );
echo $options['pu_textbox'];
?>

Вывод

Это основы, которые вы должны понимать, чтобы использовать API настроек , теперь вы можете взять эту информацию и создать свою собственную страницу настроек темы. Поэкспериментируйте с различными типами ввода, которые вы можете добавить в форму, поэкспериментируйте с различными методами проверки, которые вы хотите использовать.

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

Как вы можете видеть, мы создали страницу параметров настройки чуть более чем в 100 строках кода, так что это не сложно, но это всего лишь несколько шагов, и возможности могут быть расширены. По этой причине люди создали фреймворки опций темы, чтобы вы могли легко создать страницу опций темы с гораздо более высоким уровнем сложности с опциями.

Но, как и многие другие фреймворки, я всегда рекомендую вам изучить основы перед использованием фреймворка, поэтому важно понять, как работает API настроек, прежде чем использовать или создавать фреймворк страницы настроек.

 

38
Share: