wordpress 免插件文章目录
文章目录是 WordPress 文章的必要组成部分，尤其是带有许多标题的长文章。创建目录有助于读者轻松快速地遵循和掌握想法。此外，它还可以帮助您在文章中添加更多关键字，这对 SEO 非常有利。现在wordpress已经很成熟，文章目录的插件也到处都是，就不再多说了。今天分享二个免插件文章目录的代码。
使用方法
是利用h标签，将需要作为目录的标题包裹起来。一般都是h2~h6标题。
例如：
1 2 3 4 5 | <h2>一级标题</h2> <h3>二级标题</h3> <h4>三级标题</h4> <h5>四级标题</h5> ... |
第一种代码
1、下面的代码扔function.php里。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //文章目录 function article_index($content) { $matches = array(); $ul_li = ''; $r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is'; if(is_single() && preg_match_all($r, $content, $matches)) { foreach($matches[1] as $key => $value) { $title = trim(strip_tags($matches[2][$key])); $content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '">'.$title.'</h2>', $content); $ul_li .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li>\n"; } $content = "\n<div id="article-index"> <strong>文章目录</strong> <ul id="index-ul">\n" . $ul_li . "</ul> </div>\n" . $content; } return $content; } add_filter( 'the_content', 'article_index' ); |
2、CSS样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | /* 文章目录 */ #article-index { -moz-border-radius: 6px 6px 6px 6px; border: 1px solid #DEDFE1; float: right; margin: 0 0 15px 15px; padding: 0 6px; width: 300px; line-height: 23px; } #article-index strong { border-bottom: 1px dashed #DDDDDD; display: block; line-height: 30px; padding: 0 4px; } #index-ul { margin: 0; padding-bottom: 10px; } #index-ul li { background: none repeat scroll 0 0 transparent; list-style-type: disc; padding: 0; margin-left: 20px; } #index-ul a { color: #4c4c4c; } #index-ul a:hover { color: #009cee; } |
第二种代码
1、与上一个相同，将代码扔到function.php里
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | //文章目录 function wpkj_create_toc($html) { $toc = ''; if (is_single()) { if (!$html) return $html; $dom = new DOMDocument(); libxml_use_internal_errors(true); $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8')); libxml_clear_errors(); $toc = '<div class="toc-bound"> <div class="toc-ctr"> 文章目录 </div> <ul class="toc">'; $h2_status = 0; $h3_status = 0; $i = 1; foreach($dom->getElementsByTagName('*') as $element) { if($element->tagName == 'h2') { if($h3_status){ $toc .= '</ul>'; $h3_status = 0; } if($h2_status){ $toc .= '</li>'; $h2_status = 0; } $h2_status = 1; $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a>'; $element->setAttribute('id', 'toc-' . $i); $i++; }elseif($element->tagName == 'h3') { if(!$h3_status){ $toc .= '<ul class="toc-sub">'; $h3_status = 1; } $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a></li>'; $element->setAttribute('id', 'toc-' . $i); $i++; } } if($h3_status){ $toc .= '</ul>'; } if($h2_status){ $toc .= '</li>'; } $toc .= '</ul></div>'; $html = $dom->saveHTML(); } return $toc . $html; } add_filter('the_content', 'wpkj_create_toc'); |
2、CSS样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | /* 文章目录 */ .toc-bound { background-color: #619162; color: #fff; } .toc-ctr { border-bottom: 1px solid #fff; padding: 10px; font-size: 16px; text-transform: uppercase; } ul.toc { list-style-type: none; padding: 10px; padding-left: 25px; } .toc li a { color: #fff; } ul.toc > li { font-size: 14px; font-weight: 700; padding: 5px 0; } ul.toc-sub { list-style-type: none; padding-left:10px; } ul.toc-sub li a { font-weight: 200; } |
结语
代码的方法，对于有代码基础的人来说，会更利于根据自己需求定制。插件的方法更简单方便。实现的原理都是一样的。
