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

24 Декабря 2013 2642 , , ,

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>

Подписывайтесь на обновления

Читайте RSS ленту

Комментарии

  • Олеся ответить
    13.11.2014 в 06:36

    Просто огромное спасибо! Все понятно и просто. Сразу получилось!

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