使用纯代码给WordPress添加文章目录功能,支持快速定位和多级目录

主机教程评论150字数 2320阅读7分44秒阅读模式
wordpress是一款强大的博客系统,支持各种DIY,今天我就给大家带来使用纯代码给Wordpress添加文章目录的功能,使看文章更简单!并且支持点击目录标题快速定位到文章页面指定内容点。

一、文章目录代码

把以下代码添加到主题的Functions.php文件中文章源自国外主机测评-https://www.zjcp.org/14535.html

//主机测评-www.zhujizhen.com
//文章目录
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], ' . $value . ' id="title-' . $key . '">'.$title.'', $content);
$ul_li .= '
  • .$key.'" title="'.$title.'">'.$title."
  • /n"
    ; } $content = "/n
    文章目录
      /n" . $ul_li . "
    /n"
    . $content; } return $content; } add_filter( 'the_content', 'article_index' );

    二、CSS样式代码

    把以下代码添加到主题的“main.css”文件最底部中文章源自国外主机测评-https://www.zjcp.org/14535.html

    #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;
    }

     文章源自国外主机测评-https://www.zjcp.org/14535.html

    wordpress是一款强大的博客系统,支持各种DIY,今天我就给大家带来使用纯代码给Wordpress添加文章目录的功能,使看文章更简单!并且支持点击目录标题快速定位到文章页面指定内容点。文章源自国外主机测评-https://www.zjcp.org/14535.html

    一、文章目录代码

    把以下代码添加到主题的Functions.php文件中文章源自国外主机测评-https://www.zjcp.org/14535.html

    //主机测评-www.zhujizhen.com
    //文章目录
    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], ' . $value . ' id="title-' . $key . '">'.$title.'', $content);
    $ul_li .= '
  • .$key.'" title="'.$title.'">'.$title."
  • /n"
    ; } $content = "/n
    文章目录
      /n" . $ul_li . "
    /n"
    . $content; } return $content; } add_filter( 'the_content', 'article_index' );

    二、CSS样式代码

    把以下代码添加到主题的“main.css”文件最底部中文章源自国外主机测评-https://www.zjcp.org/14535.html

    #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;
    }

     文章源自国外主机测评-https://www.zjcp.org/14535.html

    文章源自国外主机测评-https://www.zjcp.org/14535.html文章源自国外主机测评-https://www.zjcp.org/14535.html
     
    • 本文由 主机测评 发表于 2021年9月14日00:00:00
    • 转载请务必保留本文链接:https://www.zjcp.org/14535.html

    发表评论