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

Установка слайдера на сайт WordPress

Рассмотрим на конкретном примере, как без особого труда и довольно быстро установить слайдер в шапку сайта WordPress.

Подготовка шаблона

Рассмотрим реализацию данного проекта на примере шаблона WordPress « Twenty Thirteen», который уже предустановлен по умолчанию в системе.

В нашем случае, устанавливая слайдер в шапке сайта, для начала необходимо скрыть эту самую шапку, вместо которой мы хотим установить наше слайд-шоу. В этом нам поможет функция «просмотр кода элемента» имеющаяся в Google Chrome и в других популярных браузерах. Для вызова функции щелкните правой клавишей мыши по шапке страницы и в открывшемся контекстном меню выберите "Просмотр кода элемента". Во время наведения курсора компьютерной мыши на код, можно увидеть подсветку элементов, за которые этот код отвечает, и, таким образом, находим необходимые строчки кода.

Просмотр кода элемента в Google Chrome

Далее перейдите к редактированию файла «header.php» темы и закомментируйте данный код, заключив его в теги <!–– и ––>.

Редактирование header.php

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

Сайт без шапки

Установка слайдера на сайт WordPress

Воспользуемся функционалом WordPress Content Slide для установки слайдера в «шапке» темы. Для установки и активации Content Slide используйте стандартную функцию WordPress поиска и установки плагинов или скачайте последнюю версию с его страницы по адресу - wordpress.org/plugins/content-slide/. ВНИМАНИЕ! В настоящее время архив плагина недоступен для скачивания, автору письмо отправил, но тот пока молчит. На моем сервере он присутствует, скачать плагин WordPress content-slide можно по этой ссылке.

Установка и активация плагина Content Slide

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

Файл README плагина Content Slide

Откройте файл текстовым редактором и из мануала по установке скопируйте сам код.

Код плагина Content Slide

Чтобы облегчить вам жизнь, привожу этот код ниже:

< ?php if(function_exists('wp_content_slider')) { wp_content_slider(); } >

Установим код слайдера в шапке сайта WordPress перед закомментированным кодом шапки темы.

Установка кода слайдера на сайт WordPress

Теперь можно приступить к настройке Content Slide.

Настройка Content Slide

Гибкость настроек позволяет изменять размер изображения, эффекты анимации, интервал показа слайдов, варианты шрифтов, цвет и прозрачность текста, рамку слайдера и многие другие функции. Рассмотрим назначение каждой опции по порядку.

Настройка Content Slide

Основные настройки Content Slide

    1 Image width - ширина изображений (в пикселях) height - высота

2

Border width - толщина рамки (если поставить нулевое значение, рамки вообще не будет) Border Color - цвет рамки

3

Font family - шрифт текста описания

4

Text font size - размер шрифта текста Text color - цвет шрифта текста

5

Heading font size - размер шрифта заголовка Heading color - цвет шрифта заголовка

6

Background color - цвет фона  

Эффекты и настройки анимации Content Slide

    7     Squares per width - пропорции эффектов анимации по ширине Squares per height - пропорции эффектов анимации по высоте

8

Delay between images in ms - время задержки смены изображений в мил.сек. Delay beetwen squares in ms - время задержки панели навигации в мил.сек.

9

Opacity of title and navigation – непрозрачность заголовка и элементов навигации

10

Speed of title appereance in ms – скорость смены заголовка

11

Effect - эффект:

  • random - случайный;
  • swirl - вихрь;
  • rain - дождь;
  • straight - перелистывание;
  • fade - выцветание.

12

Mouse Over Pause (Stop Animation on mouseover) - остановить анимацию наведением курсора мыши?

13

Navigation Previous/Next (Previous/Next buttons on image) - кнопки навигации (предыдущий/следующий)

14

Navigation Buttons (Square buttons at bottom) - кнопки навигации быстрого перехода по слайдам

15

Navigation Buttons Color (Square buttons at bottom) - цвет кнопок навигации

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

Настройка Content Slide

 

    16     Display Heading and Text? - выводить заголовок и описание? No. of chars  - количество символов в описании

17

Open Images/Links In New Window? - по клику открывать ссылку слайдера в новом окне?

18

Order Images Randomally - показывать изображения в случайном порядке

19

Use custom images? - использовать собственные изображения? Yes, Custom Images - да, собственные изображения

20

Number of custom Images – число собственных изображений

21

CustomImage 1  - первое собственное изображение

  • Image 1 SRC - адрес изображения;
  • Image 1 Link - ссылка слайда;
  • Image 1Heading - заголовок;
  • Image 1 Text - описание.

