[不花钱站长]:从免费域名开始[0元] Oracle永久免费VPS[0元] VPS环境搭建免费脚本[0元] 秒变大盘挂载免费网盘[0元] 小白免费采集器1天500W[0元] CF免费DNS+CDN服务[0元]
[零基础网赚]:撸本站免费源码[0元] 网站强引免费蜘蛛法[0元] 图片视频文件免费存储[0元] 外链轻松发布免费友链[0元] 入坑免费教程学习源代码[0元] 网上百种+赚钱联盟推荐[?元]

↑↑VPS推荐网 WWW.VPS.COM.IN 稳定 便宜 免备案↑↑


您现在的位置是：首页 > 全球[VPS测评] >  dux主题,wordpress代码,文章目录代码,wordpress教程,国外永久免费VPS

DUX主题小功能之为文章内容增加目录功能

全球[VPS测评]来源：VPS推荐网点击：1392
【性价之王】【线路之王】【价格之王】【配置之王】
【免费之王】【香港首推】【梯子之王】【独服之王】
DUX主题小功能之为文章内容增加目录功能

wordpress主题DUX还是非常强大的，折腾的也非常多，也有很多折腾的教程。今天分享一篇为文章内容增加目录功能，具体的操作在主题Functions.php文件中加入下面代码 （默认为4级标题索引，可以自行修改，比如将h4改h2，这样就二级标题作为文章目录了）。如果使用的其他主题，请自行修改“if (_hui(‘index_c’)) {}”这段代码。具体的代码如下：

1、在Functions.php添加

复制//小七博客-https://www.xqblog.com//文章目录if (_hui('index_c')) {function article_index($content) {$matches = array();$ul_li = '';$r = "/<h4>([^<]+)<\/h4>/im";if(preg_match_all($r, $content, $matches)) {foreach($matches[1] as $num => $title) {$content = str_replace($matches[0][$num], '<h4 class="title-'.$num.'">'.$title.'</h4>', $content);$ul_li .= '<li><a h="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";}$content = "\n<div id="article-index" class="article-index hidden-xs"><strong class="title">文章目录</strong><ul id="index-ul" class="index-ul">\n" . $ul_li . "</ul></div>\n" . $content;}return $content;}add_filter( "the_content", "article_index" );}

2、 CSS代码：在主题目录 css/main.css

复制#article-index{position:relative; z-index:2;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:1px solid #DEDFE1;float:right;margin:0 0 15px 15px;padding:0 6px;width:200px;line-height:23px; background: #fff;}#article-index strong{border-bottom:1px dashed #DDDDDD;display:block;line-height:30px;padding:0 4px}#index-ul{margin:0;padding-bottom:10px;}#index-ul li{background:none repeat scroll 0 0 transparent;list-style-type:disc;padding:0;margin-left:20px}.index-more{padding-left:20px;}

3、 JS代码，在js/main.js

复制//滚动到某个位置function scrollTo(ele, speed){if(!speed) speed = 300;if(!ele){$("html,body").animate({scrollTop:0},speed);}else{if(ele.length>0) $("html,body").animate({scrollTop:$(ele).offset().top},speed);}return false;}//右侧滑动到某个位置时，复制文章目录，并添加到侧栏指定标签内“.mulu ul”内，样式保持一致var muluBox = $(".mulu ul");var _html = $(".index-ul").html();if(_html){muluBox.html(_html);//当滚动距离大于侧栏高度和目录的原本高度时，目录才会显示。function resizeWindow(e){if($(window).width()>1000){var sidebarHeight = $(".sidebar").height();//文章滚动的过程中，目录的列表锚点会随着高度的变化而相应的改变，如上图中的图片规范是亮点$(window).scroll(function(){var winScrollTop = $(window).scrollTop();var items = muluBox.find("li");for(var i=0; i<items.length; i++){var anchor = $(".title-"+i);// console.log(anchor);var pos = anchor.offset();var winH = $(window).height();if(pos.top < (winScrollTop+20)){// console.log(i);muluBox.find("li").eq(i).addClass("current").siblings().removeClass();}}if(winScrollTop > sidebarHeight){$(".mulu").show().stop(true,false);}else{$(".mulu").hide();}})}}resizeWindow();//点击目录下边的小按钮可以隐藏目录和展开目录$(window).bind("resize", resizeWindow);$(".mulu-toggle").on("click",function(){var muLu = $(".mulu");$(this).toggleClass("active");if(muLu.is(":visible")) muLu.hide();else muLu.show();})}else{$(".mulu, .mulu-toggle").hide();}var indexUL = $(".index-ul");var indexLi = $(".index-ul li").length;//目录的个数大于7时，收缩起来，点击展开更多后展开，点击收缩起来时，恢复原样if(indexLi >7 ){$(".index-ul li:gt(6)").hide();indexUL.after("<li class='index-more'><a h='#'>展开更多</a>");$(".index-more").on("click","a",function(){var more =$(".index-ul li:gt(6)");var _this = $(this);if(more.is(":visible")){more.hide();_this.text("展开更多");}else{more.show();_this.text("伸缩起来");}return false;})}//点击目录的链接，会跳转到相对应的位置$(".index-ul, .mulu ul").on("click","li",function(){var itemName = $(this).find("a").attr("h").slice(1);$(this).addClass("current").siblings().removeClass();scrollTo("."+itemName,500);return false;})

