三微知识网移动版
三微知识网 > 教育学习 > 网站运营 >

WordPress 正文链接添加tooltips 教程

  WordPress 正文链接添加tooltips 教程

  什么都先别说,因为这个名字又是鄙人杜撰的,先看看是什么东西吧。把鼠标放上来试试:泡泡提示。

WordPress 正文链接添加tooltips 教程 三微文章网教程

  哈哈,是不是很讨人喜欢~嗯,首先讲讲这个功能有什么用处吧。就我而言,我经常在写博客的时候要引出一些新术语,而这些新术语专门用一段话描述又觉得冗长,不描述又有些突兀,所以这个泡泡提示功能就很派对上用场了。除了添加注释外,此功能对一切超链接都具有解释功能哦~但我个人认为全屏是“泡泡提示”也显得过于花哨了,所以我只在正文里添置提示功能。

  当然这个功能不是我原创的,是因为刚刚我浏览一个讨论CSS和HTML5绚丽效果的网站,上面就有个“泡泡”特效,我就把它搬到了WordPress中,也算一点小贡献~大家喜欢可以一起玩。

一:原理

  当我们把鼠标移到一个超链接的时候,不知道你有没有注意到,会在鼠标边上会有一些注释,不信你可以把鼠标放在我博客的侧边栏下面有个彩色的标签,随便把鼠标放到其中一个标签上,是不是像我说的那样呢?其实我们的工作原理很简单,相当于给这些本来没有修饰的提示信息添加上绚丽的效果。如果你想定制个性些的提示样式,你需要懂一点JS,JQuery以及CSS,当然如果你也可以直接下载我提供的所有源码,效果就和我一模一样了。

二:CSS和JS文件

  这里是CSS和JS文件。按照惯例,博主不会只给个源码,大致讲下代码的原理呗。

  其中CSS自不必说,因为都是一些样式信息,主要看个人设计;而JS文件呢,简单的来说就是为你指定的所有带title属性的标签提供一个隐藏泡泡,当鼠标放到该超链接上时,把该隐藏的泡泡弹出来,原作者在写JS代码的时候有点Bug,因为他用了页面元素的相对位置,当你的页面比较复杂时,几乎难以定位,所以我把它们全部改成了绝对定位~我测试了一下,没发现问题。还有一个是显示层次问题,原作者也没有考虑到,可见高手也会百密一疏,我也修正了一下。

  把这两个文件放到你的主题目录下,如果你是个小白,我建议你放在主题目录的JS和CSS文件目录下,没有就新建一个。

三:修改Header.php文件

  最后我们只需要修改Header.php文件即可。在该文件的前添加如下代码:

/*包含CSS文件,可以是绝对地址也可以相对位置*/  
<link rel="stylesheet" href="css/tooltips.css">  
  
/*包含JQuery库,其实你可以看看你的Header文件中是否已经包含它,不必包含两次*/  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>  
  
/*同CSS*/  
<script type="text/javascript" src="js/tooltips.js"></script>  
  
/*值得注意的.entry-content这个值,这个函数的意思是让该类下的所有a标签都具有泡泡提示功能;如果你想让整个网站都具有泡泡,则改.entry-content为#page就可*/  
<script>  
    $(function() {  
        $(".entry-content a[title]").tooltips();  
    });  
</script>  

四:搞定,试一试

  那哪些文字才会有提示功能呢?最简单就是超链接,如果你不想把提示文字变成超链接,你可以删掉下划线然后把链接地址变为空即可,如下所示:

<a href="#" title="空地址且无下划线" style="text-decoration:none" >场景一</a>  
<a href="http://www.ccpt.cc" title="普通链接" >场景二</a>  

  好了,如果一切操作没有错误的话,享受这个效果吧~


相关话题word使用技巧大全   wordpress教程