优点

1.大视角

具有不同背景、教育水平和经历的人对于设计有着不同的看法。平面设计师从一个角度看待设计，交互设计师从另一个角度看待设计，而程序员又从一个角度看待它。本书教会我从更大的角度来看待问题。

我是专职的前端开发，平时写代码和研究前沿CSS3/HTML5也比较多，所以有时候就会陷入到“为了上流而上流”的状态，我承认，自己有时候会更多地由于想用新技术的考虑，而不是公司目标的考虑而做出一些决策。

另一个例子是有的时候我会由于代码架构方便的原因，更喜欢复用模块。从代码的角度看这是对的，但我不知道对于公司目标来说有何帮助，我应该如何说服产品经理采用我的建议，我至多只能说“一致性更为美观”。

本书第八章《Web设计和用户行为的心理学》里说：“人们在一瞬间决定是否相信你的网站，这个决定是无意识的。”人们会不信任具有这些特点的网站：

• 使用了太多的字体和文字大小，并且给太多的文本着色。
• 页面上具有太多信息，并且看起来很混乱。
• 页面上具有太多动画，尤其是过时的业余动画。
• 屏幕上有太多的彩色区域，并且没有 把它们协调成一种颜色模式。

很棒！我们有自己的小视角，冥冥之中知道是什么可能是好的，但我们不知道原因，以上就是原因。从用户目标和商业目标两方面来考虑，就能扩展我们的视野，实现我们的价值。

2.理性

我喜欢给出统计结果的设计书，不喜欢讲大道理的设计书。

本书有一些非常好的例子，第九章《电子商务网站的设计模式》给出了大量商务网站的统计数据。这些商务网站都是国外的英文网站，因为中国人和外国人在不同的网络环境下，具有不同的心智模型，所以我们无法直接参考本章的统计结果，但对于统计方法我们是可以借鉴的。

我不喜欢很多玄乎的设计书，昏昏欲睡。我是很理性的人，希望设计师给我讲道理的时候给出统计、设计模式、心理学上的解释。

说到心智模型，第八章给出了非常精辟的解释。用户对于网站会有一个期待，这就是心智模型，网站的交互设计师需要做出一个交互原型来，就是概念模型。如果用户的心智模型和网站的概念模型是一致的，那么用户就没有学习成本，如果差异很大，用户就会困惑，或者需要培训。

用户的心智模型不一定是完美的，交互设计师不需要完全适应用户的心智模型。但是交互设计师需要理解用户的心智模型，从而知道如果需要改变心智模型需要做什么。

心智模型很多都可以提炼成设计模式（pattern），2.3分析了一些设计常见的pattern，3.3则分析了一些移动UI设计的pattern。

想起最近网易新闻发文控诉腾讯新闻抄袭其UI，我觉得手机新闻阅读的用户都会有一个类似的心智模型，而且手机上的pattern也就那么多，交互类似是非常正常的事情。像path那样创新的pattern才是非常了不起的进步。

 3.跨学科

本书作者来自不同的领域，有心理学的，也有研究游戏的专业人员。从这些角度来看用户和网站的关系是非常有趣和启发性的。

4.精选

可能被问到的一个问题是：我看smashing magazine网站就好了，干嘛要花钱买书？

第十章作者有回答：“……在一个位置提供了所有的内容，具有组织合理的结构，经过了认真仔细的准备、更新和编辑，并且没有包含不必要的信息（比如广告），因此可以节省用户的时间。”

当然还有英文不好的同学，看中文能节省时间。

缺憾

本书并不完美，有一些缺憾是因为翻译的原因，还有一些是因为中西环境差异的原因。

1.翻译

本书作者是来自全世界的作者，十几个人共同完成本书，而中文翻译却只有一人。所以某些章节的翻译质量就相对有点差了，比如第五章——web开发中的红旗。一方面是知识广度的原因，一方面也有精力的原因吧。

希望以后这种类型的书籍翻译也可以采用众包的模式，交给多个人来翻译。我会很乐意翻译前端方便的内容~

