Использование WordPress New Theme Customizer

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

Преимущество наличия этих настроек в плагинах, а не в настройках темы, заключается в том, что если вы измените свою тему, вы все равно сохраните настройки SEO, сохраните типы постов и шорткоды. Если эти настройки находятся в настройках вашей темы, и вы изменили свою тему, вы потеряли все.

Что такое The Custom Customizer?

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

Раньше, если вы использовали панель параметров темы, вы могли изменить цвет фона вашего сайта, но вы не узнаете, как он выглядит, пока не сохраните настройки и не перейдете на свой сайт. Но так как цвет уже сохранен, каждый сможет увидеть изменение цвета, даже если вы выбрали неправильный цвет.

Если у вас сайт с высоким трафиком, на вашем сайте может быть несколько сотен человек, которые будут наблюдать за тем, как вы играете со стилями, пока не получите правильные настройки. С настройщиком тем вы можете просто оставаться в административной области и видеть свои изменения в режиме реального времени на панели предварительного просмотра, не меняя живой сайт.

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

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

Как работает тема Customizer?

Настройщик темы разделен на 4 области.

• Менеджер по настройке тем
• Настройки кастомайзера
• Управление настройщиком
• Разделы по настройке

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

При использовании API настройщика темы вам придется использовать действие WordPress customize_register , это действие автоматически предоставит вам экземпляр класса WP_Customize_Manager .

function theme_customiser( $wp_customize_manager )
{
   // Add all your settings, sections and controls on to the $wp_customize_manager
}
add_action( 'customize_register', 'theme_customiser' );

Приведенный выше код является примером того, как создать экземпляр класса WP_Customize_Manager , этот объект передается в качестве параметра в действии customize_register . Этот объект должен использоваться для установки всех разделов, настроек и элементов управления на странице настройки темы.

Разделы

Разделы будут разделять настройки на разные группы, чтобы упростить отображение настроек. Например, у вас может быть раздел фона, где вы можете разместить настройки для цветов фона или фоновых изображений.

Метод, который вы можете использовать в разделах:

• get_section ($ id) — получает раздел по идентификатору раздела.
• remove_section ($ id) — удаляет раздел по идентификатору раздела.
• add_section ($ id, array ()) — добавляет новый раздел в диспетчер настройщиков, первый параметр — это идентификатор раздела, второй — массив параметров для раздела.

При получении раздела вы используете метод get_section (), он вернет объект раздела.

$section = $wp_customize_manager->get_section( 'id' );

Чтобы удалить этот раздел из менеджера, вам нужно использовать метод remove_section ().

$wp_customize_manager->remove_section( 'id' );

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

$wp_customize_manager->add_section( 'manager', array(
    'title' => 'Customiser Manager',
    'description' => 'Example of adding customiser section.',
) );

настройки

Параметр — это компонент, который будет использоваться в форме для настройки темы. Настройки будут жить внутри разделов страницы. Они используются для хранения данных в базе данных и изменения настроек стилей темы.

• get_setting ($ id) — Получить настройку, установив ID.
• remove_setting ($ id) — удаляет настройку путем установки идентификатора.
• add_setting ($ id, array ()) — добавляет новый параметр в диспетчер настройщиков, первый параметр — это идентификатор параметра, второй параметр — массив параметров для параметра.

Чтобы получить настройку раздела, вам нужно использовать метод get_setting (), который вернет объект настройки, заполненный значениями настройки.

$setting = $wp_customize_manager->get_setting( 'id' );

Чтобы удалить настройку из настройщика темы, все что вам нужно сделать — это использовать метод remove_setting ().

$wp_customize_manager->remove_setting( 'id' );

Чтобы добавить настройку, вам нужно использовать метод add_setting ().

$wp_customize_manager->add_setting( 'id', array('default' => 'Default Value',
                                                'type' => 'theme_mod',
                                                'capability' => 'manage_options',
                                                'transport' => 'refresh' ) );

В массиве метода add_setting () вы используете 4 параметра.

• По умолчанию — значение по умолчанию, используемое для опции.
• Тип — настройка типа, которую вы создаете, может быть ‘option’ или ‘theme_mod’.
• Возможности — возможности, которые пользователь должен изменить в теме.
• Транспорт — это транспорт, который предоставит вам предварительный просмотр темы в реальном времени. Значение по умолчанию — обновить, это обновит всю панель предварительного просмотра. Другое значение, которое вы можете использовать, это postMessage, это следует использовать при изменении HTML или CSS, так как вы можете использовать Javascript для изменения предварительного просмотра.

контроль

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

Существует 3 основных метода для элементов управления: get_control (), remove_control () и add_control ().