4、 在主题中options.php添加代码

复制 $options[] = array( 'name' => '文章目录', 'desc' => '四级标题作为文章索引目录', 'id' => 'index_c', 'std' => '1', 'type' => 'checkbox');

注：位置自己选择添加即可！在添加之前请把相关的文件备份一下！


[dux主题]历史优惠活动内容
  • DUX主题添加四格广告推荐版块 为WordPress添加广告位的方法
  • DUX主题添加四格广告推荐版块 为WordPress添加广告位的方法
  • DUX主题添加四格广告推荐版块 为WordPress添加广告位的方法
  • DUX主题添加四格广告推荐版块 为WordPress添加广告位的方法
  • DUX主题添加四格广告推荐版块 为WordPress添加广告位的方法
  • 大前端DUX主题美化操作 如何修改首页文章边框颜色
  • DUX主题添加首页显示顶置文章功能 支持只显示指定顶置分类文章
  • 为DUX主题添加首页最新发布下显示置顶文章的功能
  • 转载 通过修改代码来实现DUX主题首页添加自定义文章列表模块
  • 大前端DUX主题美化小技巧 在首页为当前24小时内更新的文章添加NEW图标
  • DUX主题2019双11优惠→全场主题6折 年度的唯一折扣 正版授权138元起
  • WordPress主题618年中大放价,DUX主题/XIU主题/D8主题全场6.8折,终身授
  • 大前端DUX主题美化操作 如何修改首页文章边框颜色
  • DUX主题添加首页显示顶置文章功能 支持只显示指定顶置分类文章
  • 为DUX主题添加首页最新发布下显示置顶文章的功能
  • 转载 通过修改代码来实现DUX主题首页添加自定义文章列表模块
  • WordPress主题618年中大放价,DUX主题/XIU主题/D8主题全场6.8折,终身授
  • 大前端DUX主题美化操作 如何修改首页文章边框颜色
  • DUX主题添加首页显示顶置文章功能 支持只显示指定顶置分类文章
  • 为DUX主题添加首页最新发布下显示置顶文章的功能
  • 转载 通过修改代码来实现DUX主题首页添加自定义文章列表模块
  • wordpress主题教程之热门主题DUX主题添加评论全站整体关闭功能
  • 双十一大前端wordpress主题全场6折优惠 dux主题仅需480元 xiu主机仅需192
  • 大前端wordpress主题618限时6.8折促销,其中xiu主题218元，热门的dux主题
  • DUX主题6.6版本更新较多
  • DUX主题小功能之为文章内容增加目录功能
  • DUX主题增加无图随机图片功能
  • DUX主题之WordPress添加百度站长推送功能
  • DUX主题6.7版本:新增小工具在移动端显示、标签云分页、文章更新限时显示与代码优化
  • 大前端wordpress主题之DUX主题 XIU主题 ENT主题 TOB主题限时6折
  • WordPress 教程之后DUX主题文章链接添加nofollow标签与新窗口打开
  • DUX主题6.8版本更新：兼容PHP 8.0，新增评论审核通知邮件、文章自定义版权、空白页面
  • DUX主题6.9版本更新：新增最新文章标红、去除自动SEO关键词之间的空格
  • DUX主题7.0版本发布，新增文章专题功能
  • DUX主题7.2版本:新增幻灯片小工具、头像服务器自定义等
  • 2021年7月14日DUX主题7.3版本更新，新增注册白名单、标签云随机等
  • themebetter全场wordpress主题双十一限时6折优惠 DUX主题480元 XI
  • wordpress主题DUX主题7.5版本：重新设计主列表、新增专题小工具等
  • DUX主题 XIU主题 TOB主题双十二限时7折优惠
  • DUX主题7.6版本，主要新增主列表广告位等优化调整
  • 2022年618 DUX主题 YIA主题 TOB主题限时7折优惠 最新主题182元起
  • DUX主题7.9版本新增文章页发布时间多个可选格式，可精确到时分秒
  • DUX主题8.0版本建议更新，新增自动夜间模式、全新UI等
  • DUX主题 MOK主题 YIA主题 XIU主题等双十一限时6折促销
  • #wordpress教程#为dux主题文章站外链接自动添加nofollow属性
  • WordPress主题618年中大放价,DUX主题/XIU主题/D8主题全场6.8折,终身授

    • 猜你可能想看的VPS


    转载请注明原文地址:http://140.238.13.167:12355/read-73522.html

    下一篇       上一篇