2.中西环境区别

第六章web版式的未来中讲到，字体是版式中非常重要的一个部分。其实在中文中，字体也不是那么重要。常用的字体只有雅黑和宋体。讲到版式就只涉及到行距、字距和边距了。本章花大功夫来写的英文字体都对国人没什么感触。

此外第十章——如何制作图书——讲了自己出版图书需要做的一些事（他们就是这样做的！）其实在中国大家都懂的，只能交由出版社。

希望编辑能在内容筛选上做一下二次过滤，引入一些更符合中国国情的部分。

章节提示

下面我列出章节名称和对应推荐阅读的职业。不是鼓励各专业独立开来，只是作为参考信息。

ID (Interactive Designer) —— 交互设计师/产品经理

VD (Visual Designer) —— 视觉设计师

FD (Front-end Developer) —— 前端开发

第一章：优秀平面设计的原则 (ID/VD)

第二章：看得见的设计与看不见的设计 (ID/VD)

第三章：设计移动用户体验 (ID/VD/FD)

第四章：创建草图、创建线框和原型开发 (ID)

第五章：Web开发中的红旗（警告标志）(FD)

第六章：Web版式的未来 (VD/FD)

第七章：把游戏设计原理应用于用户体验设计 (ID)

第八章：Web设计和用户行为的心理学 (ID/VD)

第九章：电子商务网站的设计模式 (ID/VD)

第十章：如何制作图书（就像这本书一样）

http://stackoverflow.com/questions/406192/how-to-get-the-current-url-in-jquery

LZ说：

【169】我是jQuery玩家，我想获得当前URL的参数，比如

http://localhost/menuname.de?foo=bar&number=0

这个问题相当具有代表性，有169个赞。

1L回答：

【261】要得到参数你应该这样搞：

$(document).ready(function() { var pathname = window.location.pathname; });

简洁明了的回答获得了261个赞。然后有趣的是在这个回答下面的评论，方括号中的数字是认为这条评论有用的人：

【19】关于location对象的详细说明： developer.mozilla.org/en/DOM/window.location

【35】这TMD应该是常识啊，jQuery要毁了JS。

【46】谈不上杀死JS，jQuery是让JS获得了新生。新的C#/Java程序员了解指针吗？不。他们需要了解吗？他们不需要，新的抽象足够强大，所以指针不再是必需的知识。

【68】“我怎样用jQuery ooxx？”这种问题，而答案是原生JS的这种情况很常见。你可能知道如何用原生JS完成某任务；但是由于浏览器的不一致性，你可能更喜欢用jQuery的封装方法去做。我记得在jQuery之前我会受限查阅手头的各种浏览器列表。所以jQuery是在杀死原生js，对的……但是，这也让它获得了新的生命。

【18】不用等到document.ready就可以使用这个方法了……

单入口web程序

在解释什么是单一入口应用程序之前，我们先来看看传统的 web 应用程序。
news.php 显示新闻列表
news_edit.php 显示新闻编辑页面
这两个页面不但分别实现了两个功能，还成为了应用程序的两个入口。

单一入口的应用程序实际上就是说用一个文件处理所有的 HTTP 请求。例如不管是新闻列表功能还是新闻编辑功能，都是从浏览器访问 index.php 文件。这个 index.php 文件就是这个应用程序的单一入口。

index.php 如何知道用户是要使用哪一个功能呢？

很简单，我们访问 index.php 时跟上一个特定的参数就行了。例如 index.php?action=news 就是显示新闻列表，而 index.php?action=news_edit 就是新闻编辑。

著名的单入口web程序有WordPress，所以用过WordPress的朋友都知道默认的post的url格式是http://yuguo.us/?p=2342 ，这是index.php来处理这个请求，接收p=2342参数。

有人会问这样URL不是很不友好吗？

其实通过Apache的htaccess文件可以把URL改写，比如去掉index.php，或者把参数接收改写成字段的模式。

web程序是否采用单入口架构，跟用户实际看到URL是什么样子是没有关系的。

单入口文件的优势是比较明显的，比如CodeIgniter对所有请求都能有效的初始化所需资源，包括安全处理。两个独立的应用使用两个入口，设置不同的配置、使用不同的应用程序是正常的，同时也便于在未来将web应用分离到多个物理服务器上。CI中index.php文件的第一个PHP语句设置就是当前所在的运行环境。最直接的影响就是错误提示的级别不一样，通过一个开关快速切换开发环境和生产环境。

需要说明的是单入口一般是对逻辑处理通过index.php来单入口dispatch，而js/img/css等静态文件建议丢在index.php所在的根目录，并且使用绝对URL（变量拼接，不是hard code）。

MVC

MVC如今在web开发中大放异彩。虽然其中包括代码的简洁和升级的便利等原因，但是首要原因还是他提倡的开发工作流。在开发团队中，MVC提供了有效的合作模式，他将各人的职责分为了三个主要的角色。

开发。开发人员是指处理模型的程序员。他们通常拥有与PHP、数据库管理、算法、构架和数据校验等方面的相关技能。这一角色通常会负责实现应用程序的编程细节，他们提供API，同时实施处理数据的策略。

设计。设计人员处理视图并负责实现应用程序的外观。他们具有如HTML、CSS、JavaScript和图形设计等方面的技能。通常，这一角色负责与外部的通信源交互以决定要开发或者增强的应用程序的现实的业务规则。设计通常会导致原型的开发，也就是创造能够显示理想功能的模型设计。

集成。集成工作存在于控制器层中。他将设计师和开发人员的工作连在一起。集成人员的经验通常比开发人员要少，他们负责切割静态模板并且制作应用程序所需的动态区域。他们还负责代理来自请求源的数据。他们将从表格中获取请求信息，请这些信息传递给模型，解释结果，并将结果传递给视图。

通过职责分工，开发方法的细节与开发需求的细节分开了，这使得创意学科和技术学科能够更加容易交互。

以腾讯互联网研发部的工作流为例，前端开发就是V（负责HTML/CSS/雪碧图/优化/设计稿还原），做出静态页面之后交付给C（前台开发同学，负责模板页/js/数据整合）。与此同时后台开发也就是M可以建立模型，创建数据库等等，然后把接口也给到C。拿到两边的数据之后进行整合，把变量插入到HTML中， 并最后给出外网的URL。

MVC和单入口

MVC是一种普遍的软件敏捷开发模式，在许多领域特别是桌面编程领域早已经得到了广泛的应用，然而在像php一样的脚本语言中比较难以实现，特别是几年前在脚本语言中很难看到mvc的实现，但是今年随着众多框架的涌现，mvc在各个框架中得到了初步实现。

在PHP中单入口和MVC可以很好地结合起来。

比如CodeIgniter中的 http://localhost/index.php，所有对应用程序的访问都是必须通过这个入口，正是单一入口才使得mvc模式得以实现。因为当你访问index.php的时候，应用程序会做大量的初始化工作，调用大量的基础类库，并根据index.php后面的参数加载控制器，然后加载试图，模型等内容信息。

简而言之，我们创建web程序的时候可以不再考虑url层级以及文件架构之间的关系， 我们专注于C层的class和function就可以生成 http://localhost/class/function这样的url。

这样能让程序代码更清晰，保证了DRY原则（Don’t Repeat Yourself，不要编写重复代码）。

Restful Service/URL/API

我之前写CodeIgniter简介的时候，有朋友留言说URL格式很Restful。

REST是目前大量的Web 2.0网站使用的一种架构方案。Web 上所有的东西（页面、图像等）本质上都是资源。而 REST 正是基于命名资源而非消息的，这就限制了底层技术的曝光，从而给应用程序设计中的松耦合提供了便利条件。例如，下面的 URL 在不暗示任何底层技术的情况下，公开了资源：http://thediscoblog.com/2008/03/20/unambiguously-analyzing-metrics/。

