免插件实现WordPress文章增加阅读目录的方法

之前,在网上有看到推荐一个插件,在文章中,有很多标题,点击下就跳到文章底部相对应的内容。简单的来说,其实就是为文章增加阅读目录,方便查看条目,类似百度百科的目录。其实这种功能不需要增加什么插件,用代码就直接可以实现。

免插件实现WordPress文章增加阅读目录的方法
免插件实现WordPress文章增加阅读目录的方法

插件这里就不推荐了,自己去问度娘,我也没有用过这样的插件,不过,用代码给文章增加阅读目录的方法可以分享给大家。

1.把下面的代码复制加入 functions.php 里:

/* 为文章增加阅读目录 */
function read_list($content) {
$matches = array();
$ul_li = '';
$r = "/<h5>([^<]+)<\/h5>/im";
if(preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $num => $title) {
$content = str_replace($matches[0][$num], '<h4 id="title-'.$num.'">'.$title.'</h4>', $content);
$ul_li .= '<li><a href="#title-'.$num.'" rel="external nofollow" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-read-list\">
<strong>阅读目录</strong>
<ul id=\"read-list\">\n" . $ul_li . "</ul>
</div>\n" . $content;
}
return $content;
}
add_filter( "the_content", "read_list" );

2.当然,少不了需要增加样式(style.css),这个你可以根据需要定制:毕竟适合自己的才是最好的!

/*阅读目录样式*/
#article-read-list {
float:right;
width:160px;
height:auto;
border:solid 1px #c0c0c0;
overflow:hidden;
padding:10px;
}
#article-read-list #read-list {
width:120px;
height:auto;
margin:0 auto;
overflow:hidden;
}

3.文章中想要加入目录的标题用<h5>标签即可实现想要的结果(在文章编辑页面左上角段落处选择即可)。

古风网版权互动须知

请遵循相关法律法规,如有侵权、后门、不妥请联系本站删除!

原文地址:https://www.wzxiu.com/5296.html 免插件实现WordPress文章增加阅读目录的方法

发表评论