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

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

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

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

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

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

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

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

Слайдер Carousel

Демо-пример можете посмотреть на моем тестовом сайте: 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

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

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

 

3. вкладка Gallery Method

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

Настройка слайдера

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

Настройка Carousel слайдера

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

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

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

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

id=1

как узнать id записи или страницы

id=20

узнаем id записи или странички

 

4. вкладка Descriptions

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

настройка Carousel слайдера

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

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 многофункциональный и большинство его возможностей я не описал (у него есть виджет, есть произвольные поля и прочее), также советую прочитать статьи других блогеров:

http://www.kagblog.ru/plaginy/galereya-izobrazhenij-dynamic-content-gallery.html

http://blogto4ka.ru/wordpress/featured-content-gallery-vs-dynamic-content-gallery-2-slajdera-dlya-wordpress.html

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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