AMP （Accelerated Mobile Pages）是 Google 的一个开源的项目，通过使用 AMP HTML，可以极其显著的提升网页加载速度。最近我在移动设备上使用 Google 的时候，发现很多网站都开始使用了 AMP。在从 Google 上进入一个 AMP 页面时速度更是异常的快，快到超乎想象——延迟几乎为零。我的个人网站也配置了 AMP，本文将介绍如何在 WordPress 上支持 AMP，并开发插件对其自定义。
　　一、在自己的网站上实现 AMP
　　为了支持 AMP，需要让每个文章拥有两个页面：一个正常版本的页面，一个符合 AMP 标准的 AMP 页面。当然，也可以通过直接修改页面本身让其符合 AMP 规范，只不过这种方法做的改动会比较大。最简单实现 AMP 的方式就是通过插件的方式去实现，尤其是如果你正在使用 WordPress 的话。
　　（一）如何在 WordPress 上实现
　　Automattic（其实就是 WordPress 官方）制作了一个 AMP 插件，安装并激活这个插件之后，无需任何配置——这是我喜欢这个插件的原因之一，就能够激活 AMP 功能了。这个插件会自动生成每个文章的对应页面，并会相应的在原始页面添加 AMP 的 metadata。安装后表面上没有任何变化，但是当在一个文章页面后添加上 /amp/ 或者 ？amp=1 后，就能看到文章对应的 AMP 页面了。
　　这个插件之所以免去任何配置，是因为它实际上所提供的功能只是一个框架。用户（实际上是开发者）可以自己开发一个插件对其进行自定义。官方已经给出了具体的介绍，我列举一些我所自定义的东西：
　　1.使用无衬线字体，不引用 Google 字体库
　　这个插件默认使用了一个衬线字体，然而对于中文的使用引用外部字体毫无作用，甚至还会导致中英文字体错乱的问题。
　　下载这个 CSS，找到：
　　font-family： ‘Merriweather’， ‘Times New Roman’， Times， Serif；
　　替换为：
　　font-family： -apple-system， BlinkMacSystemFont， “Segoe UI”， “Roboto”， “Oxygen-Sans”， “Ubuntu”， “Cantarell”， “Helvetica Neue”， sans-serif；
　　把修改后的文件保存在你制作的插件的文件夹中的 templates 目录（如果没有，就创建一个）下的 my-amp-style.php。
　　在插件中添加下面代码：
　　add_filter（ ‘amp_post_template_file’， ‘tlo_amp_set_custom_template’， 10， 3 ）；
　　function tlo_amp_set_custom_template（ $file， $type， $post ） {
　　if （ ‘style’ === $type ） {
　　// Use stystem font
　　$file = dirname（ __FILE__ ） . ‘/templates/amp-style.php’；
　　}
　　return $file；
　　}
　　add_action（ ‘amp_post_template_head’， ‘tlo_remove_fonts’， 2 ）；
　　function tlo_remove_fonts（）{
　　remove_action（ ‘amp_post_template_head’， ‘amp_post_template_add_fonts’ ）； // Remove Google fonts.
　　}
　　这将使用系统默认的无衬线字体，在苹果设备上中文字体就是苹方，同时还会移除页面上的 Google 字体。
　　2.添加自定义的统计内容
　　AMP 本来就支持 Google Analytics，但是如果需要添加自己的统计，虽不能通过 JS 的方法，但是最简单的方式是通过添加一个空的 Gif：
　　add_action（ ‘amp_post_template_footer’， ‘tlo_amp_add_pixel’ ）；
　　function tlo_amp_add_pixel（ $amp_template ） {
　　//$post_id = $amp_template->get（ ‘post_id’ ）；
　　$piwik_id = $GLOBALS[‘wp-piwik’]->getOption（ ‘site_id’ ）；
　　？>
　　&rec=1&action_name=TITLE&urlref=DOCUMENT_REFERRER&url=CANONICAL_URL&rand=RANDOM”>
　　<？php
　　}
　　这是一个使用 Piwik 工具进行统计的例子，与 WP-Piwik 插件配合，可以自动获取站点 ID（需要手动替换域名）。
　　3.添加中文支持
　　最近我给大家 AMP 做了个翻译，请下载中文包：amp-zh_CN.zip（翻译版本：v2），解压到这个插件的 /language/ 下即可。
　　二、总结
　　Google 的 AMP 功能非常类似于 Facebook 的 Instant Article，只不过后者甚至都不需要自己去托管服务器。AMP 中大量的 CSS 仍能自己控制，这相比国内絕大多数搜索引擎的转码页面的效果还是要好不少。网页中仍能自己投放广告内容，这也是 AMP 能被接受的那么快的原因。
　　当然，就像之前说的，网页可以通过直接修改页面本身让其符合 AMP 规范，或者在制作之初就按照 AMP 的规范作，AMP 官网就是一个典型的例子。然而这种做法未免过于激进，兼容性也不是很好，使用前应该做好充分考虑。
　　作者简介：
　　郭泽宇（2000-05-）男 汉 北京人 北京市海淀外国语试验学校