翻页代码

标准的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拉取数据的功能。

性格

乔布斯的性格是非常独一无二的，也形成了他独一无二的个人经历。他的性格如果再温和一点，可能会接受其他工作人员的建议，降低自己的一些预期，做出一些更好的商业决策，但这样就绝对不会做出伟大的产品。他的不妥协和专制让他能和管理层做出激烈的对抗，让他被苹果公司赶了出来，也让他10年后重返苹果，把董事会解散。

总之在性格方面，他的成功无法复制，请勿模仿。所以某些产品经理不要看见设计稿就说：“狗屎”。

远见

我认为，远见卓识是乔布斯毫无疑问第一重要的天赋和成功的原因。

如果能穿越时空回到过去几十年，任何人想取得成功都会易如反掌，因为你会知道什么是技术趋势，你会知道个人电脑是未来趋势，点阵式屏幕是未来趋势，鼠标是未来趋势，音乐播放器是未来趋势，智能手机是未来趋势……

乔布斯最牛的就是他真的在过去这一切还被人嘲笑的时候就看到了这一点，在第一眼看到点阵式显示器的时候，他就觉察到这会是最伟大的发明，并把它商业化。

看乔布斯传就会发现在他成功的历史中，他窃取了很多其他公司的灵感的。其他公司有强大的技术，但是没有足够的远见看到技术的商业意义。

现实扭曲场

现实扭曲场是乔布斯第二重要的才能。

他能说服别人去做一件别人本来不想去做的事，或者说服团队做一件他们本认为不可能完成的事，这简直太牛了！

极致细节

乔布斯极致追求细节完美，用户看不见的电路板也必须整齐摆放，包装盒的颜色他从颜料公司的所有颜色里选都不满意，还声称要发明一种新的颜色，还有制作mac的工厂墙壁必须用一尘不染的白色……

说实话，这些细节中的一些强求确实不是必须的，但因为乔布斯就是这样的霸道性格，要求把控制器握在手中，所以他才把所有细节的决定权都把控在手。

乔布斯有远见，也有对用户体验的极致追求，所以就能把别人搞砸的事情搞好。有远见+对用户体验的机制追求=成功。

健康

他死时候太年轻了，这可能跟他的现实扭曲场有关，他在被查出癌症的时候，坚持认为吃素菜能使自己康复，医生都说服不了他。

最近几个月突然流行一种布局方式——瀑布流。

比如最早的 Pinterest，然后国内的33号铺，Mark之，蘑菇街，还有Qzone的好友相册，以及淘宝最新上线的“哇哦” 等等，都是采用这种布局方法。

兼容性较强的实现方法有两种，taobaoUED有介绍：

1. N列布局方法
2. 绝对定位方法

推荐使用绝对定位方法，那么如何使用绝对定位呢？有两个js库值得推荐。

1. masonry
2. KISSY的Waterfall组件

masonry提供的定位参数更多，包括流式布局、居中、图片lazyload、jQuery动画、在瀑布流中定位一个区域（放广告）等。

KISSY更轻便，而且还多了一个专门异步加载的class。

二者各有所长，根据自己的需要选择一个即可，用法也很简单，看看API和demo就可以了。

