В предыдущей статье мы рассмотрели настройки темы в Кастомайзере в виде текста и чекбокса. Здесь нам необходимо разобрать, как мы можем загружать изображения. Для начала добавим настройку для загрузки логотипа, а затем - группу настроек для загрузки изображений для слайдера и текста для слайдов.
Итак, настройка темы, которую в русской версии WP мы выбираем через меню Внешний вид → Настроить, в английской WordPress имеет название Appearance → Customize. Т.е. настраивая внешний вид нашего сайта с помощью темы, мы кастомизируем его. На данный момент стандартной настройкой является добавление favicon для вашего сайта в разделе "Свойства сайта", а вот для того, чтобы была возможность загрузить логотип, нужно добавить код в functions.php.
Добавление логотипа
Одной из популярных стандартных настроек является добавление логотипа вместо названия сайта. Сделать это необходимо с помощью функции add_theme_support( 'custom-logo')
, которая, в свою очередь, вызывается в другой функции по хуку 'after_setup_theme'
. Как правило, в ней нужно указывать размеры логотипа, т.к. пользователь может загрузить картинку любого размера, который разобьет всю верстку или будет некрасиво смотреться рядом с другими элементами (как правило, это пункты основного меню).
В этом случае нужно указать параметры ширины и высоты для загружаемого логотипа:
1 2 3 4 5 6 7 8 9 | function mytheme_setup() { add_theme_support( 'custom-logo', array( 'height' => 60, 'width' => 200, )); } add_action('after_setup_theme', 'theme_slug_setup'); |
Размеры фото можно указать в виде строки, связанной с названием одного из размеров изображений, которые вы задали ранее с помощью функции add_image_size()
. Например:
1 2 3 4 5 | add_image_size('themeslug-logo', 200, 60); add_theme_support('custom-logo', array( 'size' => 'themeslug-logo' )); |
Когда пользователь будет загружать фото, ему нужно будет использовать файл указанного размера или меньший. Иначе ему будет предложено обрезать логотип (Crop Image). И до тех пор, пока пользователь не загрузит изображение нужного размера или не обрежет его, WordPress не даст ему отобразить логотип.
Для того чтобы избежать обязательной обрезки фото, необходимо добавить 2 параметра flex-width
и flex-height
, которые позволяют пропустить процесс обрезки фото. Это имеет смысл делать, чтобы пользователь мог оставить логотип своего размера или вставить увеличенное изображение для retina-экранов.
1 2 3 4 5 6 7 8 | add_theme_support( 'custom-logo', array( 'height' => 60, 'width' => 200, 'flex-height' => true, 'flex-width' => true), 'header-text' => array( 'site-title', 'site-description' ), ); |
Атрибут
'header-text'
подразумевает использование массива, содержащего названия классов для всех элементов, которые размещены в заголовке и которые могут быть заменены логотипом.
Чтобы логотип затем отобразить в теме, необходимо в файле header.php написать такой код в нужном вам блоке:
1 2 3 | if ( function_exists( 'the_custom_logo' ) ) { the_custom_logo(); } |
Если вам необходимо получить текущий URL логотипа, чтобы использовать его в своей разметке вместо разметки по умолчанию, вы можете использовать следующий код:
1 2 3 4 5 6 7 8 | $custom_logo_id = get_theme_mod( 'custom_logo' ); $logo = wp_get_attachment_image_src( $custom_logo_id , 'full' ); if ( has_custom_logo() ) { echo '<img src="' . esc_url( $logo ) . '" alt="' . get_bloginfo( 'name' ) . '">'; } else { echo '<h1>'. get_bloginfo( 'name' ) .'</h1>'; } |
Подробнее - в кодексе WordPress.
Загрузка изображений через кастомайзер
За загрузку изображений отвечает класс WP_Customize_Image_Control
. Используем его для создания слайдера на главной странице нашей темы.
Для начала определимся с тем, что будет в слайдере. Во-первых, нам будет нужен новый раздел (section) для настроек слайдера. В этом разделе вверху нужно добавить чекбокс, который будет позволять показывать или скрывать слайдер. Далее мы позволим пользователю выбирать от 1 до 4-х слайдов. Также мы будем добавлять в каждый слайд заголовок и текст для абзаца. И в конце у нас будет кнопка-ссылка, ведущая к статье.
Напомню, что название темы, для которой мы здесь будем создавать настройки, techex, поэтому во всех строках для перевода будет указана эта строка и сами настройки будут начинаться с techex_
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | function techex_customize_register( $wp_customize ) { $default = techex_default_theme_options(); //Homepage Slider Section $wp_customize->add_section( 'techex_slider_options' , array( 'title' => __( 'Slider Options', 'techex' ), 'priority' => 25, 'panel' => 'techex_theme_options', ) ); $wp_customize->add_setting('techex_enable_slider', array('capability' => 'edit_theme_options', 'default' => $default['techex_enable_slider'], 'sanitize_callback' => 'techex_sanitize_checkbox', ) ); //доступность слайдера $wp_customize->add_control('techex_enable_slider', array( 'label' => __('Enable Slider on Homepage', 'techex'), 'section' => 'techex_slider_options', 'type' => 'checkbox', 'priority' => 1, ) ); //количество слайдов $wp_customize->add_setting('techex_slides_number', array('capability' => 'edit_theme_options', 'default' => $default['techex_slides_number'], ) ); $wp_customize->add_control('techex_slides_number', array( 'label' => __('Number of Homepage Slides', 'techex'), 'section' => 'techex_slider_options', 'capability' => 'edit_theme_options', 'type' => 'select', 'choices' => array( 1 => 1, 2, 3, 4), 'priority' => 2, ) ); // текст для кнопок $wp_customize->add_setting( 'techex_button_text', array( 'default' => $default['techex_button_text'], 'sanitize_callback' => 'sanitize_text_field', )); $wp_customize->add_control( 'techex_button_text', array( 'type' => 'text', 'priority' => 10, 'section' => 'techex_slider_options', 'label' => __('Button text', 'techex' ), 'description' => __( 'Text for all slider buttons', 'techex' ), ) ); } add_action( 'customize_register', 'techex_customize_register' ); |
Тут возникает еще один момент. Для получения настроек в файлах темы мы можем использовать get_theme_mod('setting_name', $default), но в этом случае нам нужно в качестве второго параметра ($default
) явно указывать значение по умолчанию. И в настройках для Кастомайзера мы тоже должны это значение повторить. Вместо этого мы можем собрать все дефолтные значения в массив и получать его в любой момент из функции techex_default_theme_options()
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | if (!function_exists('techex_default_theme_options')): function techex_default_theme_options() { $defaults = array(); $defaults['techex_enable_slider'] = true; $defaults['techex_slides_number'] = 4; $defaults['techex_button_text'] = __('Read More', 'techex'); $defaults['techex_slider_1'] = THEME_URI.'/assets/slider/slide1.jpg'; $defaults['techex_slider_2'] = THEME_URI.'/assets/slider/slide2.jpg'; $defaults['techex_slider_3'] = THEME_URI.'/assets/slider/slide3.jpg'; $defaults['techex_slider_4'] = THEME_URI.'/assets/slider/slide4.jpg'; return $defaults; } endif; if (!function_exists('techex_get_option')): function techex_get_option($key) { if (empty($key)) { return; } $value = ''; $default = techex_default_theme_options(); $default_value = null; if (is_array($default) && isset($default[$key])) { $default_value = $default[$key]; } if (null !== $default_value) { $value = get_theme_mod($key, $default_value); } else { $value = get_theme_mod($key); } return $value; } endif; |
Вторая функция techex_get_option()
нужна для получения значения в файлах темы по его имени вместе с дефолтным значением в виде get_theme_mod()
.
if (!function_exists('techex_get_option'))
необходимо для того, чтобы пользователь имел возможность переопределить эту функцию в дочерней теме.THEME_URI
- это константа, которая определяет путь к папке темы: 1 | <?php define('THEME_DIR', get_template_directory() ); ?> |
Вот, что получилось:
Настройки для слайдов
Теперь добавляем настройки для слайдов. Мы уже ограничили количество изображений в нем до 4-х, соответственно, и текста, и кнопок будет столько же, поэтому все эти настройки мы поместим в цикл. Его нужно добавить в ту функцию, что описана выше.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | //Слайды от 1 до 4 for($i=1; $i<=4; $i++){ $wp_customize->add_setting('techex_slider_'.$i, array( 'capability' => 'edit_theme_options', 'default' => $default['techex_slider_'.$i], ) ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'techex_slider_'.$i, array( 'label' => __( 'Upload a Slider Image '.$i, 'techex' ), 'section' => 'techex_slider_options', 'settings' => 'techex_slider_'.$i, ) )); $wp_customize->add_setting('techex_slide_title'.$i, array( 'default' => 'Slide Title '.$i, 'sanitize_callback' => 'sanitize_text_field',)); $wp_customize->add_control('techex_slide_title'.$i, array('label' => __('Slide Title', 'techex'), 'section' => 'techex_slider_options', 'type' => 'text', )); $wp_customize->add_setting('techex_slide_text'.$i, array( 'default' => 'Slide Text '.$i, 'sanitize_callback' => 'techex_sanitize_htmltext')); $wp_customize->add_control('techex_slide_text'.$i, array('label' => __('Slide Description', 'techex'), 'section' => 'techex_slider_options', 'type' => 'textarea', )); $wp_customize->add_setting('techex_slide_link'.$i, array( 'default' => '', 'sanitize_callback' => 'sanitize_text_field' )); $wp_customize->add_control('techex_slide_link'.$i, array('label' => __('Slide Link URL', 'techex'), 'section' => 'techex_slider_options', 'type' => 'text', )); } |
В этом коде WP_Customize_Image_Control
- это элемент управления мультимедиа, который позволяет открыть медиа-загрузчик WP и добавить любое изображение, которое станет фоном для какого-либо блока вашей темы или частью слайдера.
В настройках темы увидим следующие опции:
В файлах темы уже реализован слайдер, поэтому на скриншоте вы видите, как отображаются все элементы. До этого момента вы просто будете иметь возможность сохранять ваши новые настройки.
Важный момент: в настройках мы использовали параметр 'sanitize_callback' => 'techex_sanitize_htmltext'
для текста, в котором могут быть html-теги, а также 'sanitize_callback' => 'techex_sanitize_checkbox'
для чекбокса. Это функции, которые нам нужно в обязательном порядке описать ниже функции techex_customize_register( $wp_customize )
:
1 2 3 4 5 6 7 | function techex_sanitize_htmltext ( $input ) { return wp_kses_post( force_balance_tags( $input ) ); } function techex_sanitize_checkbox( $checked ) { return ( ( isset( $checked ) && true == $checked ) ? true : false ); } |
Примечание: функция techex_sanitize_checkbox()
уже была использована в тексте предыдущей статьи, поэтому второй раз вам не нужно ее вставлять в свой код.
Теперь пришла пора добавить код в файлы темы. Там тоже будет немало работы.
Добавляем код слайдера на основе настроек в отдельный файл
Поскольку проще управлять небольшим количеством кода, создадим в папке template-parts файл с именем home-slider.php. В нем разместим следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <?php $techex_slides_number = intval (techex_get_option('techex_slides_number')); $techex_button_text = techex_get_option('techex_button_text'); for($i=1; $i<=$techex_slides_number; $i++){ ${'techex_slider_'.$i} = techex_get_option('techex_slider_'.$i); ${'techex_slide_title'.$i} = techex_get_option('techex_slide_title'.$i) ; ${'techex_slide_text'.$i} = techex_get_option('techex_slide_text'.$i) ; ${'techex_slide_link'.$i} = techex_get_option('techex_slide_link'.$i) ; } ?> <div class="front-slider"> <?php if ($techex_slides_number> 1) { ?> <div class="swiper-container home-slider"> <div class="swiper-wrapper"> <?php for($i=1; $i<=$techex_slides_number; $i++){ ?> <div class="swiper-slide" style="background: url(<?php echo ${'techex_slider_'.$i} ?>) no-repeat center/cover #fff;"> <div class="swiper-overlay"> <div class="slide-inner"> <?php if(!empty(${'techex_slide_title'.$i})): ?> <h2><?= ${'techex_slide_title'.$i } ?></h2> <?php endif; ?> <?php if(!empty(${'techex_slide_text'.$i})): ?> <p><?= ${'techex_slide_text'.$i } ?></p> <?php endif; ?> <?php if(!empty(${'techex_slide_link'.$i})): ?> <a href="<? echo ${'techex_slide_link'.$i } ?>" class="btn btn-primary"><?php echo $techex_button_text; ?></a> <?php endif; ?> </div> </div> </div> <?php } ?> </div> <div class="swiper-pagination"></div> </div> <?php } else { ?> <div class="banner" style="background: url(<?php echo $techex_slider_1 ?>) no-repeat center/cover #fff;"> <div class="swiper-overlay"> <div class="slide-inner"> <?php if(!empty( $techex_slide_title1 )): ?> <h2><?php echo $techex_slide_title1 ?></h2> <?php endif; ?> <?php if(!empty( $techex_slide_text1 )): ?> <p><?php echo $techex_slide_text1 ?></p> <?php endif; ?> <?php if(!empty( $techex_slide_link1 )): ?> <a href="<?php echo $techex_slide_link1 ?>" class="btn btn-primary"><?php echo $techex_button_text; ?></a> <?php endif; ?> </div> </div> </div> <?php } ?> </div> |
В этом файле мы используем настройки, отображая слайдер или баннер в зависимости от количества слайдов.
Этот файл теперь нужно подключить внутрь файла front-page.php, если у вас есть шаблон главной статической страницы, или в index.php, если вы хотите выводить слайдер перед списком записей. В нашем случае мы будем добавлять код только в файл front-page.php. Это важно еще и для подключения скриптов.
1 2 3 4 5 6 7 8 9 10 | <?php $techex_slider_enabled = techex_get_option('techex_enable_slider'); //получаем значение чекбокса get_header(); ?> <?php if ($techex_slider_enabled) : get_template_part( 'template-parts/home', 'slider' ); endif; ?> //остальной код |
Кроме того, что нужно добавить php-код, нам необходимо подключить скрипты (будем использовать CDN) и стили для слайдера.
Подключение скриптов и стилей для слайдера
Для подключения скриптов вы, скорей всего уже использовали функцию, привязанную к хуку wp_enqueue_scripts
. Поэтому в ней может быть несколько иной код, чем приведен ниже. Вы просто добавляете в эту функцию в файле functions.php нужный код. Здесь используется плагин Swiper для создания слайдера, но вы можете использовать любой другой плагин или код из статьи о слайдерах или вообще сделать слайдер только на CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function techex_scripts() { wp_enqueue_style( 'techex-style', get_stylesheet_uri(), array(), _S_VERSION ); //...ваш код .... if(is_front_page()){ wp_enqueue_style( 'techex-swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css', array(), _S_VERSION ); wp_enqueue_script( 'techex-swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js', array(), _S_VERSION, true ); wp_add_inline_script( 'techex-swiper', "const swiper = new Swiper('.home-slider', { loop: true, centeredSlides: true, pagination: { el: '.swiper-pagination', clickable: true, }, });" ); } } add_action( 'wp_enqueue_scripts', 'techex_scripts' ); |
Здесь мы подключаем нужные стили и скрипты только для главной страницы, проверяя условие if(is_front_page())
+ добавляем встроенный скрипт, который запускает код плагина с нашими настройками.
Примечание: _S_VERSION
- это константа, объявленная в начале файла functions.php:
1 2 3 4 | if ( ! defined( '_S_VERSION' ) ) { // Replace the version number of the theme on each release. define( '_S_VERSION', '1.0.0' ); } |
О добавлении встроенных (инлайн) стилей и скриптов читайте в отдельной статье.
Кроме стилей, которые предусмотрены разработчиками плагина Swiper, нужно добавить в файл style.css вашей темы или любой другой, связанный с темой css-файл, такие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .home-slider, .banner { width: 100%; height: 600px; } .home-slider .swiper-slide, .banner { text-align: center; position: relative; } .swiper-slide .swiper-overlay, .banner .swiper-overlay { color: #fff; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } .slide-inner { margin-left: 15px; margin-right: 15px; max-width: 630px; } .slide-inner h2 { text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 1.4em; } |
Понятно, что вы можете написать свои стили и классы в соответствии с вашей темой.
Результат использования настроек в теме WordPress - слайдер или баннер на главной странице
В зависимости от количества слайдов, мы получаем либо баннер (1 слайд), либо слайдер (2-4 слайда) с навигацией в виде точек.