新直播预告+腾讯云拼团

新直播《一起挣外快吧——环境搭建+万能的WP+前端如何玩转WP》将于 2018-08-08 晚8点在 ttps://segmentfault.com/l/1500000015754431 开播,欢迎大家前来学习,一期发发发。

最近比较忙,所以就把不那么紧急的事儿往后放了。原本计划每月直播至少一次,眼看七月份已经快过完了,只好赶紧找个话题。想来想去,可能只有“挣外快”这个话题既吸引人又不需要我花太多时间准备,毕竟从 2016 年离职到现在我净帮人搭网站了。

所以,就有了这个直播:

一起挣外快吧——环境搭建+万能的WP+前端如何玩转WP

时间:2018-08-08 晚8点

作为一名程序员,我们最常被亲朋好友问到的问题应该是:你会修电脑么?不对,是“你会做网站么?”

对于我们前端来说,写个页面不在话下;可是一个网站,光有前端是不够的,服务器和 API 怎么解决呢?找外援么?我想大家都更愿意自己来吧。

这次分享,我希望教会大家以下技能:

  1. 本地开发环境的配置(基于 Windows 10 Linux Subsystem)
  2. 云服务器的购买和配置
  3. LNMP 环境搭建,安装 WordPress
  4. WordPress 主题开发
  5. 利用 WordPress Ajax API 作为数据接口

基本上,学会这些之后,你就可以在外面接活儿做网站了。希望大家都能借此丰富技能树、挣到更多的钱。

继续阅读“新直播预告+腾讯云拼团”

开发 WordPress 的 nginx 配置

整理两个开发 wp 的常用文件。

以前比较习惯放在 /etc/nginx/ 里,用 service nginx start 启动(对应 MacOS + brew 就是 /usr/local/etc/nginx/brew services start nginx)。来到我厂后,开始频繁接触 Nginx 和 OpenResty,现在觉得单独放在目录下面比较方便管理,所以改了一个出来。

配合 Makefile,方便日后使用:

  1. 启动服务 make run
  2. 关闭服务 make stop
  3. 重新加载 make reload
  4. 使用 php-fpm
  5. 代理上传资源(/wp-contents/uploads/)到真实服务器
  6. log 在本地
nginx = nginx

.PHONY: run
run:
    mkdir -p logs
    $(nginx) -p $$PWD -c nginx.conf

.PHONY: reload
reload: logs/nginx.pid all
    $(nginx) -p $$PWD -c conf/nginx.conf -t
    kill -HUP `cat $<`

.PHONY: reload
stop: logs/nginx.pid
    $(nginx) -p $$PWD -c conf/nginx.conf -t
    kill -QUIT `cat $<`
error_log logs/error.log error;
pid logs/nginx.pid;

events {
    accept_mutex off;
}

http {

    server {
        listen 9010;
        listen [::]:9010;

        include /usr/local/etc/nginx/mime.types;

        root /Users/meathill/Sites/wp-dev;

        index index.php index.html index.htm index.nginx-debian.html;

        server_name wp-dev.com;

        location / {
            try_files $uri $uri/ /index.php?$args;
        }

        location /wp-content/uploads/ {
            proxy_pass https://blog.meathill.com/wp-content/uploads/;
            proxy_set_header Host blog.meathill.com;
            proxy_ssl_name "blog.meathill.com";
            proxy_ssl_server_name on;
        }

        location ~ \.php$ {
            include /usr/local/etc/nginx/fastcgi.conf;

            fastcgi_pass 127.0.0.1:9999;
        }
    }
}

代码放在 Github wp-dev-env

服务器备份工具

目前维护着几个服务器,所以需要一个备份工具帮忙备份。本文记录一下需求。

目前维护着几个服务器,所以需要一个备份工具帮忙备份。因为都是 wordpress,所以

  1. 可以访问 wordpress 的安装路径
  2. 可以部署在服务器上
  3. 最好是 PHP,方便 require wp-config.php

备份的内容:

  1. 备份数据库,直接访问 wp-config.php 就行
  2. 备份 wp-uploads,这里要支持差异化备份了
  3. 备份服务器配置,包括:
    1. php 配置
    2. nginx 配置
    3. crontab 配置

备份的处理:

  1. 每次备份的内容打一个压缩包,命名为 服务器-站名-日期-时间.zip
  2. 将备份后的内容上传到指定服务器
  3. 还需要开发一个本地工具,用来从制定服务器上下载备份文件到本地(服务器存储有点贵)
  4. 自动删除半年前(可配置)前的备份文件

差不多这样,想起来随时补充

WP Super Cache 的 max-age 有问题

给博客上了全站 CDN,哈哈

我厂做的是高性能网关,CDN 也是其中一大功能,所以就要吃自己的狗粮。之前多次尝试在七牛上配置全站 CDN,均以失败告终,这次因为是自家的产品,可以找同事咨询,所以打算再试一次。

配置过程暂且不提,基本上很顺利。结果在缓存上遇到一些麻烦,源站(也就是我的博客)控制为:max-age=3,所以基本上完全失效。

由于这个东西很多地方都可以控制,所以只好逐一排查。首先打开 WP Super Cache 的配置——它负责缓存,所以从它找起——无果;然后 Google “wordpress cache-control”,无结果;然后 Google “max-age=3”,发现这个地址:Cache-Control max-age=3, must-revalidate,原来缓存 max-age=3 竟然是插件的问题,而且一直保留至今。

按图索骥,打开 /wp-content/plugins/wp-super-cache/wp-cache-phase1.php,没有找到,原来这段已经被挪到 wp-cache-phase2.php,而且亦然没改……修改为 86400,缓存就可以 HIT 了。

至于这个地方是不是 Bug?我觉得是。这么短的时间不科学,如果真的这样,不如放出来给用户选择。

放弃友言

告别友言,回归 WordPress 评论框。

WordPress 内嵌评论,不过不算太好用;当时也有其它用第三方评论的需求,所以就分别注册了友言和多说,游戏泡泡用多说,博客用友言。一直到现在。

多说前阵子关了,搜了一下发现网易云跟帖也要关了。国内硕果仅存的可能就是搜狐畅言了,不过搜狐嘛,老态龙钟,也不让人放心。最后决定,还是上外国的吧。

友言从我用开始就半死不活的样子,竟然坚持到现在,也挺难得。不过估计他们团队已经放弃这块业务了,Bug 多,功能少,各种服务失效。其实我早就想换,不过一直犯懒。现在 https 已经上了,友言也废了,提前切吧。

然后发现友言不支持评论导出……好吧,谢谢友言,有缘再见。

告别 Bluehost

原先的 Bluehost 空间出现问题,博客访问无限卡维护状态,于是索性把博客迁出来。所以,准备跟 Bluehost 说再见了。

Long long ago,201 为了让大家吃自己的狗粮,要求在职员工每个月都要写博客回帖子发评论。对我这种爱现的人来说,写就写嘛,于是积累了不少文章。离职的时候,还想继续写,不过担心放 201 平台上不安全,于是决定自己搭服务器。

那是2011年,当时我根本不懂服务器,市面上也没有云服务。我四处对比了一下,决定买 Bluehost 的域名+空间。Bluehost 跟联通是一路货色:“老用户与狗不得参加”。所以头一年各种优惠,吸引了我这种啥也不懂的小白,后面就再没优惠了。而我因为懒一直续到明年……

不过 Bluehost 也有好的地方,他们家的服务器专为建站调教,装 WordPress 各种方便,自动化脚本分分钟建起一个实例。其它常见网站程序也是如此。而且不限空间和流量,可以各种尝试各种摸索。于是我一股脑搭了一堆东西,虽然最后都没派上什么用场……

总之,从此,我开始接触学习使用服务器,以及服务器端软件。靠着无敌厚脸皮,我不断从身边各种运维那里一点一点的汲取服务器知识。如今,大体上一个服务器从空白系统到配置完成搭建网站我已经能轻松搞定了。

于是 Bluehost 空间就越来越不够用了:

  1. 首先它是空间,权限很低,很多东西无法安装
  2. 其次速度越来越慢,平均一个页面将近10秒的打开时间,实在难以接受
  3. 其次国内外的云服务越来越好,价格越来越低,Bluehost 一个月将近 15 刀的租金性价比低得令人发指……

所以我开始慢慢把服务迁出去,只是因为各种原因,比如这个空间2018年才到期,于是平日投入最大的博客一直没动,甚至宁愿写一个 Node.js 爬虫同步文章到 CDN,都不想迁……不过爬虫写的并不顺利,最后甚至可能就是它把博客搞挂了,如今桌面上非 Chrome 访问博客,都会无限卡在“维护”状态,无法恢复,甚至直接改代码注释掉状态判断都不行。

哎,所以没办法,迁出来罢!

回头把域名也转出来,明年空间到期后就彻底告别 Bluehost 了。

漏装php55w-mbstring导致中文邮件乱码

yum安装新版本php需要手动安装各种依赖。

朋友的WordPress发中文邮件总是乱码,喊我帮忙看看。很奇怪,后台、文章里的中文都能正常显示,看起来一切正常;我在我电脑上搭了一套,同样的代码,发邮件也没问题。

后来打开phpmailer的debug模式,发现什么都对,就是中文内容都是问号。

继续往上找到发邮件的函数,运气不错插件留了filter,遂修改模板,add_filter强制转换内容。

转换前先检查,不是UTF-8再转:

    if (!mb_detect_encoding($content)) {
      $content = iconv('ASCII', 'UTF-8', $content);
    }
    return $content;

结果代码传上去报错,说没有mb_detect_encoding,然后想起来yum安装php时确实默认不包含很多扩展,于是手动安装yum install php55w-mbstring。然后重启apache,发邮件测试,正常了。

我又想是不是缺少多字节文本模块(Multibyte String)导致原先无法发送中文呢?去掉filter,仍然正常,确实如此。

总结

yum安装新版php需要增加源,而新版的源默认不包含很多常用的库,使用的时候最好都装上。WordPress的翻译机制面对多字节文本时,编码不对不会报错,也需要小心。

WordPress插件:WPtouch

WPtouch可以让移动用户通过手机访问网站时,可以使用一种更适合智能电话操作的版式,而普通用户通过pc访问时则继续保持不变。这个插件是我在控制板看到的,就安装了试试看,结果表现不错(因为不会用手机截图,就不放图了),在手机上看起来的确很有app的范,所以推荐给大家。

使用WordPress的一大乐趣就是试用各种插件。因为开源的关系,所有开发者都可以写自己的插件,一方面选择的范围很宽,另一方面插件的质量也良莠不齐,能找到一个既满足需求又设计精良方便实用的插件很不容易——尤其是,如果想找中文插件就更困难了。

继续阅读“WordPress插件:WPtouch”