怎样给wordpress文章内容添加目录导航?

如何给wordpress文章内容添加导航目录?这个功能的实现,对于浏览者在浏览网站文章时大大的方便,尤其是特别的长的长篇文章,可以提升用户体验。

在折腾表白驿站的时候我是用插件实现这个功能的,大家都知道,使用插件会拖慢网站速度,所以能用代码实现的都尽量不要用插件,今天就给大家分享给wordpress文章内容添加目录导航的两个方法!

方法one~通过插件

这方面的插件也不少,如 Content Index for WordPress插件。插件不是本章的要点,这里不多说。如果想用插件,可以百度一下,或者后台插件里搜索安装使用。

方法two~纯代码实现

首先将以下代码放到主题的functions.php文件中,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//文章目录
function article_index($content) {
$matches = array();
$ul_li = '';
$r = "/<h4>([^<]+)<\/h4>/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=\"article-index\">
 
<b>[文章目录]</b>
<ul id=\"index-ul\">\n" . $ul_li . "</ul>
</div>\n" . $content;
}
 
return $content;
}
 
add_filter( "the_content", "article_index" );

下面是wordpress文章目录导航的CSS样式代码,把它放到你主题的style.css文件中:

1
2
3
4
5
6
/* 文章目录 */
#article-index { background:#CCCCCC; float: right; margin: 0 20px 10px 10px; padding: 6px; width: 150px; }
#article-index strong { border-bottom: 1px dashed #DDDDDD; display: block; line-height: 30px; padding: 0 4px;}
#index-ul { margin: 0; padding-bottom: 10px; margin-top:15px; }
#index-ul li { list-style-type: none; margin-bottom:10px; margin-left:0px; font-size:12px; line-height: 18px;}
#index-ul li a{ color:#3366CC;}

这样,我们就给这个主题添加了wordpress文章目录导航功能。这样我们在发表文章时,如果文章比较长,就可以使用这个功能。

目录使用方法

在我们发表文章时,选择文章中要作为目录导航的词语或语句,然后用<h4>标签把它括住,如下图:

Screenshot_2016-05-29-12-04-40_com.UCMobile_1464494825215

如上图,在选中作为目录的语句后,点击编辑器上的“段落”下拉框,然后选中“四级标题”,这表示以<h4>把选中的语句括起来了。当然,你也可以在代码模式下修改。

这样,文章发表成功后,就会在文章的右上角留下文章目录导航,如下图:Screenshot_2016-05-29-12-16-06_com.xtralogic.android.rdpclient.act

效果可以看本篇文章

这个样式,你可以修改上面的CSS代码,来达到自己的需求。

1 评论

发表一条评论:

电子邮件地址不会被公开。 必填项已用*标注