网站内容添加(奶爸在网站文章内容添加目录插件中的应用方法)

　　网站内容添加(奶爸在网站文章内容添加目录插件中的应用方法)

　　老爸在网站文章的内容中添加目录的时候，测试了很多目录插件，最后留下了下面两个感觉很好的。

　　

　　下面两个目录插件很有用，大家可以测试一下。

　　LuckyWP 目录

　　这是爸爸建站笔记目前使用的目录插件。效果可以直接参考本文的目录效果。

　　LuckyWP 目录具有丰富的设置功能，可以自定义显示样式、显示位置等。

　　选择他的一个原因是默认效果更符合本站的主题，另一个原因是他的目录链接是默认使用的拼音。

　　看着更舒服吗？

　　下载链接

　　简单的目录

　　Easy Table of Contents 也是一个非常有用的 WP文章 目录插件。功能设置比上面的LuckyWP目录少了一点，但是用的人很多。

　　下载链接

　　更新：如果你想要一个浮动的文章目录插件，你可以考虑Fixed TOC

　　目录加

　　第一个LuckyWP目录很久没有更新，存在兼容性问题。现在用的是这个。

　　下载链接

　　实现文章目录方法的代码

　　如果不想使用插件，也可以直接使用代码实现文章显示目录的功能，自动实现，无需额外操作。

　　

　　上图是老爸网站笔记之前使用的代码版本文章目录的效果。

　　实现方法如下：

　　//文章目录

function article_index($content) {

$matches = array();

$ul_li = '';

$r = '/(.*?)/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], ''.$title.'', $content);

$ul_li .= ''.$title."\n";

}

$content = "\n

文章目录

\n" . $ul_li . "

\n" . $content;

}

return $content;

}

add_filter( 'the_content', 'article_index' );

@media screen and (max-width:600px) {

#article-index {

width: 100% !important;

}

}

　　复制上面的代码，插入到主题函数文件中。如果没有，建议使用以下插件来帮助您。

　　 /* 文章目录 */

#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: #4*敏*感*词**敏*感*词*c;

}

#index-ul a:hover {

color: #009cee;

}

　　将上述css代码插入到网站主题的样式表中。如果无法插入，可以使用以下方法。

　　如何让文章显示目录？

　　用上面的插件或者代码添加到网站后，发现文章还是没有目录显示？

　　那么应该是你发送了文章 没有设置标题的样式。

　　

　　请注意不要在文章的内容中使用一级标题，这对SEO不利。设置H2、H3基本就够了，会根据标题级别自动显示目录层次。

　　4.2/5-(10 票)