Как сделать необычные подсказки заголовков постов в WordPress

Обычно, те, кто делают темы для wordpress, устанавливают подсказки к заголовкам постов. Эти подсказки — ничто иное, как атрибут title. Подсказка появляется при наведении мыши на заголовок. В прошлом посте я рассказывал как написать свой jQuery плагин всплывающих подсказок. В этом расскажу о том как подключить подобный ему к своему блогу.

Итак, приступаем к делу.

Для примера буду использовать тему twenty ten, которая идет по умолчанию на wordpress версии старше 3.0. В частности, немного переделанная twenty ten стоит на этом сайте :) . И первое, что сделаем — подключим jquery к сайту.
Для этого в файл header.php добавляем следующий код:

wp_enqueue_script( 'jquery' );

перед:

wp_head();

Теперь добавляем код отображения подсказок в этот же файл перед :

<script type="text/javascript">
	function simple_tooltip(target_items, name){
	 jQuery(target_items).each(function(i){
			jQuery("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+jQuery(this).attr('title')+"</p></div>");
			var my_tooltip = jQuery("#"+name+i);
 
			if(jQuery(this).attr("title") != ""){ // checks if there is a title
 
			jQuery(this).removeAttr("title").mouseover(function(){
					my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(340);
			}).mousemove(function(kmouse){
					my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
			}).mouseout(function(){
					my_tooltip.fadeOut(200);
			});
 
			}
		});
	}
	jQuery(document).ready(function(){
		 simple_tooltip(".entry-title a","title-tooltip");
	});
</script>

И, напоследок, дописываем стили подсказки в style.css:

.title-tooltip{ position:absolute;  z-index:999; left:-9999px; background-color:#dedede; padding:3px; border:1px solid #fff; min-width: 200px;}
.title-tooltip p{  margin:0; padding:0; color:#fff; background-color:#222; padding:2px 7px;}

После таких несложных манипуляций мы получим нестандартные всплывающие подсказки на своем блоге :)

Запись опубликована в рубрике WordPress с метками , . Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">