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

Плагин WordPress Content Slide как раз из этого разряда, хотя настроек в нём довольно много. Но, поковырявшись в его настройках минут 10 (как и я), вы поймёте, что плагин заслуживает того, чтобы работать на страницах вашего сайта. Особенно такой плагин пригодится для журнальных и новостных ресурсов, так как работает он чётко и легко. Небольшие хаки, о которых я расскажу ниже, помогут вам облегчить вашу работу с плагином. Итак — с одной стороны, слайдер довольно мощный, судя по настройкам, с другой – прост настолько, что разобраться с ним сможет каждый желающий.

Об установке плагина – идите сразу в админпанель, во вкладку «Плагины». Дальше – вкладка «Добавить новый». Ещё дальше – «Поиск». И забудьте, наконец, о том, что такого рода функционал нужно искать на просторах интернета – репозитарий WordPress (то есть — хранилище) настолько велик, что в нём найдётся место и для этого плагина.

А вообще, чтобы вы знали на будущее, в этом хранилище на данный момент находится около 22 000 плагинов и, судя по моей почте, добавляются они неслабо – за этот месяц добавилось ещё 32. Так что не качайте вы плагины неизвестных авторов, пользуйтесь WordPress, коль скоро вы решили с ним работать.

Так вот, об установке – ваш WordPress сам найдёт и предложит вам плагин для скачивания. Все плагины совместимы с последними версиями WordPress , так что скачивайте смело, и активируйте плагин. После активации начнётся самое интересное – настройка плагина. Перейдите в «Параметры», или «Настройки», это у кого как, дальше – «Content Slide». Здесь вы можете настроить плагин практически по всем интересующим вас параметрам. Плагин на русский язык не переведён, но настройки понятны интуитивно.

Плагин сам создаёт своё меню в панели администратора под названием «Content Slide», а настройки плагина находятся в «Content Slide» — «Content Slide». Всего плагин имеет три настраиваемых блока:

«General Settings» (главные настройки) — здесь можно указать размеры изображений, которые будет выводить слайдер. Размер всех изображений должен быть одинаковым, потому что по умолчанию плагин будет выводить картинку размером, указанным в указанных в настройках, не обращая внимания на фактический размер изображения. Поэтому картинки лучше заранее подготовить и сделать их одинакового размера с соблюдением геометрических пропорций. Например, в том же Фотошопе. Здесь же вы можете настроить подписи и описания к изображениям (эта функция будет работать, если вы включите её в разделе «Images Source Settings»).

Блок «Effects & Animations Settings» (настройки анимации и эффектов изображений) — понятно, что здесь настраивается. Можно указать время смены изображений друг другом, эффекты смены изображений и многое другое, по ходу разберётесь. Здесь же можно управлять навигационными кнопками в слайдере – включать или отключать их, и многими другими настройками.

Блок «Images Source Settings» (настройки изображений) – в этом блоке вы указываете путь к картинкам; ссылки, которые открываются при щелчке по картинке; подписи к изображениям и их описания (если вы включили «Display Heading and Text?») и общее количество всех изображений, которое будет выводить слайдер.

Вот и все настройки плагина. Как видите, они достаточно просты и, потратив 10-15 минут, вы настроите свой слайдер так, как вам захочется. Как вставить слайдер в шаблонвашего сайта? Да очень просто, для этого вставьте в файл шаблона, в котором будет выводиться ваш слайдер, этот код:

Не перепутайте – не на странцу сайта, которую вы создаёте обычным путём в админпанели, а именно в файл шаблона страницы. Лучше всего это сделать перед выводом контента страницы. У меня такой код выглядит вот так:

Ключевое слово здесь — 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».

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

Я Приветствую Вас! Меня зовут Владимир Савельев и я автор этого блога. Сегодня я хочу Вам рассказать — что такое слайдер, его преимущества и недостатки. А также покажу как установить слайдер на WordPress .

В прошлой статье я рассказал о ТОП 9 — самые лучшие плагины для защиты от спама. Обязательно посмотрите!

Но вернемся к слайдеру.

Тенденции современного web-дизайна обязывают владельцев ресурсов к рациональному совмещению информационного контента и стильного оформления. Сегодня интернет серфинг сводится к быстрому изучению ресурсов, чаще всего по диагонали.

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

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

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

Что такое слайдер?

Слайдером или каруселью изображений называют специальный элемент web-дизайна, представленный в виде блока с картинками или текстом.

Главная задача слайдера – показ интерактивного контента, изменяющегося в ручном или автоматическом режиме и привлекающего внимание к определенному содержимому ресурса.

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