REST 是一种思维方式，而非协议或标准。

三者之间没有必然联系，不是说只有MVC架构才能使用单入口模式。但是如果使用MVC分离的方法和单入口模式来开始建立应用程序，那么采用REST的方法来思考就更为轻松了。

参考资料：

http://www.ibm.com/developerworks/cn/education/java/j-rest/index.html

http://net.tutsplus.com/tutorials/php/working-with-restful-services-in-codeigniter-2/

• 你想要一个小巧的框架。
• 你需要出色的性能。
• 你需要广泛兼容标准主机上的各种 PHP 版本和配置。
• 你想要一个几乎只需 0 配置的框架。
• 你想要一个不需使用命令行的框架。
• 你想要一个不需坚守限制性编码规则的框架。
• 你对 PEAR 这种大规模集成类库不感兴趣。
• 你不希望被迫学习一门模板语言(虽然可以选择你喜欢的模板解析器)。
• 你不喜欢复杂，热爱简单。
• 你需要清晰、完善的文档。

易于安装和配置

CodeIgniter几乎不需要配置，把它放在Apache的某个目录就可以直接运行了。

友好灵活的URL路由

根据MVC模式，CodeIgniter的URL一般如以下形式表示：

example.com/class/function/ID

所以在控制器类中创建了类、函数以及函数接受的参数之后，就可以通过URL直接调用函数的方法。

MVC模型

• 模型 (Model) 代表你的数据结构。通常来说，你的模型类将包含取出、插入、更新你的数据库资料这些功能。
• 视图 (View) 是展示给用户的信息。一个视图通常是一个网页，但是在 CodeIgniter 中，一个视图也可以是一个页面片段，如页头、页尾。它还可以是一个 RSS 页面，或任何其它类型的“页面”。
• 控制器 (Controller) 是模型、视图以及其他任何处理 HTTP 请求所必须的资源之间的中介，并生成网页。

按需加载辅助函数

CodeIgniter包含一些实用的辅助函数，但这并不意味着它会让你的服务器更慢，因为这些辅助函数是默认不加载的，需要通过$this->load来加载特定的模块。CodeIgniter的核心是非常小巧快速的。

比如URL辅助函数就是一个非常实用的函数，这样当网站的根目录改变的时候更有移植性。我之前做的网站挂载在海外服务器上，后来事故率高了以后移植到国内的服务器和域名，所以让你的代码有移植性是很重要的。

全局加载资源

CodeIgniter 带有”自动装载”功能可以允许系统每次运行时自动初始化类库、辅助函数和模型。如果你需要某些资源在整个应用程序中全局使用，为方便起见可以考虑自动装载它们。

要自动装载资源，打开 application/config/autoload.php 文件，然后将你想要自动装载的项目添加到 autoload数组中，你会发现该文件中对应于上面每个项目类型指示。

所以如果要在全局加载url和file两个辅助函数，可以在autoload.php中编辑以下代码：

$autoload['helper'] = array('url', 'file');

文档

CodeIgniter的另一个巨大优势就是它拥有详细的（中文）文档，当然非中文的资料更多，所以还是要学好英文，也是练习英文的好机会。

http://codeigniter.org.cn/user_guide/index.html

http://csscience.com/responsiveslidercss3/

Best In Test: Firefox (transition performance)
Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers)
Partial Support: IE9 (Functional, but does not support transitions)

幻灯片

所有的幻灯片<article>挨着浮动在一起，然后放到一个大容器#slides #overflow #inner中。大容器通过#overflow溢出隐藏。当点击左右的滑动箭头的时候，对#inner设置left-margin: -100%;就会让所有幻灯片滑到左边。

这一点跟普通的js幻灯片没有什么两样。

不同的是所有箭头并非触发js动作，而是通过label和select来实现动作的关联。

页面中有5个label和5个select。左右两个箭头是对应其中两个label，点击之后会使label对应的select选中。

select选中之后就会通过CSS3来触发margin的改变。

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

