От автора: В этом уроке мы с вами научимся создавать простую и, вместе с тем, привлекательную галерею на WordPress. WordPress уже предлагает простой способ создания и добавления галерей к материалам нашего сайта. Однако, полученная галерея будет не очень удобна для пользователя, поскольку просмотр увеличенной картинки галереи будет происходить по новому адресу. Давайте устраним этот недостаток, добавив галерее динамичности и привлекательности.
 | Автор: Андрей КудлайЗовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript. |
Итак, для работы нам потребуется установленная CMS WordPress и плагин модальных окон Fancybox или любой другой на ваш вкус. Начнем с создания галереи. Откроем запись, к которой нужно добавить галерею, кликнем по кнопке Добавить медиафайл и в открывшемся окне управления медиафайлами перейдем по ссылке Создать галерею. Загрузим необходимые картинки и добавим их в галерею. В настройках галереи в качестве ссылки установим медиафайл. Другие настройки можно не менять.
Теперь скачаем плагин Fancybox и поместим его в папку с нашей темой. Папку плагина назовем fqncybox. Подключим необходимые для работы плагина файлы в файле functions.php:
Бесплатный курс «Основы создания тем 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
Научитесь создавать мультиязычные темы с нестандартной структурой страниц
Получить
Сделал все, как вы описали. Быстро и просто. Жаль только не работает на вашей теме из курса по созданию темы. Для клиентских скриптов создал файл functions.js и добавил его в файл function.php при помощи wp_enqueue_script Может еще нужно что-то сделать?
Подозреваю, что тему Вы создавали по старому курсу, где именно тема создавалась в течение 2-х уроков. Если так, тогда можете попробовать подключать скрипты и стили по аналогии, как это сделано в теме, все должно работать без проблем. Вообще, рекомендую посмотреть , которая включает в себя 3 урока, посвященных непосредственно созданию темы.
Если все же ничего не получится, тогда задайте вопрос на нашем форуме и дайте ссылку на архив с темой, я посмотрю, в чем может быть проблема. Уверен, что проблема где-то в ошибке подключения скриптов или стилей.
Спасибо за быстрый ответ, Андрей. Я создавал тему (точнее, повторял Ваши действия) по новой версии курса. Кроме того, когда FancyBox не открыл галерею, я вставил папку с плагином в тему Travel, прописал рекомендуемые две строки в functions. php и здесь же зарегистрировал файл functions. js , создал его в корне темы и прописал в нем «всего одну строчку кода» (Там больше вообще нет никакого кода, а может он нужен? Типа, как в php-файлах ). Результат тот же — галерея открывается в штатном режиме WP.
PS. Задать вопрос на форуме, пока, не получается. У Вас серьезная процедура регистрации.
Александр, активировал Вашу учетную запись на форуме (Александ-р), так что можете задавать вопрос. Архив с темой можете выложить на любой файлообменник и дать ссылку на архив. Только выкладывайте тему с Вашими попытками подключить галерею, чтобы можно было посмотреть, в чем ошибка.