CSS教程之Wordpress网站GreenGaint主题损坏网页结构的隐形杀手

显示全部楼层 · 发表于 2015-1-15 23:13:59

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

最新版本html5+CSS3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
破洛洛文章简介：损坏网页结构的两个隐形杀手.
在创立GreenGaint主题的过程当中，有两个网页结构上的成绩让我头疼了很长工夫，一向没有找出究竟是那里出了成绩，但以后却在偶尔的情形下将这两个成绩办理了。这篇文章里我就将这两个损坏网页结构的隐形杀手总结一下，作为履历教导，供人人自创。先让我来讲说第一个成绩。
1、审慎利用wp_head()语句

发明第一个成绩的原因是我在<body>标签下创立了一个<divid=”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文件中代码的比对，发明有这么一句<?phpwp_head()?>很可疑，不晓得是干吗用的。搜刮查完材料后才晓得wp_head()是wordpress的一个十分主要的函数，基础上一切的主题在header.php这个文件里城市利用到这个函数，并且良多插件为了在header上加点器材也会用到wp_head()，好比SEO的相干插件。可是，在wp_head()呈现的这个地位，会增添良多其实不经常使用的代码。这就注释了为何在<head>标签内会呈现<style>标签和wrapper容器的顶部会呈现间隙的缘故原由，公然删除这句代码后，页面显现一般了。这里必要申明的是，间接将wp_head()函数删除大概会影响到某些插件的一般利用，以是假如你既不想让这句代码影响页面结构，又不想影响插件的利用，能够搜刮查询一下怎样平安的删除wp_head()代码的办法。
2、确保wordpress主题各文件的编码分歧

别的一个奇异的成绩就是侧边栏下沉的成绩，创立好GreenGaint主题以后，在测试主题在扫瞄器的兼容性上，我发明侧边栏在IE和Firefox中都很一般，惟独在Safari扫瞄器中，侧边栏向下下沉了几十个像素，顶部和内容区部分没法坚持在统一程度线上。反省了代码后没有发明任何成绩，这让我百思不其解。很长一段工夫这个成绩就被弃捐了，仍是在比来更新GreenGaint主题的时分，我俄然想到会不会是文件编码招致了这个成绩呢？用EditPlus翻开sidebar.php文件后，发明编码为UTF-8+BOM，而别的文件也是这个编码。固然我其实不分明这个编码是甚么意义，我仍是把sidebar.php和别的主题文件另存为了UTF-8格局，这以后再用Safari测试后发明统统一般，又一个诡异而让人头疼的成绩办理了。
</p>
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之Wordpress网站GreenGaint主题损坏网页结构的隐形杀手

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子