B2主题文章添加目录(修复版)

WordPress文章内容太长,怎么给文章添加目录呢?站长更新文章时遇到的一个棘手的问题就是文章太长,在文章里想找点内容都十分不方便,之前做B2子主题时查找相关教程在知更鸟站点找到了点好东西藏当然是分享给各位网友,如果觉得有用,就来打赏一下哈!

添加文章目录的好处很多,对于用户来说,可以方便用户的阅读,对于站长来说,相当于给文章插入了锚点,方便蜘蛛爬取,可以加快文章收录

这次分享的的代码就是本站使用的文章目录生成代码,但是删除了后台设置选项相关代码,这个代码只在B2主题测试过,其他主题应该也可以的;黑暗模式自己适配。

B2主题文章添加目录(修复版)
左侧为代码实现效果

压缩包内有mulu.php,mulu.js,mulu.css及footer.php几个文件;在B2主题function.php文件引入mulu.php、 mulu.js、mulu.css 三个文件,打开压缩包内footer.php和主题目录下的同名文件,把标注区域复制粘贴到主题目录下的footer中,不出意外就可以实现相关功了。

文件引入方法:(针对B2主题,其他类似)

方法一:子主题,查找child_theme_enqueue_styles在其内引入css和js文件

wp_enqueue_style( 'mulu-style', get_stylesheet_directory_uri().'/mulu/mulu.css' , array() , B2_VERSION, 'all');
wp_enqueue_script( 'b2-mulu', get_stylesheet_directory_uri().'/mulu/mulu.js', array(), B2_VERSION , true );

注意文件路径

加载mulu.php文件

require_once (get_stylesheet_directory() . '/mulu/mulu.php' ); 
B2主题文章添加目录(修复版)

方法二:父主题,查找:setup_frontend_scripts在其内引入css和js文件,在function.php引入mulu.php文件

代码同上注意路径尽量在最后引入

注意:如有排版错误请自行修改css

一定要修改js文件,在头部添加var $ = jQuery.noConflict();或用jQuery(document).ready(function($) {代码});包裹代码不然会报$未定义错误

    下载权限

    查看
    • 免费下载
      评论并刷新后下载
      登录后下载

    查看演示

    • {{attr.name}}:
    您当前的等级为
    登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
    您已获得下载权限 您可以每天下载资源次,今日剩余

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

    B2主题文章添加目录

    2021-11-26 4:22:37

    WP教程

    美化一下B2 Pro主题的移动端页脚菜单

    2022-1-23 23:06:14

    2 条回复 A文章作者 M管理员
    1. 测试账号

      军人天生就舍弃了战斗的意义!

    2. 测试账号

      原是今生今世已惘然,山河岁月空惆怅,而我,终将是要等着你的。

    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索
    目录
    • 1093 用户总数
    • 315 文章总数
    • 1182147 浏览总数
    • 0 今日发布
    • 2151 稳定运行

    『权戈网络』欢迎您!😊