本文首发于知乎:https://zhuanlan.zhihu.com/p/638932295,2023-06-24
   更新历史记录  ==>  展开 / 收起

先决条件

  • 已有服务器和域名,域名已解析到服务器IP(国内域名还需备案)。
  • 安装了宝塔面板,且在宝塔安装了LNMP环境。

宝塔一键安装 WordPress

一键部署完成,记住数据库名、用户名和密码。

(可能会和你一开始写的不同,以这里的为准)

也可以在这里看。

部署SSL证书

我已在阿里云颁发了证书。颁发的过程可看:https://zhuanlan.zhihu.com/p/638910565

如果国外服务器,可以在宝塔直接颁发证书,见:玩转云服务(1):使用可道云搭建私人网盘 – Eterance的小窝

下载好nginx格式的证书,解压后有两个文件:.pem 和 .crt。按照宝塔的提示将它们的内容分别复制到对应位置即可。

然后开启强制https和到期提醒。现在,可以打开网址进入 WordPress 后台了。

第一次设置

选择语言后,将部署时的数据库信息填到对应位置,然后提交

接下来填写账户信息,然后开始安装。需要几分钟时间。

WordPress 重要设置

2023.07.02更新:之前漏了很多设置,后面吃了大亏……

这个数值调小点可以加载首页的时候减轻点服务器压力
这几个一定要一开始建站的时候改!!!!!!以后文章多了改起来就很痛苦了

安装 Sakurairo 主题

WordPress 的魅力之一就是主题的高度可自定义。我安装了 Sakurairo 主题:https://github.com/mirai-mamori/Sakurairo

首先下载安装包

然后在 WordPress 后台网页上传并安装下好的压缩包:

安装好了,直接启用

WordPress 插件

ThumbPress - Stop Generating Unnecessary Thumbnails

https://cn.wordpress.org/plugins/image-sizes/

禁用自动调整上传的图片大小

How to Stop WordPress From Resizing the Uploaded Photos

Simple User Avatar

https://cn.wordpress.org/plugins/simple-user-avatar/

可以从本地上传图像作为头像

Meow Lightbox

https://cn.wordpress.org/plugins/meow-lightbox/

2023.09.10 更新:Sakurairo 本身可开启 lightgallery 灯箱,更强大。

文章中可点击图片查看大图(似乎移动端用不了)。

需要先安装php_exif模块并且重启服务:

WP Super Cache

https://cn.wordpress.org/plugins/wp-super-cache/

将网页转为html静态网页发送给未登录的访问者,提高访问速度。

启用:

等一会儿,滚到下面做个测试:

显示时间戳相符就成功了。(虽然我也感觉不到有什么加速)

2023.07.01 更新:我错了,嘎嘎快……WP Super Cache:让你的网页加载爆炸快!

Code Snippets

https://cn.wordpress.org/plugins/code-snippets/

可以在不修改原始代码文件的情况下,插入 php 代码块已实现更多功能。

使用的代码块可以在网上找到很多,这里我放一下我目前在使用的和我自己捣鼓出来的代码块:WordPress Code Snippets 实用功能/短代码合集 – Eterance的小窝

Simple Custom CSS

https://cn.wordpress.org/plugins/custom-css-js/

Code Snippets 插件高级版才能插入CSS,这个插件可以免费插入。WordPress Simple Custom CSS and JS 实用CSS合集 – Eterance的小窝

设置伪静态

解决方法来自:https://github.com/mirai-mamori/Sakurairo/issues/280#issuecomment-1433145047

宝塔需要添加下面伪静态代码,才能使主题分类正常显示:

location /
{
try_files $uri $uri/ /index.php?$args;
}
rewrite /wp-admin$ $scheme://$host$uri/ permanent;

主题设置

每项设置的官方解说文档:

https://docs.fuukei.org/Sakurairo/Preliminary/

这里说一下我修改的设置。

主题设置在这里

全局设置

外观设置

主题搭配色:#2582C8 (灰姑娘女孩企划的印象色)

深色模式主题色:#2582C8

深色模式图像亮度:1(我非常讨厌自动图片变暗)

深色模式自动切换策略:永远开启(夜猫子党万岁!)

字体设置

文本字体大小:18

导航菜单设置

导航菜单圆角:8

小组件面板和前台相关设置

(背景在这里调,不要到 WordPress 后台调)

前台背景缩放方式:覆盖

前台背景模糊:开

小组件面板背景切换(前台背景):就是右下角一键切换背景。我默认和心形形状用图片1,星形和方形各用图片2、3,柠檬形状没有任何图片

前台背景透明度:0.2

页尾设置

页尾樱花图标:开

页尾信息:(根据自己的情况修改自己的备案信息,颜色可以自行修改)

<p style="color:#33d5ac"> <!--高垣枫的印象色-->
    © 2022-2023 Eterance. 版权所有。
    <a href="https://blog.baldcoder.top/index.php/terms-of-use/" target="_blank" rel="nofollow"> 
        版权声明与使用条款(自行替换为你的)
    </a>
</p>
<p>
    <!--云服务提供商-->
    <a href="https://www.aliyun.com/" target="_blank" rel="nofollow"> 
        <img src="https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png" alt="Server provider aliyun" style="height: 1.2em">
    </a>
    <!--空格-->
       
    <a href="https://azure.microsoft.com/" target="_blank" rel="nofollow"> 
        <img src="https://blog.baldcoder.top/wp-content/uploads/2023/06/62067060d7b91b0004122615-crop-2.png" alt="Storage provider azure" style="height: 1.2em">
    </a>
</p>
<p>
    <!--警察蓝-->
    <a style="color: #1F469A; display: inline-block; vertical-align: middle;" href="https://beian.miit.gov.cn" target="_blank">粤ICP备19070823号-1(自行替换为你的备案号)</a>
</p>
<p>
    <img src="<自行替换图片>" style="vertical-align: middle;width:16px"/>
    <a style="color: #1F469A; display: inline-block; vertical-align: middle;" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011302004045" target="_blank">粤公网安备 44011302004045号(自行替换为你的备案号与图标)</a>
</p>
<p>
    <img src="<自行替换图片>" style="vertical-align: middle;width:16px"/>
    <!--萌备的亮色-->
    <a style="color:#ff1485; display: inline-block; vertical-align: middle;" href="https://icp.gov.moe/?keyword=20233049" target="_blank">萌ICP备20233049号(自行替换为你的备案号与图标)</a>
</p>

页尾负载占用查询:关

页尾又拍云联盟Logo:关

额外设置

全局平滑滚动:关

主页设置

封面设置

封面圆角:0(全屏封面大图有圆角很难看的)

封面信息栏:第一种样式(第二种样式在封面社交账号比较多时移动端显示又问题)

封面信息栏圆角:8

封面签名栏文本:(清空)

封面签名栏打字特效:开

封面签名栏打字特效双引号:开

Typed.js初始化选项:

{"strings":[
"行路难!行路难!多歧路,今安在?", 
"长风破浪会有时,直挂云帆济沧海!"
],"typeSpeed":140,"backSpeed":50,"loop":false,"showCursor":true}

封面随机图片选项:本地(存了n张pixiv图片终于有用武之地了)

需要在宝塔面板中将图片上传到 /www/wwwroot/<你自己设定的网站文件夹名>/wp-content/themes/Sakurairo-main/manifest/gallary 里,并且不支持 webp。为了提高加载速度,我将图片压缩为 1300~1400 KB,质量 90 的 jpg 图片,此时图片仍有不错的质量。

自适应缩小图片尺寸的代码请见:自适应缩小图片分辨率到指定文件大小区间 – Eterance的小窝

封面下拉箭头:关

封面社交区域设置

社交网络图标:扁平多彩

封面社交区域圆角:8

公告板和区域标题设置

公告板:开

公告板"公告"图标:关

公告板背景:

裁剪自:pixiv 72125571
加了点高斯模糊

公告板文本:欢迎来到本懒狗的小窝!小窝仍在建设中,现在你看到的不代表最终样貌哦~

公告板对齐方向:第三个(居中)

公告板文本颜色:#ffffff

展示区域图标:fa-solid fa-book-open fa-fade fa-xl

展示区域标题:置顶展示

文章区域图标:fa-solid fa-crown fa-bounce fa-xl

文章区域标题:王の财宝

展示区域设置

展示区域圆角:8

文章区域设置

文章区域搭配色:#2582C8

页面设置

综合设置

页面剪切板版权提示:关(非常讨厌复制还要加版权信息,反人类)

文章页面设置

文章页面标题字体大小:40

文章页面作者名字:开

文章页面作者签名:关

文章最后更新时间:开

评论相关设置

页面评论区域显示:收缩

页面评论区域搭配色:#33d5ac(高垣枫的印象色)

页面评论区域 UA 信息:开

页面评论区域位置信息:开

页面评论区域机器人验证:开

邮件模板发件地址前缀:blog

用户邮件回复通知:开

管理员邮件回复通知:开

其他设置

统计数据显示格式

统计接口:WP-Statistics插件统计

统计数据显示格式:23,333

LightGallery灯箱效果:开



封面图:https://www.pixiv.net/artworks/62852025