Изменение размеров слайдера в классной теме WordPress

Примечание: это руководство было обновлено для Classy версии 1.10+

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

Шаг 1. Измените размер избранного изображения в Functions.php

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

* Откройте functions.php и измените строку 122

add_image_size( 'nivo-slider',  [highlight]980[/highlight], [highlight]400[/highlight], true );

* Первое значение 980 – это ширина вашего изображения слайдера, а 400 – высота изображения слайдера. Измените их, чтобы они соответствовали вашим потребностям.

Шаг 2. Отредактируйте свой CSS

Затем нужно отредактировать CSS, чтобы изменить высоту контейнера вашего слайдера.

Примечание. Это нужно сделать только для «NivoSlider», потому что ползунок содержимого автоматически изменяет высоту в зависимости от содержимого.

* Откройте style.css и измените значение высоты между строками 1132-1140

#slider_nivo {
    position: relative;
    [highlight]width: 980px;[/highlight]
    margin-top: -30px;
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: 30px;
    [highlight]height: 400px;[/highlight]
    overflow: hidden;
}

Шаг 3. Отредактируйте файлы шаблонов

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

а. Измените Nivo Image Slider: откройте includes / sliders / nivo.php и между строками (32–36) измените значения изображения, чтобы они отражали ваши новые размеры.

б. Изменить слайдер содержимого для слайдов изображений: откройте файл includes / sliders / content.php и между строками (29–36) измените значения изображения, чтобы они отражали ваши новые размеры.

Шаг 4. Восстановите свои изображения (только если вам нужно повторно кадрировать изображения)

Помните, на шаге 1 мы изменили размер изображения слайдера в functions.php? Что ж, это значение, которое WordPress использует для обрезки ваших изображений при их загрузке, поэтому, если у вас уже есть какие-либо изображения в вашей медиа-библиотеке, вам нужно будет «регенерировать» их, чтобы отразить ваши изменения.

Для этого вы можете скачать плагин «Regenerate Thumbnails» и запустить его 1 раз.

После того, как вы запустите плагин (в инструментах на панели инструментов), вам больше не придется этого делать, потому что любые новые изображения будут обрезаны с использованием значений, установленных на шаге 1 в вашем functions.php.

Источник записи: https://www.wpexplorer.com