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

Итак, настройка темы, которую в русской версии WP мы выбираем через меню Внешний вид → Настроить, в английской WordPress имеет название Appearance → Customize. Т.е. настраивая внешний вид нашего сайта с помощью темы, мы кастомизируем его. На данный момент стандартной настройкой является добавление favicon для вашего сайта в разделе "Свойства сайта", а вот для того, чтобы была возможность загрузить логотип, нужно добавить код в functions.php.

Добавление логотипа

Одной из популярных стандартных настроек является добавление логотипа вместо названия сайта. Сделать это необходимо с помощью функции add_theme_support( 'custom-logo'), которая, в свою очередь, вызывается в другой функции по хуку 'after_setup_theme'. Как правило, в ней нужно указывать размеры логотипа, т.к. пользователь может загрузить картинку любого размера, который разобьет всю верстку или будет некрасиво смотреться рядом с другими элементами (как правило, это пункты основного меню).

В этом случае нужно указать параметры ширины и высоты для загружаемого логотипа:

Размеры фото можно указать в виде строки, связанной с названием одного из размеров изображений, которые вы задали ранее с помощью функции add_image_size(). Например:

Когда пользователь будет загружать фото, ему нужно будет использовать файл указанного размера или меньший. Иначе ему будет предложено обрезать логотип (Crop Image). И до тех пор, пока пользователь не загрузит изображение нужного размера или не обрежет его, WordPress не даст ему отобразить логотип.

Для того чтобы избежать обязательной обрезки фото, необходимо добавить 2 параметра flex-width и flex-height, которые позволяют пропустить процесс обрезки фото.  Это имеет смысл делать, чтобы пользователь мог оставить логотип своего размера или вставить увеличенное изображение для retina-экранов.

Обрезка логотипаАтрибут 'header-text' подразумевает использование массива, содержащего названия классов для всех элементов, которые размещены в заголовке и которые могут быть заменены логотипом.

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

Если вам необходимо получить текущий URL логотипа, чтобы использовать его в своей разметке вместо разметки по умолчанию, вы можете использовать следующий код:

Подробнее - в кодексе WordPress.

 

Загрузка изображений через кастомайзер

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

Для начала определимся с тем, что будет в слайдере. Во-первых, нам будет нужен новый раздел (section) для настроек слайдера. В этом разделе вверху нужно добавить чекбокс, который будет позволять показывать или скрывать слайдер. Далее мы позволим пользователю выбирать от 1 до 4-х слайдов. Также мы будем добавлять в каждый слайд заголовок и текст для абзаца. И в конце у нас будет кнопка-ссылка, ведущая к статье.

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

Тут возникает еще один момент. Для получения настроек в файлах темы мы можем использовать  get_theme_mod('setting_name', $default), но в этом случае нам нужно в качестве второго параметра ($default) явно указывать значение по умолчанию. И в настройках для Кастомайзера мы тоже должны это значение повторить. Вместо этого мы можем собрать все дефолтные значения в массив и получать его в любой момент из функции techex_default_theme_options():

Вторая функция techex_get_option() нужна для получения значения в файлах темы по его имени вместе с дефолтным значением в виде get_theme_mod().

Примечание: условие if (!function_exists('techex_get_option')) необходимо для того, чтобы пользователь имел возможность переопределить эту функцию в дочерней теме.
THEME_URI - это константа, которая определяет путь к папке темы:

Вот, что получилось:

Начальные настройки слайдера

Настройки для слайдов

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

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

В настройках темы увидим следующие опции:

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

Важный момент: в настройках мы использовали параметр 'sanitize_callback' => 'techex_sanitize_htmltext' для текста, в котором могут быть html-теги, а также 'sanitize_callback' => 'techex_sanitize_checkbox' для чекбокса. Это функции, которые нам нужно в обязательном порядке описать ниже функции techex_customize_register( $wp_customize ) :

Примечание: функция techex_sanitize_checkbox() уже была использована в тексте предыдущей статьи, поэтому второй раз вам не нужно ее вставлять в свой код.

Теперь пришла пора добавить код в файлы темы. Там тоже будет немало работы.

Добавляем код слайдера на основе настроек в отдельный файл

Поскольку проще управлять небольшим количеством кода, создадим в папке template-parts файл с именем home-slider.php. В нем разместим следующий код:

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

Этот файл теперь нужно подключить внутрь файла front-page.php, если у вас есть шаблон главной статической страницы, или в  index.php, если вы хотите выводить слайдер перед списком записей. В нашем случае мы будем добавлять код только в файл front-page.php. Это важно еще и для подключения скриптов.

Кроме того, что нужно добавить php-код, нам необходимо подключить скрипты (будем использовать CDN) и стили для слайдера.

Подключение скриптов и стилей для слайдера

Для подключения скриптов вы, скорей всего уже использовали функцию, привязанную к хуку wp_enqueue_scripts. Поэтому в ней может быть несколько иной код, чем приведен ниже. Вы просто добавляете в эту функцию в файле functions.php нужный код. Здесь используется плагин Swiper для создания слайдера, но вы можете использовать любой другой плагин или код из статьи о слайдерах или вообще сделать слайдер только на CSS.

Здесь мы подключаем нужные стили и скрипты только для главной страницы, проверяя условие if(is_front_page()) + добавляем встроенный скрипт, который запускает код плагина с нашими настройками.

Примечание: _S_VERSION - это константа, объявленная в начале файла functions.php:

О добавлении встроенных (инлайн) стилей и скриптов читайте в отдельной статье.

Кроме стилей, которые предусмотрены разработчиками плагина Swiper, нужно добавить в файл style.css вашей темы или любой другой, связанный с темой css-файл, такие стили:

Понятно, что вы можете написать свои стили и классы в соответствии с вашей темой.

Результат использования настроек в теме WordPress - слайдер или баннер на главной странице

В зависимости от количества слайдов, мы получаем либо баннер (1 слайд), либо слайдер (2-4 слайда) с навигацией в виде точек.

Баннер и слайдер

Автор: Админ

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *