全百科精品资源分享
免费优质资源下载平台

纯代码为WordPress文章内容添加锚点目录功能 支持悬浮跟随版

播放按钮
文章目录

之前写过一个利用代码给WordPress文章内容添加锚点目录功能,通俗讲就是给网站文章加上目录导航,今天全百科网就通过之前的基础又进一步优化了一下,让这个文章目录导航不占用文章内容的位置,悬浮于文章的左侧或者右侧,而且固定位置,跟随页面滚动,给浏览者更佳的浏览体验。

亲测纯代码WordPress文章内容添加锚点目录功能 支持多级目录

WordPress是功能强大的博客程序,全百科使用的就是WordPress。在平常发布的文章中,有些文章由于篇幅及内容比较多,导致文章有很长的页面,给读者带来不好的体验,那是不是通过设置锚点来为文章做...

时间:2019/7/15 分类:技术交流 人气:130 评论:0

WordPress文章内容添加锚点目录功能 支持悬浮跟随版

目录代码

删除之前放到function.php中的文章目录导航代码。添加下方代码(这里只做了H2标签的索引项)到function.php中,就会在你的文章中自动生成一个文章导航索引。

//作者:全百科网
//网站:http://www.quanbaike.com/
function article_nav($content)
{
    $matches = array();
    $ul_li = '';
    $r = "/<h2>(.*?)<\/h2>/im";
    if (preg_match_all($r, $content, $matches)) {
        foreach ($matches[1] as $num => $title) {
            $content = str_replace($matches[0][$num], '<h2 id="article_nav_' . $num . '">' . $title . '</h2>', $content);
            $ul_li .= '<li><a href="#article_nav_' . $num . '" title="' . $title . '">' . $title . "</a></li>";
        }
        if (is_singular()) {
            $content = '<div id="fn_article_nav"><div id="article_nav_title">Article Nav</div><ul>'
                . $ul_li . '<li><a href="#respond">发表评论</a></li></ul></div>' . $content;
        }
    }
    return $content;
}
add_filter("the_content", "article_nav");

目录样式

删除之前在主题的main.css文件中的样式代码,添加下方代码到主题的main.css文件中。

//作者:全百科网
//网站:http://www.quanbaike.com/
#article_nav_title{font-size:11px;text-align:center;line-height:15px;color:#cc0000;border-left:3px #cc0000 solid;border-bottom:1px #aaa dotted}
#fn_article_nav{position:fixed;left:5px;top:140px;background-color:rgba(255,255,255,.55);border-radius: 0 3px 3px 0;box-shadow:0 0 2px #aaa}
#fn_article_nav ul{padding:0!important;margin:0px!important}
#fn_article_nav li{list-style:none;padding:3px;width:100px;margin:0;background: url("images/li.png") no-repeat scroll 0 5px transparent!important;text-indent: 1.6em;}
Download Best WordPress Themes Free Download
Download WordPress Themes
Download Nulled WordPress Themes
Download WordPress Themes
free download udemy course
download karbonn firmware
Download WordPress Themes Free
udemy free download

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0) 打赏
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » 纯代码为WordPress文章内容添加锚点目录功能 支持悬浮跟随版
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