wordpress博客中给文章加目录导航的方法

前言:

有时候大家去别人网站,比如百度百科,几乎每篇文章的开头都会有一个目录,点击这个目录中的标题可以快速到达文章中的具体内容位置,这就是一个锚点。这样做可以方便读者在篇幅较长的文章中找到他们想看的内容,这个也就相当于词典中的索引功能了。本文所介绍的插件实现的就是这样的一个功能,为文章设置了一个清晰的内容导航,读者可以在阅读之前知道这篇文章的大概意思,点击可以到达他们想看的部分,而且可以增加些内链、锚文本和关键词,对SEO也是很有帮助的。

一、单级目录代码实现方法

用sublime等文本编辑器打开你主题下的function.php文件,然后在其中加入一下函数功能:

function article_index($content) {
   $matches = array();
   $ul_li = '';

   $r = "/<h3>([^<]+)<\/h3>/im";

   if(is_singular() && preg_match_all($r, $content, $matches)) {
      foreach($matches[1] as $num => $title) {
         $title = trim(strip_tags($title));//strip_tags() 函数剥去 HTML、XML 以及 PHP 的标签,但并不能去除空格,所以要再用trim去除POST过来的的字符串两端可能存在的空格/空白。
         $content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content);
         $ul_li .= '<li><a href="#title-'.$num.'" 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' );

二、如何使用

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

上面这段代码只是在文章显示的时候插入文章目录,并不会修改你的文章内容。以上代码也不包括样式美化代码,所以只添加以上代码,文章目录看起来一篇混乱,所以你得自己添加一些css代码来美化一下这个目录。如果你不会css,可以参考下面的css,将以下css代码放到主题目录下的style.css中就可以了(当然以上php代码并不是每个网站都适用,这里只有wordpress网站适用):

/*文章目录索引 分享自 那樊笼:www.nafanlong.com*/
#article-index {
	-moz-border-radius: 6px;
	border: 2px solid #DEDFE1;
	margin: 0;
	padding: 0 6px;
	width:auto ;
	line-height: 18px;
	position: fixed;
	left: 70%;
	top: 150px;
	background-color: rgba(255,255,255,0.3);
	box-shadow: 10px 10px 5px #888888;
	border-radius: 6%;
	padding-bottom:8px;
}

#article-index strong {
	display: block;
	line-height: 30px;
	padding: 0 4px;
}

#index-ul {
	border: 1px dashed #DDDDDD;
	margin: 0;
	padding-bottom: 3px;
}

#index-ul li {
	background: none repeat scroll 0 0 transparent;
	list-style-type: disc;
	padding: 0;
	margin-left: 5px;
        margin-bottom:5px;
        margin-top:5px;
}

如下图

20160331092919

然后还有一个样式,在上面基础上加上了文章评论的索引:

function article_nav($content)
{
    $matches = array();
    $ul_li = '';
    $r = "/<h3>(.*?)<\/h3>/im";
    if (preg_match_all($r, $content, $matches)) {
        foreach ($matches[1] as $num => $title) {
            $content = str_replace($matches[0][$num], '<h3 id="article_nav_' . $num . '">' . $title . '</h3>', $content);
            $ul_li .= '<li><a href="#article_nav_' . $num . '" title="' . $title . '">' . $title . "</a></li>";
        }
        if (is_singular()) {
            $content = '<div id="fn_article_nav"><div id="article_nav_title">Article Nav</div><ul>'
                . $ul_li . '<li><a href="#respond">发表评论</a></li></ul></div>' . $content;
        }
    }
    return $content;
}
add_filter("the_content", "article_nav");

css样式如下:

/*文章目录索引 分享自 那樊笼:www.nafanlong.com*/
#article-index {
	-moz-border-radius: 6px;
	border: 1px solid #DEDFE1;
	margin: 0;
	padding: 0 6px;
	width: 200px;
	line-height: 23px;
	position: fixed;
	right: 19%;
	top: 150px;
	background-color: rgba(255,255,255,0.4);
	box-shadow: 10px 10px 5px #888888;
	border-radius: 8%;
	padding-bottom: 10px;
}

#article-index strong {
	display: block;
	line-height: 30px;
	padding: 0 4px;
}

#index-ul {
	border: 1px dashed #DDDDDD;
	margin: 0;
	padding-bottom: 5px;
}

#index-ul li {
	background: none repeat scroll 0 0 transparent;
	list-style-type: disc;
	padding: 0;
	margin-left: 5px;
}

如下图:

QQ图片20160331160758

三、多级目录

关于这个多级目录,我提供的代码不完善,它只是比之前的代码多匹配了除h3以外的标签而已,所以会出现一些显示问题,比如目录中一级目录和二级目录的字体大小和序号都一样,这样显得调理不清楚。不过如果你在编辑文章的时候就设置好的话,这个方法勉强可以用。

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>
<ol id=\"index-ul\">\n" . $ul_li . "</ol>
</div>\n" . $content;
}

return $content;
}

add_filter( 'the_content', 'article_index' );

四、插件实现

当然插件实现很稳妥,可以实现多级目录,比如Sitemap Generator、Content Index for WordPress、jQuery Table of Contents 、WP-TOC(激活该插件后,在文章中插入[toc depth="2"]即可,2表示h2、h3、h4…等都会被插进目录,类推[toc depth="3"]则表示h3、h4…等都会被插进目录)等,感兴趣的可以百度查一下相关操作。

LEAVE A REPLY
loading
正在赶回来……