然后同时改变label的显示和隐藏，也就是替换成其他的label。

#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
	background: url('next.png') no-repeat;
	float: right;
	margin: 0 -70px 0 0;
	display: block;
}/*右边的label，控制下一张幻灯片，所以当#slide1是当前幻灯片的时候，下一张幻灯片是第二个label，也就是#slide2，实现了切换*/

#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
	background: url('prev.png') no-repeat;
	float: left;
	margin: 0 0 0 -70px;
	display: block;
}

此外还有幻灯片上的文字信息的隐现：

#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
}

这样就会出现幻灯片快速滑动之后，文字慢慢隐现出来的感觉。

Responsive Design

在国外很多前卫网站设计中，Responsive Design几乎成了标配（yuguo.us/weblog也是），在这个幻灯片中通过@media标签把显示媒介分为桌面、平板电脑和手机三类。
主要做了这样一些工作：

1. label图标缩小

   #tablet:checked ~ #slider #controls label {
   -moz-transform: scale(0.8);
   -webkit-transform: scale(0.8);
   -o-transform: scale(0.8);
   -ms-transform: scale(0.8)
   transform: scale(0.8);
   }

2. label图标移到幻灯片内容中
3. 其他样式修饰，比如去掉圆角

原文地址：http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/

8×8像素格

这是一个黑白格的图片，在保存为JPEG的时候选择“质量”很低的话，就会出现模糊的锯齿。这种锯齿我们经常见到，但神奇的是左上角的那个正方形的边缘非常完美，这是因为JPEG储存图片的时候会把图片存为一系列8×8像素的块。

左上角的图片正好压在8×8的边缘，所以显示很完美，右下角的图片没有压在8×8上，所以会会模糊的多。

所以优化技巧就是，如果图片包含轮廓清晰的元素，那么就把元素挪到8×8的参考线上。

在PS里设置网格的尺寸的方法是编辑>首选项>参考线、网格和切片>网格>网格线间隔设置为8的倍数比如32，然后子网格设置为4（32/8=4）即可。

显示网格的方法是视图>显示>网格。

颜色优化

颜色优化的具体处理方法有点复杂，建议阅读原文，按原文步骤操作一遍就大概明白了。

核心思想就是把图片模式设置为lab颜色的话，会在通道中看见图片被分成明度、a、b三个通道。跟RGB模式有3个通道分别储存红色绿色蓝色不一样的是，lab颜色模式中明度通道储存某一点的明亮程度，a通道储存某一点的红色和绿色有多少，b通道储存蓝色和黄色有多少。

那么图片中有一些黑色的部分的话，那么就会在明度通道中有暗度信息表明这一点非常之暗，同时又会在红绿通道中储存信息表明这一点很红。这从人眼可视的角度来看就是冗余信息，因为很暗的黑色和很暗的红色对于人眼都是黑色。

知道了这一点以后，我们来操作a通道（或者b通道，看具体的图中黑色周围是什么色调了），选取了a通道之后把黑色部分的红绿信息抹掉，抹掉的方法就很多了，比如滤镜>杂色>中间值，会把红黑混杂的颜色改成中间色。这样就能减少一些文件体积。

如果你是变态的对色温极端追求的设计师，而且显示器有非常之好的话，那么你会发现颜色可能会偏暗了，这时候对于原图调一下色阶就好了。Ctrl+L，照片处理中常用的快捷键。

通用规则

1.程序是死的，人是活的。程序无法判断压缩jpeg多少是一个合适的比例，但人可以。

2.永远不要把jpeg保存为100%质量，95%是你的上限，如果你需要很高的质量的话。

3.如果你的图片中有一些尖锐的元素或者边缘，那么不要设置低于51%的质量。

4.还有一种格式叫png，合理使用它（png的优化规则同样非常复杂）。

——赫尔曼•黑塞《德米安：埃米尔•辛克莱的彷徨少年时》

函数就是数据

因为函数也是数据，所以可以给变量赋值。通过给变量复制，从而定义函数，这种方法叫做函数直接量。

function f(){return 1;}//函数构造方法

var f = function(){return 1;} //函数直接量

二者是完全一样的。

匿名函数

正如数据可以匿名一样，函数也可以匿名：

"test"; //数据的匿名

function(a){return 1;}//函数的匿名

数据的匿名没有任何意义，因为它啥也没干，我们也无法处理它，但是我们可以把数据作为参数来使用或者赋值给变量，以此获得意义。

函数的匿名有两种使用方法使之获得意义：

1. 把（函数）传递给另一个函数作为参数。另一个函数会把这个匿名函数的返回值作为参数。
2. 定义匿名函数之后马上执行！

把匿名函数作为参数——回调函数

回调函数的好处有：

• 不需要命名——避免创建全局变量，全局变量是糟糕的，会引起不易排查的bug；
• 代码更简洁
• 性能更好

坏处

• 不能复用

匿名函数马上执行

(function(){

alert('foo');

})()

还可以带参数

(function(name){

alert('hello '+ name + '!');

})('Yuguo')

这种做法的好处就是可以避免创建全局变量。坏处是你无法把这个函数执行两次（除非你把它放在一个循环中，或者另一个函数中）

内部函数（私有函数）

在函数里可以定义函数，好处是可以避免创建全局变量，而且该函数是私有的，不会被外界污染。

翻页代码

标准的wordpress翻页代码是在大循环之外有以下代码：

<div id="nav-previous">
 <?php next_posts_link( __( 'Older posts') ); ?>
</div>

也就是说后台设置了每页显示10篇文章之后，就会每10篇一个翻页。

无限滚动

当屏幕滚动到页面底部的时候，我们希望触发一个事件来ajax载入新的文章进来。有一个js插件可以很方便的做到这一点：infinitescroll.js

infinitescroll有一个官网，但已经停止更新好多年了，代码和文档都已经失效。最新的代码在github可以下载。读源代码也有比较清晰的说明。

引入infinitescroll.js之后可以在你的站点js中加入以下代码：

$container.infinitescroll({//这里是所有条目的容器，我们在上一篇中已经有了jQuery Object，就是$container

    navSelector  : "#nav-previous",
                   // 页面导航的选择器，这个会被隐藏
    nextSelector : "#nav-previous a",
                   // 这个是触发器，页面滚动到触发器的时候，就会开始ajax加载
    itemSelector : ".goods"
                   // selector for all items you'll retrieve
  });

除了基本的用法之外，插件还提供了一些参数来配置一些自定义风格，比如载入的动画。

此外，在masonry的官网也有介绍如何跟infinitescroll插件结合。

ajax载入就讲到这里，下一篇《自定义文章数据》。

本文是第一篇，先讲最基本的页面显示。

阅读之前我假设你有一定的wordpress主题制作基础，你要知道通过codex来查阅wordpress的一些函数使用方法，对大循环也有一定了解，你还会一定的CSS基础知识。我不会贴出所有的代码，我会贴出一些关键代码和资源，有什么问题和意见可以留言。

如果你已经具备这样的知识，就可以继续阅读下去了。

类Pinterest网站

瀑布流网站又可以叫做类Pinterest网站，因为是Pinterest.com第一个使用这种布局方法展示内容，流行之后效仿者众，国内就有以下这些：

33号铺：http://33pu.net/

拼范：http://www.pinfun.com/

搜道-秀：http://show.sodao.com/

Mark之：http://markzhi.com/

花瓣：http://huaban.com/

迷尚：http://www.mishang.com/

码图网：http://www.markpic.com/

堆糖：http://www.duitang.com/

Idsoo：http://idsoo.com/

布兜：http://www.budoou.com/

Topit.me：http://www.topit.me/

weheartit：http://weheartit.com/

另外，一些购物类推荐网站身上，也多有Pinterest的影子，比如凡客达人、美丽说、蘑菇街（book）、淘宝哇哦、新鲜网等。

