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

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

工作流程

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

 

浏览器测试工具

火狐浏览器工具

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.11 – 插件回调与模板创建 1.插件回调 Wordpress插件利用自定制主题API执行插件中的许多命令,为了确保我们的代码适应各种插件,我们需要在header.php 和 footer.php文件中插入以下代码。在header.php文件中, 标签上方插入以下代码:
WordPress主题制作教程2.2-WordPress 主题文件 虽然WordPress主题只需要两个文件(index.php和style.css),它们通常由许多文件组成,本节将向您展示如何整理文件。    主题文件和文件结构  默认的二十个主题是主题开发最好的例子。  assets - css ...
WordPress主题制作开发实战教程4.4- 图片功能 有时我们需要在文章中添加一些图片,让我们更好的理解,并且使得文章更美观,所以在主题中添加图片功能也是必须的添加图片功能 首先我们需要添加图片功能,然后才能使用。打开function.php文件在php结束标签?>之前添加如下代码: add_theme_sup...
wordpress主题制作开发实战教程3.1(1)- 主题基础 在本章节中,我们将学习到WordPress的一些主题基础主题基础主要有:1.WordPress的模块文件知识2.模板文件工作流程以及优先级3.主题里的基本循环  主题基础 Wordpress主题包含了许多文件,其中有模板页面。模板页面是层级结构,...
WordPress主题制作教程2.6-WordPress的条件标签(一) 很多WordPress新手不懂如何根据当前页面匹配的条件,在模板文件中使用条件标签来更改内容的显示。条件标签通常使用if else条件语句。改代码首先检查语句的真假,如果发现语句为真,则执行第一组代码,如果语句假的,则跳过第一组代码,直接执行第二组代码例如,下面这段代码:&n...
wordpress主题制作开发实战教程3.7 – 在模板文件中分解代码 目前我们的主题已经步入循环,现在需要将主题分解至各个模板文件,以确保主题所有部分的编辑可用。这里有一个好的规则建议:首先,避免重复的标记其次,懂得标记独一无二的代码标签,使其仅仅出现在特殊的页面,比如首页 Header.php、Footer.php、...
wordpress主题制作开发实战教程3.1(2)- 主题制作基本流程及一些小功能 在学习了上一节的WordPress主题基础之后,在本章节我们将学习主题制作的基本流程以及一些小功能。基本流程:1.创建主题文件夹2.创建主题模板文件3.模板文件引入css小功能:显示作者,时间,评论数量等 主题制作基本流程 创建一个主题,首先我们需要的是一...
WordPress主题制作教程2.4-WordPress主题功能 许多wordpress新手在进行wordpress主题制作时总会遇到这样的问题,什么是WordPress主题功能,怎样去修改它。functions.php文件是您向WordPress主题添加功能的地方。它用于连接WordPress的核心功能,使您的主题更具模块化,扩展性和功能性。如果你想学习...

发表评论

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

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