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

Если ты делаешь тему на WordPress и каждый раз хардкодишь цвета, логотипы и прочий визуальный мусор в CSS — остановись. Не надо быть великим гуру PHP, чтобы запихнуть всё это в кастомайзер и дать пользователю ползунки и выпадашки. Поговорим, как добавить настройки в тему — чтобы один раз сделал и не возвращался к этому через три месяца с фразой “а где я это менял”.

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

Создание настроек темы производится в файле 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.