1. 你总是想着我，跟别人散步的时候也会给我发短信。
2. 你说你喜欢帅哥，然后紧紧抱着我。
3. 你有点不靠谱，我能感觉自己能帮助你。
4. 我的提议即使很不靠谱，你也从来不反对。这让我觉得自己应该更负责，并且无论如何你是支持我的。
5. 你在食物方面很有常识，让我十分敬佩。
6. 我想和你约会的时候，你从来不拒绝。
7. 你跟我一样喜欢看电影，你喜欢我喜欢的电影。
8. 我推荐给你的书你都会第一时间读。
9. 你跟我一样都觉得在深圳买房是很神经的一种行为。
10. 你讨厌我讨厌的人。
11. 你跟我一样穿了一天的衣服不想洗又不能第二天接着穿就会随便扔到床上——虽然也不是什么好习惯。
12. 你也不爱叠被子。
13. 玩三国杀即使我是反贼砍了身为主公的你，我们也能拉着手聊天。
14. 你会看着我傻笑。
15. 你做饭超赞。
16. 你藏不住秘密，从来不撒谎。
17. 你会在网上看一些新的菜谱，问我喜不喜欢吃，然后承诺做给我吃。
18. 你说希望我们永远不分开。
19. 你会把好玩的短信转发给我。
20. 你说如果我有不喜欢你的地方一定要说出来。
21. 你的兔儿牙很可爱。
22. 你头发的颜色很好看。
23. 你跟我一样喜欢打羽毛球。
24. 你的iPod颜色跟我一样是酒红色，很搭。
25. 你睡觉很安静，除了爱把我往床边挤。
26. 在我身上出现的小小问题你都很关心。
27. 你总能第一时间和我想到邪恶的事情。
28. 你跟我一样讨厌吃螺蛳。
29. 你跟我打赌总是输，但却从不气馁。
30. 我会跟你约定一些奇怪的暗号，你一点都不觉得这很傻。
31. 你总是说我的点子很聪明。
32. 看到白羊座和双子座是天生一对的星座信息你就会很开心，然后发给我看。
33. 你很嘴馋，但又怕长胖，纠结的样子很可爱。
34. 看电影的时候你喜欢抱着我胳膊。
35. 你不爱乱花钱，但为朋友花钱从来不吝啬。
36. 你跟我一样是月光族。
37. 你愿意跟我一起存一个旅游基金。
38. 跟你在一起的每个小节日都需要庆祝，每个小进步都要撒花。
39. 你跟我一样爱演戏。
40. 我不让你继续吃下去了你就不再吃下去了。
41. 你的新发型很可爱。
42. 你跟我一起迷路的时候，还很开心。
43. 你开始学习HTML。
44. 你做事没有毅力，但我提醒之后总是能继续下去。
45. 你对我父母很细心。
46. 我加班到很晚回家你会等我。
47. 你是缺点跟优点一样多的小孩，未来有无尽的可能性。

Google Analytics主要作用对页面内容、速度、目标人群（国家、语言、设备、页面时间、跳转）等信息跟踪，需要网站主在每一个页面上贴上Google Analytics的分析js代码。

Webmaster Tools主要作用是跟踪网站在搜索引擎中的表现：对于某个关键词搜索出现多少次、排名、点击等数据，需要网站主认证对网站拥有所有权（可以通过上传文件或者meta的方法来认证）。

Google的这两个工具都是非常强大并且常用的，现在数据互通了，非常好！

更多阅读：

如何把Webmaster Tools数据导入Google Analytics [en]

Webmaster Tools如何计算impression [en]

PS. 可能是Webmaster需要两天来分析处理数据，所以在Analytics中查看SEO分析的时候，最近两天的会显示不出来，提示：
No data is available from the most recent 2 calendar days.

我在工作中需要跟踪很多项目的进展情况，并且项目的变化也会非常快，有可能上午还在重构，下午就开发体验然后提测了。飞鱼介绍他用excel来跟踪项目进展，非常清晰，但是有几个缺点：

• 要打开一个个软件，占内存，特别是中午打LoL的时候往往会关掉，
• 切换状态的时候需要打字，不够方便，
• 没保存怎么办？
• 项目过多之后，如何存档？

thn.gs可以完美解决这几个问题，快去试试吧，特性：

代码评审就是一个团队或者社区中的成员互相审查各自的代码，并以此改善各自的代码。那么网站设计评审是指什么呢？其实我们都已经在做这样的事情了，打开一个页面的时候，我们会说，设计的很好啊，很烂啊，用户可用性很好啊，很差啊……其实这些“评审”都很主观。

那么客观的“评审”方法是什么？

SmashingMagazine给出了几点评审条款：

• 主页,
• 任务定位的容易程度，网站功能,
• 导航和信息结构,
• 表格和数据,
• 可靠性,
• 内容/写作质量,
• 搜索,
• 帮助、反馈和容错机制,
• 页面布局，视觉设计，美感,
• 易用性，技术设计.

对于一个特定的网站，可以针对每一条给出评分，评分0~100之间，然后乘以1/10的加权。

USERFOCUS给出了247条评分指引。

各类评分数据

所有条目相加得出一个总分，此外还能输出一个表来告知如何改进。

雷达目标指示图——一个各项指标良好的网站

雷达目标指示图——一个各项指标很差的网站

竞品分析

关于这《批评官员的尺度》

《批评官员的尺度》在中国大陆的出版，真是令人欣喜。贯穿全书的是一个案件——《纽约时报》诉警察局沙利文案。通过这个案件，我们能看出美国是如何通过立法保障媒体的。

这是一个在 1800年之前还有《防治煽动法》的国家，“撰写，印刷，发表或出版任何针对联邦政府或者总统的不实之诩，诽谤和污蔑之词，意图损害政府，国会，总统声誉者……”最高判处两年徒刑，这个法律出台后的三年中，有十三人被捕入狱。

