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

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

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

автор

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

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

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

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

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

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) нашей темы и пропишем всего одну строчку кода:

$('.gallery a').attr('rel', 'group').fancybox();

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

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

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: ,

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

Комментарии Facebook:

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

  1. Александр

    Сделал все, как вы описали. Быстро и просто. Жаль только не работает на вашей теме из курса по созданию темы. Для клиентских скриптов создал файл functions.js и добавил его в файл function.php при помощи wp_enqueue_script Может еще нужно что-то сделать?

    • Андрей Кудлай

      Подозреваю, что тему Вы создавали по старому курсу, где именно тема создавалась в течение 2-х уроков. Если так, тогда можете попробовать подключать скрипты и стили по аналогии, как это сделано в теме, все должно работать без проблем. Вообще, рекомендую посмотреть обновленную версию курса по созданию темы, которая включает в себя 3 урока, посвященных непосредственно созданию темы.
      Если все же ничего не получится, тогда задайте вопрос на нашем форуме и дайте ссылку на архив с темой, я посмотрю, в чем может быть проблема. Уверен, что проблема где-то в ошибке подключения скриптов или стилей.

  2. Александр

    Спасибо за быстрый ответ, Андрей. Я создавал тему (точнее, повторял Ваши действия) по новой версии курса. Кроме того, когда FancyBox не открыл галерею, я вставил папку с плагином в тему Travel, прописал рекомендуемые две строки в functions. php и здесь же зарегистрировал файл functions. js , создал его в корне темы и прописал в нем «всего одну строчку кода» (Там больше вообще нет никакого кода, а может он нужен? Типа, как в php-файлах ). Результат тот же — галерея открывается в штатном режиме WP.
    PS. Задать вопрос на форуме, пока, не получается. У Вас серьезная процедура регистрации.

    • Андрей Кудлай

      Александр, активировал Вашу учетную запись на форуме (Александ-р), так что можете задавать вопрос. Архив с темой можете выложить на любой файлообменник и дать ссылку на архив. Только выкладывайте тему с Вашими попытками подключить галерею, чтобы можно было посмотреть, в чем ошибка.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree