Все для начинающих интернет-предпринимателей

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

slaider-1

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

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

  • Создание галереи изображений с помощью плагина 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, добавленный в вашу основную навигацию. Переходим на него.

    plagin--Meta-Slider-1

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

    plagin--Meta-Slider-2

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

    plagin--Meta-Slider-3

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

    plagin--Meta-Slider-4

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

    plagin--Meta-Slider-5

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

    plagin--Meta-Slider-6

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

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

    plagin--Meta-Slider-7

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

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

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

    plagin--Meta-Slider-8

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

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

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

    plagin--Meta-Slider-10

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

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

    plagin--Meta-Slider-12

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

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

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

    plagin--Meta-Slider-13

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

    plagin--Meta-Slider-14

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

    plagin--Meta-Slider-15

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

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

    Понравился материал? Поделитесь с друзьями!

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

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