给你的WordPress文章添加目录

事情经过大概是这样的:我看的某大佬的目录样式非常的好看,于是借鉴大佬们的代码用PHP写了后端,然后扒js的时候发现大佬是用js完成的功能。。。然后代码就被我丢到这来了

先上函数:

//文章目录
function article_menu($content) {
    $matches = array();
    $ul_li = '';
    //匹配出h24标题
    $rh = "/<h[4]>(.*)<\/h[4]>/im";
    $h4_num = 0;
    //判断是否是文章页
    if(is_single()){
         if(preg_match_all($rh, $content, $matches)) {
            // 找到匹配的结果
            foreach($matches[1] as $num => $title) {
                $start = stripos($content, $matches[0][$num]);  //匹配每个标题字符串的起始位置
                $end = strlen($matches[0][$num]);       //匹配每个标题字符串的结束位置
                    $h4_num += 1; //记录h4的序列,此效果请查看百度百科中的序号,如1.1、1.2中的第一位数
                    // 文章标题添加id,便于目录导航的点击定位
                    $content = substr_replace($content, '<h4 id="'.$num.'">'.$title.'</h4>',$start,$end);
                    $title = preg_replace('/<.+>/', "", $title); //将h2里面的a链接或者其他标签去除,留下文字
                    $ul_li .= '<li name="'.$num.'" class=""><a href="#'.$num.'">'.$title."</a></li>\n";  
        
        // 将目录拼接到文章
        $content =  $content . "<div class=\"autoMenu\" id=\"autoMenu\" data-automenu=\"\" style=\"width: 240px;\"><ul style=\"height: auto; padding: 20px; display: block;\">\n" . $ul_li . "</ul></div>\n";
        }
		return $content;
    }else{
		return $content;
    }
}
}
add_filter( "the_content", "article_menu" );

然后是扒来的CSS:

.autoMenu {
    position: fixed;
    bottom: 17px;
    left: 17px;
    z-index: 99;
    text-align: left;
}

.autoMenu ul{
    line-height: 2;
    overflow-y: auto; 
    background: #fff;
    -webkit-box-shadow:0 0 10px #CCC;  
  -moz-box-shadow:0 0 10px #CCC;  
  box-shadow:0 0 10px #CCC;
      margin-bottom: 23px;
}

.autoMenu li {
    list-style: none;
}

.autoMenu ul>li.sub{
    padding-left: 20px;
}

.autoMenu ul>li>a{
    color: #399c9c;
}

水完了,溜了

weinxin
我的微信
这是我的微信,扫一扫加我好友
avatar

发表评论

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

目前评论:27   其中:访客  19   博主  8

    • avatar 夏天烤洋芋 2
      回复 2018年4月5日 上午9:16  沙发

      :???: 文章添加目录,是文章开头左边有个目录的那种?

        • avatar 狂放 博主
          回复 2018年4月6日 下午4:20  1层

          @夏天烤洋芋 大概就是小标题目录这样的吧,写作文不是会用到小标题嘛

        • avatar 西枫里博客 3
          回复 2018年4月6日 下午2:07  板凳

          月经博,一月一更,哈哈哈
          bug修好了?

          • avatar 懿古今 4
            回复 2018年4月6日 下午9:04  地板

            目前很多主题都喜欢带上这个文章目录功能,不过我个人倒是不喜欢,毕竟一篇文章本来就不长,完全没必要添加这个功能。

              • avatar 狂放 博主
                回复 2018年4月7日 上午12:01  1层

                @懿古今 流水文专用。。。这个收费主题带上比较好,开个开关省得用户抱怨

                • avatar 后宫学长 3
                  回复 2018年4月10日 上午5:03  1层

                  @懿古今 是啊,又不是专业文章,还要目录……

                • avatar 北迁 0
                  回复 2018年4月7日 下午3:28  4楼

                  偷偷地回归博客,没人看见我,没人看见我。

                    • avatar 狂放 博主
                      回复 2018年4月7日 下午3:44  1层

                      @北迁 PY PY,还没开发完成的Vmeng了解一下?

                    • avatar 里维斯社 1
                      回复 2018年4月9日 下午2:03  5楼

                      不明所以,哈哈 :mrgreen:

                      • avatar 夏日博客 1
                        回复 2018年4月9日 下午4:36  6楼

                        wp目录结构是一个很实用的功能。

                        • avatar 憧憬点滴记忆 1
                          回复 2018年4月15日 下午5:11  7楼

                          可以可以

                          • avatar 顾雅 0
                            回复 2018年4月18日 下午10:56  8楼

                            学习啦。。。http://www.mengxiao7.com/

                            • avatar 夏天烤洋芋 2
                              回复 2018年4月19日 上午8:44  9楼

                              :idea: 懒得要命啊。

                              • avatar 夏日博客 1
                                回复 2018年4月26日 下午4:46  10楼

                                wp目录浏览是很适用的功能。

                                • avatar sandy@mimvp.com 1
                                  回复 2018年4月27日 上午7:38  11楼

                                  加个效果图 效果会更好

                                  • avatar 张天 0
                                    回复 2018年5月5日 下午5:23  12楼

                                    我的网站域名:www.yuedutop.cn 希望与您友情链接

                                    • avatar iqos电子烟 0
                                      回复 2018年5月5日 下午11:39  13楼

                                      学习了 不过我的博客不是wordpress

                                      • avatar 葛一速 0
                                        回复 2018年5月8日 下午9:20  14楼

                                        主题在于折腾,越折腾懂得越多

                                        • avatar 倚竹聽雨 2
                                          回复 2018年5月8日 下午11:38  15楼

                                          :???: 大水比。

                                          • avatar 广州网站建设 1
                                            回复 2018年5月11日 上午10:23  16楼

                                            不喜欢带有目录

                                            • avatar 一艘大轮船 0
                                              回复 2018年5月12日 上午9:54  17楼

                                              来了好几次我才懂了这是啥意思!原来是文章里边的标题啊!