Быстрые настройки WordPress с Кирки

Одна вещь, к которой привыкли пользователи WordPress, — это простота, не требующий кода опции настройки темы. Идея состоит в том, чтобы загрузить тему, активировать ее на панели «Темы», получить доступ к панели «Настройка» и начать настройку цветов, макета, шрифтов и т. Д. Всего одним щелчком мыши.

WordPress предлагает разработчикам темы API Customizer . Это чистый, объектно-ориентированный набор методов, которые облегчают создание согласованного интерфейса настройки. На панели «Настройка» пользователи могут легко вносить изменения и просматривать их в режиме реального времени без необходимости связываться с кодом PHP или CSS.

Разработка параметров темы с использованием API-интерфейса Customizer, будучи простым и логичным процессом, предполагает написание определенного количества повторяющегося кода. Чтобы сократить некоторые шаги, необходимые для создания функциональных и безопасных опций Customizer, Aristeides Stathopoulos разрабатывает бесплатный плагин с открытым исходным кодом, Kirki .

В этом посте я собираюсь показать, как интегрировать Kirki в вашу тему WordPress и как использовать ее для создания нескольких опций Customizer.

Что такое Кирки?

Давайте послушаем, о чем говорит Kirki от разработчика:

Кирки это не рамки. Это инструментарий, позволяющий разработчикам WordPress использовать настройщик и использовать его расширенные функции и гибкость, абстрагируя код и облегчая создание красивого и значимого пользовательского опыта для всех.

Кирки Документация

Я хотел бы рассказать о двух основных моментах этого инструментария.

• Кирки не заменяет API WordPress Customizer. Он создает «оболочку для стандартных методов WordPress, упрощая синтаксис и позволяя писать больше с меньшим количеством кода». Вы все еще можете использовать собственные методы Customizer вместе с Kirki API. Более того, вам настоятельно рекомендуется ознакомиться с API настройщика, прежде чем обращаться к Кирки. Если вы ищете полезное введение в объект Customizer , перейдите к началу работы с API настройки темы WordPress от Narayan Prusty.
• Кирки находится в состоянии постоянного развития и совершенствования, мало чем отличающегося от самого WordPress Customizer. Поэтому любые сообщения об ошибках или запросы на новые функции размещаются в репозитории GitHub , где вы можете скачать версию плагина для разработки и внести свой вклад в его разработку.

Пришло время увидеть Кирки в действии. Если вы хотите следовать, подготовьте тему WordPress или возьмите демонстрационную тему Superminimal, которая содержит весь код, обсуждаемый в этом посте.

Как включить Кирки в вашу тему

Кирки упакован как плагин для WordPress. Таким образом, вы можете скачать его из хранилища плагинов WordPress.org или непосредственно из серверной части вашей установки WordPress, разархивировать и активировать.

Если вы предпочитаете включить Kirki в свою тему в качестве библиотеки, выполните действия, описанные ниже.

• Скопируйте каталог kirki в папку вашей темы.
  
  В демонстрационной теме для этой статьи файлы Kirki находятся в каталоге с именем inc .

