Согласитесь, что наличие слайдера изображений на сайте выглядит довольно красиво. Слайдер на главной странице сайта — это не только стильный внешний вид, но также и хорошая информативность тематики Вашего сайта для посетителей.
Слайдер будем создавать с помощью популярного плагина Meta Slider , а тестировать его работу — на теме Twenty Sixteen .
Создание слайдера
Итак, после установки и активации плагина в админ-панели появится новый пункт меню Meta Slider , при переходе по которому Вы попадете в основное окно слайдера.
Так как не создано ни одного слайда, тут присутствует только одна единственная кнопка с надписью “Создайте Ваше первое слайд-шоу ”. После ее нажатия откроется окно Вашего первого слайдера.
Итак, Вы создали пустой слайдер, который по умолчанию имеет название Новый слайдер . Если нужно его нужно переименовать, то это можно сделать, щелкнув по вкладке слева вверху и ввести новое имя.
Итак, слайдер создан, теперь нужно в него добавить слайды, что можно сделать, нажав кнопку справа Добавить слайд . После добавления всех фото, окно будет иметь следующий вид:
Перед публикацией слайдера на сайте можно ознакомится с параметрами, которые предлагает плагин.
Первое, о чем следует сказать, — это удаление какого-либо слайда. Для этого потребуется навести курсор на картинку слайда, где появится красный значок корзины, и нажать на нее.
На странице редактора слайдера также можно указать его размер, эффект переключения, внешний вид.
Кроме того, Вам доступны и дополнительные настройки: растягивание слайдера на всю ширину, выравнивание по центру, автоматическое воспроизведение слайдов, “умная” обрезка фото, показ слайдов в обратном порядке, время переключения слайдов, время показа и пр.
Итак, после добавления всех нужных слайдов и настройки необходимо нажать кнопку Сохранить . Таким образом Вы создали слайдер фотографий.
Вывод слайдера на сайте
Теперь его нужно вывести на сайте. Для этого плагин предлагает два варианта: показать слайдер на отдельной странице или вставить специальный код в шаблон темы.
Чтобы показать на отдельной странице, первым делом необходимо создать страницу (Страницы -> Добавить новую ), в которой вставить специальный шорткод, который Вам предлагает плагин. Его можно увидеть в окне редактирования слайдера (в нашем случае это ).
После публикации страницы Вы сможете на ней увидеть Ваш слайдер.
Для вставки слайдера в тему Вашего сайта (напомним, что мы используем тему Twenty Sixteen ) необходимо сделать изменения в файлах темы. Для этого следует перейти Внешний вид -> Редактор , выбрать тему Twenty Sixteen и в списке доступных файлов темы найти Заголовок header.php .
Теперь в коде найти строчку
Не перепутайте – не на странцу сайта, которую вы создаёте обычным путём в админпанели, а именно в файл шаблона страницы. Лучше всего это сделать перед выводом контента страницы. У меня такой код выглядит вот так:
Ключевое слово здесь — content . По аналогии вы найдёте у себя в шаблоне похожие строки. Но выводить слайдер на всех страницах сайта будет не слишком хорошо – не на всех страницах он нужен. Например, на странице «Контакты» или «Ссылки» он будет явно лишним. Обычно слайдер включают только на главной странице, а для этого лучше применить такой код:
if(is_front_page()) { if(function_exists("wp_content_slider")) { wp_content_slider(); } } ?>
При помощи условных тегов слайдер можно отображать только на одной, нужной вам странице. Как это сделать, я расскажу ниже. Единственный недостаток плагина — он не настраивается для вывода нескольких слайдеров с разными изображениями. Впрочем, я мало встречал таких необходимостей. Хотя, думаю, вам будет достаточно и одного слайдера. Вот так выглядит слайдер на странице моего тестового блога, так сказать, «полигона» для обкатки разных разностей:
Теперь об условных тегах. Их в WordPress много, я приведу только те, которые вам могут пригодиться для вывода слайдера.
Для того, чтобы слайдер отобразился там, где вы хотите, в строке кода поменяйте строку if(is_front_page()) на нужную вам:
- Главная страница: — is_home (). Если вы выберете постоянную страницу в качестве главной страницы сайта, то этот условный тег будет считать главной страницу с записями.
- Главная страница (новый тег): is_front_page (). Когда выводится главная страница, независимо от того, что на ней отображается — записи или статическая страница. Работает, когда отображается главная страница, и не имеет значения, что указано в настройках: «Настройки» — «Чтение» — «На главной странице отображать» — « Ваши последние записи» или «Статическую страницу».
- Одиночная запись на отдельной странице: is_single ().
- Отображается одиночная запись: is_single (’17’), id=13.
- is_single (‘ New article’). ‘с заголовком «New article».
- is_single (‘ short link’). Отображается одиночная запись с короткой ссылкой short link.
- is_single (array (13,’ short link’,’ New article ‘)). Отображается одиночная запись, при этом должно работать хотя бы одно условие из трёх, указанных для записи: 1 — ID 13 или 2 — короткая ссылка «short link» или 3 — заголовок «New article».
- Любая страница, на которой отображаются записи: comments_open (). Комментарии разрешены для текущей записи.
- pings_open (): пинги разрешены для текущей записи.
- Страница «Статической страницы»: is_page (). Отображается Статическая страница.
- is_page (’42’). Отображается Статическая страница с id=43.
- is_page (‘ About me about Jack’). Отображается Статическая страница с заголовком «About me about Jack».
- is_page (‘about-me’). Отображается Статическая страница с короткой ссылкой «about-me».
- is_page (array (43,’about-me’,’ About me about Jack’)). Отображается Статическая страница, при этом должно работать хотя бы одно условие из трёх, указанных для Статической страницы: 1 — ID 43 или 2 — короткая ссылка «about-me» или 3 — заголовок «About me about Jack».
Вот и всё, теперь вы можете вставлять свой слайдер практически на любую страницу сайта.
Несмотря на то, что я не являюсь поклонником слайдеров, многие все же любят его использовать. Бывают ситуации, когда тема изначально слайдер не поддерживает, а очень хочется его поставить. Реализовать поддержку слайдера довольно легко, было бы желание:
3>Способы добавить слайдер в WordPress
1. Плагин WordPress Content Slide
Позволяет не только сделать слайдер, но и настроить его под свои нужды, а также сделать красивые эффекты при его использовании.
Установка плагина довольно простая, как и любого другого. А возможности огромны: можно корректировать сам размер слайдера, добавлять/удалять названия, корректировать цвет и размер, задавать цвет фона и т.д. Установив плагин, вы сами убедитесь в гибкости и тонкости его настроек.
Скачать плагин можно здесь.
2. Плагин WordPress YSlider
Тоже не менее мощный инструмент для создания карусели на WordPress с огромными возможностями по настройкам. Можно изменять и задавать высоту/ширину слайдера, выводить часть записи в слайдере, как и в предыдущем. Для того, чтобы после установки и активации плагина слайдер таки заработал,
Вам достаточно будет просто вставить в нужное место коротенький код — — обычно это index.php.
3. И пожалуй сама простая реализация слайдера с помощью плагина Nivo Slider for WordPress
Для начала, советую настроить плагин для вывода карусели:
- задать ширину и высоту
- эффект слайдера
- время
- возможность пользователя самому перелистывать слайдер (добавить стрелочки навигации)
- возможность остановки прокрутки слайдера при наведении пользователем мыши
- цвет текста слайдера
- цвет фона и т.д.
Как и аналоги данного плагина, он имеет кучу настроек, которые позволят вам максимально его интегрировать в ваш шаблон.
После настроек, можно переходить к добавлению изображений, а для интеграции его в шаблон, необходимо вставить этот код в место, где предполагается вывод карусели:
Все, можно наслаждаться проделанной работой. Если вы все правильно настроили, слайдер будет отображаться там, где вы сами того захотите. Стоит также отметить, что именно его чаще всего используют блогеры, как я замечала. Не знаю почему, возможно из-за простоты настроек и интеграции.
Какой плагин выбрать для отображения слайдера, карусели — выбирать вам. В каждом из них есть свои достоинства и недостатки. Одно лишь общее: без правки кода шаблона они не работают.
Как сделать слайдер на WordPress обновлено: Ноябрь 29, 2016 автором: Елена Иванова
Обсуждение: 4 комментария
Марина, всегда пожалуйста. Рада, что Вам пригодились способы установки слайдеров на WordPress.
Большое спасибо за наводку. Давно хотела поставить себе слайдер, но думала, что для этого надо сменить шаблон, а оказывается это очень просто
Ответить
