上一次遇见你 2

还挺顺利？

总之我就搭好了WP网站的基本框架。接下来写一下https://web.archive.org/web/20240917172240/https://vertin.me/archives/395的心路历程。

---

主题

最重要的事情就是主题。我选的是Wordpress 2017官方主题，看起来是这样的，就感觉……好看！并且它是有暗色模式的。

好，直接应用主题，在EasyWP上，它直接变成演示页面的样子了，有背景图片啥啥的。而在阿里云上它变到了集合文章的页面：这个时候只需要去Wordpress设置-阅读页重新指定。然后我第一次花了好长时间尝试弄懂怎么自定义主页那几张图片🤣，最上面的头图可以在Wordpress后台进入主题-自己那个主题-自定义（或者直接点最上面管理员栏的铅笔按钮）然后更改，中间的图片实际上只需要在每个文章的编辑页面设置“特征图片”或者“Feathered Image”就行。

但是我感觉首页图片纵向太高了，直接占满整个屏幕，这好么？这不好。改这个东西也花了好长时间。参考这个和这个，我们首先在Wordpress后台进入主题-自己那个主题-自定义，然后添加额外CSS类：

/*Computer screen */
@media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: 1200px;*/
    /*height: 100vh;*/
    height: 62vh;
    /*max-height: 100%;*/
    /*overflow: hidden;*/
    }
    .panel-image {
    height: 70vh;
    /*max-height: 1200px;*/
    }
    .single-featured-image-header {
    height: 40vw;
    /*not vh because it creates black edge on longer screen*/
    }
}

/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .custom-header {
    /*display: table;*/
    /*height: 300px;*/
    /*height: 75vh;*/
    height: 62vh;
    /*width: 100%;*/
}

/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: calc(100vh - 32px);*/
    height: calc(62vh - 32px);
    }
}

其中，根据我的测试，height控制头图header image的纵向长度. panel-image和single-featured-image-header分别控制子页面的panel image和首页中间的featured image. Mobile screen实际上似乎会影响所有平台。以及wp-content/themes/twentyseventeen/style.css里：

.background-fixed .panel-image {
    background-attachment: fixed;
}

好像没用，理论上应该是控制panel image在移动端是固定还是滑动的？

Anyway其它的就OK了。

---

性能控制

跟我之前说的一样，EasyWP完全不需要管这个。否则要在Wordpress安装WP Super Cache插件，安装好之后要改掉默认目录结构才能用。我记得安这个之前要装redis的memcached？忘了/_ \，反正要装，教程可另查。

如果你发现服务器内存占用过高，可以参照这里更改FPM配置文件（在宝塔php应用设置里）：

pm = dynamic #指定进程管理方式，有3种可供选择：static、dynamic和ondemand。
pm.max_children = 16 #static模式下创建的子进程数或dynamic模式下同一时刻允许最大的php-fpm子进程数量。
pm.start_servers = 10 #动态方式下的起始php-fpm进程数量。
pm.min_spare_servers = 8 #动态方式下服务器空闲时最小php-fpm进程数量。
pm.max_spare_servers = 16 #动态方式下服务器空闲时最大php-fpm进程数量。
pm.max_requests = 2000 #php-fpm子进程能处理的最大请求数。
pm.process_idle_timeout = 10s
request_terminate_timeout = 120

改完重启：

$ sudo systemctl start php-fpm      # 启动php-fpm
$ sudo systemctl stop php-fpm       # 停止php-fpm
$ sudo systemctl reload php-fpm     # 重载php-fpm
$ sudo systemctl restart php-fpm    # 重启php-fpm

然后设置伪静态：

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

# Add trailing slash to */wp-admin requests.
rewrite /wp-admin$ $scheme://$host$uri/ permanent;

然后Cloudflare是自带CDN的，所以可以设置Cache Rules来加速网页加载，但为保证wp后台工作正常，要设置规则为：
绕过URI等于/*.php*，缓存其它全部：URI包含/（这个要排到最后，免得影响前面）。
验证规则可以去CF首页的“跟踪”里。

---

安全控制

Again，高贵的EasyWP用户不用管，因为EasyWP的后台和数据库只能通过EasyWP的Dashboard访问。

首先，WP默认的后台地址都是域名/wp-admin/，这是非常危险的。我在没改后台前安装过WP安全插件Wordfence安全，然后发现每天都有二三十个bots疯狂试密码。所以为了让它们直接找不到在哪试，我们可以参照这个，在functions.php文末添加：

add_action('login_enqueue_scripts', 'tb_wp_login_protection');
function tb_wp_login_protection(){
    if( !isset($_GET['mima']) ){
        header( 'Location: ' . home_url() );
        exit;
    }
}

这个GET['']里的就是自己定义的新入口，这个例子里我们的后台地址就变成了/wp-login.php?mima

进一步地，我们还可以参考这个在宝塔设置伪静态来隐藏管理员账户名（顺便解决xmlrpc的问题）：

location ~ ^/wp-json/wp/v2/users {
  deny all;
}
location ~ ^/wp-includes/wlwmanifest.xml {
  deny all;
}
location ~ ^/xmlrpc.php$ {
  deny all;
}

还有一段在宝塔网页配置文件里：

location = /xmlrpc.php {
   deny all;
   access_log off;
   log_not_found off;
}

然后还有，Wordfence可以开启管理员二次验证、xmlrpc屏蔽。Wordfence防火墙开启的时候好像遇到了问题但是忘了怎么解决的了_(:3 」∠ )_。以及要记得设安全组，改宝塔面板端口、访问路径，关闭phpmyadmin公开访问，SSH只用密钥登录。CDN可以隐藏服务器的真实IP所以有还是用一下。

然后CF用户会发现WP的health check经常提示环回测试和REST API错误，这是因为Cloudflare会拦截环回测试和REST API，要设置WAF来解决：https://www.wordfence.com/help/advanced/compatibility/

我们还可以让Wordfence把安全报告自动发送邮件给我们，设置WP管理员发件邮箱（在functions.php里）：

// 配置邮件
add_action('phpmailer_init', 'mail_smtp');
function mail_smtp( $phpmailer ) {
    $phpmailer->FromName = '***'; // 发件人昵称
    $phpmailer->Host = '***'; // 邮箱SMTP服务器
    $phpmailer->Port = 465; // SMTP端口，不需要改
    $phpmailer->Username = '***@***'; // 邮箱账户
    $phpmailer->Password = '***'; // 此处填写邮箱生成的授权码，不是邮箱登录密码
    $phpmailer->From = '***@***'; // 邮箱账户同上
    $phpmailer->SMTPAuth = true;
    $phpmailer->SMTPSecure = 'ssl'; // 端口25时 留空，465时 ssl，不需要改
    $phpmailer->IsSMTP();
}

phew......好多事

---

各种媒体嵌入

首先是bilibili嵌入：插入自定义html

<!-- <iframe class="bilibili" src="//player.bilibili.com/player.html?bvid=BV1yS4y187mt&autoplay=0;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe> -->

但是直接这么插入会导致播放器大小很奇怪，这时就需要在footer.php里添加：

<script type="text/javascript">
    var elements = document.getElementsByClassName("bilibili");
    for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.style.height = element.scrollWidth * 0.5625 + "px"; }
</script>

来使它自适应窗口大小。

图片嵌入直接用编辑器就行。PDF也可以用原生嵌入，但是原生那个在移动端显示不了——一个免费的解决方案是使用PDF.js Viewer插件。音乐插件我选的是Cue，但是跳转页面时播放会中断。

---

总结插件

总之我用了这些插件：

Akismet 反垃圾评论：垃圾评论保护	只要你评论区是开着的就会遇到各种各样奇形怪状的评论，这个插件可以挡掉很多没用的
Cue	音乐插件，挺好看的
FileBird Lite	WP的媒体文件管理可以说是完全没有，这个插件可以提供一些最基本的文件夹来分类媒体
Remove Footer Credit	看到Proudly Powered by Wordpress了吗？这个插件可以删掉credit/改成其它文字
Syntax-highlighting Code Block (with Server-side Rendering)	用来显示代码的，好看
Wordfence安全	冲浪必备安全插件
你好多莉	唯一自带插件，卵用没有，留着也行
超级缓存	就是WP Super Cache，提速用

---

一点怀旧？

Well，其实我真挺喜欢这版的设计的，我记得第一次做完截了好多屏，但是写这篇文章的时候又找不到了，怅然若失。所以，你可以去给你的第一个网站做个网页存档留个纪念。That being said，说不定我哪天又换回去了呢，希望别来无恙~

趁服务器没过期截了一些，，，