• get_control ($ id) — получает элемент управления по идентификатору элемента управления.
• remove_control ($ id) — удаляет раздел по идентификатору элемента управления.
• add_control ($ id, array ()) — добавляет новый элемент управления в диспетчер настройщиков, первый параметр — это идентификатор элемента управления, второй параметр — массив параметров элемента управления.

Чтобы получить элемент управления, нам просто нужно использовать метод get_control () с идентификатором элемента управления.

$wp_customize_manager->get_control( $id );

Если вы хотите удалить элемент управления со страницы настройщика, просто используйте метод remove_control () с идентификатором элемента управления.

$wp_customize_manager->remove_control( $id );

Чтобы добавить элемент управления, нам нужно использовать метод add_control () с идентификатором и массивом настроек, эти настройки:

• Метка — текст, который будет использоваться в настройке.
• Настройки — идентификатор используемой настройки, вы можете оставить это поле пустым, и он будет использовать тот же идентификатор, что и элемент управления.
• Раздел — идентификатор раздела, в который вы добавляете параметр.
• Тип — Тип настройки, которая будет использоваться, может быть текст, флажок, радио, выберите, раскрывающиеся страницы
• Выбор — набор параметров для поля выбора или переключателей. Будьте осторожны, используя это свойство, так как оно будет удалено в будущих выпусках.
• Приоритет. Порядок настроек: чем ниже значение, тем раньше будет отображаться значение.

Элементы управления по умолчанию

Существует ряд различных элементов управления, которые уже существуют как часть настройщика темы. Это некоторые элементы управления по умолчанию, которые вы уже можете использовать в настройщике тем.

Заголовок заголовка

$this->add_section( 'title_tagline', array(
     'title'    => __( 'Site Title & Tagline' ),
     'priority' => 20,
) );

Цвета

$this->add_section( 'colors', array(
     'title'          => __( 'Colors' ),
     'priority'       => 40,
) );

Заглавное изображение

$this->add_section( 'header_image', array(
     'title'          => __( 'Header Image' ),
     'theme_supports' => 'custom-header',
     'priority'       => 60,
) );

Изображение на заднем плане

$this->add_section( 'background_image', array(
     'title'          => __( 'Background Image' ),
     'theme_supports' => 'custom-background',
     'priority'       => 80,
) );

навигация

$this->add_section( 'nav', array(
     'title'          => __( 'Navigation' ),
     'theme_supports' => 'menus',
     'priority'       => 100,
     'description'    => sprintf( _n('Your theme supports %s menu. Select which menu you would like to use.', 'Your theme supports %s menus. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . "\n\n" . __('You can edit your menu content on the Menus screen in the Appearance section.'),
) );

Статическая титульная страница

$this->add_section( 'static_front_page', array(
     'title'          => __( 'Static Front Page' ),
      // 'theme_supports' => 'static-front-page',
      'priority'       => 120,
      'description'    => __( 'Your theme supports a static front page.' ),
) );

Пользовательские элементы управления

На момент написания этой статьи существует только пара пользовательских элементов управления, которые можно использовать для расширения функциональности метода add_control (). Например, используя эти пользовательские элементы управления, вы можете добавить параметр для цветового круга, загрузить из библиотеки мультимедиа, загрузить изображения, выбрать новое фоновое изображение или новый заголовок изображения.

Чтобы использовать эти элементы управления, вам нужно добавить следующие классы в метод add_control ().

Добавить цветовое колесо в тему Customizer

Чтобы добавить цветовое колесо в настройщик темы, создайте новый экземпляр WP_Customize_Color_Control () и передайте его в качестве параметра для метода add_control ().

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize_manager, 'link_color', array(
	'label'        => __( 'Header Color', 'mytheme' ),
	'section'    => 'your_section_id',
	'settings'   => 'your_setting_id',
) ) );

Добавить медиафайл к настройщику тем

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

$wp_customize->add_control( new WP_Customize_Upload_Control( $wp_customize_manager, 'upload_media', array(
	'label'        => __( 'Media Upload', 'mytheme' ),
	'section'    => 'your_section_id',
	'settings'   => 'your_setting_id',
) ) );

Добавить изображение Загрузить в Theme Customiser

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

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize_manager, 'upload_images', array(
	'label'        => __( 'Image Upload', 'mytheme' ),
	'section'    => 'your_section_id',
	'settings'   => 'your_setting_id',
) ) );

Добавить фоновые изображения в тему Customizer

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

$wp_customize->add_control( new WP_Customize_Background_Image_Control( $wp_customize_manager, 'background_image', array(
	'label'        => __( 'Background Image', 'mytheme' ),
	'section'    => 'your_section_id',
	'settings'   => 'your_setting_id',
) ) );

Добавить изображение заголовка в тему настройки

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

