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, )); } |
Поки що немає елементів керування в розділі і вони не налаштовані, новий розділ не відображатиметься, про елементи управління поговоримо трохи пізніше, а зараз давайте розглянемо код який ми описали вище.
themenaname_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 сценарій.
Наприкінці нашої функції themenaname_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.
При копіюванні уроку, прохання залишати зворотне посилання на статтю автора, тобто мене!