Собственный шорткод хорош, но не великолепен . В этом кратком совете мы собираемся украсить его с помощью jQuery.
Шорткод не велик. Вы не можете отключить CSS по умолчанию, вы не можете добавлять или редактировать классы CSS, вы не можете редактировать атрибуты по умолчанию (что на самом деле является общей проблемой шорткода) … Хотя этот материал не беспокоит большинство Разработчики WordPress, такие чудаки, как я, могут пожаловаться! 🙂
В этом кратком совете мы избавимся от страниц с вложениями изображений и позволим посетителям наших сайтов перемещаться по изображениям в модальном окне jQuery.
Один из лучших плагинов jQuery Lightbox: ColorBox
Colorbox — это мой любимый плагин jQuery для лайтбокса, с объемом менее 5 КБ (gzipped) и широким спектром поддержки браузеров (включая даже IE6).
Как вы можете видеть на странице плагина , он имеет множество настроек, методов и хуков, поэтому вы можете настроить его так, как вам удобно. Он также имеет 5 аккуратных тем на основе CSS.
Загрузите пакет и извлеките colorbox.min.js и одну из 5 тем (файл colorbox.css и папку «images») в папку «colorbox» и загрузите эту папку в свою тему WordPress. Добавьте следующий код в конец файла colorbox.min.js перед загрузкой:
|
1
2
3
|
jQuery(document).ready(function($) {
$(«.gallery-icon a»).colorbox({rel:»gallery»});
});
|
Шорткод-Ception: создание шорткода, который использует другой шорткод
Я знаю, что это будет немного странно, но, похоже, это самый чистый способ. Мы собираемся создать [jgallery] .
Подсказка в быстрой подсказке: если вы планируете изменить все шорткоды галереи в своих сообщениях после создания
[jgallery], я рекомендую использовать плагин Search Regex для поиска / заменына[jgallery].
Как всегда, мы начнем с создания базовой функции шорткода:
|
1
2
3
4
|
function jgallery_sc() {
// No parameters?
}
add_shortcode(‘jgallery’,’jgallery_sc’);
|
Далее мы поставим в очередь файлы CSS и JS. Не забывайте, что jQuery будет поставлен в очередь автоматически (если это еще не сделано), указав, что скрипт Colorbox зависит от него.
|
1
2
3
4
5
6
7
|
function jgallery_sc() {
// Enqueue colorbox.min.js (and jQuery if it is not already loaded)
wp_enqueue_script(‘colorbox-js’, get_template_directory_uri().’/colorbox/colorbox.min.js’,array(‘jquery’));
// Enqueue colorbox.css
wp_enqueue_style(‘colorbox-css’, get_template_directory_uri().’/colorbox/colorbox.css’);
}
add_shortcode(‘jgallery’,’jgallery_sc’);
|
Все готово, за исключением того, что нам нужно использовать шорткод внутри этой функции. Мы будем использовать do_shortcode() и вернем do_shortcode() :
|
1
2
3
4
5
6
|
function jgallery_sc() {
wp_enqueue_script(‘colorbox-js’, get_template_directory_uri().’/colorbox/colorbox.min.js’,array(‘jquery’));
wp_enqueue_style(‘colorbox-css’, get_template_directory_uri().’/colorbox/colorbox.css’);
return do_shortcode(‘‘);
}
add_shortcode(‘jgallery’,’jgallery_sc’);
|
Все сделано! После добавления этой функции в файл functions.php вашей темы вы можете сразу начать использовать [jgallery] . Дайте нам знать, что вы думаете в комментариях ниже. Наслаждайтесь! 🙂