Существует множество готовых как бесплатных, так и платных слайдеров на wordpress, не требующих знаний программирования и реализовывающих различные динамические эффекты анимации.

Преимущества использования слайдеров

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

Например, собственнику виртуального магазина слайдер wordpress пригодится для оповещения о поступлении новой продукции, текущих акциях и скидках;

Экономия места и продвижение!
Плагин слайд-шоу, состоящий из изображений и текстового контента, существенно экономит место на ресурсе. Правильно интегрируя слайдерскую карусель вордпресс, можно выводить в верхние позиции наиболее значимый контент, определяемый поисковыми ботами, как самый важный, что, безусловно, положительно скажется на продвижении вашего ресурса в топ.

Недостатки использования слайдеров

Страдают в первую очередь скорость загрузки и вес страницы — решив украсить сайт слайдером wordpress, помните, что далеко не всем доступна быстрая сеть. Многие для выхода во всемирную паутину применяют Wi-Fi, не предлагающий высокой скорости.

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

Meta Slider – многофункциональный, простой и классный слайдер

Рассмотрим, как внедрить и настроить плагин слайд-шоу на проект на конкретном примере. Установим Meta Slider – бесплатный, простой и многофункциональный слайдер, который великолепно вписываясь в шаблон ресурса, реализует на нем любое количество шоу слайдов с разнообразными спецэффектами.

Помимо этого, созданные при помощи Meta Slider карусели изображений, являются seo- оптимизированными, что благотворно влияет как на визуальное восприятие, так и на авторитетность ресурса в глазах поисковиков.

Размещается слайдер на главной странице, в боковой колонке или в любой записи. Настройки и внедрение слайд-шоу Meta Slider очень просты.

Как настроить слайдер-шоу Meta Slider на wordpress?

Скачайте, установите и активируйте плагин. После этого в боковой колонке панели админа вы увидите новый пунктик Meta Slider Lite. Кликните на верхней вкладочке с небольшим крестиком и добавляйте изображения в созданную слайд карусель.

Нажмите клавишу «добавить слайд» и загрузите выбранные изображения с компьютера;

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

В базовой модификации Meta Slider разработчиком представлено четыре вида слайдеров. Опции настроек для каждого слайд-шоу располагаются под клавишами сохранения на правой стороне:

• слайдер «Responsive Slides» – отзывчивый, наиболее легкий из всех, один эффект;
• слайдер «Nivo Slider» – отзывчивый, четыре темы и шестнадцать эффектов;
• слайдер «Flex Slider 2» – отзывчивый, режим карусели, два эффекта;
• слайдер «Coin Slider» – четыре эффекта.

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

Все настроечные опции слайдерской карусели представлены в четырех разделах:

• Общие – здесь выбираем подходящий вид слайд-шоу, его размеры, тему (стиль) и эффект смены;
• Управление – в этом разделе вы можете выключить показ элементов, при помощи которых осуществляется управление шоу слайдов;
• Расширенные настройки – на ваш выбор предложено: включить автопрокручивание ресурса, сменить скорость анимационных эффектов и переходов, активировать опцию случайного показа изображений, а также настроить множество других эффектов;

Здесь, в основном, настроечные опции будут зависеть от вида слайдера, который вы подберете изначально;

• Опции разработчика – возможность добавлять скрипты и CSS classes, созданные собственноручно. Предназначена для опытных сайтостроителей;

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

Функцию удобнее прописывать в файл шаблона. Обращаю внимание, что цифрами, которые имеются в функции PHP и шорткоде, обозначен номер вашего слайдера.

Если вы опасаетесь всего нового или боитесь поломать ресурс, смело применяйте Meta Slider – сайт он не испортит!

Начинающим сайтостроителям я рекомендую ставить слайдер на wordpress со стандартными настройками, а уже после начать изменять эффекты и оформление. Также убедитесь, что у вас подключена последняя версия jQuery. На этом все, удачи Вам!

У нас кстати в городе снега столько выпало просто жесть! Интересно везде так или только у нас в области?

Совсем недавно посмотрели с женой фильм Дурак! Столько шума и мнений вызвал этот фильм просто Атас! Обязательно посмотрите его, каково же Ваше мнение будет о нем, интересно...

Вчера выплатил деньги — победителям моих конкурсов, скоро запущу новые и не менее интересные! Подписывайтесь на блог и тоже участвуйте!

