Приветствие посетителя сайта на главной странице может положительно сказать на репутации веб проекта. Также можно выводить различные информационные сообщения или "ненавязчивую" рекламу.
Сначала нужно скачать плагин
ColorBox jQuery. Берем файл colorbox.min.js из папки “colorbox/colorbox” и colorbox.css (вместе с соответствующей папкой “images”) и размещаем их в папке “colorbox” в своем проекте.
Затем создаем файл colorbox.load.js, чтобы загрузить всплывающее информационное окно. Размещаем данный файл также в папке “colorbox”:
jQuery(document).ready(function($) {
var $popup = $("#mypopup");
$.colorbox({href:$popup});
});
После чего размещаем код HTML всплывающего окна (с идентификатором “mypopup” для CSS) внутри файла index.php вашей темы и скрываем его в файле style.css (с помощью кода “#mypopup {display:none;}“).
function front_popup() {
if(is_front_page()) {
// загрузить colorbox.min.js
wp_enqueue_script('colorbox-js', get_template_directory_uri().'/colorbox/colorbox.min.js',array('jquery'));
// загрузить colorbox.load.js
wp_enqueue_script('colorbox-load-js', get_template_directory_uri().'/colorbox/colorbox.load.js',array('colorbox-js'));
// загрузить colorbox.css
wp_enqueue_style('colorbox-css', get_template_directory_uri().'/colorbox/colorbox.css');
}
}
add_action('wp_head','front_popup');
Копируем данный код в файл functions.php!
Примечание: для того, чтобы закрыть всплывающее окно, нужно добавить ссылку в код всплывающего окна. Например, такую:
<a href="javascript:$.colorbox.close();">Закрыть</a>