搬码资源网广告位 搬码资源网广告位

为wordpress文章添加目录方便阅读

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

在阅读文章的时候,有个目录来导航,相信还是很方便阅读的,所以本站也弄了这么一块,特别是长点的文章,导航还是很有必要的,在 functions.PHP 中添加创建目录的函数,代码中的目录标签你要以自行定义,本站用的是 h3 标签:

// 文章内容添加文章目录

function content_index($content) {

if(is_single()){

$matches = array();

$ul_li = ”;

$r = “/<h3>([^<]+)</h3>/im”;

$i=’1′;

if(preg_match_all($r,$content,$matches)) {

foreach($matches[1] as $num => $title) {

$content = str_replace($matches[0][$num],'<h3 id=”title-‘.$num.'”>’.$title.'</h3>’,$content);

$ul_li .= ‘<li><a class=”smooth” href=”#title-‘.$num.'” title=”‘.$title.'”>’.$i.’.’.$title.”</a></li>n”;

$i ++;

}

$content = “n<div id=”article-index”><i class=”fa fa-angle-double-right” ></i><h4>目 录</h4>

<ul id=”index-ul”>n” . $ul_li . “</ul>

</div>n” . $content;

}

}

return $content;

}

 

add_filter( “the_content”,”content_index”,13 );

js 代码

在 main.js 中添加以下代码,当点击目录时,能平滑移动到相应的位置,添加了一个样式:smooth

//锚点滑动:在href上加上一个样式:smooth

$(“.smooth”).click(function(){

var href = $(this).attr(“href”);

var pos = $(href).offset().top-100;

$(“html,body”).animate({scrollTop: pos},1000);

return false;

});

添加样式

样式根据自己的网站风格设置就是。

#article-index {

position: fixed;

right: 66px;

bottom:0px;

padding: 10px;

border-radius: 5px;

z-index: 99999999;overflow:hidden;display:none;opacity:0

}

#article-index i {

color: #fff;

font-size: 20px;

margin-right: 10px;

}

#article-index i:hover{cursor:pointer}

#article-index h4 {

font-size: 16px;

color: #fff;

font-weight: 400;

margin: 0;

text-transform: uppercase;

position: relative;

text-align:center;display:inline-block

}

 

#article-index ul {

margin: 10px auto 0;

padding: 10px;

max-height: calc(100vh – 178px);max-width:200px;

overflow-y: auto;overflow-x:hidden;

background: #fff;

}

#article-index ul li {

list-style: none;

margin-bottom: 8px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

#article-index ul li a{

font-size: 12px;}

添加目录

本站显示目录是放在右下侧导航上的,以下代码是显示目录与点击目录上隐藏按钮的 JS

//文章目录按钮

$(‘#article-index i’).click(function(){

$(‘#article-index’).animate({‘bottom’:’0′,’opacity’:’0′},600,function(){$(this).css(‘display’,’none’)});

})

 

$(‘.wz-index’).click(function(){

$(‘#article-index’).css(‘display’,’block’).animate({‘bottom’:’56px’,’opacity’:’1′},600);

})

使用目录

要想在文章中能显示目录,在发表文章时,要含有目录标签,如本站的是 h3,那要写文章时,要有 h3 标签的标题。最终显示效果如下:

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11117.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?