PS: Наконец-то купил сыну прикольного хомяка-повторюшку. Давно у меня выпрашивал хомяка этого, думал очередная фигня, а нет, всей семьей ржали как лоси Брал тут ! Теперь он постоянно с ним дурачится! Надо будет видео с ним прикольное записать.

Смотрели видео про этого хомяка? Ржака!

С уважением, Владимир Савельев

Премиум-уроки от клуба webformyself Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!

Подробнее

Несмотря на то, что я не являюсь поклонником слайдеров, многие все же любят его использовать. Бывают ситуации, когда тема изначально слайдер не поддерживает, а очень хочется его поставить. Реализовать поддержку слайдера довольно легко, было бы желание:

3>Способы добавить слайдер в WordPress

1. Плагин WordPress Content Slide

Позволяет не только сделать слайдер, но и настроить его под свои нужды, а также сделать красивые эффекты при его использовании.

Установка плагина довольно простая, как и любого другого. А возможности огромны: можно корректировать сам размер слайдера, добавлять/удалять названия, корректировать цвет и размер, задавать цвет фона и т.д. Установив плагин, вы сами убедитесь в гибкости и тонкости его настроек.

Скачать плагин можно здесь.

2. Плагин WordPress YSlider

Тоже не менее мощный инструмент для создания карусели на WordPress с огромными возможностями по настройкам. Можно изменять и задавать высоту/ширину слайдера, выводить часть записи в слайдере, как и в предыдущем. Для того, чтобы после установки и активации плагина слайдер таки заработал,

Вам достаточно будет просто вставить в нужное место коротенький код — — обычно это index.php.

3. И пожалуй сама простая реализация слайдера с помощью плагина Nivo Slider for WordPress

Для начала, советую настроить плагин для вывода карусели:

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

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

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

Все, можно наслаждаться проделанной работой. Если вы все правильно настроили, слайдер будет отображаться там, где вы сами того захотите. Стоит также отметить, что именно его чаще всего используют блогеры, как я замечала. Не знаю почему, возможно из-за простоты настроек и интеграции.

Какой плагин выбрать для отображения слайдера, карусели — выбирать вам. В каждом из них есть свои достоинства и недостатки. Одно лишь общее: без правки кода шаблона они не работают.

Как сделать слайдер на WordPress обновлено: Ноябрь 29, 2016 автором: Елена Иванова

Обсуждение: 4 комментария

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

Ответить

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

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

Слайдер будем создавать с помощью популярного плагина Meta Slider , а тестировать его работу — на теме Twenty Sixteen .

Создание слайдера

Итак, после установки и активации плагина в админ-панели появится новый пункт меню Meta Slider , при переходе по которому Вы попадете в основное окно слайдера.

Так как не создано ни одного слайда, тут присутствует только одна единственная кнопка с надписью “Создайте Ваше первое слайд-шоу ”. После ее нажатия откроется окно Вашего первого слайдера.

Итак, Вы создали пустой слайдер, который по умолчанию имеет название Новый слайдер . Если нужно его нужно переименовать, то это можно сделать, щелкнув по вкладке слева вверху и ввести новое имя.

Итак, слайдер создан, теперь нужно в него добавить слайды, что можно сделать, нажав кнопку справа Добавить слайд . После добавления всех фото, окно будет иметь следующий вид:

Перед публикацией слайдера на сайте можно ознакомится с параметрами, которые предлагает плагин.

Первое, о чем следует сказать, — это удаление какого-либо слайда. Для этого потребуется навести курсор на картинку слайда, где появится красный значок корзины, и нажать на нее.

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

Кроме того, Вам доступны и дополнительные настройки: растягивание слайдера на всю ширину, выравнивание по центру, автоматическое воспроизведение слайдов, “умная” обрезка фото, показ слайдов в обратном порядке, время переключения слайдов, время показа и пр.

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

Вывод слайдера на сайте

Теперь его нужно вывести на сайте. Для этого плагин предлагает два варианта: показать слайдер на отдельной странице или вставить специальный код в шаблон темы.

Чтобы показать на отдельной странице, первым делом необходимо создать страницу (Страницы -> Добавить новую ), в которой вставить специальный шорткод, который Вам предлагает плагин. Его можно увидеть в окне редактирования слайдера (в нашем случае это ).

После публикации страницы Вы сможете на ней увидеть Ваш слайдер.

Для вставки слайдера в тему Вашего сайта (напомним, что мы используем тему Twenty Sixteen ) необходимо сделать изменения в файлах темы. Для этого следует перейти Внешний вид -> Редактор , выбрать тему Twenty Sixteen и в списке доступных файлов темы найти Заголовок header.php .

Теперь в коде найти строчку