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

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

От автора: Данный урок будет логическим продолжением урока по созданию галереи за 5 минут на WordPress. В указанном уроке мы фактически лишь сделали галерею WordPress более современной и динамичной, никак не правя ее структуру. В данном уроке мы уже кардинально перепишем структуру галереи и, в результате, создадим слайдшоу, используя jQuery плагин Nivo Slider.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

Итак, скачаем jQuery плагин Nivo Slider и подключим все необходимые файлы к нашему сайту. Напомню, я произвожу подключение через файл functions.php темы WP:

Бесплатный курс «Создание тем на WordPress. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц

Скачать курс

Здесь мы подключаем файл стилей слайдера, js-файл плагина и четыре файла с темами оформления.

Теперь вставим галерею WordPress в запись. Как и в прошлом уроке, мы получили картинки, выстроенные плитками, т.е. получили формат галереи. Что же нам потребуется для того, чтобы получить формат слайдера? Давайте взглянем в редакторе, что представляет из себя галерея WP в режиме кода, для этого переведем редактор из визуального режима в режим текста. В результате мы увидим нечто вроде такого: . Это ничто иное, как шорткод, в котором есть параметр ids с идентификаторами картинок галереи.

Коль это шорткод, то мы вполне можем повесить на него свою функцию, которая будет генерировать необходимый вывод. Давайте так и сделаем в файле functions.php. Этой строкой мы свяжем щорткод gallery с функцией my_gallery:

Ну и код самой функции:

Данная функция по ID картинки получает ее HTML-код и складывает в переменную $html. В эту же переменную складывает вся необходимая верстка. Кроме атрибута ids шорткода, мы можем добавить дополнительные атрибуты, например атрибут theme, в котором пользователь может указать необходимую тему оформления для слайдера. Для этого заменим шорткод таким:

Ну и последним штрих: немного подкорректируем плагин Nivo Slider под себя, чтобы он выводил описания картинок. Для этого откроем файл jquery.nivo.slider.js, найдем строки 95-96:

И заменим их на следующие:

Вот, собственно, и все, задача решена. На этом наш урок завершен. Удачи и до новых встреч!

Бесплатный курс «Создание тем на WordPress. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц

Скачать курс

Создание тем на WordPress. Быстрый старт

Изучите курс и узнайте, как создать тему на WordPress

Смотреть

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (23)