给WordPress日志标题提示信息添加jQuery效果

一般情况下,WordPress主题开发者都会在主题中为日志标题预设了“文本信息提示”功能,表现为:访问者将鼠标划过带链接的标题时就会出现一条”文本信息提示”。许多主题默认自带的这个提示功能都很简陋,如果您比较看重这个东东,我们可以为它加上一些jQuery的效果,结果看起来会更有吸引力,下面介绍实现的方法。

先看看添加了jQuery的标题信息提示效果:

title tooltip

以WordPress默认主题Twenty ten作为例子:

1.引入jQuery框架

首先,需要引入jQuery框架文件,打开主题中的header.php文件,找到:

wp_head();

在前面加上这一句:

wp_enqueue_script( 'jquery' );

2.添加生成提示信息的script

在同一文件header.php中,在</head>标签前面加上下面这段script:

<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>

3.CSS样式

最后,为信息提示条添加一些css样式(加到主题的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;
}

完工!

代码来源:dynamicwp

如无特别说明,本站文章皆为原创,若要转载,必须注明以下原文信息:
日志标题: 《给WordPress日志标题提示信息添加jQuery效果》
日志链接: http://www.chenchunlin.info/wordpress-post-title-jquery-tooltip.html
博客名称: Chenchunlinblog

This entry was posted in 应用技巧 and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

欢迎发表评论

我们不会公开您的邮箱地址, 标有*号的是必填项哦!

*
*

您可以使用这些HTML标签及其属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>