使用纯代码给wordpress添加文章目录功能,支持快速定位和多级目录-凯发网娱乐官网

微信扫一扫,分享到朋友圈

0

wordpress是一款强大的博客系统,支持各种diy,今天我就给大家带来使用纯代码给wordpress添加文章目录的功能,使看文章更简单!并且支持点击目录标题快速定位到文章页面指定内容点。

一、文章目录代码

把以下代码添加到主题的functions.php文件中

//陌涛的记事本 www.imotao.com
//文章目录
function article_index($content) {
$matches = array();
$ul_li = '';
$r = '/(.*?)<\/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], ''.$title.'', $content);
$ul_li .= '
  • '.$title."
  • \n"; } $content = "\n
    文章目录
      \n" . $ul_li . "
    \n" . $content; } return $content; } add_filter( 'the_content', 'article_index' );

    二、css样式代码

    把以下代码添加到主题的“main.css”文件最底部中

    #article-index {
    -moz-border-radius: 6px 6px 6px 6px;
    border: 1px solid #dedfe1;
    float: right;
    margin: 0 0 15px 15px;
    padding: 0 6px;
    width: 200px;
    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;
    }
    

     

    展开阅读全文

    微信扫一扫,分享到朋友圈

    0
    这个博主很懒,懒死了。
    上一篇

    wordpress建站教程,美化/自定义浏览器侧边滚动栏

    下一篇

    wordpress教程之通过robots协议屏蔽搜索引擎抓取网站部分内容

    你也可能喜欢

    发表评论

    this site uses akismet to reduce spam. .

    插入图片