Наверняка вы знаете, что в меню Внешний вид в админке WordPress есть пункт "Настроить". Его английский аналог - Appearance → Customize. Так вот Customizer - это английский вариант слова "настройщик" и одновременно специальный класс, который предназначен для управления настройками темы в ее классическом варианте.
Подключаем файл customize.php в functions.php
Для того чтобы использовать Customizer в WordPress, лучше создать отдельный файл в папке inc с именем customize.php, чтобы не смешивать этот код с другим. Затем его нужно подключить в файл functions.php, т.к. он отвечает за весь функционал вашей темы.
|
1 2 3 4 5 6 7 |
<?php define('THEME_DIR', get_template_directory() ); //Весь предыдущий код //.... /* Customizer */ require THEME_DIR. '/inc/customizer.php'; |
Затем необходимо определиться с тем, какие настройки вы будете добавлять. Самыми распространенными являются: текстовое поле и текстовая область, флажок (checkbox), radio-кнопки, выпадающий список (select) и его разновидности в виде списка категорий, записей или страниц, colorbox и загрузчик медиа (картинок, видео и т.д).
Кроме того, настройки могут размещаться в отдельной секции, или разделе настройщика либо могут быть добавлены в уже существующие. Если вы хотите выделить настройки вашей темы в отдельный блок, то можете создать свою панель. Давайте начнем с этих крупных блоков Customizer, а затем уже посмотрим, куда мы можем добавить конкретные поля и кнопки.
Всю информацию по Customizer вы можете найти в официальной документации на ресурсе для разработчиков WordPress.
Чтобы использовать Customizer, как объект, а также получить доступ к диспетчеру Customizer, добавьте в customize.php хук customize_register:
|
1 2 3 4 5 |
function themeslug_customize_register( $wp_customize ) { // некие действия с использованием методов с объектомом $wp_customize, //представляющим класс WP_Customize_Manager. } add_action( 'customize_register', 'themeslug_customize_register' ); |
Методы, которые вы можете использовать, представлены ниже. Все они имеют свои настройки, но, если говорить в общем, то методы, начинающиеся с add_ позволяют добавить настройки, get_ - их получить, remove_ - удалить.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
add_action('customize_register','mytheme_customize_register'); function mytheme_customize_register( $wp_customize ) { $wp_customize->add_panel(); $wp_customize->get_panel(); $wp_customize->remove_panel(); $wp_customize->add_section(); $wp_customize->get_section(); $wp_customize->remove_section(); $wp_customize->add_setting(); $wp_customize->get_setting(); $wp_customize->remove_setting(); $wp_customize->add_control(); $wp_customize->get_control(); $wp_customize->remove_control(); } |
Это только названия функций по группам. У каждой из них есть еще параметры. Что касается самих функций, то самыми используемыми являются те, что начинаются с add_, т.к. нам нужно, прежде всего, добавить панели, разделы, настройки.
Создание отдельной панели
За создание панелей отвечает класс WP_Customize_Panel. Название темы, для которой мы здесь будем создавать настройки, techex, поэтому во всех строках для перевода будет указана эта строка и сами настройки будут начинаться с techex_. Поэтому панель мы добавим с помощью метода add_panel():
|
1 2 3 4 5 6 7 |
//Theme Optitions $wp_customize->add_panel( 'techex_theme_options', array( 'priority' => 10, //по умолчанию 160 'title' => __( 'Theme Options', 'techex' ), 'description' => __( 'Theme Modifications', 'techex' ), )); |
Приоритет (priority) позволяет расположить настройки темы выше/ниже в списке уже существующих настроек, title - это название панели, а description - описание того, что можно сделать с помощью данных настроек.
Ни раздела, ни элементов управления у нас пока что нет, то есть увидеть сейчас созданную панель мы не сможем.
Создание нового раздела настроек
Чтобы панель отобразилась в настройщике, в нее нужно добавить хотя бы один раздел. За создание разделов настроек отвечает класс WP_Customize_Section и метод add_section():
|
1 2 3 4 5 6 |
//Footer Section $wp_customize->add_section( 'techex_footer_options' , array( 'title' => __( 'Footer Options', 'techex' ), 'priority' => 45, 'panel' => 'techex_theme_options', ) ); |
Важно, чтобы ваш раздел имел приоритет, который позволит его разместить выше или ниже существующих или после них. Если вы собираетесь добавлять раздел не в созданную вами панель, а между стандартными, то ниже вы найдете их названия и приоритет (своего рода уровень).
| Название | ID (слаг) | Приоритет (Priority) |
| Свойства сайта (Site Title & Tagline) | title_tagline | 20 |
| Цвета (Colors) | colors | 40 |
| Изображение заголовка (Header Image) | header_image | 60 |
| Фоновое изображение(Background Image) | background_image | 80 |
| Панель Меню (Menus) | nav_menus | 100 |
| Панель виджетов (Widgets) | widgets | 110 |
| Настройки главной страницы (Static Front Page) | static_front_page | 120 |
| По умолчанию (default) | 160 | |
| Дополнительный CSS (Additional CSS) | custom_css | 200 |
Имейте в виду, что вы можете добавлять элементы управления не только в новые панели, но и в те, что присутствуют в таблице выше. Для этого в атрибуте section нужно указать ID (слаг) соответствующего раздела, например, 'section' => 'colors'.
Добавляем свои (пользовательские) элементы управления
Пользовательские элементы управления - это собственно те самые текстовые поля, чекбоксы, радио-кнопки или выпадающие списки, о которых мы говорили в начале. Для каждого такого элемента настройки темы нужно добавлять саму настройку, за которую отвечает класс WP_Customize_Setting и контролирующий элемент, создаваемый классом WP_Customize_Control.
Для начала добавляем настройку. Она задает название поля, его значение по умолчанию, метод очистки данных, тип обновления и тип настройки. Ниже представлен общий вид со всеми возможными параметрами и их описанием:
|
1 2 3 4 5 6 7 8 9 |
$wp_customize->add_setting( 'setting_id', array( 'type' => 'theme_mod', // Или 'option' 'capability' => 'edit_theme_options', // Права доступ к изменению настроек кастомайзера. 'theme_supports' => '', // Требуется редко. 'default' => '', // Значение по умолчанию. 'transport' => 'refresh', // По умолчанию - перезагрузка фрейма или 'postMessage' - через дополнит.JS. 'sanitize_callback' => '', // Очистка данных на стороне PHP. 'sanitize_js_callback' => '', // Очистка данных на стороне JavaScript. В основном 'to_json'. ) ); |
Имеет смысл остановиться на параметре type: он может иметь значение option (опции) и theme_mod (модификации темы):
- Опции (option) хранятся в таблице wp_options и имеют имя (название) в виде первого параметра
'setting_id'. В файлах темы вы будете получать значение любой опции принято функцией get_option(). - Модификации темы (theme_mod) - это значение по умолчанию. Они хранятся для каждой темы отдельно в виде сериализованного массива в таблице wp_options, в опции с названием
theme_mods_THEME_NAME. Получать такие опции принято функцией get_theme_mod() или get_theme_mods().
Для нашего раздела в футере мы добавим настройку для копирайта в виде текстового поля.
|
1 2 3 4 5 6 |
//Setting for Copiright text $wp_customize->add_setting( 'techex_copyright_text', array( 'default' => __( 'All rights reserved ', 'techex' ), 'sanitize_callback' => 'sanitize_text_field', )); |
Теперь укажем, что это будет текстовое поле:
|
1 2 3 4 5 6 7 8 9 |
$wp_customize->add_control( 'techex_copyright_text', array( 'type' => 'text', 'priority' => 10, 'section' => 'techex_footer_options', 'label' => __('Copyright text', 'techex' ), 'description' => __( 'Text in the footer', 'techex' ), ) ); |
Методadd_control( $id, $args ) добавляет элемент управления, в котором вы указываете, каким будет ваш элемент управления (какой-либо из обычных элементов форм, например, text, textarea, checkbox, select или тот, что описан в ядре WordPress, например, WP_Customize_Color_Control. Общий вид использования этого метода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$wp_customize->add_control( $id, //совпадает со строкой setting_id в методе add_setting() array( 'type' => 'radio', // 'text' по умолчанию 'priority' => 10, // последовательность размещения полей. По умолчанию: 10 'section' => 'section_id', // id раздела, в котором будет элемент настройки 'label' => 'text', // Подпись для элемента. 'description' => __( 'Choose Layout', 'themeslug' ), // текст описания 'choices' => array( // массив атрибутов для radio и select 'leftsidebar' => __( 'Left Sidebar', 'themeslug' ), //значение => текст метки label/option 'rightsidebar' => __( 'Right Sidebar', 'themeslug' ), 'fullwidth' => __( 'Full Width', 'themeslug' ), ), 'input_attrs' => array( // Атрибуты в виде классов, id, data-атрибутов или placeholder 'class' => 'inline-form-control', //'атрибут' => 'значение' 'style' => 'border: 1px solid #900', 'placeholder' => __( 'Some text', 'themeslug' ), ), 'active_callback' => 'is_front_page', // на какой странице показывать элемент. Необязательный ) ); |
Параметры add_control():
$id- обязательный параметр, который чаще всего является строкой или объектом Customize Control.type- тип поля в виде строки или объекта.- Строки, которые можно использовать
text,checkbox,textarea,radio,select,dropdown-pages, иemail,url,number,hidden,date. - Объекты, которые можно использовать в качестве параметра $id.
- Разные:
- Image:
- Nav_Menu:
- Widget:
- Строки, которые можно использовать
- Массив свойств для нового объекта управления указывается, только когда в $id будет строка (как в примере выше). Если же в $id указывается объект (например,
WP_Customize_Color_Control), то параметры передаются в создаваемый объект. Большая часть из них описана в коде. Обратить внимание нужно на редко используемые:- allow_addition( по умолчанию false). Установите true, чтобы разрешить пользователям добавлять новые страницы из элемента управления dropdown-pages.
- active_callback (callback) - этот необязательный аргумент может отображать или скрывать раздел в зависимости от просматриваемой в данный момент страницы внутри настройщика. Это аргумент использует такие условные функции, как is_page, is_front_page, is_archive и др., но без круглых скобок. То есть какой-либо элемент настройки будет показан, когда вы открыли главную страницу в кастомайзере (настройщике), но он же будет скрыт на других страницах. К слову используется редко, т.к. много настроек не подразумевают переключение страниц.
Параметр input_attrs мы еще используем для создания настройки для текстового поля с шорткодом.
Настройки для футера
Давайте соберем все, что писали по частям, в один код для файла customize.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php function techex_customize_register( $wp_customize ) { //Theme Options Panel $wp_customize->add_panel( 'techex_theme_options', array( 'priority' => 10, 'title' => __( 'Theme Options', 'techex' ), 'description' => __( 'Theme Modifications', 'techex' ), ) ); //Footer Section $wp_customize->add_section( 'techex_footer_options' , array( 'title' => __( 'Footer Options', 'techex' ), 'priority' => 45, 'panel' => 'techex_theme_options', ) ); //Setting for Copiright text $wp_customize->add_setting( 'techex_copyright_text', array( 'default' => __( 'All rights reserved ', 'techex' ), 'sanitize_callback' => 'sanitize_text_field', )); // Control for Copyright text $wp_customize->add_control( 'techex_copyright_text', array( 'type' => 'text', 'priority' => 10, 'section' => 'techex_footer_options', 'label' => __('Copyright text', 'techex' ), 'description' => __( 'Text in the footer', 'techex' ), ) ); } add_action( 'customize_register', 'techex_customize_register' ); |
В результате этих действий мы увидим в кастомайзере следующие настройки:
Настройка для кнопки "Прокрутить вверх"
Для того, чтобы "усилить" наши настройки футера, добавив в них еще одну - это флажок (checkbox), который будет отображать или прятать кнопку , отправляющую прокрутку вверх (to top), которая традиционно размещается в футере.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//добавьте внутрь функции techex_customize_register() // Setting for to top button $wp_customize->add_setting( 'techex_istotop', array( 'default' => 1,//or 0 'sanitize_callback' => 'techex_sanitize_checkbox', )); // Control for to top button $wp_customize->add_control( 'techex_istotop', array( 'type' => 'checkbox', 'priority' => 15, 'section' => 'techex_footer_options', 'label' => __('Show To Top Button', 'techex' ), 'description' => __( 'Check if you need To Top button', 'techex' ), ) ); |
В методе add_setting() у нас есть функция techex_sanitize_checkbox(), которая нужна для проверки значения checkbox и его преобразования. Она не слишком обязательна, т.к. можно использовать и стандартную sanitize_text_field(), но давайте посмотрим, как можно реализовать этот код:
|
1 2 3 |
function techex_sanitize_checkbox( $checked ) { return ( ( isset( $checked ) && true == $checked ) ? true : false ); } |
Добавляем настройки в файл footer.php
Теперь наши настройки нужно применить на всех страницах, добавив код в файл footer.php. Для этого мы будем использовать функцию get_theme_mod('setting_id', 'default_value'). В эту функцию нужно передать id настройки, под которым вы добавили ее в customize.php и значение по умолчанию.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php $copyright_text = get_theme_mod('techex_copyright_text', __( 'All rights reserved', 'techex' )); $isToTop = get_theme_mod('techex_istotop', 1); ?> <div class="footer-bottom"> <div class="container text-center"> <div class="footer-bottom-content"> © <?php echo date('Y') ?> <a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('sitename') ?></a>. <?php echo $copyright_text ?> </div> </div> </div> </footer> <?php if($isToTop): ?> <a id="scrollUp" href="#top"><i class="fal fa-angle-up"></i></a> <?php endif; ?> <?php wp_footer(); ?> |
Как добавить дату в футере, можно прочитать здесь. Вывод последних записей для футера вы найдете в отдельной статье.
В результате получим такое сочетание настроек и внешнего вида футера.
Добавление шорткода в Customizer. Текстовое поле для чтения
По умолчанию тип поля в Кастомайзере - это текст. И как правило, он должен быть редактируемым, как в примере с настройками для копирайта.
Однако, может быть случай, когда вам нужно, чтобы поле было только для чтения. Примером такого поля может быть шорткод, который назначается, например, для любой формы в плагине Contact Form 7. Возможно, в настройках темы вам понадобится такое же поле. Оно должно иметь такой атрибут, как readonly, или readonly="readonly". Задать его можно с помощью дополнительной опции настроек input_attrs - т.е. артибуты поля ввода. Мы добавим 2 атрибута: 'input_attrs' => array('readonly'=>'readonly', 'onclick'=>'this.select()':
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$wp_customize->add_section( 'techex_review_logo_section' , array( 'title' => __( 'Review Shortcode Options', 'techex' ), 'priority' => 35, 'panel' => 'techex_theme_options', ) ); $wp_customize->add_setting('techex_review_shortcode', array( 'default' => '[techex_reviews_logo]', )); $wp_customize->add_control('techex_review_shortcode', array('label' => esc_html__('Shortcode for post and pages', 'mytheme'), 'section' => 'techex_review_logo_section', 'type' => 'text', 'input_attrs' => array( 'readonly'=>'readonly', 'onclick'=>'this.select()' ) )); |
В результате вы получите текстовое поле, в котором уже будет находится значение по умолчанию, но изменить его нельзя. Можно только скопировать.
Необходимость в таком поле может появиться тогда, когда некий шорткод нужно вставить на несколько страниц, но его сложно найти или сохранить где-либо, кроме настроек.
Настройки для создания слайдера вы найдете в статье "Используем Customizer для загрузки изображений".
