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

网络营销评论49

目录索引

我们百度百科的人可能都会注意到,几乎每篇文章的开头都会有一个目录,点击这个目录中的标题可以快速到达文章中的具体内容位置。这样可以方便读者在篇幅较长的文章中找到他们想看的内容,这个也就相当于词典中的索引功能了。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;}

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

添加悬浮效果

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

wrdpress文章目录索引添加悬浮效果此处内容已经被作者隐藏,请输入验证码查看内容请关注本站微信公众号,回复“微信验证码”,获取验证码。在微信里搜索“开水网络”或者“hacker-blog”或者微信扫描右侧二维码。
有问题留言!

 
【微信学习班】四班正式开始招生! 网络营销

【微信学习班】四班正式开始招生!

驭宝电商的微信群封闭式课程——干货满满的【微信学习班】,三班刚刚开始招募的第一天,40个名额就被“一抢而光”,瞬间爆满!驭宝【微信学习班】,以微信直播的形式进行讲解,一班、二班、三班都已经正式开课(每...
网站关键词优化的方法有哪些 网络营销

网站关键词优化的方法有哪些

  文章标题嵌入关键词法:  文章标题中需要嵌入相应的长尾关键词,长尾关键词是很重要的,它能直接戳中用户的需求,比如说关键词为“网站优化”的长尾关键词标题:  企业网站优化如何正确的选择服务公司;  ...
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: