Soul Of Free Loop » WordPress

WordPress 3.8开启Google AMP的问题

Uranus Zhou — Tue, 01 Aug 2017 17:37:56 +0000

关于 AMP

Accelerated Mobile Pages（简称 AMP）是 Google 带领开发的开源项目，主要为了提升移动设备对网站的访问速度，大概包括 AMP HTML、AMP JS 和 AMP Cache 三部分，非常适合博客及新闻展示类的静态网站。

有关 AMP 的详细介绍可以参考其官方网站：

https://www.ampproject.org/zh_cn/

AMP 网页只能使用 AMP HTML 中允许的有限的标签，不允许使用 AMP Runtime、AMP Components 之外的 JS，而且 AMP Runtime、Components 都必须从 cdn.ampproject.org 加载，因此目前 AMP 网页都必须在翻墙状态下才能正常浏览。

AMP Cache 是负责缓存并传输 AMP 页面的 CDN 服务器，用户在 Google 移动端中点击 AMP 网站时，实际访问的是缓存过的页面。

WordPress 启用 AMP 的问题

WordPress 官方提供了 AMP 插件以支持直接为博客开启 AMP 加速，只是官方插件要求 WordPress 最低为 4.4 版本。

由于我的博客安装了 qTranslate 这款多语言插件，而该插件却只支持到 WordPress 3.8.1 版本，如果升级 WordPress 到最新版本，qTranslate 插件就会自动禁用。然而 qTranslate 插件是对 WordPress 数据库直接进行修改的，禁用之后博客文章就可能会同时显示多种语言的内容，这样显然是不可接受的。

虽然网上已经有人继承 qTranslate 原作发布了例如 qTranslate X 之类的支持新版本 WordPress 的插件，但为了数据安全（其实是懒）考虑我暂时还是不打算直接升级 WordPress 了。

不过还好我在 WordPress 插件库里找到一款看起来支持 WordPress 3.8 的 AMP 插件：AMP for WP，毕竟看此插件的介绍和评分都比官方的 AMP 插件要强哦，而且最低只要求 WordPress 3.0 版本。

AMP for WP 安装起来还是非常顺利的，插件选项里目前基本只提供了 Google Analytics UID 的设置选项，启用之后访问 AMP 版网站的方法是在地址后面加上 ?wpamp 后缀。

不过我刚开始测试访问 AMP 首页和文章就碰到问题了，直接没有任何显示了，看网页源代码输出信息不全，显然是 AMP for WP 插件对老版本 WordPress 兼容性还是有点问题。

修改 AMP for WP

首先修改 AMP for WP 插件的 wp-amp-ninja/admin/common.php 文件，打开 PHP 报错开关：

error_reporting(1);

这下访问博客首页和文章页面就能看到详细报错了：

Fatal error: Call to undefined function get_the_permalink() in /www/zohead.com/wp-content/plugins/wp-amp-ninja/includes/wpamp-front.php on line 24

Fatal error: Call to undefined function the_posts_pagination() in /www/zohead.com/wp-content/plugins/wp-amp-ninja/template/wpamp-content.php on line 53


Fatal error: Call to undefined function the_archive_title() in /www/zohead.com/wp-content/plugins/wp-amp-ninja/includes/wpamp-functions.php on line 600

Fatal error: Call to undefined function the_archive_description() in /www/zohead.com/wp-content/plugins/wp-amp-ninja/includes/wpamp-functions.php on line 601

经过查阅 WordPress 官方文档发现：

get_the_permalink 函数在 WordPress 3.9.0 版本开始引入，其实就是 1.0.0 版本就已经有的 get_permalink 函数；
the_posts_pagination 函数在 WordPress 4.1.0 版本开始引入，一同引入的还有 the_posts_navigation 函数，与 get_the_permalink 函数一样都位于 WordPress 代码库的 wp-includes/link-template.php 文件；
至于 the_archive_title 和 the_archive_description 函数的功能比较类似，支持显示文章的标题和描述并在前后插入自定义代码，同样也在 WordPress 4.1.0 版本开始引入，位于 WordPress 代码库的 wp-includes/general-template.php 文件。

由此可见，AMP for WP 实际上应该至少要求 WordPress 4.1.0 版本，只是作者并没有测试过是否兼容较低版本的 WordPress。

不过还好我看了下 WordPress 最新 4.8 版本的代码，上面缺少的几个 WordPress 内置函数都是功能比较独立的。

