Как создать слайд-шоу изображений в WordPress с плагином и без

Из этой статьи вы узнаете:

Добавление слайд-шоу без плагина

Создание галереи изображений с помощью плагина MetaSlider

Приветствуем вас! Слайд-шоу — это блестящий метод для представления ряда элементов (например, изображений) на вашем веб-сайте, особенно когда пространство является ограниченным. Он также широко используется веб-мастерами и блоггерами для демонстрации портфолио, произведений искусства, продуктов, последних сообщений и т.д.

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

Как создать слайд-шоу изображений в WordPress

Способ 1. Добавление слайд-шоу без плагина

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

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

gallery ids="1284,1283,915"]

Итак, при помощи специального фильтра post_gallery можно конвертировать этот шоткод в случайный код, превратив его в слайдер. Нужно будет подключить к интернет ресурсу какой-нибудь jQuery-плагин. Чтоб перевоплотить WordPress-галерею в слайдер, надо выполнить последующие действия:

1 Вставьте следующий код в файл functions.php вашего шаблона:

// фотогалерея-слайдер
function gallery_slider ($output, $attr) {
$ids = explode (',', $attr['ids']);
$images = get_posts (array (
'include' => $ids,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'post__in',
));
if ($images) {
$output = gallery_slider_template ($images);
return $output;
}
}
add_filter ('post_gallery', 'gallery_slider', 10, 2);
function gallery_slider_template ($images) {
ob_start ();
include 'gallery-slider.php';
$output = ob_get_clean ();
return $output;
} 

Если не знаете куда вставить данный код, тогда поместите его в самый конец файла перед ?>.

2 Далее создаем файл gallery-slider.php в папке с шаблоном и вставляем туда вот этот код:

<ul class="slider">
<?php
foreach ($images as $image) {
$src = wp_get_attachment_url ($image->ID); // ссылка на изображение
$alt = get_post_meta ($image->ID, '_wp_attachment_image_alt', true); // атрибут alt
?>
<li><img src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" /></li>
<?php } ?>
</ul>

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

<ul class="slider">
<?php
foreach ($images as $image) {
$src = wp_get_attachment_url ($image->ID); // ссылка на изображение
$alt = get_post_meta ($image->ID, '_wp_attachment_image_alt', true); // атрибут alt
$title = $image->post_title; // заголовок изображения
$caption = $image->post_excerpt; // подпись к изображению
$description = $image->post_content; // описание изображения
?>
<li>
<p><?php echo $title; ?></p>
<p><img src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" /></p>
<p><?php echo $caption; ?></p>
<p><?php echo $description; ?></p>
</li>
<?php } ?>
</ul>

3 Далее, подключаем к веб-сайту плагин слайдера, к примеру «bxslider».

Вот этим простым образом вполне возможно перевоплотить фотогалереи WordPress-сайта в слайдеры.

Способ 2 Создание галереи изображений с помощью плагина MetaSlider 

С помощью плагина MetaSlider вы можете создать уникальное, оптимизированное слайд-шоу за считанные секунды!

Особенности:

• Простой и удобный интерфейс
• Неограниченная поддержка слайдов изображений (поддерживает подпись, ссылку, текст заголовка, текст в формате alt)
• Поддержка полноэкранного слайд-шоу
• Переопределение перетаскивания
• Предварительный просмотр
• Интеллектуальное обрезание изображений
• Имеет встроенный виджет и короткий код
• Загрузка параметров конфигурации слайд-шоу — эффект перехода, скорость и т. д
• Полностью локализованный
• Обширный API-интерфейс разработчика (перехватчики и фильтры)

Мы перечислили лишь малую часть того, что может данный инструмент.

Устанавливаем и активируем плагин MetaSlider. После активации плагина, вы увидите новый элемент меню Meta Slider, добавленный в вашу основную навигацию. Переходим на него.

Нажмите кнопку «+», чтобы создать новое слайд-шоу.

Будет создано новое пустое слайд-шоу.

Нажмите кнопку «Добавить слайд».

Загрузится окно библиотеки файлов, где вы сможете загружать изображения с вашего компьютера или выбирать существующие изображения из медиатеки. Удерживайте CTRL, чтобы выбрать несколько изображений. Нажмите «Добавить в слайдер», чтобы вставить его в слайд-шоу.

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

Каждый слайд можно настроить с помощью следующих 3 вкладок:

• Общие — добавьте заголовок слайда и URL. HTML разрешен в заголовке слайдов
• SEO — установите AL и текст заголовка для слайд-изображения
• Обрезка — регулировка положения обрезки слайда

С помощью настроек в правой части страницы выберите тип слайд-шоу, которое вы хотите добавить:

• Flex Slider
• R. Slides
• Nivo Slider
• Coin Slider

Нажмите «Сохранить» после завершения настройки слайдера.

Добавление слайдера на страницы или статьи блога

Чтобы добавить свой слайдер в статью или страницу, проделываем следующие шаги. Перейдите в «Записи» — «Добавить новую» или «Страницы» — «Добавить новую». Мы покажем на примере статьи. 

Поместите курсор туда, где вы хотите, чтобы слайдер появился, а затем щелкните значок «Добавить слайдер».

Выберите слайд, который вы хотите добавить, и нажмите «Вставить слайд-шоу».

В ваш пост будет добавлен короткий код метаданных.

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

Добавление слайдера в боковую панель

Переходим в «Внешний вид» — «Виджеты».

Добавьте виджет Metaslider на нужную боковую панель.

Добавьте заголовок, выберите ползунок, который хотите отобразить, и нажмите «Сохранить».

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

С уважением Вячеслав и Валерия!