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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь можно приступить к настройке 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)	— цвет кнопок навигации

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

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 покончено, не забудьте сохранить изменения.

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

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

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

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