WordPress 7B2主题美化:主题文章创建内容目录

WordPress 7B2主题美化:主题文章创建内容目录

 

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

创建文章目录的方法

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

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

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

使用插件创建目录的过程本文不再赘述,百度一大堆;本文主要针对B2主题的纯代码方法

第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 . '">' . $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 . '">' . $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添加到目录中。

不要忘记单击更新/保存文件。

 

第二步:我们需要稍微设计一下

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

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

总之,使用插件和编码都为我们提供了相同的漂亮目录。只要您满意,您可以选择任何方式。

如您所见,在 WordPress 文章中创建目录并不复杂。

按照我们的教程,您将拥有漂亮的目录。一个好的目录让你的文章更清晰、更专业。

因此,您的观众在阅读您的博客时可能会有更友好的体验。

 

免责说明

本站资源部分来自网友投稿,如有侵犯你的权益请联系管理员或给邮箱发送邮件PubwinSoft@foxmail.com 我们会第一时间进行审核删除。
站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面
本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 7B2主题 文章H标签美化

2023-5-15 12:16:50

WordPress教程

WordPress 7B2主题美化文章添加彩色角标教程

2023-5-15 15:37:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索