wrdpress文章目录索引添加悬浮效果

目录索引

我们百度百科的人可能都会注意到，几乎每篇文章的开头都会有一个目录，点击这个目录中的标题可以快速到达文章中的具体内容位置。这样可以方便读者在篇幅较长的文章中找到他们想看的内容，这个也就相当于词典中的索引功能了。wrdpress也是可以轻松实现文章目录索引，并且添加悬浮效果。

本文所介绍的代码实现的就是这样的一个功能，为文章设置了一个清晰的内容导航，读者可以在阅读之前知道这篇文章的大概意思，点击可以到达他们想看的部分，而且可以增加些内链、锚文本和关键词。同时还很炫酷哦!

修改functions

文章目录免插件的简单实现方法其实现这样的一个功能还是比较简单的，也就是在文章内容中插进标题标签，然后弄成目录就是了，下面是我写的一个简单的代码，用文本编辑器打开当前主题目录下的functions.php，将以下代码放到 <?php 下面就可以（记得用UTF-8编码保存，否则中文会乱码）:

/*
 * WordPress 添加文章索引目录功能 
 * http://www.hekaiyu.cn/share/3753.html
 */
function article_index($content) {
   $matches = array();
   $ul_li = '';
   $r = "/<cite>([^<]+)<\/cite>/im";

   if(preg_match_all($r, $content, $matches)) {
       foreach($matches[1] as $num => $title) {
           $content = str_replace($matches[0][$num], '<cite id="title-'.$num.'">'.$title.'</cite>', $content);
           $ul_li .= '<li><a href="#title-'.$num.'" title="跳转段落至 - '.$title.'">'.$title."</a></li>\n";
       }
       if(is_single()){$content = "\n<div id=\"article-index\">
               <p class=\"title_lt\"><a href=\"javascript:void(0)\" class=\"gotop\" onclick=\"goRoll(0,300)\">BACK TOP</a>文章索引</p>
               <ul id=\"index-ul\">\n" . $ul_li . "<li><a href=\"#comments\" title=\"查看本文评论\">共".get_post($id)->comment_count."条评论</a></li></ul>
           </div>\n" . $content;}
   }
   return $content;
}
add_filter( "the_content", "article_index" );

/**
 * 增加文章编辑器按钮 
 * http://www.hekaiyu.cn
 */
function appthemes_add_quicktags() {
?> 
<script type="text/javascript"> 
QTags.addButton( '添加索引', '添加索引', '<cite>', '</cite>' ); //快捷输入h3标签 
QTags.addButton( '文章分页', '文章分页', '<!--nextpage-->', '' ); //快捷输入h3标签 
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

现在目录已经出来了，不信你看。还没完，继续调整美化。

添加css

#article-index {
float:right;
width:200px;
background:#00BCF2;
padding:5px;
}
#article-index .title_lt {
border-bottom:1px dotted #fff;
color:#fff;
padding:0 5px;
margin:0
}
#article-index #index-ul {
color:#fff;
}
#article-index #index-ul li {
color:#fff;
padding-left:5px;
font-size:14px;
line-height:20px;
}
#article-index #index-ul li a {
color:#fff;
text-decoration:none;
}
#article-index #index-ul li a:hover {
text-decoration:underline
}
#article-index .gotop {
font-size:12px;
text-decoration:none;
color:#fff;
float:right;
}

这样就好看多了，继续添加悬浮效果。

添加悬浮效果

添加悬浮效果就需要用到以下代码：

此处内容已经被作者隐藏，请输入验证码查看内容

验证码：

请关注本站微信公众号，回复“微信验证码”，获取验证码。在微信里搜索“开水网络”或者“hacker-blog”或者微信扫描右侧二维码。