因此我稍微修改了一下博客目录下的 link-template.php 和 general-template.php 文件，将最新版本的 get_the_permalink、the_posts_pagination、the_posts_navigation、the_archive_title、the_archive_description 函数实现分别 Backport 到 WordPress 3.8 版本。Backport 完成之后再访问博客首页和文章，就没有 PHP 报错了。

不过初步试用下来，我还是发现 AMP for WP 插件的一些小问题：

如果通过 qTranslate 插件访问博客的英文版本（通过增加 ?lang=en 地址后缀），对应的 AMP 版页面地址会不正确，AMP for WP 插件在转换地址时并没有考虑地址中会带有其它后缀的情况；
AMP for WP 对于带有多种语言标题的文章直接显示数据库中多种语言合并在一起的标题效果，而并不是 qTranslate 插件根据客户端语言自动处理后的效果，这个问题在我使用的几个 WordPress 主题中都不会出现；
文章中插入的多行代码被合并成一行显示了，这是明显不能接受的；
文章的中文发表时间无法正确显示，统一显示为当前日期。

第一个问题需要修改 AMP for WP 插件的 wpamp-front.php、wpamp-functions.php、wpamp-header.php 这几个文件中转换地址的代码，例如 wpamp-front.php 文件的修改：

 		$the_permalink = get_the_permalink( $post->ID );
 	}
 	
-	$the_permalink = rtrim( $the_permalink, '/' ) . '/';
+	$the_permalink = rtrim( $the_permalink, '/' );
 	$perma = strpos( $the_permalink, "?" );
 	if ( $perma === false ) {
+		$the_permalink .= '/';
 		$sConnector = "?";
 	} else {
 		$sConnector = "&";

第二个问题需要修改 wpamp-content.php 文件，文章标题要做 apply_filters 处理：

                 
                 	
-                    	 « post_title ?>
+                    	 « post_title, $prev_post->ID ); ?>
 					
 					
-                        post_title ?> » 
+                        post_title, $next_post->ID ); ?> »

第三个问题就比较简单了，将 simple_html_dom.php 文件中替换回车和换行符的处理去掉就可以了。

第四个文章发表时间的问题也可以修改 wpamp-content.php 文件简化处理：

                     
                     By 
-                    
-                    on 
+                    on

另外我还对 AMP for WP 插件的页脚处理做了点小修改，将页脚上切换到博客首页桌面版本的链接改为切换到当前文章的桌面版本，方便访问者使用。

总结

对 AMP for WP 插件修改完成之后就可以访问博客的 AMP 版进行验证了，例如我的博客的 AMP 版首页地址就是：

https://zohead.com/?wpamp

普通用户可以通过安装 Google 推出的 AMP Validator 官方 Chrome 扩展检测所访问的 AMP 站点是否配置正确。

网站所有者可以用 Google 搜索的 AMP 在线测试工具进行检测：

https://search.google.com/test/amp

输入要测试的 AMP 版网址就可以开始检测，另外这个测试工具的另一个好处就是检测通过之后可以直接把你的 AMP 站点提交给 Google，让 Google 搜索蜘蛛尽快收录并进行 CDN 缓存。

现在通过 Google 移动端（例如 Android Chrome 浏览器）搜索我的博客，应该就能在搜索结果里看到下面的 AMP 闪电标志了：

点击搜索结果，你会发现访问的其实是 Google 缓存过的 AMP 地址，下面地址只有移动端浏览器才会显示 AMP 网页：

https://www.google.com/amp/s/zohead.com/%3fwpamp

初步启用 AMP 的大体感受就是如果你的梯子还可以，那访问 Google 缓存过的 AMP 网站速度还是非常快的，我这里估计访问 AMP 版网站所需要的流量大概为桌面版本的 1/3。

后面有时间的话还是希望能对 AMP for WP 插件继续改进，例如支持其它的 AMP 后缀或者使用专门的 AMP 子域名方便自己的服务器进行缓存之类的，最后祝大家玩的开心。

PHP 7找回MySQL扩展解决WordPress问题

Uranus Zhou — Tue, 21 Feb 2017 14:38:03 +0000

PHP 7 使用 MySQL 的问题

最近将 VPS 上的博客程序都迁移到 Bluemix 容器上之后，运行起来倒还算稳定，前两天手贱将 Bluemix 系统上的 LNMP 环境更新到了 1.3 版本，顺带地把 PHP 也更新到 7.0.7 版本了，不过更新完成之后访问博客就碰到了 WordPress 报错：

