Как добавить настройки темы Wordpress

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

Первый шаг создания настроек

Создание настроек темы производится в файле functions.php вашего шаблона. Если его еще нет, то нужно его создать. После того, как вы его создадите, дабавьте в этот файл следующий код:

<?php

add_action('admin_menu', function(){
   add_theme_page('Настроить', 'Настроить', 'edit_theme_options', 'customize.php');
});

При переходе к пункту «Внешний вид» появится пункт «Настройки». 

Создание панели настроек

Панель настроек является пунктом, который может содержать специальные секции с настройками:

WP_Customize_Manager::add_panel( WP_Customize_Panel|string $id, array $args = array() )

Например:

$wp_customize->add_panel( 'panel_id', array(
  'priority'       => 10,
  'capability'     => 'edit_theme_options',
  'theme_supports' => '',
  'title'          => 'Заголовок',
  'description'    => 'Описание',
) );

Параметры:

• id - обязательный параметр, идентификатор панели
• args - аргументы
  • priority - приоритет панели, определяющий порядок отображения панелей и разделов. По умолчанию 160
  • capability - возможности, необходимые для панели. По умолчанию edit_theme_options
  • theme_supports - тематические функции, необходимые для поддержки панели
  • title - отображаемое название панели
  • description - отображаемое описание панели
  • type - тип панели
  • active_callback - активный обратный вызов

Создание секции настроек

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

WP_Customize_Manager::add_section( WP_Customize_Section|string $id, array $args = array() )

Пример:

add_action('customize_register', function($customizer){
    $customizer->add_section(
        'example_section_one',
        array(
            'title' => 'Новые настройки',
            'description' => 'Описание секции',
            'priority' => 11,
        )
    );
});

Параметры:

• id - обязательный параметр, идентификатор панели
• args - аргументы
  • priority - приоритет панели, определяющий порядок отображения панелей и разделов. По умолчанию 160
  • panel - идентификатор панели, к которой относится секция
  • capability - возможности, необходимые для секции. По умолчанию edit_theme_options
  • theme_supports - тематические функции, необходимые для поддержки секции
  • title - отображаемое название секции
  • description - отображаемое описание секции
  • type - тип секции
  • active_callback - активный обратный вызов
  • description_hidden - скрыть описание за значком справки, вместо встроенного над первым элементом управления. Значение по умолчанию false.

Добавление настроек

Существует несколько типов настроек:

Настройка в виде чекбокса (галочки):

$customizer->add_control(
    'example_text',
    array(
        'type' => 'checkbox',
        'label' => 'Выбрать',
        'section' => 'example_section',
    )
);

Настройка в виде радио кнопок (флажков):

$customizer->add_setting(
    'radio',
    array('default' => 'val_1')
);

$customizer->add_control(
    'radio',
    array(
        'type' => 'radio',
        'label' => 'Переключатели',
        'section' => 'example_section',
        'choices' => array(
            'val_1' => 'val_1',
            'val_2' => 'val_2',
            'val_3' => 'val_3',
        ),
    )
);

Настройка в виде селекта (выпдающего списка):

$customizer->add_setting(
    'select',
    array('default' => 'item_1')
);

$customizer->add_control(
    'select',
    array(
        'type' => 'select',
        'label' => 'Список',
        'section' => 'example_section',
        'choices' => array(
            'item_1' => 'Первый',
            'item_2' => 'Второй',
            'item_3' => 'Третий',
        ),
    )
);

Настройка в виде списка страниц Wordpress:

$customizer->add_setting(
    'pages',
    array('sanitize_callback' => 'example_sanitize')
);

$customizer->add_control(
    'pages',
    array(
        'type' => 'dropdown-pages',
        'label' => 'Выберите страницу',
        'section' => 'example_section',
    )
);

Настройка в виде палитры (выбора цвета):

$customizer->add_setting(
    'colors',
    array(
        'default' => '#FFFFFF',
        'sanitize_callback' => 'sanitize_hex_color',
    )
);

$customizer->add_control(
    new WP_Customize_Color_Control(
        $customizer,
        'colors',
        array(
            'label' => 'Палитра цвета',
            'section' => 'example_section',
            'settings' => 'colors',
       )
    )
);

Настройка в виде загрузки файлов:

$customizer->add_setting('files');

$customizer->add_control(
    new WP_Customize_Upload_Control(
        $customizer,
        'files',
        array(
            'label' => 'Загрузить файл',
            'section' => 'example_section',
            'settings' => 'files'
        )
    )
);

Настройка в виде загрузки изображений:

$wp_customize->add_setting('images');

$wp_customize->add_control(
    new WP_Customize_Image_Control(
        $wp_customize,
        'images',
        array(
            'label' => 'Загрузка изображения',
            'section' => 'example_section',
            'settings' => 'images'
        )
    )
);

Вывод настроек в теме

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

<?php echo get_theme_mod($name, $default); ?>

Функция get_theme_mod() включает в себя следующие параметры:

• $name - имя, идентификатор настройки
• $default - значение по умолчанию, которое будет отображаться если нет значения в настройки

Например:

<?php echo get_theme_mod('example_field', ''); ?>

С помощью этих настроек возможно значительно облегчить и улучшить процесс изменения различных элементов темы Wordpress.