$wp_customize->add_control( new WP_Customize_Header_Image_Control( $wp_customize_manager, 'header_image', array(
	'label'        => __( 'Header Image', 'mytheme' ),
	'section'    => 'your_section_id',
	'settings'   => 'your_setting_id',
) ) );

Создание страницы индивидуальной настройки темы

Теперь мы понимаем, как составлена ​​страница настройщика темы и как вы используете диспетчер настройщика для добавления настроек и разделов, а затем используете элементы управления, чтобы добавить их вместе.

Теперь мы собираемся создать пример раздела настроек по умолчанию, доступных на странице настройщика.

Я предпочитаю работать с классами, поэтому следующий код будет состоять из класса PHP, который мы начнем с включения его из файла functions.php.

include 'theme_customizer.php';

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

demo_section( $wp_manager );
    }
    public function demo_section( $wp_manager )
    {
        $wp_manager->add_section( 'customiser_demo_section', array(
            'title'          => 'Default Demo Controls',
            'priority'       => 35,
        ) );
        // Textbox control
        $wp_manager->add_setting( 'textbox_setting', array(
            'default'        => 'default_value',
        ) );
        $wp_manager->add_control( 'textbox_setting', array(
            'label'   => 'Text Setting',
            'section' => 'customiser_demo_section',
            'type'    => 'text',
            'priority' => 1
        ) );
        // Checkbox control
        $wp_manager->add_setting( 'checkbox_setting', array(
            'default'        => '1',
        ) );
        $wp_manager->add_control( 'checkbox_setting', array(
            'label'   => 'Checkbox Setting',
            'section' => 'customiser_demo_section',
            'type'    => 'checkbox',
            'priority' => 2
        ) );
        // Radio control
        $wp_manager->add_setting( 'radio_setting', array(
            'default'        => '1',
        ) );
        $wp_manager->add_control( 'radio_setting', array(
            'label'   => 'Radio Setting',
            'section' => 'customiser_demo_section',
            'type'    => 'radio',
            'choices' => array("1", "2", "3", "4", "5"),
            'priority' => 3
        ) );
        // Select control
        $wp_manager->add_setting( 'select_setting', array(
            'default'        => '1',
        ) );
        $wp_manager->add_control( 'select_setting', array(
            'label'   => 'Select Dropdown Setting',
            'section' => 'customiser_demo_section',
            'type'    => 'select',
            'choices' => array("1", "2", "3", "4", "5"),
            'priority' => 4
        ) );
        // Dropdown pages control
        $wp_manager->add_setting( 'dropdown_pages_setting', array(
            'default'        => '1',
        ) );
        $wp_manager->add_control( 'dropdown_pages_setting', array(
            'label'   => 'Dropdown Pages Setting',
            'section' => 'customiser_demo_section',
            'type'    => 'dropdown-pages',
            'priority' => 5
        ) );
        // Color control
        $wp_manager->add_setting( 'color_setting', array(
            'default'        => '#000000',
        ) );
        $wp_manager->add_control( new WP_Customize_Color_Control( $wp_manager, 'color_setting', array(
            'label'   => 'Color Setting',
            'section' => 'customiser_demo_section',
            'settings'   => 'color_setting',
            'priority' => 6
        ) ) );
        // WP_Customize_Upload_Control
        $wp_manager->add_setting( 'upload_setting', array(
            'default'        => '',
        ) );
        $wp_manager->add_control( new WP_Customize_Upload_Control( $wp_manager, 'upload_setting', array(
            'label'   => 'Upload Setting',
            'section' => 'customiser_demo_section',
            'settings'   => 'upload_setting',
            'priority' => 7
        ) ) );
        // WP_Customize_Image_Control
        $wp_manager->add_setting( 'image_setting', array(
            'default'        => '',
        ) );
        $wp_manager->add_control( new WP_Customize_Image_Control( $wp_manager, 'image_setting', array(
            'label'   => 'Image Setting',
            'section' => 'customiser_demo_section',
            'settings'   => 'image_setting',
            'priority' => 8
        ) ) );
    }
}
?>

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

Смысл создания страницы настройщика темы заключается в том, что вы можете использовать эти значения для настройки вашей темы. Чтобы получить настройки из API настроек, вы можете использовать функцию get_theme_mod ().

<?php get_theme_mod( $name, $default ) ?>

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

Это значение можно использовать для установки цвета шрифта в вашем теге стиля CSS.

function custom_colors()
{
    ?>
             body {
                  color: #<?php echo get_theme_mod( 'background_color' ); ?>;
             }
    <?php
}
add_action( 'wp_head', 'custom_colors');

Вывод

Из этого урока вы узнали, как создать собственную страницу настройки темы с рядом настроек, добавленных в ваш собственный раздел страницы.

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

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

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