Создаем слайдер: плагин Dynamic Content Gallery

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

Скачать исходники для статьи можно ниже

Как выглядит слайдер?

Демо-пример можно посмотреть на сайте разработчика по следующему url:

http://www.studiograsshopper.ch/dynamic-content-gallery/

Или вот такой слайдер:

Демо-пример можете посмотреть на моем тестовом сайте: http://mnogoblog.16mb.com

Где взять плагин Dynamic Content Gallery и как установить?

Данный плагин есть на wordpress.org:

Автор: studiograsshopper

Последнее обновление: 2012-6-15

Загрузок: 228,822 раз.

Рейтинг: 4,4 звезды из 5, количество проголосовавших 80 пользователей.

По моему мнению, отличные показатели.

Установка стандартная – заходим в панель управления, в левом меню выбираем пункт “Плагины” и его подпункт “Добавить новый”, в строку поиска вводим Dynamic Content Gallery (в списке найденных должен быть на первом месте, однако, проверьте по автору, должен быть studiograsshopper).

Устанавливаем и активируем плагин!

Настройка плагина Dynamic Content Gallery

После активации в панели управления сайтом, в левом меню, в пункте “Настройки” появится новый подпункт “Dynamic Content Gallery“.

Заходим в него и видим очень много вкладок для настроек, но не пугайтесь, большинство из них мы трогать не будем, а оставим по умолчанию, вернее сказать, изменим 3-5 параметров и все будет отлично работать!

К сожалению интерфейс на английском, но это не проблема, если вы поставите для своего браузера плагин Google Translate.

Приступим.

1. вкладка General

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

2. вкладка Image management

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

3. вкладка Gallery Method

Вот здесь мы пожалуй изменим параметр, по умолчанию стоит второй параметр ( One Category – одна категория) – то есть картинки берутся только из постов и страничек, принадлежащих определенной категории, если бы мы выбрали первый параметр (Multi Option) – картинки показывались бы из разных категорий, однако, самый универсальный метод считаю третий (ID метод) и советую использовать именно его – на скриншоте ниже указан синей стрелкой – он позволяет показывать картинки только тех записей и рубрик, ID которых вы укажите ниже в настройках.

Выбрали ID метод, далее спускаемся ниже и ищем ID Method Settings – вот здесь мы и укажем ID тех записей и страничек, картинки которых и будем использовать в слайдере.

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

Здесь напрашивается вопрос как узнать ID записей и страничек – легко!

Для этого нужно открыть “Редактор записей” или “Редактор страничек”, то есть выбираем в левом меню панели управления пункт “Записи” и его подпункт “Все записи”, далее выбираем нужную нам запись и попадаем в ее редактор и здесь в адресной строке браузера вы увидите ее ID (аналогично со страничками).

Вот например id странички, которые используются в моем демо-примере на сайте mnogoblog.16mb.com

id=1

id=20

4. вкладка Descriptions

Здесь можно оставить по умолчанию пункт второй ( Manual – Руководство) – то есть описание в слайдере будет производится по определенной последовательности, однако, я советую выбрать первый пункт Auto (Автоматический), который выводит отрывок из вашей записи или странички, ограниченный количеством введенных вами символов, на скриншоте ниже установлено 100 символов, а также в конце данного отрывка будет размещена ссылка на источник в виде слова [more] – его можно заменить например на: “Читать полностью”.

Все остальные параметры можно оставить по умолчанию:

5. вкладка Gallery CSS – настройка внешнего вида галереи.

6. вкладка Javascript Options – здесь выбирается с помощью какого скрипта выводить галерею Mootools или Jquery. По умолчанию стоит Mootools, если у вас возникнут проблемы в работе плагина, можете поменять на Jquery.

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

7. вкладка Load Scripts – Здесь выбирается место, где показывать галерею на блоге: только на главной, на страницах по выбору, на специальной странице, созданной Вами или ещё вариант «Другой» (этот вариант отлично подходит для вывода галереи в сайдбар, так как у плагина есть ещё и виджет).

8. вкладка Tools – настройка вывода ошибок и показа страниц, которые есть в галереи.

9. вкладка Help – помощь на английском языке.

Допустим вы настроили данный плагин, осталось только вывести его на своем сайте.

Как вывести слайдер на сайте?

Для этого нужно установить в нужном месте следующий код:

<?php dynamic_content_gallery(); ?>

Думаю самое подходящее место для данного слайдера – это главная страничка сразу под шапкой.
Для того, чтобы сделать именно так нужно – выбрать в левом меню панели управления пункт “Внешний вид” и его подпункт “Редактор”, далее справа в списке шаблонов выбрать файл index.php и в его коде сразу после открытия блока с контентом “div id=”cоntent” rоle=”mаin”” вставить вышеуказанный код, вот так например данный код вставлен на моем тестовом сайте:

<?php
get_header(); ?>
		<div id="primary">
			<div id="content" role="main">
<?php dynamic_content_gallery(); ?>
			<?php if ( have_posts() ) : ?>

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>
...

PS: Плагин Dynamic Content Gallery многофункциональный и большинство его возможностей я не описал (у него есть виджет, есть произвольные поля и прочее), также советую прочитать статьи других блогеров: