Слайдер в шапке с Header Image Slider

Здравствуйте, сегодня хотелось бы рассказать вам про wordpress плагин, позволяющий создать в шапке (header) слайдер.

Скачать исходники для статьи можно ниже

Плагин Header Image Slider подойдет для тем, использующих статическое изображение в шапке, которое можно менять в панели управления (“Внешний вид” – “Шапка”), идеально подойдет для тем: Twenty Eleven, Twenty Ten и им подобным.

Header Image Slider

После установки и настройки плагина, тема будет выглядеть приблизительно так:

настройка слайдера в шапке

Данный плагин есть на wordpress.org:

Последнее обновление: 2011-9-3

Загрузок: 38,887

Автор: Hassan Derakhshandeh

Как видите показатели очень скромненькие.

Установка стандартная – заходим в панель управления wordpress, в левом меню выбираем пункт “Плагины”, подпункт “Добавить новый” и в строку поиска вводим Header Image Slider, устанавливаем и активируем.

Далее заходим в панели управления в пункт “Внешний вид” –  подпункт “Шапка” (“Заголовок”, “header”).

Рассмотрим настройку и работу данного плагина на стандартной wordpress теме Twenty Ten:

До установки плагина, подпункт “Шапка” (“Внешний вид” – “Шапка”) выглядел так:

слайдер в шапке

После установки плагина Header Image Slider, данный подпункт выглядит так:

плагин для создания слайдера в header

Как видите в пункте “Изображения по умолчанию” появился подпункт Slider.

Далее есть 2-а варианта на выбор, либо использовать стандартные картинки темы для шапки, либо свои.

1. Если  вы хотите использовать в слайдере стандартные изображения темы для шапки, то выделяем пункт “Slider”.

Рядышком стоит кнопка “Settings” – нажимаем на нее и попадаем в настройки плагина Header Image Slider.

плагин Header Image Slider

Ставим галочку напротив пункта – “Enable auto-insert the slider?”, остальные настройки можно оставить по умолчанию.

Transition – эффекты смены слайдов.

Animation Speed – скорость анимации, 500 – это 5 сек.

Pause on Hover – пауза.

Pause Time – время паузы.

Next & Prev Buttons – кнопки следующая и предыдущая.

Next & Prev Buttons Style – стиль кнопок белый или черный.

Navigation Controls – навигация.

Navigation Controls Style – стиль навигации.

Navigation Controls bottom position – позиция панели навигации, по умолчанию “- 42” px, в большинстве случаев придется подкорректировать.

Keyboard Navigation – управление с помощью клавиатуры.

После нажимаем на кнопку “Save settings” (сохранить настройки).

2. Если же вы хотите использовать в слайдере свои изображения, то необходимо их загрузить, для этого нажимаем на кнопку “Выбор изображения”.

плагин для создания слайдера в header

Выбираете изображение из Медиабиблиотеки, жмете на кнопку “Показать” и далее на кнопку “Установить в качестве шапки”.

Далее вам предложат выбрать часть изображения под формат шапки:

слайдер в шапке

Жмем на кнопку “Кадрировать и опубликовать”.

Таким же образом загружаем еще одно изображение (для работы слайдера нужно минимум 2 изображения), после чего у вас появляется новый подпункт “Slider”, рядышком с которым есть кнопка “Settings”, для настройки слайдера, аналогичная той, которую мы рассмотрели в пункте 1.

слайдер в header

После того как мы произвели все необходимые настройки, спускаемся в самый низ и нажимаем на кнопку “Сохранить изменения” и радуемся работе слайдера в шапке.

Все готово!!!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Слайдер в шапке с Header Image Slider: 14 комментариев

  1. Виталий

    Здравствуйте! Сделал все как Вы описали, но слайдер не работает. Может надо здесь что-то изменить “Navigation Controls bottom position – позиция панели навигации, по умолчанию “- 42″ px, в большинстве случаев придется подкорректировать.” Тема Twenty Eleven. Заранее большое спасибо. С уважением, Виталий.

  2. Александр

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

  3. Константин

    Александр и Виталий, проверил на wordpress 3.5.1. и Twenty Eleven 1.5 – все работает (тестовый сайта – http://mnogoblog7.p.ht), попробуйте создать слайдер из стандартных изображений темы в шапке (пункт 1).

    Альтернативы данному плагину – TheThe Image Slider.

    Написал статью о том, как создать слайдер в шапке темы Twenty Eleven с помощью плагина TheThe Image Slider – https://mnogoblog.ru/slajder-s-pomoshhyu-plagina-thethe-image-slider

  4. Александр

    Константин спасибо разобрался, vSlider работает, я оказывается забыл отключить вывод стандартной картинки для шапки в теме Twenty Eleven. Разобрался только благодаря вашей статье по плагину TheThe Image Slider там в конце это есть.

  5. Павел

    Спасибо БоЛШоЕ ВАМ! Потратил четыре часа и установил 1000 плагинов и ничего не получалось( Прочитав вашу статью все сделал за 5 минут! Еще раз спасибо вам!

  6. Жанна

    Здравствуйте. Слайдер установить получается, все работает. Но т.к. устанавливаю в шапку, то название сайта исчезает. Как сделать, чтобы сверху было название, а потом шел слайдер?

  7. Юрий

    Статья отличная! Спасибо за помощь. Подскажите. При клике на картинке галереи, увеличенное изображение, на половине прячется под слайдер шапки. Помогите! Заранее спасибо !

  8. Роман

    Здравствуйте! Спасибо большое, за статью! Плагин установил, все работает. Был глюк с отображением: после слайдера до кнопок меню периодически появлялась пропасть на пол экрана. Решение – изменил эффекты смены картинок слайдера на простой фэйдер. Проблема исчезла.

    Возник вопрос: как можно к каждому слайду ссылочку прикрутить?

  9. Елена

    Добрый вечер! А у меня в настройках внешний вид “шапки” нет у меня только фон, только все равно не получается настроить внешний вид шапки. Может для моей темы не подходит.
    Хотела второй плагин загрузить, так его вообще уже нет.

  10. Константин

    Мария, добавления ссылок на картинки для слайдера Header Image Slider, тут:
    “wordpress.org/support/topic/plugin-header-image-slider-heres-a-solution-to-make-banners-clickable?replies=1”

    Или же скачайте уже отредактированный мною плагин по следующей ссылке, установите и активируйте его:
    https://mnogoblog.ru/wp-content/uploads/2014/04/header-image-slider.zip

    URL вводятся в пункте “Внешний вид”, подпункт “Заголовок”, кнопка URL

    1. Константин

      Для того чтобы пункт Slider появился нужно загрузить хотя бы 2 изображения – то есть заходим в админпанели wordpress в левом меню в пункт “Внешний вид” и его подпункт “Заголовок”, далее в строке “Выберите изображение” загружаем 2 или более изображения (нажимая на кнопку “Выбрать файл” и кнопку “Загрузить”), после чего ниже, в стоке “Загруженные изображения” появятся пункт “Slider”.
      Однако, при тестировании вашей темы – Fifteen слайдер не отображается на страничке сайта, но это можно легко исправить:
      1. В панели управления wordpress, в левом меню, выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php и ищем в нем строчку (где-то 21 строчка кода):

      <div id="parallax-bg"></div>
      

      2. Изменяем данную строчку на следующую:

      <div id="parallax-bg"><?php boom_header_image() ?></div>
      

      3. Аналогичное нужно проделать и с файлом header-single.php

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