WordPress主题制作教程

wordpress博客系统,是目前最为流行的一个开源博客,拥有N多的插件和主题。

废话不多,这篇文章主要是介绍和推荐一些wordpress主题从零起步的教程。

主题文件

一个主题应该包括下列典型文件:

  • 404模板 = 404.php
  • 存档模板 = archive.php
  • 存档索引页面 = archive.php
  • 注释模板 = comments.php
  • 页脚模板 = footer.php
  • 页眉模板 = header.php
  • 链接 = links.php
  • 主页模板 = index.php
  • 页面模板 = page.php
  • 弹出式注释模板 = comments-popup.php
  • 日志模板 = single.php
  • 搜索框 = searchform. php
  • 查找模板 = search.php
  • 侧边栏模板 = sidebar.php
  • 样式表单 = style.css

这篇文章值得一看,对刚接触的制作者有一定的帮助:从零开始制作 WordPress 主题

这篇文章对主题制作有一定的深入了解(当然也是针对初学者的): 精通Wordpress主题Hacks与技巧

另外利用WordPress的body_class()函数,可以有针对性的进行样式覆盖。参考:WordPress的body_class()函数详解

web前端开发firefox插件推荐

web前端要在页面调试代码,不免需要各种工具来提高开发速度,而基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。俗话说,“工欲善其事,必先利其器”,如果做web开发,没装几个像样的插件,会被人“笑话”的哦。:)

下面就和大家分享下我的插件吧:

点评:Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试 功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari),简直难以置信。除此之外,其他功能还很强大。比如html,css,dom的察看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具
说明:查看,编辑,Debug页面的CSS,HTML,JavaScript。超强的开发调试的工具,开发人员必装。强烈推荐装上。

以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的各种各样的信息,使我们进一步的了解当前所浏览的网页。
说明:超强的web分析工具,开发人员必装。

Tamper Data 的真实含义,即“篡改数据”(或者说定制 HTTP 请求):截取浏览器发出的每一个 HTTP 请求,提示我们选择是要进行定制,还是不做定制而直接提交请求,还是终止当前被截取的请求,然后根据我们的选择决定是打开定制窗口,还是直接向 WEB 服务器提交请 求,还是终止当前的请求。
说明:查看 firefox 收发请求的 header, 特别是在发出请求前, 可以修改 header。

YSlow是一款用来分析网页,并提出前端性能改进建议的Firefox插件。YSlow依据预定义或用户自定义的规则为网页评级。它同时提供了许多性能分析工具,如:Smush.it™JSLint
说明:能够帮我们分析web页面比较慢的原因,它是基于 Firebug的,也能分开浏览web页面的元素,比如js,css.

HTML Validator是一个Firefox扩展,它能查找并标志出HTML页面上的错误。HTML Validator以Tidy为基础,Tidy最初是W3C为验证HTML代码开发的一个工具。
说明:著名的 CSE HTML Validator 引擎。

Firecookie, 是一个嵌入在Firebug中的cookie浏览管理插件。

如果在Web开发中用到了cookie,使用它可以轻松的浏览cookie值、过期时间等,有助于快速开发。

使用它时需要在Firebug的网络面板中开启cookie监测。它可同时显示发送和接收的cookies。

FireUnit提供了一个简单的API用来做简单的测试记录及单元测试。关于单元测试,之前写的这篇文章《JavaScript单元测试框架介绍》可以看看。

如果热衷于jQuery Lib,FireQuery这款插件肯定要装下,FireQuery,它可以在任意页面插入jQuery脚本,结合FireBug的命令控制台使用jQuery语法,以方便对jQuery熟悉的开发者调试页面。

在制作网页时,在页面上添加一个新的设计元素(例如一个图片或图标)之前,我们往往希望提前看到元素添加后页面的整体效果。Pixel Perfect就可以帮你实现这个想法,它允许开发者在网页上覆盖你要添加的设计元素。使用它时你可以调整要添加元素的透明度和位置。
我感觉这款插件也可用来做网页中元素的微调,以保证和最初设计蓝图一致,如它的名字,完美到一个像素都不差。

HttpWatch是强大的网页数据分析工具.集成在Internet Explorer工具栏.现在,也可以在firefox下使用了。它包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功能.报告输出。

一款强大的正则表达式测试工具,不仅可以帮助开发人员编写正则,还可以方便地进行存储,以后用到就不用再绞尽脑汁了。

css实现input、checkbox垂直居中

先说input,这里说的input垂直居中,是指input内部文字的居中。

input 框在各种浏览器效果一样的解决法案:

