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

MnogoBlog > WordPress > Дизайн > Слайдеры, баннеры, гаджеты, игры > Слайдер в шапке с Header Image Slider
14 комментариев

Здравствуйте, сегодня хотелось бы рассказать вам про 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 там в конце это есть.

    ↓
  6. Павел

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

    ↓
  7. Жанна

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

    ↓
  8. Юрий

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

    ↓
  9. Роман

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

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

    ↓
  10. Елена

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

    ↓
  12. Константин

    Мария, добавления ссылок на картинки для слайдера 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

      ↓

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