在主题制作过程中,我们可能会出现许多的错误。所以我们需要反复调试,直到达到我们所满意的效果。本章节我们将

学习调试和验证的方法及调试工具。

工作流程

  • 在文件中添加一些代码
  • 在浏览器上查看是否美观
  • 在不同的浏览器上验证
  • 如果没完成则修改代码直至完成
  • 完成则添加下一段代码
  • 重复添加,验证直到主题完成

 

浏览器测试工具

火狐浏览器工具

1  web开发人员工具栏

获取地址 http://chrispederick.com/work/web-developer

2  firebug

获取地址  http://www.getfirebug.com/

 

谷歌浏览器工具

谷歌浏览器自带了开发工具,只需打开

https://developers.google.com/chrome-developer-tools

Safari浏览器

浏览器自带调试工具,但是不如chrome应用广泛。

 

 

验证

验证你的html文件是否符合规范

打开网址http://validator.w3.org/

输入你的网站地址,启用主题

点击check检查

或者传入你的html文件

点击check检查

使用上述工具去发现代码中的错误,重复修改查看,直到无错误。

 

验证css

使用http://validator.w3.org/的服务继续验证css

 

需要在多个浏览器上测试验证

例如

Firefox,chrome,Safari for Mac,Opera,

Internet Explorer version 7 onwards (or sometimes 8 onwards)等浏览器。

 

基础错误

Css语法或规则错误命名错误和Php代码错误等

 

设置ie浏览器兼容

在header.php文件中,引入css代码后加上:

<!--[if IE]> 
<link rel='stylesheet" type='text/css" href="ie-fix.css" 
media='screen, projection" /> 
<![endif]-->

保存

移动端的测试

调整浏览器窗口大小来测试响应式,然后继续在移动端上打开浏览器测试。

专业网站开发网页设计公司

深度阅读:

wordpress主题制作开发实战教程3.10 – 新建Footer.php文件 新建Header.php文件 我们使用与sidebar和header相同的步骤创建footer的页面模板1.在主题模板中创建一个Footer.php文件2.打开你的Index.php文件,剪切你的footer文件,该文件通常位于
标签中至
如何处理wordpress中JavaScript文件冲突问题 在编写WordPress主题中,如果第三方提供的HTML/JS/CSS文章中,包含了很多.js文件,在引入这些JavaScript文件过程中会这样那样的错误,比如什么“$ is not a function”之类的,这时候可以通过以下方式来一一排查。 1.正确在functi...
WordPress主题制作开发实战教程4.2 – 导航栏功能 网站中使用导航栏是为了让访客能够清晰明了地找到网站相应的板块内容。在网站建设中导航栏是非常常见并且有效的。 1.先引入导航栏功能 在主题文件夹中创建一个functions.php的文件然后在开头添加如下代码:
wordpress主题制作开发实战教程3.1(2)- 主题制作基本流程及一些小功能 在学习了上一节的WordPress主题基础之后,在本章节我们将学习主题制作的基本流程以及一些小功能。基本流程:1.创建主题文件夹2.创建主题模板文件3.模板文件引入css小功能:显示作者,时间,评论数量等 主题制作基本流程 创建一个主题,首先我们需要的是一...
如何在filezilla的ftp中找到域名所对应的WordPress网站程序目录 WP花园作为上海专业的WordPress开发公司,已经为很多客户开发了WordPress互联网项目,我们的高速云服务器上会有很多不同的客户站点项目,这时候作为项目管理者,如果想了解具体某个项目放在服务器的什么地方,应该如何找到呢?【举个例子】我们的某个金融客户www.abc.com的...
WordPress主题制作教程2.6-WordPress的条件标签(二) 页面模板  is_page_template()检测是否使用了页面模板 is_page_template(‘post.php’)检测是否使用页面模板‘post’,页面模板与其他标签有所不同,用户需要使用文件名(如post.php或my...
wordpress主题制作开发实战教程3.9 – 新建Sidebar.php文件 新建Sidebar.php文件 这里将会涉及小工具区域,具体的步骤将在之后描述。1.在主题模板中创建一个php文件2.打开你的Index.php文件,剪切你的sidebar文件,该文件通常位于标签下方。在我们的主题中,请将以下代码复制。
WordPress主题制作开发实战教程7 – 制作主题的一些技巧和提示 在制作主题的过程里,前辈们总结了许多的技巧和方法。通过学习这些技巧,可以让我们避免犯更多的错误,并且使得开发主题更加迅速,使得主题更加的美观。为主题添加更多的文件 尽可能的使更多的模块分离开来,使加载更快速。index.php 首页文件page.php  主页面文件...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.