TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Взаимодействие с настройщиком тем WordPress

121

В первой части серии статей по настройке тем WordPress я упоминал, что для взаимодействия с настройщиком тем вам необходимо загрузить объект $ wp_customize, который является экземпляром класса WP_Customize_Manager. Для этого вы должны использовать хук действия customize_register :

add_action( 'customize_register', 'my_theme_customize_register' ); function my_theme_customize_register( $wp_customize) { // Interacting with $wp_customize object }

Вы можете разместить этот код в functions.php вашей темы или в файле, который включен в нее.

Добавление или удаление элементов настройщика тем (разделы, настройки и элементы управления)

После того, как вы загрузили объект $ wp_customize, вы можете использовать любой из его методов для добавления, получения или удаления настроек, элементов управления и разделов в нем (add_setting, get_setting, remove_setting, add_control… вы поняли).

Итак, если вы хотите получить или удалить раздел, элемент управления или параметр, все, что вам нужно, это его идентификатор. Эта строка удалит раздел цветов (поместите его в функцию my_theme_customize_register из первого фрагмента кода):

$wp_customize->remove_section( 'colors' );

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

  1. Цель этой серии статей не совсем в этом, мы создадим шаблон настройщика тем, который вы можете вместо этого просто добавить в свою тему.
  2. Алекс Мэнсфилд уже рассказал об этом в своем учебнике по настройке тем из 6000 слов, который должен прочитать каждый разработчик тем WordPress, а затем написать в Твиттере (серьезно, если вы еще этого не сделали, прочтите его сейчас).

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

  • Новый раздел под названием «Макет».
  • Новый параметр, в котором хранится макет вашей темы
  • Новое радиоуправление с двумя вариантами – боковая панель слева и боковая панель справа

Первое, что нужно добавить в настройщик тем, – это раздел «Макет»:

$wp_customize->add_section( // ID 'layout_section', // Arguments array array( 'title' => __( 'Layout', 'my_theme' ), 'capability' => 'edit_theme_options', 'description' => __( 'Allows you to edit your theme's layout.', 'my_theme') ) );

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

$wp_customize->add_setting( // ID 'my_theme_settings[layout_setting]', // Arguments array array( 'default' => 'right-sidebar', 'type' => 'option') ); $wp_customize->add_control( // ID 'layout_control', // Arguments array array( 'type' => 'radio', 'label' => __( 'Theme layout', 'my_theme' ), 'section' => 'layout_section', 'choices' => array( 'left-sidebar' => __( 'Left sidebar', 'my_theme' ), 'right-sidebar' => __( 'Right sidebar', 'my_theme') ), // This last one must match setting ID from above 'settings' => 'my_theme_settings[layout_setting]') );

Предполагая, что вы читали учебник Алекса и / или страницы Кодекса, в массиве аргументов add_setting есть только один параметр – «тип», на котором я хотел бы сосредоточиться. Здесь у вас есть две возможности: option и theme_mod, и вы можете получить их, используя get_option и get_theme_mod соответственно. Я всегда использую ‘option’ просто потому, что он позволяет вам сериализовать значения настроек вашей темы, давая им такие идентификаторы, как my_theme_settings [setting_1], my_theme_settings [setting_2] и т.д. Таким образом, все значения будут сохранены как одна запись базы данных в вашей таблице wp_options.

И, наконец, после того, как вы добавили эти два фрагмента кода для работы, которую вы подключили к хуку действия customize_register (первый фрагмент кода в этом посте), настройщик темы был настроен:

Взаимодействие с настройщиком тем WordPress

В настройщик тем добавлен новый раздел

Использование значений настроек настройщика тем в вашей теме

После того, как вы предоставили своим пользователям возможность сохранять этот параметр, вы можете получить его значение, подключиться к хуку фильтра body_class и добавить его в массив существующих классов тела:

add_filter( 'body_class', 'my_theme_body_classes' ); function my_theme_body_classes( $classes) { /* * Since we used 'option' in add_setting arguments array * we retrieve the value by using get_option function */ $my_theme_settings = get_option( 'my_theme_settings' ); $classes[] = $my_theme_settings['layout_setting']; return $classes; }

Это добавит .left-sidebar или .right-sidebar к массиву классов тела в вашей теме. Используя эти два класса в файле style.css вашей темы, вы сможете создать два разных макета. Например:

/* Sidebar on the right is default layout */ #content { float: left; width: 60%; } #sidebar { float: right; width: 30%; } /* Using .left-sidebar class to override default layout */ .left-sidebar #content { float: right; } .left-sidebar #sidebar { float: left; }

Лучше всего то, что благодаря настройщику тем WordPress пользователи могут предварительно просмотреть оба макета, прежде чем что-либо сохранять. Возьми, страницы настроек темы!

Резюме и дополнительная литература

TL; DR версия этого сообщения будет выглядеть примерно так: вы можете получить объект $ wp_customize, а затем либо добавить что-то (раздел, настройку или элемент управления) к нему, либо удалить из него. Все остальное сводится к параметрам настроек.

В третьей части эта серия становится интересной, поскольку мы начнем автоматизировать весь процесс и работать над шаблоном настройщика темы, который вы можете добавить в свою тему и сразу же начать использовать. Оставайтесь в курсе!

Источник записи: https://www.wpexplorer.com

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее