WP Blogs

Темы, плагины, виджеты на WordPress

Добавление новых секций, полей и контролов

Создаем новую переменную

$wp_customize->add_setting( 'setting_name', array(
'default' => 'Значение по умолчанию',
'type' => 'theme_mod',
'capability' => 'edit_theme_options' )
);

В зависимости от типа (‘theme_mod’ или ‘option’) к переменной нужно обращаться функциями get_theme_mod() или get_option() соответственно:

Получаем значение переменной

get_theme_mod('setting_name');

get_option('setting_name');

Новая секция

Чтобы добавить новую секцию в персонализатор темы, пишем:

$wp_customize->add_section( 'section_name', array('title' => 'Название секции', 'priority' => 1,
) );

От приоритета (priority) зависит позиция секции. Приоритеты существующих по умолчанию секций:

  • Название и описание сайта title_tagline 20
  • Цвета colors 40
  • Изображение заголовка header_image 60
  • Фоновое изображение background_image 80
  • Меню nav 100
  • Виджеты widgets 110
  • Домашняя страница static_front_page 120

Начиная с WordPress 4.0 навигационная панель переехала на приоритет 30.

Существующие секции

Можно добавлять поля в стандартные секции:

  • title_tagline – название и описание сайта
  • colors – цвета
  • header_image – изображение заголовка
  • background_image – фон
  • nav – меню
  • static_front_page – настройки домашней страницы и блога
  • sidebar-widgets-{уникальный ID сайдбара] – для каждой панели виджетов создается своя секция

Добавляем элемент управления

$wp_manager->add_control( 'setting_name', array(
'label' => 'Подпись',
'section' => 'section_name',
'type' => 'text',
'priority' => 1
) );

Первый параметр ‘setting_name’ – либо имя переменной, либо один из классов:

Классы контролов

  • WP_Customize_Control() – текст
  • WP_Customize_Color_Control() – выбор цвета
  • WP_Customize_Upload_Control() – медиа файл
  • WP_Customize_Image_Control() – картинка
  • WP_Customize_Background_Image_Control() – фон, не работает
  • WP_Customize_Header_Image_Control() – изображение заголовка, не работает
  • Создать свой класс

Секции: своя или стандартная секция.

Приоритет: позиция по порядку.

Типы полей

  • text
  • checkbox
  • radio
  • select
  • dropdown-pages

Начиная с WordPress 4.0

  • text
  • hidden
  • number
  • range
  • url
  • tel
  • email
  • search
  • time
  • date
  • datetime
  • week

Примеры контролов

Текстовое поле

 $wp_customize->add_control( 'setting_name', array(
'label' => 'Текстовое поле',
'section' => 'section_name',
'type' => 'text',
'priority' => 1
) );

Чекбокс

$wp_customize->add_control( 'setting_name', array(
'label' => 'Галка',
'section' => 'section_name',
'type' => 'checkbox',
'priority' => 2
) );

Радио кнопка

$wp_customize->add_control( 'setting_name', array(
'label' => 'Кружок',
'section' => 'section_name',
'type' => 'radio',
'choices' => array("1", "2", "3"),
'priority' => 3
) );

Выпадающий список

$wp_customize->add_control( 'setting_name', array(
'label' => 'Выпадающий список',
'section' => 'section_name',
'type' => 'select',
'choices' => array("1", "2", "3",),
'priority' => 4
) );

Выпадающие страницы

$wp_customize->add_control( 'setting_name', array(
'label' => 'Выпадающий список страниц',
'section' => 'section_name',
'type' => 'dropdown-pages',
'priority' => 5
) );

Выбор цвета

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'setting_name', array(
'label' => 'Выбор цвета',
'section' => 'section_name',
'settings' => 'setting_name',
'priority' => 6
) ) );

Загрузка файла

$wp_customize->add_control( new WP_Customize_Upload_Control( $wp_customize, 'setting_name', array(
'label' => 'Загрузка файла',
'section' => 'section_name',
'settings' => 'setting_name',
'priority' => 7
) ) );

Загрузка изображения

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'setting_name', array(
'label' => 'Выбор изображения',
'section' => 'section_name',
'settings' => 'setting_name',
'priority' => 8
) ) );

Подгружаем код

В файле functions.php:

function custom_customize_register( $wp_customize ) {

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

}

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

add_action( 'customize_register', 'custom_customize_register' );

Создание новой секции для персонализатора WordPress полностью

function custom_customize_register( $wp_customize ) {
 //Создаем секцию
 $wp_customize->add_section( 'section_name', array('title' => 'Название секции', 'priority' => 1) );
 //Создаем переменную
 $wp_customize->add_setting( 'setting_name', array( 'default' => '', 'type' => 'theme_mod', 'capability' => 'edit_theme_options' ) );
 //Добавляем контрол в секцию section_name для переменной 'setting_name'
 $wp_customize->add_control( 'setting_name', array(
 'label' => 'Выпадающий список страниц',
 'section' => 'section_name',
 'type' => 'dropdown-pages',
 'priority' => 1
 ) );
 //Добавим еще один контрол для примера, пусть это будет элемент для выбора цвета
 //Создаем вторую переменную
 $wp_customize->add_setting( 'setting_name2', array( 'default' => '#fff', 'type' => 'theme_mod', 'capability' => 'edit_theme_options' ) );
 //Добавляем контрол в секцию section_name для переменной 'setting_name2'
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'setting_name2', array(
 'label' => 'Выбор цвета',
 'section' => 'section_name',
 'settings' => 'setting_name2',
 'priority' => 2
 ) ) );
}
add_action( 'customize_register', 'custom_customize_register' );

В результате в меню “Внешний вид->Настроить” появилась новая секция с выпадающим списком всех страниц сайта и котролом для выбора цвета самым первым пунктом. Другие параметры добавляют точно таким же образом. Чтобы опустить секцию пониже изменяем ее приоритет.

Проверка данных и устранение нежелательного кода

При создании переменной можно указать функцию обратного вызова для проверки корректности данных, введенных пользователем. Обработка данных так называемыми sanitize функциями является обязательным требованием WordPress при использовании данных.

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

$wp_customize->add_setting( 'setting_name', array(
'default' => 'Значение по умолчанию',
'type' => 'theme_mod',
'capability' => 'edit_theme_options' )
'sanitize_callback' => 'prefix_sanitize_function_name' 
);

function prefix_sanitize_function_name( $value ) {
//Здесь выполняем проверку данных
 return absint( $value ); //положительное число
}

Стандартные функции проверки данных

  • sanitize_hex_color – цвет (3 или 6 шестнадцатиричных цифр и символ #)
  • sanitize_text_field

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

Проверка списка

function transformer_sanitize_repeat( $value ) {
   $possible_values = array( 'variant1', 'variant2', 'variant3' );
   return ( in_array( $value, $possible_values ) ? $value : 0 );
}

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

Отображение параметров в реальном времени при помощи JQuery (Транспорт)

У переменной есть еще один интересный параметр – ‘transport’ => ‘postMessage’, он задает способ визуального обновления переменной. Если установить транспорт в postMessage, то появится возможность задать динамическое обновление параметров персонализатора WordPress на JQuery.  Но об этом позже. В будущем планируется убрать необходимость JS кода для обработки переменной.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *