Quantum Bit

宝塔面板搭建Wordpress动态博客

6/5/2021 Wordpress动态博客宝塔面板

# 1. 宝塔面板

# 1.1 宝塔面板简介

宝塔面板是一个广东堡塔安全技术有限公司开发的一款LInux管理面板，分为商业版和免费版，有较好的图形化交互界面，可以傻瓜式的管理Linux服务器。

# 1.1.1 面板程序选择

选择面板程序请遵循以下原则

  • 如果你能够熟练地使用 Linux 系统，精通服务器运维，请不要使用面板程序。
  • 如果你了解 Nginx 的基本配置文件写法，且单服务器对应单个站点，请不要使用面板程序。
  • 如果你不需要运行 Web 程序，请不要使用面板程序。
  • 如果你的业务主要为互联网相关，请不要使用面板程序。
  • 如果你实在要用面板程序，请选择宝塔面板或 CPanel。

# 1.1.2 面板程序优缺点

面板程序具有优点，同时也具有缺点。最主要的问题在于，一旦面板程序出现 Bug，那几乎所有使用者都会受到极大的影响，且国内面板必定会上传你的服务器相关信息和站点信息，出了事儿公安可以轻松找到你。

优点：1）简单快捷。 2）多站点维护方便。3）图形化操作，适合新手。

缺点：1）具有一定的资源占用，低配置机器不推荐。2）宝塔面板等国内的面板程序会向其服务器上传你的服务器相关信息，且强制实名。3）具有出现重大 0day 漏洞的可能性（参考宝塔 pma 删库事件）。4）多少有点 Bug。

生产环境切记勿用宝塔面板进行部署，老老实实用命令进行原生部署，本人已经完全弃用了宝塔面板，本文只是留作存档。

# 1.2 宝塔面板的搭建

# 1.2.1 安装宝塔面板

以下以我所使用过的Debian11和Centos7为例，其余发行版的安装方式参见：宝塔Linux面板安装教程 (opens new window)

Debian 11：

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh
1

Centos 7：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
1

最后得到了宝塔面板的登陆信息，将其保存下来

    Bt-Panel: http://IP/********
    username: ********
    password: ********
1
2
3

注：如果忘记了可以使用bt default命令进行查看（只能看到面板地址和初始的账号及密码，如果改过了就只能重置了）

宝塔Linux面板

# 1.2.2 修改面板基本设置

进入宝塔面板的第一件事就是修改面板端口、面板用户、面板密码等关键信息，否则存在安全隐患，其他面板配置根据自己需要来就好。

  • Step1：安全——防火墙——放行指定端口，顺便把默认的8888端口关掉。

  • Step2：面板设置——修改面板端口、面板用户、面板密码等关键信息。

# 1.2.3 安装LNMP/LAMP开发环境

刚进来宝塔面板的时候会提示安装LNMP或者LAMP环境，根据需求勾选部分即可（忘记勾的可以去软件商店那里搜索下载），建议使用较慢的编译安装。

LNMP和LAMP环境

# 1.2.4 卸载宝塔面板

$ wget http://download.bt.cn/install/bt-uninstall.sh
$ sh bt-uninstall.sh
1
2

# 1.3 宝塔面板的常用使用

# 1.3.1 给网站设置反向代理

宝塔面板——网站——设置——反向代理——添加反向代理——填写代理名称和目标URL（http://127.0.0.1:port）

# 1.3.2 通过宝塔面板进行数据迁移

使用宝塔面板进行数据迁移之前，最好给新的服务器安装上和旧服务器一样的宝塔环境，包括php、mysql版本。 网站数据一定要提前备份，防止出现意外问题。

Step1：去旧服务器安装“宝塔一键迁移”插件

  • 宝塔面板——软件商店——应用搜索——宝塔一键迁移——安装

Step2：去新服务器获取API密钥，并添加旧服务器IP至白名单

  • 宝塔面板——面板设置——打开API接口——接口密钥重置——添加旧服务器IP至白名单

Step3：去旧服务器迁出

  • 宝塔一键迁移 ——设置——填写迁出地址与API密钥 ——选择迁出数据——一键迁移

# 2. Wordpress

# 2.1 Wordpress是什么

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。它具有插件架构和模板系统。截至2018年4月，排名前1000万的网站中超过30.6%在使用它。

# 2.2 Wordpress主题推荐

Wordpress有着非常丰富的主题与插件供我们使用，可以从后台管理面板或者Github找到它们，推荐几款主题如下：

# 2.2.1 Kratos主题

项目地址：https://github.com/Vtrois/Kratos (opens new window)

Kratos主题

# 2.2.2 Sakura主题

项目地址：https://github.com/mashirozx/Sakura/ (opens new window)

Sakura主题

# 2.3 Wordpress与其他建站工具对比

Wordpress是动态生成工具，它有各种主题和插件，而且也足够方便使用。但也有非常多的缺点，诸如：SEO不够友好，不够安全，对Markdown支持不好（插件支持，但样式不美观）。适合无任何编程基础的小白使用。

  • 注：如果要选用动态博客的话，其实更推荐Halo，早期我搭建该博客的时候还没有这个，后来已经换Vuepress静态博客的方案了，懒得折腾了。

Hexo与Hugo是静态生成工具，可以利用主题快速生成静态页面，SEO友好，更安全，访问速度更快，使用Markdown编写文章并Git推送至仓库。适合有一定编程基础的开发者使用。

# 3. 搭建Wordpress个人博客

以下我将采用宝塔面板与Docker混合部署的方式（宝塔面板安装PHP和Nginx环境并开启HTTPS，Docker安装MySQL），VPS系统用的是Debian 11 x86_64。

注：建议直接使用Docker部署Wordpress，然后使用Nginx反向代理服务，这里还保留了宝塔面板的部署方案是因为我早都已经废弃了Wordpress，懒得折腾了。

# 3.1 创建MySQL数据库

# 3.1.1 拉取MySQL镜像并创建实例容器

$ docker pull mysql:5.7
$ docker run -p 3306:3306 --name mysql \
-e TZ=Asia/Shanghai \
-v /mydocker/mysql/conf:/etc/mysql/conf.d \
-v /mydocker/mysql/logs:/var/log/mysql \
-v /mydocker/mysql/data:/var/lib/mysql \
-e MYSQL_ROOT_PASSWORD=[password] \
-d mysql:5.7 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
1
2
3
4
5
6
7
8

命令解释说明：

-p 3306:3306：将主机的3306端口映射到docker容器的3306端口。
--name mysql：运行服务名字
-e TZ=Asia/Shanghai：时区是使用了世界标准时间(UTC)。因为在中国使用，所以需要把时区改成东八区的。
-e MYSQL_ROOT_PASSWORD=[password]：初始化 root 用户的密码。
-d mysql:5.7 : 后台程序运行mysql5.7
--character-set-server=utf8mb4 ：设置字符集
--collation-server=utf8mb4_unicode_ci：设置校对集
1
2
3
4
5
6
7

设置开机自启

$ docker update mysql --restart=always
1

# 3.1.2 创建数据库及用户

在本地使用Navicat工具使用root用户连接上该数据库（国外服务器建议配置代理），使用如下四条命令创建数据库及用户。

--创建新的数据库，并设置数据库编码
$ CREATE DATABASE 你的数据库名 DEFAULT CHARSET=utf8 DEFAULT COLLATE utf8_unicode_ci;

--创建新的用户
$ CREATE USER '你的用户名'@'你的服务器IP' IDENTIFIED BY '你的密码';

--把数据库的管理权限给予刚刚创建的MySQL用户
$ GRANT ALL PRIVILEGES ON *.* TO '你的用户名'@'%' IDENTIFIED BY '你的密码' WITH GRANT OPTION;

--刷新权限，使用设置生效
$ FLUSH PRIVILEGES;
1
2
3
4
5
6
7
8
9
10
11

注：如果连接数据库时出现Access denied for user '用户名'@'某IP' (using password: YES)问题，则是第三句授权出了问题，你的本地外网IP被拦截了，那个'%'代表的是访问IP不受限制。

# 3.2 新建网站并部署Wordpress

# 3.2.1 宝塔面板新建网站

宝塔面板——网站——添加站点——填写域名、选择PHP版本即可（不用创建数据库和FTP）

注：如果你不采用上文所述的docker-mysql，那就要去软件商店安装一个mysql，并在这里创建数据库。下图提示的未安装数据库不用管，是因为宝塔检测不到docker部署的环境。

# 3.2.2 下载Wordpress

宝塔面板——文件，打开刚创建的网站目录——点击远程下载，将https://cn.wordpress.org/latest-zh_CN.zip复制到url处——在当前文件夹下解压，将文件夹内的所有文件剪切到网站的根目录（即/www/wwwroot/域名）

# 3.2.3 安装Wordpress

在浏览器中输入：http://www.域名，应出现如下界面：

安装Wordpress

现在就开始——填写“数据库名、用户名、密码”——配置网站的基本信息——安装WordPress，安装完毕便可访问了。

  • Wordpress前台界面：http://www.域名

  • Wordpress后台管理面板：http://www.域名/wp-admin/index.php

# 3.3 设置固定链接

# 3.3.1 为什么要设置固定链接

默认的URL是非常复杂且对搜索引擎不友好的，故须在搜索引擎抓取之前将URL设置成一种简单的、SEO友好的格式。而且有些插件和功能都会依赖固定链接，默认的链接格式可能不适配，所以说设定固定链接是非常必要的。

# 3.3.2 如何设置固定链接

登录到Wordpress后台管理面板——设置——固定链接，选择一个自己想要的格式，除了朴素类型，其他的都是可以使用的（下面以数字型为例），如果你比较擅长SEO的话，自定义结构会非常有用。详见：WordPress固定链接设置教程 (opens new window)

设置固定链接

这时再次访问会遇到404 Not Found的错误（这是由于没有配置伪静态的缘故），宝塔Linux面板——网站——设置——伪静态——将以下代码填入并保存即可。

    if (-f $request_filename/index.html){
    rewrite (.*) $1/index.html break;
    }
    if (-f $request_filename/index.php){
    rewrite (.*) $1/index.php;
    }
    if (!-f $request_filename){
    rewrite (.*) /index.php;
    }
    rewrite /wp-admin$ $scheme://$host$uri/ permanent;
1
2
3
4
5
6
7
8
9
10

# 3.4 申请泛域名SSL证书并开启HTTPS

SSL证书是一种数字证书，用于加密从用户的浏览器发送到Web服务器的数据。 通过这种方式，发送的数据对于使用Wireshark等数据包嗅探器来拦截和窃听您的通信的黑客来说是安全的。

Chrome一直在推动https，所有的http协议网站被标记为不安全，如果再不对网站进行https改造的话，那么可能会对信任度造成一定的影响，所以说对一个面向用户的网站来说，开启https是非常有必要的。

下面将使用acme.sh开源项目申请免费的 Let's Encrypt 泛域名SSL证书。

注：如果懒得折腾泛域名证书，也可在宝塔面板直接傻瓜式申请Let's Encrypt的单域名SSL证书（宝塔面板——网站——设置——SSL——Let's Encrypt——勾选域名，点文件验证——申请出来后设置强制HTTPS）。

# 3.4.1 安装 acme.sh

$ curl  https://get.acme.sh | sh
1

acme.sh

普通用户和 root 用户都可以安装使用，安装过程进行了以下几步：

  • [1] 把 acme.sh 安装到你的 root 目录下，并创建 一个 bash 的 alias, 方便你的使用。

  • [2] 自动为你创建 cronjob, 每天 0:00 点自动检测所有的证书, 如果快过期了, 需要更新, 则会自动更新证书。

注：安装过程不会污染已有的系统任何功能和文件，所有的修改都限制在安装目录中。那个socat未安装的问题不用管，那是http验证无Web Server时才需要的。

# 3.4.2 生成SSL泛域名证书

acme.sh 实现了 acme 协议支持的所有验证协议，一般有两种方式验证：http 和 dns 验证。

  • http 验证：http 方式需要在你的网站根目录下放置一个文件，来验证你的域名所有权。
  • dns 验证：dns 方式，在域名上添加一条 txt 解析记录，验证域名所有权。

dns 方式的可以使用域名解析商提供的 API 自动添加 txt 记录完成验证，下面我们将采用这种方法申请Namesilo的泛域名证书。

Step1：打开 https://www.namesilo.com/account/api-manager (opens new window) 去申请 NameSilo API，勾选第2个复选框，点击Generate，即可生成。

申请NameSilo-API

注：务必不要勾选上Generate key for read-only access的哪个复选框，否则会导致Unable to add the DNS record. Error add txt for domain的问题。另外，生成的API只出现一次，如果没记下来只能重置。

Step2：在服务器输入以下命令，实现自动dns验证生成泛域名证书。

$ cd /root/.acme.sh
$ export Namesilo_Key="xxxxxxxxxxxxxxxxxxxxxxxx"
$ ./acme.sh --issue --dns dns_namesilo --dnssleep 1800 -d example.com -d *.example.com
1
2
3

等待1800s即可看到申请下来的SSL证书（NameSilo的验证比较慢，官方文档上写的900s有时不足以验证完）

申请下来的SSL证书

生成文件都放在/root/.acme.sh/example.com/目录下，其中：example.com.key是密钥文件，fullchain.cer是证书文件。

注：如果你的域名不是NameSilo的，上述操作有所不同，具体请参考: https://github.com/acmesh-official/acme.sh/wiki/dnsapi (opens new window)

# 3.4.3 给网站开启HTTPS

打开宝塔面板——网站——设置——SSL——其他证书，把example.com.key密钥文件、fullchain.cer证书文件复制上去，强制https。

开启HTTPS

# 3.5 网站开启CDN服务

# 3.5.1 CDN与Cloudflare是什么

CDN的全称是Content Delivery Network，即内容分发网络。 CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。 CDN的关键技术主要有内容存储和分发技术。

Cloudflare 是一家全球最著名的 CDN 加速服务商，提供了免费和付费的网站加速和保护服务。即使是免费版，也提供了比较全面和强大的功能，非常不错。对于国外访问（或者使用代理）的加速效果十分明显，但对国内访问加速效果十分有限，如果是国内商用的话还是要买国内的CDN服务。

Cloudflare-CDN

通过使用 Cloudflare CDN 服务提供的全球节点，一方面可以提高网站响应速度和性能，节省源站资源；另一方面也可以保护站点抵御攻击，保证网站长期稳定在线。

# 3.5.2 开启 Cloudflare CDN 服务

Step1：打开 Cloudflare CDN官网 (opens new window)注册账号，登录后点击添加站点（填根域名即可），选择选择 Free 套餐，确认计划。

Step2：这时 Cloudflare 会自动扫描域名已有的 DNS 解析记录，如果扫描到的话，会显示在下面，没有或者显示不正确，则需要我们自己设置。

开启Cloudflare-CDN

Step3：添加成功后会显示在下面，点击 Continue 继续，按说明修改自己的域名服务器为 Cloudflare 给出的地址。

修改域名服务器地址

NameSilo的修改方式是：勾选域名——点击Change Nameservers——删掉原有的名称服务器，添加新的域名服务器。

NameSilo修改域名服务器

注：修改域名服务器后需要一定时间生效，不会立即检测到，需要稍微等待一会儿（可打开cmd输入nslookup 域名进行验证，如有多个IP出现，则证明已生效）。配置了CDN之后再ping域名指向的就不是我们服务器本身的IP地址了，这样对保护我们的服务器也有好处。

Step4：CDN生效后主页的域名处会标注绿色的“有效“二字，这时我们就可以开启CDN的各种服务了，根据自己需求进行配置就好。

Cloudflare-CDN功能

# 3.5.3 CDN缓存问题

开启了CDN之后，网站的一些静态资源在更新后不会即时刷新，需要等待一段时间。如果你是在调试过程，想要即时看到结果，可以开启开发模式（登录Cloudflare CDN——缓存——配置——打开“开发模式”的按钮）

Cloudflare-CDN的开发模式

# 4. Wordpress主题插件及自定义修改

# 4.1 Wordpress主题安装

登录到Wordpress后台管理面板——外观——主题——添加——上传主题——选择文件（.zip）——现在安装——启用

注：删除主题（鼠标悬浮在所要删除的主题上面——主题详情——删除）

# 4.2 自定义修改Kratos-2主题

# 4.2.1 统计网站运行时间

操作步骤：

外观——小工具——自定义HTML——添加以下代码

    <script>
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }
	</script>
	<script type="text/javascript" language="javascript">
    function setTime() {
        // 博客创建时间秒数，时间格式中，月比较特殊，是从0开始的，所以想要显示10月，得写9才行，如下
        var create_time = Math.round(new Date(Date.UTC(2019, 9, 18, 0, 0, 0))
                .getTime() / 1000);
        // 当前时间秒数,增加时区的差异
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'+ currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4] + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }
    setInterval(setTime, 1000);
	</script>
 
	<strong>网站运行：<span id="htmer_time" style="color:grey;font-size: 12pt;"></span></strong>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

效果预览：

# 4.2.2 统计博客访问量

操作步骤：

外观——主题编辑器-footer.php添加以下代码：不蒜子-极简网页计数器 (opens new window)

	 <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
1
2

如果在做不蒜子统计的时候，网站已经有了一些流量，需要做增量统计，添加的代码更改如下：

	<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
	<center><span id="busuanzi_container_site_pv" style='display:none'>本站总访问量<span id="busuanzi_value_site_pv"></span>次</span></center>
 
	<script>
        $(document).ready(function() {
            var int = setInterval(fixCount, 50);  // 50ms周期检测函数
            var countOffset = 27612;  // 27612为截止2021.6.7日访问本站的总page views数
			function fixCount() {            
       if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
        {
            $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); 
            clearInterval(int);
        }                  
        if ($("#busuanzi_container_site_pv").css("display") != "none")
        {
            $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 
            clearInterval(int); // 停止检测
        }  
    }
       	
	});
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果预览：

# 4.2.3 增加文章预计阅读时间、字数统计和最后修改时间

操作步骤：

Step1：增加文章阅读时间、字数统计

  • [1] 外观——主题编辑器——function.php添加如下代码：
    function count_words_read_time () {
    global $post;
       $text_num = mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');
       $read_time = ceil($text_num/400);
       $output .= '本文共' . $text_num . '个字，预计阅读时间' . $read_time  . '分钟。';
       return $output;
    }
     
    function count_words () {
    global $post;
       $text_num = mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');
       $output .= '本文共' . $text_num . '个字';
       return $output;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • [2] 在文章页面single.php合适位置（}?>人点赞之后）添加如下代码：
    <i class="fa fa-book"></i><?php echo count_words_read_time(); ?><br>
1
  • [3] 在content.php合适位置（?>人点赞之后）添加如下代码：
    <a href="<?php the_permalink() ?>"><i class="fa fa-book"></i> <?php echo count_words(); ?></a>
1

Step2：增加文章最后修改时间

  • [4] 在single.php合适位置（<div class="kratos-post-content">之后）添加如下代码：
<center>						
<?php if ( (int)get_the_modified_time("U") > (int)get_the_time("U") ) : ?>
 <div align="center">
 <font color="#999" size="2" align="center">
 文章最后修改于：<?php the_modified_time("Y-n-j H:i:s"); ?>
 </font>
 </div>
<?php endif; ?>
</center>
1
2
3
4
5
6
7
8
9

效果预览：

image-20210607174048940

# 4.2.4 给网站源代码页加入了ASCII字符画

Step1：文本转ASCII字符画在线工具 (opens new window)——输入生成文字

Step2：将<!--ASCII字符串-->添加至header.php开头

# 4.2.5 加入了复制提醒

在header.php合适位置（<body data-spy="scroll" data-target=".scrollspy">之后）添加如下代码：

<script type="text/javascript">
	document.body.oncopy=function(){alert("复制成功!转载请注明出处");}
</script>
1
2
3

# 4.2.6 修复回复评论按钮功能失效的问题

在header.php合适位置（<body data-spy="scroll" data-target=".scrollspy">之后）添加如下代码：

<!-- 修复回复评论按钮功能失效的问题 --><?php if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { ?>	<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=5.1.1'></script><?php } ?>
1

# 4.2.7 删除后端仪表盘中的推广信息

Step1：删除functions.php文件的如下代码（1317-1319行）

  <div class="notice notice-info">  <p class="about-description">嗨，欢迎使用 Kratos 主题开始文章创作，欢迎您加入主题 QQ 交流群：<a target="_blank" rel="nofollow" href="//shang.qq.com/wpa/qunwpa?idkey=6ee0cc94b247fe4a068be7442b38fce2850485422ec9d655f0a60563ae00bdd2">734508</a> ，如果发现任何 BUG 或者您有什么好的建议，请按照页面给出的提示提交<a target="_blank" rel="nofollow" href="https://github.com/Vtrois/Kratos/issues/new"> Issues </a>。</p>  </div>
1

Step2：删除functions.php文件的如下代码（1349-1354行）

function kratos_admin_footer_text($text) {       $text = '<span id="footer-thankyou">感谢使用 <a href=http://cn.wordpress.org/ target="_blank">WordPress</a>进行创作，<a target="_blank" rel="nofollow" href="//shang.qq.com/wpa/qunwpa?idkey=6ee0cc94b247fe4a068be7442b38fce2850485422ec9d655f0a60563ae00bdd2">点击</a> 加入站长交流群。</span>';    return $text;}add_filter('admin_footer_text', 'kratos_admin_footer_text');
1

# 4.2.8 在WordPress中禁用自我Pingbacks

将如下代码复制粘贴到主题的functions.php文件里即可

function no_self_ping( &$links ) {	$home = get_option( 'home' );	foreach ( $links as $l => $link )		if ( 0 === strpos( $link, $home ) )			unset($links[$l]);} add_action( 'pre_ping', 'no_self_ping' );
1

# 4.2.9 链接预加载提高访问速度

instant.page：通过预加载，提高网页加载速度的JavaScript库。它支持移动端和PC端，在PC端当鼠标悬浮在链接上和在移动端时链接可见后立即预加载，从而降低点击后网页的加载时间。复制以下HTML代码片段加到网页上即可生效。

Wordpress主题将该代码放在header.php的body里即可。

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
1

# 4.3 Wordpress插件推荐及基本设置

# 4.3.1 Wordpress插件推荐

  • [1] UpdraftPlus Backup：网站备份还原（可手动&&定时备份网站至Google Drive）
  • [2] iThemes Security：网站安全性优化（开启该插件后“主题编辑器”和“插件编辑器”都被隐藏了，如有需要可取消该设置，安全——Wordpress微调——配置设置——文件编辑器）
  • [3] Limit Login Attempts Reloaded：限制登录重试（防止wordpress后台被暴力破解）
  • [4] Akismet Anti-Spam：防垃圾评论
  • [5] Rank Math SEO：网站SEO优化（可导入Yoast SEO插件的配置）
  • [6] Post Views Counter：后台文章浏览量计数器(可导入历史浏览量)
  • [7] WP Statistics：网站访问统计
  • [8] WP Super Cache：动态页面缓存，有助于加快网页打开速度
  • [9] Beautify Cursor：美化鼠标样式
  • [10] Crayon Syntax Highlighter：代码高亮显示
  • [11] WP Editor.md：Markdown编辑器
  • [12] Table of Contents Plus：为文章添加索引导航
  • [13] Simple Local Avatars：上传头像至用户资料（设置Gravatar头像太过麻烦）
  • [14] poster-girl (opens new window)：Live2D模型的交互美观插件（自动换装版）
  • [15] eaplayer (opens new window)：网易云音乐插件（只需网易云的id即可播放歌单，无需上传音乐）
  • [16] WP Dark Mode：设置前后端暗黑模式

注：可在 https://wordpress.org/plugins/ (opens new window) 网站将插件下载到本地。

# 4.3.2 Crayon Syntax Highlighter插件说明

[1] 短代码高亮及代码多余尾行问题

  • 问题描述：

    网上资料大多通过对 Crayon Syntax Highlighter 进行如下设置，解决 markdown 代码块高亮的异常显示。

    但如果不勾选 “Capture code as Inline Tag” ，会导致使用单个反引号`标记短代码无法被高亮。

  • 问题分析：

    停用 Crayon Syntax Highlighter 之后，观察 markdown 插件的渲染规则：

    • 1.单反引号标记的代码会被渲染成 <code></code>
    • 2.三反引号标记的代码会被渲染成 <pre><code></code></pre>

    这会导致一个二难境地，如果不勾选 “Capture code as Inline Tag”，那么单反引号渲染出的 code 标签不会被 Crayon Syntax Highlighter 进一步高亮。相反，如果勾选该选项，<pre><code></code></pre>标签会被 Crayon Syntax Highlighter 进行两次高亮处理，导致异常，因为它默认会对 pre 标签也进行高亮。

  • 解决方案：

    1.插件——插件编辑器——打开crayon_wp.class.php文件

    2.找到如下代码（在273行附近）：

    // Convert <pre> tags to crayon tags, if neededif ((CrayonGlobalSettings::val(CrayonSettings::CAPTURE_PRE) || $skip_setting_check) && $in_flag[Crayon-5e15cdfba7567193151558Settings::CAPTURE_PRE]) {    // XXX This will fail if <pre></pre> is used inside another <pre></pre>    $wp_content = preg_replace_callback('#(?<!\$)<\s*pre(?=(?:([^>]*)\bclass\s*=\s*(["\'])(.*?)\2([^>]*))?)([^>]*)>(.*?)<\s*/\s*pre\s*>#msi', 'CrayonWP::pre_tag', $wp_content);}
    1

    添加几行代码如下即可解决问题：

            // Convert <pre> tags to crayon tags, if needed
        if ((CrayonGlobalSettings::val(CrayonSettings::CAPTURE_PRE) || $skip_setting_check) && $in_flag[CrayonSettings::CAPTURE_PRE]) {
            // XXX This will fail if <pre></pre> is used inside another <pre></pre>
            $wp_content = preg_replace_callback(
                '#(?<!\$)<\s*pre(?=(?:([^>]*)\bclass\s*=\s*(["\'])(.*?)\2([^>]*))?)([^>]*)>(.*?)<\s*/\s*pre\s*>#msi',
                function ($matches) {return preg_replace('#(<\s*code[^>]*>)|(</\s*code[^>]*>)#msi', '', $matches[0]);},
                $wp_content
            );
            $wp_content = preg_replace_callback('#(?<!\$)<\s*pre(?=(?:([^>]*)\bclass\s*=\s*(["\'])(.*?)\2([^>]*))?)([^>]*)>(.*?)<\s*/\s*pre\s*>#msi', 'CrayonWP::pre_tag', $wp_content);
        }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    3.这里做的事情是把 pre 标签中的 code 标签全部删掉，这样我们即可勾选 “Capture code as Inline Tag”，问题便全部解决。（同时，这种改法顺带着也解决了另一个问题，即代码块高亮显示会多出一个无用的空行，这也是 pre 和 code 标签嵌套导致的问题）

[2] >, <转义问题

  • 问题描述：代码中的大小于号会被转成 web 编码的形式，导致'<'显示为'&lt','>'显示为'&gt'。

  • 问题分析：在后台编辑框中提交的文本被保存到数据库中，在前台展示时才会经过Markdown转码。但是做的是先由Markdown根据语法转码后交由Crayon Syntax Highlighter进行代码高亮的渲染。而Markdown会将代码中的特殊符号经由HTML进行转义，而Crayon Syntax Highlighter会原封不动地显示<pre>标签中的代码，于是转义过后的代码就被原封不动地展示出来了。

  • 解决方案：需要在 Crayon Syntax Highlighter 的设置中勾选如下选项：

# 4.4 屏蔽WordPress主题或插件的更新提示

需求情景：**平常在维护WordPress时，有时候会因为一些错误或者兼容性等问题，我们不能马上升级主题或插件到最新的版本，需要保持旧版本，但是这时候会有一个问题就是每次点开后台都会看到非常显眼的小红点，影响后台体验。

# 4.4.1 隐藏所有的更新

如果你希望快速隐藏所有的更新提示，包括WordPress主题、WordPress插件、WordPress核心等的更新，可以在functions.php中添加下面的代码，表示移除掉所有的更新提示

function remove_core_updates(){
    global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');  //WordPress核心
add_filter('pre_site_transient_update_plugins','remove_core_updates'); //WordPress插件
add_filter('pre_site_transient_update_themes','remove_core_updates'); //WordPress主题
1
2
3
4
5
6

也可以通过最下面的三段代码进行控制，屏蔽某些类别的提示，比如主题或者插件，只需要注释对应的代码行便可。

隐藏所有更新使用起来非常方便，不过它可以能会影响到获取以后的更新信息。

# 4.4.2 隐藏特定插件的更新提示

如果希望长期屏蔽某个插件的更新，可以将下面的代码添加到functions.php，仅屏蔽单个插件的更新提示：

function remove_update_notifications( $value ) {
    if ( isset( $value ) && is_object( $value ) ) {
        unset( $value->response[ 'elementor/elementor.php' ] ); //替换为禁用的插件文件
    }
    return $value;
}
add_filter('site_transient_update_plugins', 'remove_update_notifications');
1
2
3
4
5
6
7

使用本代码，需要将本文中的elementor替换为你自己的插件，通常的格式为插件文件夹里面的主php文件，你可以到WordPress的插件目录/wp-content/plugins下进行查看。

# 4.4.3 隐藏特定主题的更新提示

如果你需要隐藏某个主题的更新，可以使用下面的代码：

function remove_theme_update_notification( $value ) {
    if ( isset( $value ) && is_object( $value ) ) {
        unset( $value->response['astra'] );  //替换为自己的主题名称
    }
    return $value;
}
add_filter( 'site_transient_update_themes', 'remove_theme_update_notification' );
1
2
3
4
5
6
7

同样，你需要把主题名替换为自己的，可以到WordPress主题目录 /wp-content/themes 下查找，主题的名称都比较简单，一般都是原主题名，比如ocanwp、astra、generatepress等。

# 5. Wordpress网站展示及SEO分析优化

# 5.1 Wordpress成品展示

Wordpress前台界面：https://域名

Wordpress前台展示

Wordpress后台管理面板：https://域名/wp-admin/index.php

Wordpress后台展示

# 5.2 SEO分析优化

# 5.2.1 网站SEO分析

[1] 借助 Google Search Console (opens new window) 分析Google搜索引擎的收录情况

Google-Search-Console

[2] 借助 站长工具 (opens new window) 分析搜索引擎对站点的收录情况

站长工具

[3] 借助“SEOquake (opens new window)”Chrome扩展程序，获取网站SEO信息。

打开目标网站，工具条就自动显示出该网站的alex排名、google、bing、百度收录量，外链内链数量等信息。

# 5.2.2 提交站点地图

[1] 什么是站点地图?

站点地图是可帮助搜索引擎查找、爬取和索引网站的所有内容。它还会告诉搜索引擎您网站上的哪些页面最重要。

网站地图主要有四种类型：

  • 普通XML网站地图：这是迄今为止最常见的网站地图类型。通常以XML Sitemap的形式链接到您网站上的页面。
  • 视频站点地图：专门用于帮助Google了解您页面上的视频内容。
  • 新闻站点地图：帮助Google在“Google新闻”审核过的网站上查找内容。
  • 图片站点地图：帮助Google 查找您网站上托管的所有图片。

[2] 为什么网站地图很重要？

正如Google所说：“如果正确链接了您网站的页面，则我们的网络爬虫通常可以发现您的大部分网站内容。”

Google在很大程度上是通过链接找到网页，如果您的网站是全新的，并且只有很少的外部反向链接，那么网站地图非常适合帮助Google在您的网站上查找页面。

[3] 如何生成并提交网站地图

可以使用第三方站点地图生成器工具，例如 http://XML-Sitemaps.com (opens new window)，它将生成一个XML文件，可以将其用作站点地图。

生成之后，把这个XML文件上传到网站目录，然后再在 Google Search Console 提交站点地图的 URL即可。

# 5.3 在保留SEO排名的情况下迁移网站

需求情景：用了很久的Wordpress迁移到了新创建的Hexo，换了新的服务器，新的域名，而旧的域名和服务器还未到期，因此可以将旧域名的流量转发到新域名，以尽可能保留旧域名来之不易的SEO排名。

# 5.3.1 设置 301 重定向转发流量

打开网站根目录下的wp-blog-header.php文件，在< ?php后面添加如下代码：

if (strtolower($_SERVER['SERVER_NAME']) != '新域名')
{
	$URIRedirect=$_SERVER['REQUEST_URI'];
	if(strtolower($URIRedirect)=="/index.php")
	{
		$URIRedirect="/";
	}
	header('HTTP/1.1 301 Moved Permanently');
	header('Location:https://新域名'.$URIRedirect);
	exit();
}
1
2
3
4
5
6
7
8
9
10
11

# 5.3.2 告知Google Search Console更换域名

前提：旧网站的所有链接都已经完成了301重定向的设置，Google 会对其进行验证。

操作步骤：打开 Google Search Console (opens new window) 用旧域名登录，在最下面找到“设置”菜单栏，点开之后在“资源设置”模块下有“地址更改”功能，输入新域名完成验证，然后再用新域名登录，确认迁移情况即可。

# 6. 参考资料

[1] 宝塔Linux面板安装教程 from 宝塔官方 (opens new window)

[2] WordPress建站教程 from WP主题站 (opens new window)

[3] “您的请求在Web服务器中没有找到对应的站点”问题解决方案 from CSDN (opens new window)

[4] 10款最值得使用的WordPress免费主题推荐 from WP主题站 (opens new window)

[5] WordPress主题安装的两个方法 from themebetter (opens new window)

[6] WordPress 主题 Sakura from 樱花庄的白猫 (opens new window)

[7] 使用WordPress—记博客成立一周年 from Newlearnerの小站 (opens new window)

[8] wordpress给文件添加最后修改时间标签 from 马谦的博客 (opens new window)

[9] 解决升级WordPress 5.1后回复评论框不跟随、页面刷新问题 from zhang.ge的博客 (opens new window)

[10] Namesilo 域名购买及使用教程 from 知乎 (opens new window)

[11] Cloudflare 入门教程：使用 Cloudflare 免费 CDN 加速 & 保护自己的网站 from 知乎 (opens new window)

[12] WordPress Live2D 看板娘来了 from 犬's Blog (opens new window)

[13] Nginx 502 Bad Gateway 错误的原因及解决方法 from 博客园 (opens new window)

[14] 如何删除已被谷歌收录的404错误页面 from kiwi建站笔记 (opens new window)

[15] WordPress网站SEO优化指南，Rank Math安装使用教程 (opens new window)

[16] 如何在WordPress中禁用自我Pingbacks from CSDN (opens new window)

[17] 通过预加载，提高网页加载速度的JavaScript库 from Github (opens new window)

[18] 如何隐藏WordPress主题或插件的更新提示 from WP主题站 (opens new window)

[19] 网站偶尔出现502 Bad Gateway的解决方案 from 珊瑚学院 (opens new window)

[20] WordPress实现301重定向（跳转）的5种方法 from CSDN (opens new window)

[21] 如何在不丢失SEO排名的情况下迁移Wordpress网站 from themeisle (opens new window)

[22] Linux 服务器的基本安全策略 from ahdark (opens new window)

[23] 官方文档：宝塔一键迁移测试版 from 宝塔官方 (opens new window)

[24] 使用宝塔一键迁移网站数据 from 主机笔记 (opens new window)

Last Updated: 10/6/2024, 5:46:17 PM