您的 PHP 似乎没有安装运行 WordPress 所必需的 MySQL 扩展。

这才想起来 PHP 7 已经完全移除了 MySQL 扩展支持，通过 phpinfo 也能看到老的 mysql_ 系列的函数都不能使用了，一般建议使用新的 PHP mysqli 或者 pdo 扩展进行替换。

我的博客程序使用的还是 WordPress 3.6 版本，自然不支持 PHP 7，如果直接升级 WordPress 的话又要考虑一堆 WordPress 插件的兼容性问题，于是像我这么懒的人就考虑如何把 PHP 7 的 MySQL 扩展找回来了。

找回 PHP 7 的 MySQL 扩展

由于 PHP 7 只是在发布前将对 MySQL 扩展的支持移除掉了，这样我们就可以检出遗留版本的支持 MySQL 扩展的 PHP 7 代码自行编译安装了，不过需要注意的就是 MySQL 扩展可是完全没有后续更新的了。

我们可以首先看看 LNMP 环境里 PHP 7 自带的扩展：

root@instance-007a20ff:/home/lnmp1.3/src/php-7.0.7/ext# ls
bcmath      date      ext_skel_win32.php  gmp        json      mysqlnd  pcre          pdo_odbc    pspell      simplexml  sqlite3   tokenizer  xsl
bz2         dba       fileinfo            hash       ldap      oci8     pdo           pdo_pgsql   readline    skeleton   standard  wddx       zip
calendar    dom       filter              iconv      libxml    odbc     pdo_dblib     pdo_sqlite  recode      snmp       sysvmsg   xml        zlib
com_dotnet  enchant   ftp                 imap       mbstring  opcache  pdo_firebird  pgsql       reflection  soap       sysvsem   xmlreader
ctype       exif      gd                  interbase  mcrypt    openssl  pdo_mysql     phar        session     sockets    sysvshm   xmlrpc
curl        ext_skel  gettext             intl       mysqli    pcntl    pdo_oci       posix       shmop       spl        tidy      xmlwriter

MySQL 扩展确实已经被移除了，我们可以直接在 ext 目录下检出老的 PHP MySQL 扩展代码：

root@instance-007a20ff:/home/lnmp1.3/src/php-7.0.7/ext# git clone https://github.com/php/pecl-database-mysql mysql --recursive
Cloning into 'mysql'...
remote: Counting objects: 145, done.
remote: Total 145 (delta 0), reused 0 (delta 0), pack-reused 145
Receiving objects: 100% (145/145), 88.41 KiB | 0 bytes/s, done.
Resolving deltas: 100% (65/65), done.
Checking connectivity... done.

使用 phpize 准备编译：

root@instance-007a20ff:/home/lnmp1.3/src/php-7.0.7/ext# cd mysql
root@instance-007a20ff:/home/lnmp1.3/src/php-7.0.7/ext/mysql# ls
config.m4  config.w32  CREDITS  LICENSE  mysql.mak  mysql_mysqlnd.h  package.xml  php_mysql.c  php_mysql.h  php_mysql_structs.h  README.md  tests
root@instance-007a20ff:/home/lnmp1.3/src/php-7.0.7/ext/mysql# /usr/local/php/bin/phpize
Configuring for:
PHP Api Version:         20151012
Zend Module Api No:      20151012
Zend Extension Api No:   320151012
root@instance-007a20ff:/home/lnmp1.3/src/php-7.0.7/ext/mysql# ./configure --with-php-config=/usr/local/php/bin/php-config

运行 make 编译之后 make install 确认 MySQL 扩展安装是否正确：

root@instance-007a20ff:/home/lnmp1.3/src/php-7.0.7/ext/mysql# make && make install
root@instance-007a20ff:~# ls /usr/local/php/lib/php/extensions/no-debug-non-zts-20151012/
fileinfo.so  mysql.so  opcache.a  opcache.so

最后修改 php.ini 配置文件，增加一行：

extension = "mysql.so"

重新启动 LNMP 程序就能在 phpinfo 里看到 MySQL 扩展了：

此时再访问 WordPress 博客就没有问题了，PHP 7 的问题初步搞定。另外网上也有人是直接把老的 MySQL 扩展静态编译进 PHP 7 程序中，这样用起来也还算比较方便的。当然后面我肯定还是要找机会直接升级 WordPress 了，毕竟 PHP 7 带着有各种漏洞的 WordPress 3.6 实在有点浪费哈，最后祝大家玩的开心。

