Theme Customizer — настройка в WordPress
Для начала чтобы понять что такое Theme Customizer посмотрите видео из youtube, думаю, многое станет понятно. После просмотра видео, вам скорее всего будет не нужен плагин OptionTree о котором я говорил раньше.
Думаю после просмотра у вас появится много идей как можно использовать эту полезную панель, а вот как она работает, рассмотрим немного ниже.
Существующие параметры
Первое что думаю важно рассмотреть это существующие методы настройки темы, как пишут многие автора их 3 варианта, будем им верить и попробуем научиться пользоваться этими методами.
- Есть моды, которые поддерживаются для работы с темой, управлять этими модами можно при помощи функций set_theme_mod и get_theme_mod. Эти функции поддерживаются Settings API WordPress и отлично работают.
- Индивидуальные настройки для каждой темы. Не самый лучший способ создания тем, но тоже имеет место быть и также поддерживается в Theme Customizer.
- Serialized Settings — По сути, вы сохраняете настройки в массиве, а затем сохранить этот массив использованием set_option или get_option, как одна строка в базе данных. Это метод самый оптимальный и его который мы будем рассматривать в этой статье.
Два других метода мы вкратце упомянули и если они нам понадобятся, то мы их рассмотрим.
Во первых в Theme Customizer левая часть делится на разделы и на это стоит обратить внимание! Все работает через специальный экшен (хук) customize_register.
|
1 2 3 |
add_action( 'customize_register', 'themename_customize_register' ); function themename_customize_register($wp_customize) { // ... do stuff ... |
Функция получает в качестве параметра $wp_customize это основной объект. С ним мы будем работать при добавлении разделов, элементов управления и тому подобного.
Разделы в Theme Customizer
Итак, первое, что нужно сделать, это добавить раздел. Вот один из способов сделать это:
|
1 2 3 4 5 6 7 8 |
function themename_customize_register($wp_customize){ $wp_customize->add_section('themename_color_scheme', array( 'title' => __('Color Scheme', 'themename'), 'priority' => 120, )); } |
Пока нет элементов управления в разделе и они не настроены, новый раздел отображаться не будет, об элементах управления поговорим чуть позднее, а сейчас давайте рассмотрим код который мы описали выше.
themename_color_scheme — первый параметр является уникальным идентификатором для отображения, этот идентификатор нам понадобиться позднее когда мы будем помещать элементы управления в раздел.
Второй параметр это массив. В этом массиве есть два индекса. Индекс title для указания заголовка раздела и его описания. Индекс priority это приоритет разделов, который определяет их порядок.
Настройки для раздела
Далее, давайте настроим некоторые параметры. Предложим параметры для нашего раздела и рассмотрим 3 варианта.
Объявляем настройки вот так:
№3 вариант настроек. При сохранении будет создан массив с именем, включающим в себя имя темы и индекс, который будет являться именем нашей опции.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'themename_theme_options[color_scheme]', array( 'default' => 'some-default-value', 'type' => 'option', 'capability' => 'edit_theme_options', ) ); |
№2 вариант настроек. При сохранении будет создана переменная. Имя переменной будет включать в себя название темы и имя опции, которую будем хранить.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'themename_color_scheme', array( 'default' => 'some-default-value', 'type' => 'option', 'capability' => 'edit_theme_options', ) ); |
№1 вариант настроек. При сохранении будет создана переменная, которая в своем названии будет хранить только имя опции.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'color_scheme', array( 'default' => 'some-default-value', 'type' => 'theme_mod', 'capability' => 'edit_theme_options', ) ); |
Мы будем пользоваться вариантом №3
Кроме того что мы задали настройки для темы WordPress и при помощи add_setting записали их в базу, необходимо еще задать элементы управления. Попробуем добавить один из них, после добавления у вас в Theme Customizer появиться раздел с элементами управления типа радио кнопок.
|
1 2 3 4 5 6 7 8 9 10 11 |
$wp_customize->add_control( 'themename_color_scheme', array( 'label' => __( 'Color Scheme', 'themename' ), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[color_scheme]', 'type' => 'radio', 'choices' => array( 'value1' => 'Choice 1', 'value2' => 'Choice 2', 'value3' => 'Choice 3', ), ) ); |
Рассмотрим вывод элемента управления типа checkbox в Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 |
$wp_customize->add_setting('themename_theme_options[checkbox_test]', array( 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('display_header_text', array( 'settings' => 'themename_theme_options[checkbox_test]', 'label' => __('Display Header Text'), 'section' => 'themename_color_scheme', 'type' => 'checkbox', )); |
Рассмотрим пример вывода элемента управления типа select в Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$wp_customize->add_setting('themename_theme_options[header_select]', array( 'default' => 'value2', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( 'example_select_box', array( 'settings' => 'themename_theme_options[header_select]', 'label' => 'Select Something:', 'section' => 'themename_color_scheme', 'type' => 'select', 'choices' => array( 'value1' => 'Choice 1', 'value2' => 'Choice 2', 'value3' => 'Choice 3', ), )); |
Рассмотрим пример вывода элемента управления типа text input в Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[text_test]', array( 'default' => 'Arse!', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('themename_text_test', array( 'label' => __('Text Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[text_test]', )); |
Рассмотрим пример вывода элемента управления типа image upload в Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[image_upload_test]', array( 'default' => 'image.jpg', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'image_upload_test', array( 'label' => __('Image Upload Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[image_upload_test]', ))); |
Рассмотрим пример вывода элемента управления типа File Upload в Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[upload_test]', array( 'default' => 'arse', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Upload_Control($wp_customize, 'upload_test', array( 'label' => __('Upload Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[upload_test]', ))); |
Рассмотрим пример вывода элемента управления типа Color Picker в Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$wp_customize->add_setting('themename_theme_options[link_color]', array( 'default' => '000', 'sanitize_callback' => 'sanitize_hex_color', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'link_color', array( 'label' => __('Link Color', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[link_color]', ))); |
Рассмотрим пример вывода элемента управления типа Page Dropdown в Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[page_test]', array( 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('themename_page_test', array( 'label' => __('Page Test', 'themename'), 'section' => 'themename_color_scheme', 'type' => 'dropdown-pages', 'settings' => 'themename_theme_options[page_test]', )); |
С типами мы с вами закончили, в общем как оказалось не все так сложно и даже объектно ориентировано, что честно говоря меня очень порадовало в WordPress, понемногу исправляются ). Думаю, для начала разработки собственных тем с этим инструментом будет вполне достаточно.
Просмотр и вывод на экран опций, которые сохраняли в Theme Customizer
Предварительный просмотр в реальном времени
Ах да чуть не забыл, опции мы создали, но нам еще их надо выводить в шаблоне и дать возможность пользователю просмотреть наши опции до их сохранения, при этом изменения сможет видеть только тот, кто их вносит в реальном времени и не сможет обычный пользователь до нажатия кнопки сохранить.
Скорее всего многие из толковых программистов которые сидят у меня на сайте уже догадались что для вывода предварительного просмотра опций мы будем использовать хитрый JQUERY скрипт.
В самом конце нашей функции themename_customize_register, перед ее закрытием, вставьте код:
|
1 2 3 |
$wp_customize->get_setting( 'themename_theme_options[text_test]' )->transport = 'postMessage'; $wp_customize->get_setting( 'themename_theme_options[link_color]' )->transport = 'postMessage'; if ( $wp_customize->is_preview() && ! is_admin() ) { add_action( 'wp_footer', 'themename_customize_preview', 21); } |
Этот экшен выведет функцию в футере сайта после выполнения кода, которая покажет изменения при помощи JQUERY, изменяя содержимое элемента $( ‘#logo a’ ).html( newval ). Внимание у меня логотип обозначен ‘#logo a’ у вас может быть по другому.
Код $wp_customize->get_setting( ‘…’)->transport = ‘postMessage’ насколько я понял нужен для передачи названия опции таким образом чтобы дальше можно было его использовать для вывода предварительного просмотра, пробовал без этого кода но ничего не вышло ), на английском тоже ответа не нашел особо. Если у кого-то есть ответ, пишите в комментариях. Хотя код и так работает.
Вот код JQUERY плагина:
|
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 |
function themename_customize_preview() { ?> <script type="text/javascript"> ( function( $ ) { // Update the site title in real time... wp.customize( 'themename_theme_options[text_test]', function( value ) { value.bind( function( newval ) { $( '#logo a' ).html( newval ); } ); } ); //Update site title color in real time... wp.customize( 'themename_theme_options[link_color]', function( value ) { value.bind( function( newval ) { $('a').css('color', newval ); } ); } ); } )( jQuery ); </script> <!--?php }</pre> <p>Как видно из кода выше наш плагин jquery первым параметром передает название опции <u>themename_theme_options[text_test]</u>, а вторым функцию которая будет в режиме реального времени изменять содержимое тега <u>$( '#logo a' ).html( newval );</u>.</p> <p>Если вы все сделали правильно, то у вас при изменении содержимого опции <em>themename_theme_options[link_color]</em> и до нажатия кнопки <u>Сохранить и опубликовать</u> на вашем экране справа будет меняться текст логотипа.</p> <h3>Вывод сохраненных опций</h3> <p>Все что мы делали в предварительном просмотре работает пока мы не нажмем кнопку <u>Сохранить и опубликовать</u> или <u>обновим страницу</u>. Для того чтобы данные не исчезали необходимо заменить стандартный код в шаблоне на вывод нашего содержимого из опции.<br ?--><strong>Открываем шаблон и находим код который нужно поправить:</strong> |
|
1 |
Заменяем код на вот такой:
|
1 |
<!--?php $themename_theme_options = get_option( "themename_theme_options" ); ?--> |
|
1 |
Да уж, думал статья будет покороче, но вышло почти полное руководство по работе с Theme Customizer. Видимо увлекся темой ).
Так как тема не простая я решил выложить для вас некоторые исходники.
- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.
При копировании урока, просьба оставлять обратную ссылку на статью автора, то есть меня!
