纯代码自动为WordPress网站生成文章目录,支持层级侧边栏显示

WordPress 网站的文章如果比较长,通过文章目录,可以方便用户阅读,对读者比较友好。而且锚点文章目录据说会被搜索引擎收录,对网站SEO有利。

为网站文章添加目录一般可以通过代码或者插件来实现,用插件的话就比较简单了,直接通过网站后台下载安装即可。常见的目录插件主要有Easy Table of Contents(简单的目录)、Table of Contents Plus 和 LuckyWP Table of Contents,如果想用国人开发的插件,可以试试WPJAM Basic。WPJAM Basic 插件是“我爱水煮鱼”开发的一款多功能合一的WordPress 全站优化插件,其中包含了文章目录功能。如果您嫌麻烦,小编推荐用这款插件。如果您只需要用目录功能,可以试试“我爱水煮鱼”早期提供的单独的目录插件——wpjam-toc。

wpjam-toc 下载

该插件大小只有8kb,可谓小巧强悍。

https://url26.ctfile.com/f/948726-515196904-501647(访问密码:7890)

注:如果您网站设置了外链自动在新标签打开,就不要使用wpjam-toc 了,那样点击目录会打开新标签(正常应该在当前页跳转至目录对应位置),WPJAM Basic 没有这个问题。

本站推荐使用Fixed TOC 目录插件:https://www.1itao.com/fixed-toc-table-of-contents.html 功能强大,简单易用,效果可看本站目录。

当然,如果您不喜使用过多的插件,下面我们来看看如何用纯代码来实现为WordPress 网站文章添加目录。

纯代码方法

php功能代码

此代码复制到当前主题的functions.php文件中即可。

// 文章目录
add_filter('the_content', 'my_contents_table');
function my_contents_table($content)
{
    $matches = array();
    $ul_li = '';
    $r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is'; // for SEO-friendly, contents table only identify <h2> ~ <h6>
    if (is_single() && preg_match_all($r, $content, $matches)) {
        $preValue = 2;
        $hStack = new SplStack();
        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 . '</h'. $value . '>', $content);

            // The following part implements the hierarchy of contents table
            if(!$hStack->isEmpty()){
                if($hStack->top() == $value){
                    $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                } elseif($hStack->top() < $value){
                    $ul_li .= "<ul>\n" . '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                    $hStack->push($value);
                } elseif($hStack->top() > $value){
                    while($hStack->top() > $value){
                        $ul_li .= "</ul>\n";
                        $hStack->pop();
                    }
                    $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                }
            } else{
                $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                $hStack->push($value);
            }
        }
        $content = "\n<div id=\"article-index\">
            <div id=\"article-index-title\"><strong>文章目录</strong></div>
            <hr id=\"article-index-hr\" />
            <div id=\"article-index-table\"><ul id=\"index-ul\">\n" . $ul_li . "</ul></div>
            </div>\n" . $content;
    }
    return $content;
}

css样式代码

此代码放入当前主题的默认.css文件中即可。

#article-index {
    float: right;
    width: 250px;
    line-height: 23px;
    margin: 0px 0px 20px 20px;
    border-radius: 5px;
    border: 2px solid rgb(36, 40, 45);
    padding: 0 0 6px 0;
}

#article-index #article-index-title {
    margin: 5px 0 0 0;
}

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

#article-index-hr {
    size: 1px;
    color: rgb(36, 40, 45);
    margin: 4px 20px;
}

#article-index-table {
    padding: 0 22px 0 20px;
}

#article-index ul {
    padding-left: 20px;
}

#article-index li {
    list-style-type: disc;
}

#index-ul {
    margin: 0;
}
#index-ul li {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
}
#index-ul a {
    color: rgb(36, 40, 45);
}
#index-ul a:hover {
    color: rgb(61, 138, 125);
}

到此就可以为文章添加文章目录功能了,如果您的主题设置支持自定义代码,上边的PHP代码和css代码也可以直接放到后台主题设置中,这样还省了升级主题后重新添加代码的麻烦~是不是也挺简单的呢?

不过此时目录显示位置为文章的右上角,且在modown主题中,不同层级的目录之间错位较厉害,看着不太舒服。如果想要文章目录在左侧边栏显示,并且调整一下不同层次标题之间的位置,就需要对css代码进行一些修改了,最终效果见下图:

自用css代码

适用于本站目前使用的Modown主题,其他主题未测试,可能仍需要进行适当修改。

/*目录效果*/
#article-index {
position:fixed;
left:5px;
width: 210px;
background-color:rgba(255,255,255,.55);
border-radius: 0 3px 3px 0;
box-shadow:0 0 2px #aaa
}


#article-index #article-index-title {
margin: 5px 0 0 0;
}

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

#article-index-hr {
size: 1px;
color: rgb(36, 40, 45);
margin: 4px 20px;
}

#article-index-table {
padding: 0 22px 0 20px;
}

#article-index ul {
// padding-left: 20px;
}

#article-index li {
list-style-type: disc;
}

#index-ul {
margin: 0;
}
#index-ul li {
background: none repeat scroll 0 0 transparent;
padding: 0;
}
#index-ul a {
color: rgb(36, 40, 45);
}
#index-ul a:hover {
color: rgb(61, 138, 125);
}

PS,文章目录调整到侧边栏后,在手机端会遮挡文章内容,因此我们还需要修改下PHP代码,在移动端不显示文章目录。

我们把上边的PHP代码的第一句

add_filter('the_content', 'my_contents_table');

改为

if ( !wp_is_mobile()){
add_filter('the_content', 'my_contents_table');
}

就可以了。

0

评论0

没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码