Статьи

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

В первой части серии статей по настройке тем 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, а затем либо добавить что-то (раздел, настройку или элемент управления) к нему, либо удалить из него. Все остальное сводится к параметрам настроек.

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

Кнопка «Наверх»