• Сделайте вашу тему «поговорите» с Кирки, добавив эту строку в functions.php (убедитесь, что вы изменили путь к папке kirki в соответствии с файловой структурой вашей темы).

 if ( ! class_exists( 'Kirki' ) ) { include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' ); } 

• Добавьте функцию для включения параметров конфигурации Kirki и подключите ее к фильтру kirki/config . Вам решать, что вы хотите добавить к этой функции. Для этого поста давайте сведем его к минимуму, добавив код, который нужен Кирки, чтобы «узнать» о его новом расположении, то есть папке темы, а не папке плагина.

 function superminimal_customizer_config() { $args = array( // Only use this if you are bundling the plugin with your theme 'url_path' => get_stylesheet_directory_uri() . '/inc/kirki/', ); return $args; } add_filter( 'kirki/config', 'superminimal_customizer_config' ); 

Внутри этой функции конфигурации вы можете контролировать внешний вид WordPress Customizer в соответствии с вашей темой. Самое главное, именно здесь вы добавляете код, необходимый для перевода всех строк, используемых плагином, из вашей темы. Загляните в демонстрационную тему Superminimal или на страницу документации Kirki, чтобы узнать, как этого добиться.

Давайте начнем добавлять параметры

Кирки теперь готов помочь нам создать некоторые опции Customizer. Вы можете использовать functions.php или создать специальный файл для задачи, это ваше дело.

Параметры настройки находятся внутри разделов , которые по выбору расположены внутри панелей . В демонстрационном проекте этой статьи я сгруппировал все разделы внутри выделенной панели, используя родные методы Customizer, вот так.

 function superminimal_demo_panels_sections( $wp_customize ) { /** * Add Panel */ $wp_customize->add_panel( 'sitepoint_demo_panel', array( 'priority' => 10, 'title' => __( 'SitePoint Demo Panel', 'superminimal' ), 'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ), ) ); //More code to come } add_action( 'customize_register', 'superminimal_demo_panels_sections' ); 

Затем добавьте разделы для цветов текста сайта, макета сайта и параметров текста add_panel колонтитула соответственно, поместив этот код чуть ниже предыдущего метода add_panel .

 /** * Add a Section for Site Text Colors */ $wp_customize->add_section( 'superminimal_text_colors', array( 'title' => __( 'Site Text Colors', 'superminimal' ), 'priority' => 10, 'panel' => 'sitepoint_demo_panel', 'description' => __( 'Section description.', 'superminimal' ), ) ); /** * Add a Section for Site Layout */ $wp_customize->add_section( 'superminimal_site_layout', array( 'title' => __( 'Site Layout', 'superminimal' ), 'priority' => 10, 'panel' => 'sitepoint_demo_panel', 'description' => __( 'Section description.', 'superminimal' ), ) ); /** * Add a Section for Footer Text */ $wp_customize->add_section( 'superminimal_footer_text', array( 'title' => __( 'Footer Text', 'superminimal' ), 'priority' => 10, 'panel' => 'sitepoint_demo_panel', 'description' => __( 'Section description.', 'superminimal' ), ) ); 

Теперь вы готовы добавить первый вариант с питанием от Kirki.

Вариант цвета текста

Весь ваш код, связанный с опциями, должен быть размещен внутри функции. Затем эта функция фильтруется через фильтр kirki/fields .

 function superminimal_demo_fields( $fields ) { //Add code here return $fields; } add_filter( 'kirki/fields', 'superminimal_demo_fields' ); 

Давайте дадим пользователям вашей темы WordPress простой способ изменить цвет текста. Это быстро делается с Кирки. Добавьте следующий фрагмент кода внутри функции superminimal_demo_fields() , чуть выше return $fields; заявление.

 /** * Add a Field to change the body text color in the Text Colors Section */ $fields[] = array( 'type' => 'color', 'setting' => 'superminimal_body_color', 'label' => __( 'Body Color', 'superminimal' ), 'description' => __( 'Description here', 'superminimal' ), 'section' => 'superminimal_text_colors', 'priority' => 10, 'default' => '#555555', 'output' => array( array( 'element' => 'body, p', 'property' => 'color' ), ); 

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

Давайте разберем массив $fields[] .

• type относится к конкретному элементу управления, где пользователи вводят значение выбранного параметра, в данном случае элемент управления «Цвет».
• setting относится к id параметра Customizer, который выполняет предварительный просмотр, сохранение и очистку объектов Customizer в режиме реального времени.
• label и description есть для общения с пользователями. Метка отображает заголовок для опции, а описание предлагает некоторое указание того, что делает опция.
• section ссылается на id Раздела, в котором размещен этот конкретный элемент управления Цвет.
• priority относится к позиции этого конкретного элемента управления цветом относительно других элементов управления в том же разделе.
• default установлено значение цвета CSS по умолчанию.
• Наконец, output — это замечательный способ Кирки применить значение параметра. Просто передайте ему селектор и свойство CSS, и Кирки обрабатывает все необходимые операции.

Следуя приведенному выше примеру, вы можете добавить цветовую опцию и для ссылок.

Далее давайте дадим пользователям вашей темы возможность настроить макет сайта.

Вариант размещения сайта

Кирки предлагает кучу сложных элементов управления Customizer. Мой любимый — радиоуправление изображениями .

 /** * Add a Field to change the site layout */ $fields[] = array( 'type' => 'radio-image', 'setting' => 'superminimal_layout', 'label' => __( 'Site Layout', 'superminimal' ), 'description' => __( 'Description here', 'superminimal' ), 'section' => 'superminimal_site_layout', 'default' => 'fullwidth', 'priority' => 10, 'choices' => array( 'sidebar-left' => trailingslashit( get_template_directory_uri() ) . 'inc/kirki/assets/images/2cl.png', 'fullwidth' => trailingslashit( get_template_directory_uri() ) . 'inc/kirki/assets/images/1c.png', 'sidebar-right' => trailingslashit( get_template_directory_uri() ) . 'inc/kirki/assets/images/2cr.png', ), ); 

 /** * Add a Field to change the footer text only if checkbox is checked */ $fields[] = array( 'type' => 'textarea', 'setting' => 'superminimal_footer_text', 'label' => __( 'Footer Text', 'superminimal' ), 'description' => __( 'Add some text to the footer', 'superminimal' ), 'section' => 'superminimal_footer_text', 'default' => 'Superminimal Theme – Kirki Toolkit Demo for SitePoint', 'priority' => 20, ), ); 

 <footer id="footer"> <?php echo get_theme_mod( 'superminimal_footer_text', __( 'Default text here', 'superminimal' ) ); ?> <?php wp_footer(); ?> </footer> 

 'required' => array( array( 'setting' => 'superminimal_reveal_footer_text', 'operator' => '==', 'value' => 1, ), ), 

 $fields[] = array( 'type' => 'checkbox', 'setting' => 'superminimal_reveal_footer_text', 'label' => __( 'Change Footer Text', 'superminimal' ), 'description' => __( 'Description here', 'superminimal' ), 'section' => 'superminimal_footer_text', 'default' => 0, 'priority' => 10, ); 

 'transport' => 'postMessage', 'js_vars' => array( array( 'element' => 'body, p', 'function' => 'css', 'property' => 'color', ), ) 

 'transport' => 'postMessage', 'js_vars' => array( array( 'element' => 'footer', 'function' => 'html' ), ), 

 'js_vars' => array( array( 'element' => '#content', 'function' => 'superminimal_customizer_live_preview' ), ), 

 function superminimal_customizer_live_preview() { wp_enqueue_script( 'superminimal_css_preview', get_template_directory_uri().'/js/superminimal-customizer-preview.js', array( 'customize-preview', 'jquery' ), '', true ); } add_action( 'customize_preview_init', 'superminimal_customizer_live_preview' ); 

 (function( $ ) { "use strict"; wp.customize( 'superminimal_layout', function( value ) { value.bind( function( to ) { $( '#content' ).removeClass().addClass( to + ' clearfix' ); } ); }); })( jQuery );