Wordpress网站GreenGaint主题破坏网页布局的隐形杀手
|
在创建GreenGaint主题的过程中，有两个网页布局上的问题让我头疼了很长时间，一直没有找出到底是哪里出了问题，但之后却在偶然的情况下将这两个问题解决了。这篇文章里我就将这两个破坏网页布局的隐形杀手总结一下，作为经验教训，供大家借鉴。先让我来说说第一个问题。 一、谨慎使用wp_head()语句发现第一个问题的起因是我在<body>标签下创建了一个<div id=”wrapper”></div>容器，将页面中的全部内容都放到了这个容器之内，但是创建完主题之后却发现wrapper容器的顶部距离<body>标签，也就是浏览器顶部有大概25个像素。为了确认这个间隙的存在，我给<body>标签和wrapper容器添加上了1个像素的border属性，发现确实存在这个问题。然后我又仔细检查了CSS代码，看看是不是手误给wrapper容器添加了margin-top属性，发现代码一切正常，这就让人纳闷了，到底是哪里出了问题呢？ 前一段时间准备更新GreenGaint主题，在整理完head.php文件页首的<meta>和<Link>等标签后，查看页面源代码时，突然发现在<head>标签内出现了几行多余出来的代码，仔细一看，其中还有<style>标签，并且还有各种内边距外边距属性，这我就明白了，为什么wrapper的顶部会无缘无故空出几十个像素来了。原来是这里的<style>标签在作怪。但是这些代码并非我写上去的，怎么会出现在<head>标签内呢？经过认真一行一行和head.php文件中代码的比对，发现有这么一句<?php wp_head() ?>很可疑，不知道是干嘛用的。搜索查完资料后才知道wp_head()是wordpress的一个非常重要的函数，基本上所有的主题在header.php这个文件里都会使用到这个函数，而且很多插件为了在header上加点东西也会用到wp_head()，比如SEO的相关插件。但是，在wp_head()出现的这个位置，会增加很多并不常用的代码。这就解释了为什么在<head>标签内会出现<style>标签和wrapper容器的顶部会出现间隙的原因，果然删除了这句代码后，页面显示正常了。这里需要说明的是，直接将wp_head()函数删除可能会影响到某些插件的正常使用，所以如果你既不想让这句代码影响页面布局，又不想影响插件的使用，可以搜索查询一下如何安全的删除wp_head()代码的方法。 二、确保wordpress主题各文件的编码一致另外一个奇怪的问题就是侧边栏下沉的问题，创建好GreenGaint主题之后，在测试主题在浏览器的兼容性上，我发现侧边栏在IE和Firefox中都很正常，唯独在Safari浏览器中，侧边栏向下下沉了几十个像素，顶部和内容区部分无法保持在同一水平线上。检查了代码后没有发现任何问题，这让我百思不其解。很长一段时间这个问题就被搁置了，还是在最近更新GreenGaint主题的时候，我突然想到会不会是文件编码导致了这个问题呢？用EditPlus打开sidebar.php文件后，发现编码为UTF-8+BOM，而其它文件也是这个编码。虽然我并不清楚这个编码是什么意思，我还是把sidebar.php和其它主题文件另存为了UTF-8格式，这之后再用Safari测试后发现一切正常，又一个诡异而让人头疼的问题解决了。 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
