WordPress — привлекательная галерея за 5 минут

WordPress - привлекательная галерея за 5 минут

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

автор

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

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

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

Итак, для работы нам потребуется установленная CMS WordPress и плагин модальных окон Fancybox или любой другой на ваш вкус. Начнем с создания галереи. Откроем запись, к которой нужно добавить галерею, кликнем по кнопке Добавить медиафайл и в открывшемся окне управления медиафайлами перейдем по ссылке Создать галерею. Загрузим необходимые картинки и добавим их в галерею. В настройках галереи в качестве ссылки установим медиафайл. Другие настройки можно не менять.

Теперь скачаем плагин Fancybox и поместим его в папку с нашей темой. Папку плагина назовем fqncybox. Подключим необходимые для работы плагина файлы в файле functions.php:

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

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

Скачать курс

Теперь откроем файл с клиентскими скриптами (jQuery) нашей темы и пропишем всего одну строчку кода:

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

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

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

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

Смотреть

Метки: ,

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

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

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