22

  No, Using Posts from a Category  - нет, использовать миниатюры постов из выбранных категорий

23

Select a Category - выбрать категорию

24

No. Of posts/images - количество постов/изображений

Ну вот и все, с настройками Content Slide покончено, не забудьте сохранить изменения.

И по завершении проделанной работы, моя главная страница выглядит так:

Слайдер в шапке сайта WordPress

На картинке эффекта анимации, конечно, не увидеть, но можете быть уверенны, эффект потрясающий.

Возможности плагина Content Slide, благодаря его богатому функционалу, позволяют создавать слайд-шоу практически любых размеров и в любой части страницы сайта (для установки слайдера на отдельную страницу или в сайдбар сайта при помощи текстового виджета, вам дополнительно понадобится плагин Exec-PHP).

Установка слайдера на сайт WordPress позволит наглядно продемонстрировать содержание интернет ресурса, удерживая посетителей как можно дольше на страницах проекта, или привлечь его внимание к своим или партнерским продуктам, увеличивая продажи. Желаю удачи!

С уважением, Роман Ваховский.

Хороший человек всегда нажмет на кнопку!
Комментарий > Благодарность > Ссылка на секретную страницу блога

30 комментариев: Установка слайдера на сайт WordPress

Страница 1 из 11
  • Kg говорит:

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

  • Юрий говорит:

    Роман, вы очень толково расписали как пользоваться функционалом плагина. Не поможете в одном вопросе? У меня тема не поддерживает постраничную навигацию и "хлебные крошки" (т.е. там нет кодов, отвечающих за поддержку подобных плагинов). Давно ищу плагин, чтобы сделать хотя бы скользящее горизонтальное меню (для удобства посетителей). К сожалению, в Сети не смог найти инфу по данному вопросу. Существует ли такой плагин в принципе или для этого надо редактировать темы?

    • Роман Ваховский говорит:

      Юрий, вы ошибаетесь. В теме WordPress для плагина WordPress не должно быть кодов, поддерживающих тот или иной плагин. Коды тем не все одинаковые и если процесс установки постраничной навигации отличается от описанного мной в этой статье, то это не значит, что плагин не подойдет или тема его не поддерживает. Просто найдите сами место в теме, куда установить код плагина. Только аккуратнее, перед работой по методу проб и ошибок сохраните резервную копию (бэкап) на хостинге, еще советую работать с файлами темы по ftp.

      • hauz.by говорит:

        К тому же я бы предложил пользоваться Notepad++ вместо встроенного блокнота. Так будет намного удобнее.

  • Юрий говорит:

    Спасибо за совет, Роман. Прочитал вашу статью о постраничной навигации. Попробую что-нибудь придумать... Чтобы не "поломать" сайт создал его полный аналог в Денвере (на движке WordPress, с такой же темой). Буду экспериментировать. Надеюсь не откажете в совете, если возникнут какие-нибудь вопросы...

  • XakerFaker говорит:

    Давненько Я искал подобный плагин очень интересный и легкий в настройках. Спасибо Рома! 🙂

  • Сергей говорит:

    Материал, действительно, полезный и интересный. Раньше встречал, как вставить слайдер, но очень уж накручено. А у вас более проще и объяснили понятливо. Большое спасибо!

  • XakerFaker говорит:

    Подскажите пожалуйста! сколько можно делать изображений для слайд шоу ? Спасибо зарание

    • Роман Ваховский говорит:

      Бесконечно много, сколько укажете в настройках плагина.

  • Nik говорит:

    Подскажите, как изменить код плагина (либо какой-то еще код), чтобы изображения слайдера в шапке сайта были на всю ширину экрана и при этом без полос прокрутки и сдвигов при изменении разрешения экрана?
    Заранее спасибо 🙂

    • Роман Ваховский говорит:

      В первом пункте генеральных настроек плагина задайте необходимую ширину и высоту слайдера (в вашем случае размеры шапки) в пикселях. Помните, размеры картинок должны совпадать с размерами самого слайдера.
      Если тема не резиновая, то и при изменении разрешения экрана картинки сдвигаться не будут.
      P.S. Посетил сайт, вижу вы уже и сами справились :-)/

  • Елена говорит:

    Хочу на сайте заменить дизайн. Сколько сейчас в среднем стоит дизайн сайта?

    • Роман Ваховский говорит:

      Спросите у фрилансеров. Расценки у всех разные, в среднем от 5000руб.
      Обратите внимание: в индекс Яндекса попала всего одна страница вашего сайта.

  • Алексей говорит:

    Всё сделал, но проблема в том, что мои картинки не выводятся, хотя я их заменил в image плагина. Выводятся старые, которые были до загрузки моих. Что делать не понимаю.

    • Роман Ваховский говорит:

      Кэш браузера не обновлен, поэтому и старые картинки выводятся.

  • DoctorXiXi говорит:

    А возможно ли заменить стрелочки в этом слайдере? Смотрел в корне папки, этих картинок не нашёл. как это осуществить? Меня не устраивают те стрелки которые есть. Хочу под свой дизайн сделать.

  • Руслан говорит:

    Протестировал на сайте с шаблоном admired, все отлично работает) . Раньше использовал WOWslider, но там другой принцип совершенно: сначала программой создаешь слайды, затем их загружаешь. И при обновлении плагина WOWslider сайт почему-то "падал" всегда, приходилось удалять и заново устанавливать.

  • Павел говорит:

    Руки зачесались)) буду пробовать, есть много идей, ваша статья меня вдохновила! Спасибо!

  • Руслан говорит:

    Да, статья действительно вдохновляющая, для тех, кто в теме 😉

    Роман, но как быть чайнику, кто протестировав тему на локальном сервере, установив её на сайт, обнаружил, что слайдера нэма... Есть кнопка "включить", но нет кнопок настроек "что"... 🙁

    Может, Вы подскажите что-нить? Тема Dazzling, WP 4.2.1...

    В поисках ответа, гулял по инету, но что-то близкое по теме, нашёл только у Вас.

  • Tanya говорит:

    Не могу найти плагин WordPress Content Slide. На wordpress.org его нет, зато предлагаются куча других. Люди может кто-нибудь мне его скинет по дружбе?

    • Роман Ваховский говорит:

      И правда, отсутствует. Буду писать разработчику, спрошу в чем дело. После получения ответа отпишусь.

    • Роман Ваховский говорит:

      Под официальным адресом WordPress Content Slide разместил рабочую ссылку на скачивание плагина.

  • Василий говорит:

    А шорткод он поддерживает? в смысле если вместо текста вставить шорткод он его как воспроизведет??А отключать фотки можна что бы только текст был????

  • Семен Владимирович говорит:

    Роман, доброго суток дня!
    Подскажите пожалуйста как заполнить фотографии поста (миниатюры) по заданной ширине и высоте?
    Я поставил слайдер вместо шапки сайта и указал конкретную ширину и высоту, к сожалению фотографии поста повторяются на одном слайде, как сделать так чтобы фотографии не повторялись?

    • Роман Ваховский говорит:

      Здроавствуйте, Семен Владимирович!
      В слайде будут показываться фото, которые вы загрузили на сайт. Как ни крути, но повторяться они будут. Весь вопрос только в том, как часто. Это только зависит от общего количества фотографий в миниатюрах, в определенной рубрике или в целом. Посмотрите поподробнее настоящую инструкцию начиная с 19 пункта под заголовком "Эффекты и настройки анимации Content Slide".

      • Семен Владимирович говорит:

        Роман Ваховский, я не об этом, это-то я знаю.
        Плохо что у меня ещё сайт не выложен в интернете, фотографии повторяются на одном слайде, то есть если я в миниатюрах поставлю фотку размером 100х100 она повторится 10 раз на одном слайде, а я хочу чтоб эта фотка растянулась и расширилась на моим указанным ГАБАРИТОМ шапки.

        • Роман Ваховский говорит:

          А, вот вы о чем. Тут, к сожалению сложности. Фотку растянуть на слайдере конечно можно, но и качество ее изменится в худшую сторону. На моем сайте, где стоит этот слайдер, все фото (не миниатюры), предназначенные для вывода в шапке в виде слайдов, пришлось делать одинакового размера. Немного неудобно конечно, зато результат того стоит.

          • Семен Владимирович говорит:

            Роман Ваховский, подскажите как в шапке слайдер разместить по центру? А то, он у меня расположен слева.

            • Роман Ваховский говорит:

              Очень просто, заключите код плагина, который вы вставляете в шапку, в открывающий

              <p style="text-align: center;">

              и закрывающий

              </p>

              теги.

              • Семен Владимирович говорит:

                Спасибо Роман за подсказки! Но почему-то не получилось с Вашим кодом поместить в центр, сделал по другому, вокруг кода слайдера поместил код:

                ...

                Помогло 🙂

Страница 1 из 11

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

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

Поиск по блогу

Все права защищены © 2011-2016. WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.