这样一个国家里，一个被公开辱骂的官员能够说“这是他们的宪法权利”，要靠多年形成的社会共识和文化经验。何帆翻译这本书，就是因为，《纽约时报诉沙利文案》是一个重要转折点。

这个社会对媒体的容忍的有多大，这个社会进步就有多大，一个文明，民主，法治的社会，都应当充分发挥传媒的监督作用。

关于微博的传播性

引用一段话：

微博的碎片化,短小化,是有它的弊端,但我们不是用它来搞科研,搞辩论,搞哲学研究,微博确实不足以承载太多,但它对于大多数中国人来说,能通过微博知道更多真相,或者说是事件的线索,这就足够,而这个事件到底是真是假,人人自会通过自己的价值体系去做判断。

关于谣言

微博人人可注册，偏有一两个人放着正经事不做，要到处造谣。所以最近看到一篇八股文《关于微博信息传播研究的几点思考》，里面提到：

微博传播具有“非过滤”性。传统媒体或政府、集团、个人发布的信息，都会经过一定的过滤，鉴别真伪、鉴别后续效应的正面或负面性等，即有一个信息审核过程，如报纸发新闻，需经版面编辑、责任编辑（部主任）、总编辑多道关口审核，重要新闻还须送上级领导或有关方面审核。但微博信息形成（编写）后，网站版主一般无精力审核，而转发者更是无审核其信息真伪及后果的意识，处于一种无责任感传播状态。所以，微博的“非过滤性”，其负面杀伤力极大，这是微博转播中的最值得注意的特点，也是微博独有的属性。

我不赞同，“流丸止于瓯臾，流言止于智者”。微博传播性非常广泛，这就表示更多的人能参与到信息传播过程中来，这就恰好像一个强大的过滤器，会把谣言和谬论过滤掉，留下真相。

另外，关于事前审查还是事后审查的区别，在《批评官员的尺度》中也有详细的说明。

本书首先叙述美国如何从英国普通法惯例的“只禁止事前限制”而支持言论后进行惩治，演变至二十世纪的对事后惩治的审慎思考和改变。

事前限制即给予政府极大的权利，任何违背政府、批评政府的言论都得不到出版。我国仍处于这一阶段。

事后惩罚虽然允许任何机构出版书籍，但如果时候审查出有“污蔑”等不当言论，会给予极大的罚款，这实际上形成了对事前出版的极大压力。

现在，美国事后惩治也极其慎重，“纽约时报诉沙利文案”功不可没，本书非常值得一读，五星推荐。

最近很喜欢看这个电视剧，在家吃饭的时候就端着碗看两集，有时候下班比较早也看两集。

LoL

英雄联盟最近在朋友圈里非常热门啊，我在2区也建了个号，叫“洋气的毛毛虫”，刚刚到30级，最喜欢玩小丑。

我喜欢LoL更大于dota，因为不允许反补，LoL中高手和新手在英雄操作上的优势劣势差不会太大，但LoL跟dota一样也是优势积累的游戏，那么如何积累优势呢？简单的说就是好好补刀，以多打少，如果是单路对单路1v1就不要太期望杀死对方，还不如安安心心补刀等队友来gank的时候形成2v1。

WordPress

课外时间研究一下WordPress，比起以前的乱搞，更加关注专业性比如国际化、注释、代码规范等等，做了个WordPress Theme站点记录一些心得，以后的主题发布也会丢到那个站点上。

PartyPoker

小时候看香港电影赌神玩扑克特别威风，不过也不太明白里面的规则，一些名词比如德州扑克、梭哈（show-hand）也不太明白，虽然一直很想学习，但没有机会和环境。最近发现有个网站PartyPoker（需翻墙）提供很完整的新手教程，同时它也是世界5大线上扑克室之一，它本身创始于2001年，是PartyGaming旗下的子公司，而PartyGaming早在2005年就在伦敦股票市场上市。

虽然说十赌九输，但其实主要是个人心态要放正，我认为对职业牌手来说，游戏目标并非赢取单局彩金，而是基于机率论上做出正确的决定。因为如此一来，期望回报值为正的情形下，长久下来赢钱总额会比输钱多。竞技类的扑克比赛与赌场做庄不同，是可以通过个人努力获得正的期望回报的。

PartyPoker简洁的界面设计，包罗万象的功能和人性化的设计使玩家在PartyPoker进行游戏也变成了一种享受。 在PartyPoker玩扑克可以下载客户端或者通过web端直接游戏，游戏品种也比较多样，包括德州扑克、奥马哈、奥马哈高低、七张牌梭哈和七张牌梭哈高低。