33号铺

0.开始

按照一般的经验规则，我们采用一个空主题作为基础来进行修改。因为空主题（blank theme）会不断更新，具有一些最新的wordpress的函数和best practice。使用空主题就不用自己从头开始。

我们以toolbox为例来进行下去，为什么用toolbox呢，因为它很简洁，而且是html5标签的，很上流。你自己使用什么空主题都可以，只要使用本教程的原则来进行即可。

启用toolbox之后，会看到站点首页有主体部分和边栏部分。主体部分显示一些文章，在边栏部分显示一些分类或者标签信息，这种结构如何和瀑布流网站对应起来呢？

1.干掉边栏

把sidebar.php删掉，你完全不需要它。然后把index.php中的以下代码删掉，这样就不会调用它了：

<?php get_sidebar(); ?>

当然，具有主题制作经验的你一定知道wordpress主题中php文件的调用会有一个优先级，比如存档页会优先使用archive.php再使用index.php，这样的话以上代码不会只有一个index.php文件中有。

我的建议是先把类似优先级树中的文件（比如single.php、tag.php、archive.php、category.php……这个要根据你主题的具体情况来看）全部删掉，在index.php中修改之后再根据修改好的index.php来复制修改完成archive.php或者home.php的修改。

做了这些事情之后刷新首页，你会发现边栏没了，只有一个主题部分，包含了若干文章。

下面可以发挥一下自己的CSS能力，把主体部分宽度改成100%，关于边栏的样式代码全部删掉。

2.自定义文章样式

文章现在是一条一条显示出来了，那么如何像33号铺那样漂亮的一个一个条目展示出来呢？分两个步骤，先改结构，再改样式。

2.1 自定义结构

如果你的空主题足够先进，那么你在index.php中不会直接看到大循环里面的代码，而是有以下代码：

<?php while ( have_posts() ) : the_post(); ?>

<?php
 /* Include the Post-Format-specific template for the content.
 * If you want to overload this in a child theme then include a file
 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 */
 get_template_part( 'content', get_post_format() );
 ?>

<?php endwhile; ?>

嗯，注释已经说明了一切。大循环中的部分都会调用content.php或者类似优先级树的content-single.php等文件。现在我们只需要content.php。

打开content.php，就能看到每篇文章的循环代码。暂时只用修改最外围的一个div或者article，在class上加一个“goods”即可。

 2.2样式

在style.css里加入以下代码：

.goods {float: left;
  margin: 10px;
  width: 230px;
  color: #999;
  background-color: white;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(34,25,25,0.2);
  -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.2);
  -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.2);
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
}

是的，这样你的文章就会像小方块一样排列。

2.3样式优化

用浮动来实现布局是有问题的，因为每篇文章高度不一定，所以需要脚本的帮助。

首先下载masonry.min.js到你的主题文件夹/js/masonry.min.js路径，下载和demo和教程地址都是：http://masonry.desandro.com

下载完毕之后需要在你的主题中引用，正确的方法是在header.php的头部wp_head()之前加入以下代码：

<?php
wp_enqueue_script('jquery');
wp_enqueue_script('masonry',get_bloginfo('template_directory').'/js/jquery.masonry.min.js');//自动排序
wp_enqueue_script('yoursitejs',get_bloginfo('template_directory').'/js/site.js');//自己写的一些脚本
?>

这是为了避免其它插件也使用masonry的时候，再次载入同样的脚本。

然后再在主题文件夹的/js/文件夹中新建一个脚本比如site.js，代码如下：

jQuery(document).ready(function($){
jQuery.noConflict();
//动态调整位置
//http://masonry.desandro.com
var $container = $('#container');
$container.masonry({
itemSelector : '.goods'
});
});

这样就完成了脚本动态计算位置的工作了，页面载入之后会拉取3个脚本，首先是jquery，然后是jquery的插件masonry，最后site.js来执行。

好了，第一篇写到这里，下一篇写一下关于ajax拉取数据的功能。