考虑开启SRI防止七牛CDN HTTPS劫持

Uranus Zhou — Fri, 27 May 2016 14:48:28 +0000

最近我在使用 Android 上的 Chrome 浏览器访问博客页面时发现一个奇怪的问题：博客页面底部有一个悬浮的叉，但又没有显示任何实际的内容。赶紧用 Chromebook 打开博客网页，将 User Agent 切换成 Android Chrome，这时可以看到网页里无端多了一个 iframe，该 iframe 地址为 http://dbcpm.com/locate_1/jiwei_MBpt.html，如下图所示：

由于我确定博客 VPS 后台并没有被入侵，因此初步估计是网页被万恶的运营商给劫持了，但又一想我的博客已经启用了全站 HTTPS，按说不会轻易遇到这种问题了。马上看看 Chrome 浏览器上的地址栏标志，果然没有小绿锁了，浏览器控制台里也有 Mixed Content 报错：

可以看到浏览器拒绝加载 HTTP 的 JavaScript 文件，接着看看七牛 HTTPS 地址返回的数据是否正确：

这下立马发现返回的 JavaScript 代码不对了，开头是插入了 HTTP 形式的 JavaScript 文件地址，后面则看起来明显是广告一类的程序代码了。

难道是运营商做了 DNS 劫持导致我使用的七牛 CDN HTTPS 域名 dn-zohead.qbox.me 解析到了不正确的地址？如果是这样按说应该会出现 SSL 证书错误的，而且运营商只是为了插入广告代码而去搞 TLS 中间人攻击之类的感觉也不太合理。

考虑到另一种可能就是七牛 CDN 在从我的博客 VPS 地址回源的时候由于 DNS 污染之类的问题请求到了错误的数据，导致 HTTPS CDN 返回的数据也不对，这样还是登录到七牛后台管理，查看被劫持的 main.js 文件内容是否正确，下载下来对比却发现和我的博客源站内容是一致的，并没有被污染。

多次测试之后我发现如果再刷新页面七牛 HTTPS 劫持的问题可能又没了，而且在新标签页中打开被劫持的 HTTPS JavaScript 路径又能返回正确的数据了，这个时候通过 Chrome 调试工具看到的 HTTP 请求响应结果是这样的：

而被劫持的 HTTP 请求响应结果则是：

可以看到返回的 HTTP 头信息完全不同，而且多次刷新之后发现被劫持的 HTTPS 数据基本都来自 211.142.22.13 这台七牛的 CDN 服务器。查询之后发现这个 IP 地址是山西移动的（刚好我使用的是移动宽带），看起来只要浏览器是从 211.142.22.13 这台 CDN 服务器请求数据很可能得到的是被劫持的 JavaScript 代码，而如果七牛的 qbox.me 域名解析到的是其它 CDN 服务器地址则数据可能是正常的。

为了更好的重现这个问题，我们可以在 Linux 下先修改系统 hosts 文件使七牛的 qbox.me HTTPS 域名使用进行劫持操作的服务器，然后使用 wget 命令伪装 Android 移动设备以 HTTPS 地址从这台服务器请求 JavaScript 数据：

(trusty)zzm@localhost:~$ wget --referer="https://zohead.com/" --user-agent="Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.114 Mobile Safari/537.36" https://dn-zohead.qbox.me/test.js
--2016-05-27 00:30:37--  https://dn-zohead.qbox.me/test.js
Resolving dn-zohead.qbox.me (dn-zohead.qbox.me)... 211.142.22.13
Connecting to dn-zohead.qbox.me (dn-zohead.qbox.me)|211.142.22.13|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 2391 (2.3K) 1
Saving to: ‘test.js’

100%[===========================================================================================================>] 2,391       --.-K/s   in 0.002s  

2016-05-27 00:30:38 (1.18 MB/s) - ‘test.js’ saved [2391/2391]

上面使用 wget 的 --user-agent 参数伪装 Android Chrome 浏览器，使用 --referer 参数伪装从我的博客源站发起请求，而 test.js 同样是一个实际不存在的 JavaScript 地址，我们可以看看返回的数据：

(trusty)zzm@localhost:~$ head test.js 
var osrc ="http://dn-zohead.qbox.me/test.js";osrc+=(osrc.indexOf('?')>0?'&':'?')+'_t='+(new Date().getTime());document.write('