Как создать настраиваемые элементы управления для настройщика темы WordPress
Опубликовано: 2015-06-17Функция настройки темы WordPress (также называемая «Настройщик») дает разработчикам возможность настраивать внешний вид своей темы и даже помогает им просматривать изменения, внесенные в тему, в режиме реального времени. В сегодняшнюю эпоху, когда гонка за привлечением клиентов к веб-сайту усиливается, вы часто чувствуете необходимость настроить дизайн своего веб-сайта. А благодаря настройщику темы вы можете сэкономить много своего драгоценного времени, предварительно просматривая изменения, внесенные в ваш дизайн WordPress.
Настройщик темы WordPress был представлен как часть API настройки темы (который был представлен в версии WordPress 3.4. Если вы хотите внести изменения в настройки своей темы, вам нужно будет использовать настраиваемые элементы управления, которые поставляются с темой. такие как флажок, текстовое поле, радио и др. Но что, если вы хотите добавить свои собственные элементы управления в свою тему WordPress?
Чтобы помочь вам понять, как вы можете создавать и добавлять элементы управления, отвечающие вашим конкретным потребностям, мы продемонстрируем создание трех настраиваемых элементов управления, чтобы внести несколько изменений в нижний колонтитул нашей темы. Однако для начала вам необходимо ознакомиться с классом WP_Customizer_Control.
Знакомство с классом «WP_Customizer_Control»
Чтобы создать пользовательский элемент управления, вам необходимо создать новый класс и расширить его с помощью класса WP_Customizer_Control. Этот класс использует метод «$wp_customize->add_control()», чтобы добавить собственный настраиваемый элемент управления на экран настройки темы сайта WordPress. Кроме того, чтобы получить доступ к этому методу, вам нужно использовать объект $wp_customize, доступный в хуке действия: custom_register.
Давайте рассмотрим пример, который иллюстрирует, как вы можете добавить существующий пользовательский элемент управления в раздел вашей темы (в хуке действия «customize_register») следующим образом:
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
В приведенном выше примере мы создаем элемент управления, который даст пользователям возможность выбрать новое изображение заголовка.
Примеры, демонстрирующие: как создать больше пользовательских элементов управления?
Этот раздел разделен на три разных этапа, каждый из которых содержит код, создающий настраиваемый элемент управления для текстовой области для настройщика темы. Мы добавим код в файл footer.php темы WordPress, чтобы вносить изменения в нижний колонтитул с помощью новых элементов управления текстовой области.
Шаг 1: Создание простого элемента управления текстовой областью
Как мы уже говорили выше, для создания нового пользовательского элемента управления нам нужно определить класс, который будет использоваться для расширения класса WP_Customize_Control. По сути, этот класс используется вместе с API настройки темы WordPress для добавления элемента управления вводом (то есть пользовательского элемента управления) на экране настройки темы. Давайте посмотрим на код для реализации этой задачи:
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
В этом коде хук действия customer_register используется, чтобы сообщить WordPress о пользовательской функции, которую мы создали с именем: theme_footer_customizer. Как вы, возможно, знаете, класс WP_Customize_Manager помогает управлять настройщиком темы WordPress, поэтому настраиваемый элемент управления станет частью этого класса. Однако, чтобы получить доступ к вашему элементу управления, вам нужно будет использовать объект «wp_customize», который является экземпляром хука custom_register.
В нашем случае объект wp_customize используется для определения нового раздела нижнего колонтитула, который будет включен в текстовую область. Итак, все, что вы наберете в разделе «текстовая область» нижнего колонтитула, будет отображаться в нижнем колонтитуле вашей темы, как показано на снимке экрана ниже:
На этом снимке экрана вы можете видеть, что в вашу тему добавлен новый раздел «Текст нижнего колонтитула». Текст, написанный в этом разделе, будет отображаться в нижнем колонтитуле вашей темы.
Шаг 2. Добавление пользовательского элемента управления для изменения цвета фона
Итак, теперь, когда мы создали элемент управления текстовой областью, вы можете добавить к нему множество различных настраиваемых элементов управления. В этом примере мы добавим настраиваемый элемент управления в наш новый текстовый раздел нижнего колонтитула, который поможет изменить цвет фона нижнего колонтитула. Для этого просто добавьте следующий фрагмент кода в файл footer.php вашей темы:
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
Как вы можете видеть на снимке экрана выше, выбрав соответствующий цвет в «Настройках цвета нижнего колонтитула», цвет фона нижнего колонтитула изменился на серый.
Шаг 3: Добавление пользовательского элемента управления для добавления логотипа
Еще один элемент управления, который мы добавляем в текстовую секцию нижнего колонтитула, — это «Логотип нижнего колонтитула». Как следует из названия, элемент управления «Логотип нижнего колонтитула» поможет добавить логотип в нижний колонтитул. Чтобы добавить этот элемент управления, вам необходимо включить приведенный ниже фрагмент кода в файл footer.php:
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
Давайте закругляться!
Вы можете найти процесс создания пользовательских элементов управления немного трудоемким. Но вы не можете пренебрегать тем фактом, что чем лучше элементы управления вы добавите на экран настройки темы веб-сайта, тем больше времени ваши пользователи смогут сэкономить, что приведет к улучшению пользовательского опыта. Итак, если вы планируете самостоятельно создавать некоторые настраиваемые элементы управления для добавления в настройщик тем WordPress, то этот пост станет для вас полезным руководством.
