Wordpress网站GreenGaint主题破坏网页规划的隐形杀手
日期：2013-12-10 浏览次数：21001 次
在创建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测试后发现一切正常，又一个诡异而让人头疼的问题处理了。
