分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解。
 您目前所在位置: 站点首页 » 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纯代码实现文章AJAX点赞

    WordPress纯代码实现文章AJAX点赞

    这个功能其实在很多主题中都集成进去了,DUX默认的主题里面也是有这个功能的,但是我将其删除了,之后换上了评星插件了,评 ...

    点击查看
  • WordPress页面(page)添加标签和分类功能

    WordPress页面(page)添加标签和分类功能

    WordPress页面(page)添加标签和分类功能 文章分类目录和标签功能是WordPress自带的功能,但是很多时候,喜欢使用页面的用 ...

    点击查看
  • 如何在WordPress文章中插入视频

    如何在WordPress文章中插入视频

    如何在WordPress文章中插入视频 现在很多站点都是做视频站点的,同时也有很多视频站点都是使用的CK播放器,如果你已经使用了 ...

    点击查看
露兜目录插件被导航栏遮住的处理办法
7 + 3 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)