WordPress网站添加浮动文章导航目录

释放双眼,带上耳机,听听看~!

WordPress网站添加浮动文章导航目录


文章目录是非常实用便捷且高效的工具,尤其在SEO优化方面也是一个非常重要的方面,WordPress网站添加浮动文章导航目录”

效果演示:

WordPress网站添加浮动文章导航目录

二、代码教程:


// 设置文章目录
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 = '

目录

    ';//向目录添加标题并将其显示在此之上。您可以将文本“目录”替换为您希望在标题中出现的任何内容。 $h2_status = 0; $h3_status = 0; $i = 1; foreach($dom->getElementsByTagName('*') as $element) { if($element->tagName == 'h2') { if($h3_status){ $mg .= '
'; $h3_status = 0; } if($h2_status){ $mg .= ''; $h2_status = 0; } $h2_status = 1; $mg .= '
  • ' . $element->textContent . '';//单击后立即创建指向文章中相应部分的跳转链接。 $element->setAttribute('id', 'mg-' . $i); $i++; }elseif($element->tagName == 'h3') { if(!$h3_status){ $mg .= ''; } if($h2_status){ $mg .= '
  • '; } $mg .= '
    '; $html = $dom->saveHTML(); } return $mg . $html;//在目录中的每个标题前添加项目符号。 } add_filter('the_content', 'create_mg');

    2.style.css美化文章目录

    /*文章目录-bbs.zhiqan.com*/
    .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;
    }
    
    声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

    给TA打赏
    共{{data.count}}人
    人已打赏
    7b2WP美化

    给头像添加头像框/头像挂饰

    2022-1-19 18:33:25

    7b2WP美化

    WordPress网站7B2主题菜单栏样式美化

    2022-1-21 23:54:10

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