WordPress网站添加浮动文章导航目录-以7B2主题为例

文章目录是非常实用便捷且高效的工具,尤其在SEO优化方面也是一个非常重要的方面,之前奇它论坛@老白一直用的wpjam插件的目录功能,今天就给大家分享一下免插件实现“WordPress网站添加浮动文章导航目录-以7B2主题为例”

一、效果演示

WordPress网站添加浮动文章导航目录-以7B2主题为例

新版:2022WordPress网站设置悬浮版文章目录导航(通用版) - 阿里云-天翼云网盘资源分享论坛 (zhiqan.com)

二、代码教程

1.function.php文件代码法创建文章目录功能

2.style.css美化文章目录

 

/*文章目录-www.qitabbs.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;
}

三、相关文章

多的就不说了,自己看文章标签和分类吧!

WordPress网站添加浮动文章导航目录-以7B2主题为例
WordPress网站添加浮动文章导航目录-以7B2主题为例

WordPress网站防扒代码/禁止F12调试教程-以7b2主题为例

WordPress网站添加浮动文章导航目录-以7B2主题为例
WordPress网站添加浮动文章导航目录-以7B2主题为例

WordPress网站7B2主题美化之移动端底部菜单栏

WordPress网站添加浮动文章导航目录-以7B2主题为例
WordPress网站添加浮动文章导航目录-以7B2主题为例

WordPress-7B2主题美化之菜单栏彩色角标

经验·技巧网站建设

WordPress网站防扒代码/禁止F12调试教程-以7b2主题为例

2021-12-21 19:09:37

经验·技巧网站建设

WordPress网站7B2主题用户等级勋章美化

2021-12-26 9:41:13

43 条回复 A文章作者 M管理员
  1. 灬清风

    看看

  2. nengge

    谢谢谢谢谢谢谢谢

  3. liu16966987

    学习学习

  4. 徐祖亮

    学习学习

  5. zhaocai

    谢谢分享

  6. suMmerstyle

    感谢分享

  7. 网络行者

    感谢分享

  8. 强子

    感谢分享

  9. ZMKI

    感谢分享

  10. 彽调菂猫

    谢谢分享

  11. 南宫云✅

    这个可以有

  12. 筑楼

    这个代码很不错啊!编辑文章需要重新设置吗?

    • 站长老白

      不用,设置好标题即可

  13. 可爱的你

    ?不错给力

  14. 这个很不错啊

  15. xiaobo

    谢谢分享

  16. 3523864713

    大哥666

  17. 黑渊

    牛啊

  18. 风恋残叶

    站长威 5 8 7 ?

  19. 骚凌云

    看看

  20. 恋语

    学习

  21. 斯巴大

    1

  22. fnzxl

    谢谢分享

  23. whybase

    66666

  24. 货货

    感谢分享

  25. 大巴苏

    谢谢分享

  26. 七安

    谢谢分享

  27. 技术宅

    老白的教程还是比较详细的,大家都积极点反馈?

    • 站长老白

      haha,谢谢支持,主要我也是小白一个,所以在写教程的时候都是从我的角度出发,越详细越好?

  28. 阿熊

    感谢分享

  29. HuiGe

    好东西啊

  30. ralo

    谢谢分享

  31. LH

    ? 很实用,谢谢

  32. 我相信

    谢谢分享

  33. 谪仙人

    这个很不错啊

个人中心
购物车
今日签到
有新私信 私信列表
搜索