为input框定义这样的css

.inputText{
font-size:12px;
height:14px;
padding:5px;
line-height:15px;
}

则input的高度最后为26px;

下面解释

height为字体大小加2px,line-height为height加1px。input框最后的高度则为height加padding-top加padding-bottom加2

想要什么样的高度就在字体的基础上改变height跟padding的值就可以。效果经测试在ie7 firefox chrome上一样,ie6上效果不太好但能接受。

这个应该也算不用css hack之外的一个比较不错的办法。

至于checkbox 和文字居中,可以用这段代码试试:

/*input vertical middle*/
.input_middle{font-family:tahoma;}
.input_middle label{vertical-align:middle; cursor:pointer}
.input_middle input{vertical-align:middle; margin-right:3px;}
<div class="input_middle">
<input name="test" value="1" type="checkbox">
<label>测试文字x</label>
</div>

扩展阅读:基于vertical-align的表单元素垂直对齐方式研究

标题(h1–h6)最头痛的事:平衡语义和搜索引擎优化

html语义化,是现在谈论得比较多的话题。那何谓html语义化,简单的说吧,就是要有良好的html结构,在剥离css后,依然能读懂一个页面的结构,能分清哪些是标题,哪些是内容。切忌不要用css让一个标签去表现另一个标签。

而在语义化的过程中,重点和难点在于h(x)标签,h(x)的语义是标题,一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网页,h标签可以组织起一个网页的大纲。

Web内容可访问性指南(WCAG)里提到了这方面的内容:

[I]n HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).

对于h1标签,一般一个网页只有一个,而h2–h6,一个网页可以有多个。就像一篇文章,只有一个标题,但可以有很多子标题或副标题。

而h1的使用,对于很多人很困惑。一个页面只能出现1次h1, 那对于网站来说,h1是用于网站名称呢还是文章标题?

正确的做法是:对于首页,h1用于网站名称,对于其他页面,h1用于相应的栏目标题或文章标题。而在非首页,网站名称推荐用<div>,<strong>,<h2>等标签。

具体做法,可以参考wordpress3.0 + 版本,在wordpress3.0以前的版本,h1在整个网站中都是用于网站名称,而在wordpress3.0以后的版本,已经修复了这个问题。

关于(hx)标题标签的使用建议:

  • 对于任何可能或“感觉”像是标题的内容,使用hx标签。
  • 一个页面只用一个h1标签,并把它做为文档、文章、页面的主题,而不是用于网站名称或logo。
  • 如果页面的某个模块属于标题,那可根据页面结构使用h2–h6标签,但不要“跳级”。例:尽量不要h1之后就直接用h3,而跳过h2标签。

例子:一个典型的3栏结构的页面,W3C建议的结构(本例来源:http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H42

<head>
 <title>Stock Market Up Today</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>Site Navigation</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>Stock Market up today</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>Related links</h2>
 <!-- content here -->
 </div>
 </body>

扩展阅读(E文哦):

JavaScript单元测试框架介绍

  • FireUnit

介绍:这个是John Resig另起炉灶做的,在他的博客John Resig – FireUnit: JavaScript Unit Testing Extension,发布了他与Jan Odvarko合作开发的基于Firebug的扩展FireUnit。
简单说来,FireUnit给Firebug增加了一个标签面板,并提供了一些简单的JavaScript API来记录和查看测试。参考:http://shawphy.com/2008/12/fireunit.html
评价:FireUnit在易用性上表现非常出众,非常适合基于Firebug做调试环境的前端工程师。

  • QUnit

介绍:QUnit 是一款强大而且容易使用的JavaScript 测试框架,它被用于jQuery 与其插件的测试,同时它也同样可以测试普通的JavaScript 代码。参考:http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/

评价:QUnit是一款易用的,基于jQuery的测试框架,如果项目中用到jquery,推荐用QUnit做单元测试。

  • jsUnit

介绍:系统化的解决方案,基于XNuit规范,如果你会使用jUnit、NUnit等框架,对这个应该会很容易上手,且包括服务器端(Java的)。参考:http://www.jsunit.net/

评价:非常全面,专业,适合大型企业级开发。

  • Test.Simple & Test.More

介绍:这个是jQuery之父John Resig在他的著作《Pro Javascript》中推荐的测试框架

参考:http://openjsan.org/doc/t/th/theory/Test/Simple/0.21/lib/Test/Simple.html
评价:非常容易上手,非常简洁,适合中小型项目快速引入单元测试。

总结:推荐使用Qunit和FireUnit。