WordPress — полноэкранное слайдшоу на главной странице

WordPress - полноэкранное слайдшоу на главной странице

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

автор

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

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

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

Итак, для реализации задуманного нам, в первую очередь, необходим javascript-плагин, позволяющий реализовать полноэкранное слайдшоу. Я использую плагин Backstretch. Документацию к нему и сам плагин можно найти на Гитхабе или официальном сайте плагина.

Для работы я воспользуюсь темой, которую мы создали в курсе Уникальный сайт на WordPress.

Итак, для главной страницы сайта я использую шаблон home.php темы WordPress. Данный шаблон как раз и ищет WordPress для отображения главной страницы. Все, что нам нужно сделать, это подключить библиотеку jQuery, сам плагин и вызвать метод плагина, передав ему необходимые параметры. Итоговый код шаблона home.php у меня выглядит следующим образом:

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

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

Скачать курс

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

В коде шаблона мы немного корректируем стандартный цикл, выбирая посты из созданной категории Home. Из выбранных постов мы получаем url миниатюр и передаем параметром одноименному методу плагина.

Осталось подключить библиотеку jQuery и сам плагин. В моей теме все скрипты подключаются из файла functions.php. Чтобы подключить на главной странице только необходимые нам скрипты и стили, воспользуемся функцией is_front_page(), которая проверит, находимся ли мы на главной странице:

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

На этом я с вами прощаюсь. Удачи и до новых встреч!

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

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

Скачать курс

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

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

Смотреть

Метки: ,

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

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

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