如何免插件实现WordPress文章目录功能?

除了一些大型网站外,很多长尾关键字排名比较好的网站,用户体验真的很不错。笔者也深知小型网站,特别是笔者之类的个人博客网站,想要长尾关键字排名的话确实很难,然而难并不代表做不到。文章质量高是一个方面,其实还可以通过很多方面获得长尾关键字排名,而文章目录就是笔者最近试验的目标。

文章目录的好处

去过百度百科的人可能都会注意到,几乎每篇文章的开头都会有一个目录,点击这个目录中的标题可以快速到达文章中的具体内容位置,如:seo。文章目录为文章设置了一个清晰的内容导航,读者可以在阅读之前知道这篇文章的大概意思,还能方便读者在篇幅较长的文章中找到他们想看的内容,点击即可直达他们想看的部分,而且可以增加些内链、锚文本和关键词,对SEO也是很有帮助的。

再来看看百度百科的文章目录代码,可以发现二级标题的H2,三级标题的H3,所以咱们平常在写博客的时候,就应该注意做到文章内容层次分明,比如:首页以及列表页面,网站标题是H1标签,文章标题是H2标签,而文章页面,则标题是 H1 标签,内文从 H2 标签开始试用。

其实文章目录功能还是比较简单的,也就是在文章内容中插进标题标签,然后弄成目录即可。下面是蛋蛋在露兜博客里面淘的经过自己修改后的文章目录实现功能代码,用dreamweaver打开当前主题目录下的functions.php,将以下代码放到 <?php …… ?>之间即可!

 function mulu($content) {
$matches = array();
$ul_li = ”;
$r = “/<h2>([^<]+)<\/h2>/im”;
if(preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $num => $title) {
$content = str_replace($matches[0][$num], ‘<h2 id=”title-‘.$num.'”>’.$title.'</h2>’, $content);
$ul_li .= ‘<li><a href=”#title-‘.$num.'” title=”‘.$title.'”>’.$title.”</a></li>\n”;
}
$content = “\n<div id=\”mulu\”>
<strong>文章目录</strong>
<ul id=\”index-ul\”>\n” . $ul_li . “</ul>
</div>\n” . $content;
}
return $content;
}
add_filter( “the_content”, “mulu” );

使用说明

  在编辑文章的时候,切换到HTML模式,将需要添加到目录中的标题用<h2>和</h2>括起来就可以了,如<h2>免插件实现文章目录功能</h2>。当然你也可以用其他标签,如<h3>,<h4>等,只需要将以上代码的h2改成你自己的标签名称就可以了。

添加好上面这段代码就会在文章中显示自己文章时的索引标题,并不会修改你的文章内容,但是并不包括样式美化代码,所以得添加css代码来美化一下这个目录,当然css你也可以根据自己的需要进行调整。将以下css代码放到主题目录下的style.css中即可:

#mulu {float:right;max-width:200px;margin:15px 0 10px 10px;padding:0 6px;line-height:20px;border:1px solid #DEDFE1;color:#12699A;-moz-border-radius: 6px 6px 6px 6px}
#mulu a {color:#436206;}
#mulu strong {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;}
#index-ul {margin:0;padding-bottom: 10px;}
#index-ul li {width:170px;list-style-type:disc;margin-left:25px;}

评论已关闭