分享各种网络资源
是我乃至整个互联网的精髓所在
最新公告:
  • 开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
  • 目前站点正在不断折腾和调试中,如有问题请见谅
     您目前所在位置: 站点首页 » WordPress » WordPress 代码 » 露兜目录插件被导航栏遮住的处理办法
  • 露兜目录插件被导航栏遮住的处理办法

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

    问题描述

    露兜的文章目录代码我这里就不在赘述了,详见: 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;
    }
    

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

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

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

    支付宝(点击图片切换)

    扫码,支持我

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

    微信(点击图片切换)

    扫码,手机看

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

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

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