Подключаем Thickbox на frontend в WordPress
Thickbox это jQuery плагин который используется для вывода модальных (popup) окон. Thickbox уже предустановлен в WordPress и по умолчанию используется в админ панели wordpress. Для того, чтобы подключить Thickbox в свою тему вам достаточно прописать несколько строк в файле functions.php вашей темы.
Подключение
Для того, чтобы использовать Thickbox на вашем сайте должен быть установлен jQuery т.к. он используется по умолчанию в WordPress с этим пунктом я думаю у вас не возникнет проблем.
Первым способом вы можете добавить подключение js файла и css стилей в произвольной место в вашей wordpress теме.
1 2 3 4 | //Подключаем thickbox.js после загрузки jquery wp_enqueue_script('thickbox', null, array('jquery')); //Подключаем стили wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0'); |
Для того, чтобы подключить thickbox через файл functions.php мы будем использовать хук WordPress init
1 2 3 4 5 6 7 8 9 | //Добавляем хук на init add_action('init', 'add_thickbox'); //наша функция подключения thicbox function add_thickbox() { //Подключаем thickbox.js после загрузки jquery wp_enqueue_script('thickbox', null, array('jquery')); //Подключаем стили wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0'); } |
Как использовать?
Для того, чтобы вызвать модальное окно необходимо добавить class=”thickbox” к элементу.
1 | <a href="image.png" class=”thickbox”>Показать картинку</a> |
Комментарии
13.11.2014 в 06:36
Просто огромное спасибо! Все понятно и просто. Сразу получилось!