Добавление новых всплывающих подсказок в WordPress 3.3

В WordPress, в версии 3.3 появилась замечательная функция — всплывающие подсказки в админке. Конечно, это бесценный инструмент при работе с клиентами.

Несмотря на то, что интерфейс в WP и так интуитивно понятен, порой бывает весьма много вопросов.

Ну что же, ведь для этого и нужны подсказки, верно?

вcплывающая подсказка wordpress

Пример реально примитивен, искренне желаю, чтобы вам не попадались настолько тупые пользователи :)

Весь код, который вы встретите в этом посту надо вставлять в functions.php, находящийся в папке с активной темой.

Шаг 1. Подключение скриптов и стилей.

function turn_on_wp_pointer() {
	wp_enqueue_style('wp-pointer');
	wp_enqueue_script('wp-pointer');
}
add_action( 'admin_enqueue_scripts', 'turn_on_wp_pointer' );

Шаг 2. Добавление всплывающей подсказки.

<?php
function include_wp_pointer() {
	$position = 'left';
	/*
	 куда указывает стрелка
	 left - влево,
	 right - вправо,
	 top - вверх,
	 bottom - вниз
	*/
	$title = 'А это меню';
	// заголовок
	$content = 'С его помощью вы можете...';
	// основное сообщение
	$css_id = 'menu-links'; 
	// ID (CSS) элемента, к которому нужно прилепить подсказку
?>
<script type="text/javascript">
	//<![CDATA[
	jQuery(document).ready( function($) {
		$('#<?php echo $css_id ?>').pointer({
			content: '<?php echo '<h3>'.$title.'</h3><p>'.$content.'</p>' ?>',
			position: '<?php echo $position ?>',
			close: function() {
				// действие при закрытии
			}
		}).pointer('open');
	});
	//]]>
</script>
<?php
}
 
add_action('admin_print_footer_scripts','include_wp_pointer');

Вот только есть одно "но". Неважно, закрывали ли вы подсказку или нет, при каждом обновлении страницы она будет появляться снова.

Если вас это не смущает, можете дальше не читать, слабонервных тоже прошу удалиться.

А мы пока что создаем файл close.php и пихаем его в папку с темой. Чем его наполнить? Этим:

header("Content-Type: text/html; charset=\"utf-8\"");
 
if ( 'POST' != $_SERVER['REQUEST_METHOD'] ) {
	header('Allow: POST');
	header('HTTP/1.1 405 Method Not Allowed');
	header('Content-Type: text/plain');
	exit;
}
 
/** загружаем WordPress энвайремент */
require( dirname(__FILE__) . '../../../../wp-load.php' );
 
nocache_headers();
 
$id = $_POST['tip']; // типо ID всплыв. подсказки
if($id){
	update_user_meta(get_current_user_id(), 'deny_'.$id, '1');
	// 1 - закрыто, 0 - открыто
}

То есть неважно, сколько у вас будет всплывающих подсказок, файл-обработчик останется один и тот же — close.php, главное посылать в него соответствующие ID.

Теперь самое время доработать основную функцию:

<?php
function include_wp_pointer() {
	$position = 'left';
	$title = 'А это меню';
	$content = 'С его помощью вы можете...';
	$css_id = 'menu-links';
	$id = 1;  // ID всплыв. подсказки
?>
<script type="text/javascript">
	//<![CDATA[
	jQuery(document).ready( function($) {
		$('#<?php echo $css_id ?>').pointer({
			content: '<?php echo '<h3>'.$title.'</h3><p>'.$content.'</p>' ?>',
			position: '<?php echo $position ?>',
			close: function() {
				$.post( '<?php bloginfo('stylesheet_directory') ?>/close.php', {
					tip: '<?php echo $id ?>'
				});
			}
		}).pointer('open');
	});
	//]]>
</script>
<?php
}
 
$id = 1; // ID всплыв. подсказки
if(get_user_meta( get_current_user_id(), 'deny_'.$id, true ) != 1){
	add_action('admin_print_footer_scripts','include_wp_pointer');
}
Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
  • Миша: Привет ещё раз, не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее: во-первых,...

  • Миша: Привет, вообще без проблем, делаешь всё через require(), require_once() - выбирай любую, какая больше нравится.

  • Виталий Моргунов: Привет! Не могу разобаться, как я могу контролировать порядок подключения стилей. В моем случае мне нужно чтобы стили...

  • Миша: Спасибо!

  • w0rmak: Это было просто. Нашел код в интернете. Добавьте и себе ymaps.load(function () { var input = document.getElem...