给B2 Pro主题文章创建内容目录

2022-05-03 0 1,213

PS

文章目录是 WordPress 文章的必要组成部分,尤其是带有许多标题的长文章。创建目录有助于读者轻松快速地遵循和掌握想法。此外,它还可以帮助您在文章中添加更多关键字,这对 SEO 非常有利。

创建文章目录的方法

给B2 Pro主题文章创建内容目录

有两种方法可以在 WordPress 文章中创建目录。

第一种方法是使用插件。这对 WordPress 的代码专家和新手来说都是简单、快速且免费的。

第二个是使用代码。这样您可以自定义目录,即使是最小的细节,但对于非编码人员来说却非常复杂。我们将在这篇文章中写下创建目录的代码,只需复制并粘贴它!

第1步 :为文章创建目录

打开主题functions.php文件或者在网站后台转到外观>主题>编辑器>functions.php。

然后,将以下代码添加到functions.php文件中。

function create_mg($html) {
    $mg = '';
    if (is_single()) {
        if (!$html) return $html;
        $dom = new DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $mg = '<div class="mg-bound"><div class="mg-bound__hover-block"><i class="b2font b2-file-list-2-line"></i><p>目录</p></div><ul class="mg-bound__popover">';//向目录添加标题并将其显示在此之上。您可以将文本“目录”替换为您希望在标题中出现的任何内容。
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($element->tagName == 'h2') {
                if($h3_status){
                    $mg .= '</ul>';
                    $h3_status = 0;
                    }
                 if($h2_status){
                    $mg .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $mg .= '<li><a href="' . get_the_permalink() . '#mg-' . $i . '" rel="external nofollow"  rel="external nofollow" >' . $element->textContent . '</a>';//单击后立即创建指向文章中相应部分的跳转链接。
                  $element->setAttribute('id', 'mg-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                if(!$h3_status){
                    $mg .= '<ul class="mg-sub">';
                    $h3_status = 1;
                }
                $mg .= '<li><a href="' . get_the_permalink() . '#mg-' . $i . '" rel="external nofollow"  rel="external nofollow" >' . $element->textContent . '</a></li>';
                $element->setAttribute('id', 'mg-' . $i);
                $i++;
            }
        }
        if($h3_status){
            $mg .= '</ul>';
        }
        if($h2_status){
            $mg .= '</li>';
        }
        $mg .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    return $mg . $html;//在目录中的每个标题前添加项目符号。
}
add_filter('the_content', 'create_mg');

注意:此代码仅将 2 个标题级别 h2、h3添加到目录中。

界面截图如下

给B2 Pro主题文章创建内容目录

当然,我们需要稍微设计一下。

通过CSS定制,访问主题编辑器的style.css文件。在那里,您需要插入您自己编写的代码以根据需要自定义。

插入css代码

比如我想自定义目录的颜色和强度,所以插入如下代码:

.mg-bound {
    height: 108px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    color: #fff;
    position: fixed;
    left: 0;
    font-size: 14px;
    text-align: center;
    z-index: 999999;
}
.mg-bound__hover-block{
    border: none !important;
    position: absolute !important;
    left: 0;
    z-index: 100;
    padding: 0 !important;
    width: 40px;
    height: 108px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #fff;
    background-color: #0066ff;
}
.mg-bound__hover-block i{
    margin-top: 10px;
    display: block;
    font-size: 22px;
}
.mg-bound__hover-block p{
    width: 28px;
    margin-left: 6px;
    font-size: 16px;
    text-align: center;
}
.mg-bound__popover{
    position: absolute !important;
    left: 0;
    top: 0;
    width: 200px !important;
    min-height: 108px !important;
    padding: 8px !important;
    padding-left: 40px !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    border-bottom: none !important;
    transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    transition: all .3s;
    background-color: #0066ff;
    text-align: left;
    font-size: 12px;
}
.mg-bound__popover li {
    border-left: 2px solid #000;
    padding: 4px;
}
.mg-bound:hover .mg-bound__popover{
    display: block;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transition: all .3s;
}

本教程原则上适用于所有主题

声明:本站所有资源仅供学习和研究传播,大家请在下载后24小时内删除,一切关于该资源商业行为与念破网(https://www.nianpo.com)无关。 请勿将该资源进行商业交易、转载等行为,该资源只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。 (若您进入本站就表示同意以上条款)若本资源侵犯了您的权益,请联系我们予以删除!(E-mail:765934@qq.com) 会员QQ群:5676140

念破网 WordPress教程 给B2 Pro主题文章创建内容目录 https://www.nianpo.com/121.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务