Подключаем Thickbox на frontend в WordPress

Thickbox это jQuery плагин который используется для вывода модальных (popup) окон. Thickbox уже предустановлен в WordPress и по умолчанию используется в админ панели wordpress. Для того, чтобы подключить Thickbox в свою тему вам достаточно прописать несколько строк в файле functions.php вашей темы.

Подключение

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

Первым способом вы можете добавить подключение js файла и css стилей в произвольной место в вашей wordpress теме.

[cce lang=»php»]

//Подключаем thickbox.js после загрузки jquery
wp_enqueue_script(‘thickbox’, null, array(‘jquery’));
//Подключаем стили
wp_enqueue_style(‘thickbox.css’, ‘/’.WPINC.’/js/thickbox/thickbox.css’, null, ‘1.0’);
[/cce]

Для того, чтобы подключить thickbox через файл functions.php мы будем использовать хук WordPress init

[cce lang=»php»]
//Добавляем хук на 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’);
}
[/cce]

Как использовать?

Для того, чтобы вызвать модальное окно необходимо добавить class=”thickbox” к элементу.

[cce lang=»html»]

<a href=»image.png» class=”thickbox”>Показать картинку</a>

[/cce]

Последняя редакция 27 ноября, 2014 в 05:11