От автора: В этом уроке мы с вами научимся создавать простую и, вместе с тем, привлекательную галерею на WordPress. WordPress уже предлагает простой способ создания и добавления галерей к материалам нашего сайта. Однако, полученная галерея будет не очень удобна для пользователя, поскольку просмотр увеличенной картинки галереи будет происходить по новому адресу. Давайте устраним этот недостаток, добавив галерее динамичности и привлекательности.
 |
Автор: Андрей КудлайЗовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript. |
Итак, для работы нам потребуется установленная CMS WordPress и плагин модальных окон Fancybox или любой другой на ваш вкус. Начнем с создания галереи. Откроем запись, к которой нужно добавить галерею, кликнем по кнопке Добавить медиафайл и в открывшемся окне управления медиафайлами перейдем по ссылке Создать галерею. Загрузим необходимые картинки и добавим их в галерею. В настройках галереи в качестве ссылки установим медиафайл. Другие настройки можно не менять.
Теперь скачаем плагин Fancybox и поместим его в папку с нашей темой. Папку плагина назовем fqncybox. Подключим необходимые для работы плагина файлы в файле functions.php:
Бесплатный курс «Создание тем на WordPress. Быстрый старт»
Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц
Скачать курс|
1 2 |
wp_enqueue_script( 'my-fancybox', get_template_directory_uri() . '/fancybox/jquery.fancybox.pack.js', array('jquery') ); wp_enqueue_style( 'my-fancybox-css', get_template_directory_uri() . '/fancybox/jquery.fancybox.css' ); |
Теперь откроем файл с клиентскими скриптами (jQuery) нашей темы и пропишем всего одну строчку кода:
|
1 |
$('.gallery a').attr('rel', 'group').fancybox(); |
Если все сделано верно, то теперь картинки будут открываться в модальном окне. Наша галерея стала гораздо динамичнее и привлекательнее.
Вот, собственно, и все, задача решена. На этом наш урок завершен. Удачи и до новых встреч!
Создание тем на WordPress. Быстрый старт
Изучите курс и узнайте, как создать тему на WordPress
Смотреть
Комментарии (4)