WordPress欲思主题添加文章目录功能
如文章标题所说如何给wordpress 主题的文章内容添加导航目录?这个也是我最近在看自己写过的文章时,突发想要添加这么一个需求,主要是发现如果文章太长的话对于浏览者浏览文章时很费劲,尤其是特别长的文章,用户体验不好。有了这个导航功能就可以随时定位到我们想要看的内容,一步到位,让浏览者省时省力,相当于一个传送门。所以站在用户角度去想,有必要实现这一功能。而且,给文章添加文章目录功能,不仅使文章条理更清楚,还有利于 SEO。好了,废话少说,喜欢折腾代码的朋友一起和码云笔记前端博客来看一下如何实现 WordPress 主题文章导航功能吧。
先看一下效果:
一、通过插件的方式实现文章导航功能
接触 WordPress 的同学都知道,很多插件都可以满足我们一些日常项目需求,对于不想折腾代码以及不会代码的朋友,推荐下载插件:TOC和Content Index for WordPress插件不是本章的要点,这里不多说。如果想用插件,可以百度一下,或者后台插件里搜索安装使用。
二、纯代码实现
以下代码的源码是我在网上搜出来的,但是呢不能满足我们的需求,经过修改可以匹配 h2 和 h3 标签,只需要将下面代码加到主题的 functions.php 文件中最后一个”?>”前就可以了。
function article_index($content) { $matches = array(); $ul_li = ''; //匹配出 h2、h3 标题 $rh = "/<h[23]>(.*)<\/h[23]>/im"; $h2_num = 0; $h3_num = 0; //判断是否是文章页 if(is_single()){ if(preg_match_all($rh, $content, $matches)) { // 找到匹配的结果 foreach($matches[1] as $num => $title) { $hx = substr($matches[0][$num], 0, 3); //前缀,判断是 h2 还是 h3 $start = stripos($content, $matches[0][$num]); //匹配每个标题字符串的起始位置 $end = strlen($matches[0][$num]); //匹配每个标题字符串的结束位置 if($hx == "<h2"){ $h2_num += 1; //记录 h2 的序列,此效果请查看百度百科中的序号,如 1.1、1.2 中的第一位数 $h3_num = 0; // 文章标题添加 id,便于目录导航的点击定位 $content = substr_replace($content, '<h2 id="h2-'.$num.'">'.$title.'</h2>',$start,$end); $title = preg_replace('/<.+>/', "", $title); //将 h2 里面的 a 链接或者其他标签去除,留下文字 $ul_li .= '<li class="h2_nav"><a href="#h2-'.$num.'" class="tooltip" title="'.$title.'">'.$title."</a></li>\n"; }else if($hx == "<h3"){ $h3_num += 1; //记录 h3 的序列,此熬过请查看百度百科中的序号,如 1.1、1.2 中的第二位数 $content = substr_replace($content, '<h3 id="h3-'.$num.'">'.$title.'</h3>',$start,$end); $title = preg_replace('/<.+>/', "", $title); //将 h3 里面的 a 链接或者其他标签去除,留下文字 $ul_li .= '<li class="h3_nav"><a href="#h3-'.$num.'" class="tooltip" title="'.$title.'">'.$title."</a></li>\n"; } } } // 将目录拼接到文章 $content = $content . "<div class=\"post_nav\"><strong class=\"post_title\">文章目录</strong><ul class=\"post_nav_content\">\n" . $ul_li . "</ul></div>\n"; return $content; }elseif(is_home){ return $content; } } add_filter( "the_content", "article_index" );
然后就是需要在主题的 style.css 中填入以下 css 样式即可:
/*目录效果*/ .post_nav { position: fixed; top: 50%; right: 50%; z-index: 20; display: block; overflow: hidden; margin-top: -24px; margin-right: 620px; width: 164px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; border: 1px solid #DEDFE1; background: #fff } .post_title { width: 144px; border-bottom: 1px dashed #ddd; display: block; line-height: 30px; margin-left: 10px; } .post_nav .post_nav_side { position: absolute; top: 0; left: 5px; width: 0; min-height: 40px; border: 1px solid #eaeaea; border-top: 0; border-bottom: 0; background-color: #eaeaea } .post_nav .post_nav_content { position: relative; overflow: hidden; overflow-y: scroll; margin: 10px 0; padding-left: 10px; height: auto; max-height: 520px; list-style: none; text-indent: 0 } .post_nav .post_nav_content li { height: 22px; line-height: 22px } .post_nav_content li a.tooltip { opacity: 100!important } .post_nav .post_nav_content li a { display: inline-block; overflow: hidden; height: 22px; line-height: 25px; max-width: 146px; color: #333; vertical-align: top; text-decoration: none; -webkit-text-overflow: ellipsis } @media screen and (max-width:1440px) { .post_nav { margin-right: -240px; background: #f7f7f7 } }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » WordPress欲思主题添加文章目录功能
码云笔记 » WordPress欲思主题添加文章目录功能
非常精彩的文章,引人入胜,痛快淋漓。感谢楼主分享。
楼下是疯子。哈哈
你别闹了,哈哈