分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 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;
}

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

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
露兜目录插件被导航栏遮住的处理办法
支付宝(点击图片切换)
扫码,支持我
露兜目录插件被导航栏遮住的处理办法
微信(点击图片切换)
扫码,手机看
露兜目录插件被导航栏遮住的处理办法

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

 相关推荐

换一批 换一批
  • WordPress搜索只显示标题中含有关键字的文章

    WordPress搜索只显示标题中含有关键字的文章

    今天在知更鸟博客上面看到了这篇文章,整体来说,这个功能在某些方面还是比较有用的,如果说通过标题中的关键字来寻找文章的 ...

    点击查看
  • 如何给WordPress站点添加wow.js效果

    如何给WordPress站点添加wow.js效果

    今天折腾了以下这个东西,为什么会折腾这个东西呢,因为之前经常逛知更鸟博客,后来一次更新之后,发现知更鸟博客多了一种加 ...

    点击查看
  • 如何在WordPress评论中显示更多HTML标签

    如何在WordPress评论中显示更多HTML标签

    我见过很多站点,都可以在评论里面添加各种标签,什么自己加粗,然后添加图片,添加链接等等,当时我个人觉得可能并不适合我 ...

    点击查看
  • WordPress显示一年前当天的文章

    WordPress显示一年前当天的文章

    最开始看到这个功能是在112博客,那个时候看到这个功能的第一感觉可能就是觉得,这个功能不是很实用,可能会增加SQL语句的查 ...

    点击查看
  • 给你的WordPress站点添加一个打印按钮

    给你的WordPress站点添加一个打印按钮

    这个功能很久之前就已经在知更鸟博客上面看到了,但是一直没有想过是什么原理,但是今天无意间发现了一个方法,目前觉得还是 ...

    点击查看
  • WordPress显示一周热评

    WordPress显示一周热评

    WordPress站点如何显示一周热评,我相信还是有很多人都想要知道的,那么这里就简单的说说实现方法了。

    点击查看
  • WordPress 限定显示评论者链接的输出

    WordPress 限定显示评论者链接的输出

    最近从bigfa的相关站点看到了这个更新内容,我个人觉得还是很有用的,对于一些广告用户还是有一定的作用的,毕竟有些时候, ...

    点击查看
  • WordPress文章段落间插入广告

    WordPress文章段落间插入广告

    很久之前就已经在留意这个功能了,但是一直没有找到相关的解决办法,今天我算是找到了这个相关代码。使用这个功能对于我们宣 ...

    点击查看
  • 最轻便的复制页面内容到剪切板的JS:clipboard.js

    最轻便的复制页面内容到剪切板的JS:clipboard.js

    今天早些时候在水煮鱼博客看到了这篇文章,我一开始是想要用到代码方面的,毕竟代码很多时候都是直接复制编辑的,但是后来想 ...

    点击查看
  • WordPress前台显示站点有多少注册用户

    WordPress前台显示站点有多少注册用户

    虽然我的站点目前已经关闭了注册,所有已经注册过的用户已经清理完毕了,这里说声抱歉。那么今天这个文章就是给大家一个方法 ...

    点击查看
  • WordPress添加一个底部漂浮栏

    WordPress添加一个底部漂浮栏

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但 ...

    点击查看
  • WordPress避免手残导致文章意外发布

    WordPress避免手残导致文章意外发布

    有些时候,我们编辑好了文章,但是我们可能并不想发布,但是很多时候,我们就是手残,也就是误发布了,这种事情可能对于博客 ...

    点击查看

  目前有 0 条评论 其中:访客: 0 条, 博主: 0 条

露兜目录插件被导航栏遮住的处理办法
评分: 3 + 6 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)