分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » 露兜目录插件被导航栏遮住的处理办法
  • +
  • 7
  • 露兜目录插件被导航栏遮住的处理办法

  • 问题描述
  • 解决办法
  • 露兜的博客我是经常去的,感觉博主很长一段时间也没有更新了,但是还是依然在不断回答用户的问题,这里我表示很高兴。我发现了问题一般都是第一时间自己解决,也都基本能自己解决,毕竟求人不如求自己,有了百度和谷歌,我相信都不是难事。

    问题描述

    露兜的文章目录代码我这里就不在赘述了,详见: http://www.ludou.org/wordpress-content-index-plugin.html 部署代码方面我个人觉得没有什么难度,打击可以看看就好。那么问题就是使用了代码之后,可能会出现导航栏遮住了大标题,也就是如下的样子:
    露兜目录插件被导航栏遮住的处理办法-BanYuner

    事实上我点击的是标题4,但是有一半都看不到,那么看不到的原因也就是因为被导航栏遮住了。那么如何解决这个问题呢?请继续往下看。

    解决办法

    在解决的过程中百度了很多,一个信息点是正确的,就是我们需要标题的锚点上方再添加一个锚点,然后点击目录的时候定位到那个锚点就可以解决这个问题了。根据这个信息,我们只需要在标题上方加一个看不到的DIV即可,那么代码方面我就直接附上来了:

    function article_index($content) {
    /**
    * 名称:文章目录插件
    * 作者:露兜
    * 博客:http://www.ludou.org/
    * 最后修改:2015年3月20日
    */
    $matches = array();
    $ul_li = '';
    $r = "/<h2>([^<]+)<\/h2>/im";
    if(is_singular() && preg_match_all($r, $content, $matches)) {
    foreach($matches[1] as $num => $title) {
    $title = trim(strip_tags($title));
    $content = str_replace($matches[0][$num], '<div class="mulu" id="title'.$num.'"></div><h2 id="title-'.$num.'">'.$title.'</h2>', $content);
    $ul_li .= '<li><a href="#title'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
    }
    $content = "\n<div id=\"article-index\">
    <strong>【文章目录】</strong>
    <ul id=\"index-ul\">\n" . $ul_li . "</ul>
    </div>\n" . $content;
    }
    return $content;
    }
    add_filter( 'the_content', 'article_index' );
    

    直接将上面整个代码添加到主题目录下的functions.php文件中即可。

    其次我们还需要在样式表中添加样式,可能style.css,也可能是别的问么,这个自己去决定了。直接将下面的代码添加进去:

    #article-index {
    -moz-border-radius: 6px 6px 6px 6px;
    border: 1px solid #DEDFE1;
    float: right;
    margin: 0 0 10px 5px;
    padding: 0 15px 0 10px;
    line-height: 23px;
    width: 20%;
    }
    #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;
    }
    .mulu {
    position: relative;
    top: -160px; // 偏移值
    display: block;
    height: 0;
    overflow: hidden;
    }
    

    因为我代码是经过修改的,修改了边距什么的,大家要是觉得不合适可以自行修改。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    露兜目录插件被导航栏遮住的处理办法

    支付宝(点击图片切换)

    扫码,支持我

    露兜目录插件被导航栏遮住的处理办法

    微信(点击图片切换)

    扫码,手机看

    露兜目录插件被导航栏遮住的处理办法
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress 分类描述添加可视化编辑模式

      WordPress 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    • WordPress 获取分类第一篇文章第一张图片地址

      WordPress 获取分类第一篇文章第一张图片地址

      这个功能我不知道网络上面有没有相关教程,至少我是没有看到的,所以这里还是简单的说一下,可能其中有不少问题,也可能是我的方法太过复杂,但是还是...

      点击查看
    露兜目录插件被导航栏遮住的处理办法
    5 + 8 =