远方的海
远方的海,WordPress,免费
2015 Sep 03 18 : 18

非插件版代码实现WordPress文章索引目录

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

WordPress使用文章内索引目录不但可以增加文章内部的锚链接,让文章结构清晰,也方便用户快速流量检索到自己希望的内容。本文分享:非插件实现WordPress的文章目录索引。

索引目录代码

我们的文章索引目录是这个样子的!如下,是不是很清爽简洁?

非插件版代码实现WordPress文章索引目录

调用方法,把以下代码放入WordPress当前主题的functions.php中,然后在撰写文章的时候,使用h3标题结构,就可以自动把h3标题做成索引放在文章中了。

//文章内索引
function article_index($content) {
 $matches = array();
 $ul_li = '';
 $r = "/<h3>([^<]+)<\/h3>/im";
 if(preg_match_all($r,$content,$matches)) {
 foreach($matches[1] as $num => $title) {
 $content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content);
 $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
 }
 $content = "\n<div id=\"article-index\">
 <b>[文章目录]</b>
 <ul id=\"index-ul\">\n" . $ul_li . "</ul>
 </div>\n" . $content;
 }
 return $content;
}
add_filter( "the_content", "article_index" );

代码改进

只出现在文章和页面中

有个小问题呢,就是这个文章索引会跑到首页的文章里,搞的文章内容不知所云了,所以我们加个判断,让这个WordPress目录索引只出现在文章和独立页面中。找到代码的这行:

 if(preg_match_all($r,$content,$matches)) {

把它改成:

 if(preg_match_all($r,$content,$matches)&&is_single()||is_page()) {

这样目录就只会出现在文章中啦。

css样式美化

给出本站的css样式,其实也可以审查元素扒下来的,把它放在当前wordpress主题的style.css中即可:

好了,到这里,一个wordpress文章目录索引就做好啦!非插件,清爽,干净,快试试效果吧!

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress

您可能也会喜欢

发表回复

Post Comment


  1. helsinglee :

    这是ludou那里的吗?

    2016-4-15
    • sven水神 :

      @helsinglee 很多代码也是我从别处找来的,ludou那篇其实有看过这个文章,之前评论因bug清空了一次,不然你会看见楼下有ludou的评论~

      2016-4-15
    • sven水神 :

      @helsinglee 呃,ludou的评论还在,你往下看。

      2016-4-15
  2. ScottJu :

    代码成功了,就是css没生效。0.0 对css真是醉了。

    2015-10-24
  3. 助推博客 :

    搞不了,按照教程加了,我使用的秀主题,没有预期的效果,也懒得找原因

    2015-9-14
    • Sven水神 :

      看了一下应该是没有问题的。前面露兜的博客也成功了。

      2015-9-14
  4. 陌小雨博客 :

    功能倒是很早就接触了,不过你这个css我喜欢,还可以把他通过jquery插件让他当滚动条下滑的时候,自动跟随呀

    2015-9-13
    • Sven水神 :

      我有想过跟随,后来觉得可能会挡住文字,而且我的文章也不像百度百科那样多的目录层次,所以就没有弄啦。

      2015-9-13
  5. 灰常记忆 :

    只要收录,懒得搞其他的了!

    2015-9-6
    • Sven水神 :

      不过清晰的文章结构有利于seo排名的。

      2015-9-6
  6. 露兜 :

    不错不错,已经用上了。

    2015-9-4
    • Sven水神 :

      这不是露兜大大吗!你的博客我关注很久了。

      2015-9-4
  7. Timle.CN :

    你这折腾网站的速度,实在是赞呀,最近有点忙,我都没怎么折腾我的那个站了。

    2015-9-4
    • Sven水神 :

      我最近也忙,一天8个小时泡在实验室,不过是太喜欢搞网站了。

      2015-9-4
  8. 老杨 :

    得跟随才更实用……

    2015-9-4
    • Sven水神 :

      知更鸟的那种吗?我觉得遮挡了另外一些另外的widget就没做。不过可以试试加上。

      2015-9-4
      • 老杨 :

        @Sven 不一定得像他的一样,可以在文章内容内浮动,这样无论看到哪里都可以看到目录。

        2015-9-4
        • Sven水神 :

          @老杨 其实那个和回到顶部的小剪头的原理一样,到一定高度的时候出现,然后fix在那里。

          2015-9-4
  9. 助推博客 :

    不错,非常好,清爽简单,马上装上,,,谢谢谢谢谢谢

    2015-9-3