Руководство по настройщику (кастомайзеру) тем WordPress, часть 7

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

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

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

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

Я называю их дополнительными элементами управления, поскольку они предлагают больше функциональности, чем обычный набор списков выбора, элементов input, radio-кнопок и чекбоксов.

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

Элемент ввода текста

Если вы хотите добавить возможность ввода текста, т.е. реализовать текстовое поле, которое позволит задавать какой-либо текст – к примеру, заголовок сайта или описание сайта – вы можете использовать WP_Customize_Control.

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

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

Палитра цветов

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

wp_customize_color_control_600

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

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

Элемент загрузки файлов

Один из достаточно общих, но все же несколько запутанных элементов управления – элемент загрузки файлов. Вы можете найти его в кодексе как WP_Customize_Upload_Control. Хотя есть и другие элементы управления для того, чтобы загружать файлы (к примеру, изображения) – одно из них мы в скором времени применим на практике, — этот элемент несет в себе некоторую гибкость в плане загрузки множества различных файлов.

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

Естественно, в некоторых случаях вам понадобится загрузить файлы PDF, CSV и т.д., и в таких ситуациях данный элемент управления предлагает удобный интерфейс для совершения этого.

Загрузка изображений

Элемент WP_Customize_Image_Control – простой способ реализовать функциональность для загрузки пользователями некоторого изображения. В дальнейшем мы применим его для загрузки бэкграундного изображения.

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

Загрузка фоновых изображений

Элемент управления WP_Customize_Background_Image_Control создан для того, чтобы позволить пользователям загружать фоновое изображение. Элемент использует функциональность установки произвольного бэкграунда, которая была введена в WordPress 3.4.

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

Изображение хэдера

Наконец, элемент WP_Header_Image_Control используется для реализации возможности загрузки изображения в хэдер.

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

Реализация дополнительного элемента управления

Теперь, когда мы рассмотрели родные элементы управления, давайте реализуем одно из них – а именно WP_Customize_Image_Control — в нашей теме. Эта отдельная возможность потребует от нас следующего:

  • Ввести новую секцию Advanced Controls
  • Добавить новый параметр для произвольного изображения
  • Использовать изображение в качестве бэкграунда для темы

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

Новая секция

В functions.php добавляем следующий блок кода:

$wp_customize->add_section(
    'tcx_advanced_options',
    array(
        'title'     => 'Advanced Options',
        'priority'  => 201
    )
);

Тем самым мы добавим секцию Advanced Options в кастомайзер. Заданный для нее приоритет позволит поместить ее под нашей предыдущей секцией.

Однако секция на данный момент не будет видна, поскольку у нас нет для нее параметров.

Новый параметр и элемент управления

Теперь мы введем новый параметр и дадим ему ID tcx_background_image:

$wp_customize->add_setting(
    'tcx_background_image',
    array(
        'default'      => '',
        'transport'    => 'postMessage'
    )
);

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

Теперь нам надо добавить новый элемент управления и связать его с параметром:

$wp_customize->add_control(
    new WP_Customize_Image_Control(
        $wp_customize,
        'tcx_background_image',
        array(
            'label'    => 'Background Image',
            'settings' => 'tcx_background_image',
            'section'  => 'tcx_advanced_options'
        )
    )
);

Подцепляем JavaScript

Пришла пора обновить фоновое изображение в theme-customizer.js:

wp.customize( 'tcx_background_image', function( value ) {
    value.bind( function( to ) {
 
        0 === $.trim( to ).length ?
            $( 'body' ).css( 'background-image', '' ) :
            $( 'body' ).css( 'background-image', 'url( ' + to + ')' );
 
    });
});

Мы используем тернарный оператор, чтобы определить, является ли параметр to пустой строкой. Если да, то мы удаляем свойство background-image; в противном случае мы передаем ему URL изображения.

Обновляем тему

Последнее, что мы должны сделать – это обновить блок style в функции tcx_customizer_css, чтобы мы могли восстановить фоновое изображение после его сериализации.

Чтобы сделать это, добавим следующий код в блок style:

<?php if ( 0 < count( strlen( ( $background_image_url = get_theme_mod( 'tcx_background_image' ) ) ) ) ) { ?>
    background-image: url( <?php echo $background_image_url; ?> );
<?php } // end if ?>

В следующей статье

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

Как и в прошлых статьях, вы можете скачать версию нашей темы 0.6.0, чтобы поэкспериментировать с кодом.

Источник: wp.tutsplus.com

Блог про WordPress
Комментарии: 8
  1. Otshelnik-fm

    Спасибо за перевод. Очень пригодилось.
    Где 8-я часть?

    1. Дмитрий (автор)

      Насколько помню, восьмой части не было в оригинале, поэтому пришлось серию прервать.

  2. Комментарии от VK! Они перекрыли поле ввода wp-комментариев.?

    1. Дмитрий (автор)

      Здравствуйте, спасибо за замечание. Убрал виджет, перекрывающий форму.

  3. Александр

    Здравствуйте, столкнулся вот с такой проблемой: все работает, но после установки шаблона на новый локальный домен тема не отображает значения по умолчанию, указанные в кастомайзере в свойстве ‘default’, не отображается цвет ссылок или background меню. Если поменять значения и нажать «Сохранить и опубликовать», то все меняется. В чем может быть дело?

    1. Дмитрий (автор)

      Да, такое бывает. Видел вот тут тоже про это: https://stackoverflow.com/questions/47964253/wordpress-theme-customization-does-not-reflect-on-new-domain

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

      Попробуйте то, что там рекомендуют в единственном ответе. Но судя по комментариям автора, проблема так и не была идентифицирована.

  4. Александр

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

    $wp_customize->add_setting(
    ‘tcx_fmenu’,
    array(
    ‘default’ => ‘false’,
    ‘transport’ => ‘postMessage’
    )
    );

    $wp_customize->add_control(
    ‘tcx_fmenu’,
    array(
    ‘section’ => ‘tcx_display_options’,
    ‘label’ => ‘Показывать меню в подвале’,
    ‘type’ => ‘checkbox’
    )
    );

    #footer_menu { display: none; }

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

  5. Дмитрий (автор)

    Вот тут есть точно такой же вопрос и ответ на него: https://wordpress.stackexchange.com/questions/68052/adding-a-checkbox-to-the-theme-customizer

Добавить комментарий

Получать новые комментарии по электронной почте.