Mortal's Blog

生命不息,折腾不止!

搭建WordPress个人网站

文章最后修改于:2020-10-19 16:42:50

1. 在VPS上搭建Wordpress

1.1 WordPress简介

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

1.2 搭建Wordpress

1.2.1 准备工作

1)买VPS,并使用Xshell通过ssh远程连接 Bandwagon host【如果使用国内服务器需要备案】
2)买域名,并将域名解析至vps的IP上 NameSilo

1.2.2 搭建网站环境

1)安装宝塔面板

以下以我所使用过的Debian9和Centos7为例,其余发行版的安装方式参见:宝塔Linux面板安装教程

Debian 9:

Centos 7:

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

2)安装网站环境

使用刚刚获得到的信息,浏览器访问你的后台,登陆宝塔面板,首次登陆宝塔面板后台,会弹出一键安装环境

  • 选择LNMP环境,节省资源
  • 调整Mysql和PHP版本(服务器为512M内存要选择Mysql5.5,各种主题和插件的最大兼容PHP 7.1)
  • 安装方式选择为编译安装
    《搭建Wordpress个人网站》

3)新建站点

网站——添加网站——提交(这里面的密码记不记无所谓,可以随时查看,后期还要通过这里进行网站管理)
《搭建Wordpress个人网站》

4)域名解析

  • 见“NameSilo域名解析.md”文档
  • 网站绑定域名:宝塔Linux面板——网站——设置——域名管理——添加 www.域名【不绑定会出现“您的请求在Web服务器中没有找到对应的站点!”问题】

1.2.3 安装Wordpress

1)下载Wordpress安装包

采用的是宝塔的远程下载功能,到wordpress官网下载安装包。下载传送门

  • 文件——打开刚刚创建的网站目录(网站下还很空,可以先把2个没用的 index.html 和 404.html 删除)——点击远程下载——将 https://cn.wordpress.org/latest-zh_CN.zip复制到url处——在当前文件夹下解压
    《搭建Wordpress个人网站》
  • 但这样不能直接使用的,还要继续将wordpress文件夹内的所有文件剪切到网站的根目录(即:/www/wwwroot/域名)

2)安装Wordpress

  • 在浏览器中输入: http://www.域名,应出现如下界面:
    《搭建Wordpress个人网站》
  • 现在就开始——填写“数据库名、用户名、密码”(去宝塔面板的数据库选项卡查看)
  • 配置网站的基本信息(记下来)——安装WordPress
    《搭建Wordpress个人网站》

1.3 WordPress优化

1.3.1 配置https

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

  • 操作步骤:
    1)宝塔Linux面板——网站——设置——SSL——选择 Let’s Encrypt,输入邮箱,并在两个域名前边打钩,确认没问题后点击申请
    《搭建Wordpress个人网站》
    2)稍等一下就会看到开启成功,勾选强制https(这样即使有用户访问http网页也会自动跳转到https格式)
    《搭建Wordpress个人网站》

1.3.2 设置固定链接

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

(2)操作步骤
1)登陆到Wordpress后台 – 设置 – 固定链接,选择一个自己想要的格式,除了朴素类型,其他的都是可以使用的(下面以数字型为例),如果你比较擅长SEO的话,自定义结构会非常有用。详见:WordPress固定链接设置教程
《搭建Wordpress个人网站》
2)再次访问会遇到如下错误(这是由于没有配置伪静态的缘故):
《搭建Wordpress个人网站》
3)宝塔Linux面板——网站——设置——伪静态——将以下代码填入并保存

1.4 WordPress成品

  • WordPress前台界面: https://www.域名

    《搭建Wordpress个人网站》

  • WordPress后台管理面板: https://www.域名/wp-admin/index.php

    《搭建Wordpress个人网站》

2. WordPress主题安装及自定义修改

2.1 WordPress主题安装

2.1.1 安装方法

WordPress后台——外观——主题——添加——上传主题——选择文件(.zip)——现在安装——启用

[注:删除主题] 鼠标悬浮在所要删除的主题上面——主题详情——删除

2.1.2 主题资源

[1] Kratos
《搭建Wordpress个人网站》

[2] Sakura

《搭建Wordpress个人网站》

2.2 自定义修改Kratos-2主题

2.2.1 统计网站运行时间

操作步骤:

  • 外观-小工具-自定义HTML-添加以下代码(自定义更改建站时间)

效果预览:

《搭建Wordpress个人网站》

2.2.2 统计博客访问量

操作步骤:

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

效果预览:

《搭建Wordpress个人网站》

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

操作步骤:

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

  • [1] 外观-主题编辑器- function.php添加如下代码:

  • [2] 在文章页面 single.php合适位置(“}?>人点赞”之后)添加如下代码:

  • [3] 在 content.php合适位置(“?>人点赞”之后)添加如下代码:

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

  • [4] 在 single.php合适位置(“ <div class="kratos-post-content">”之后)添加如下代码:

效果预览:

《搭建Wordpress个人网站》

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

Step1:文本转ASCII字符画在线工具——输入生成文字

  • 以下是我选择的shadow字体的“BlackCat”

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

2.2.5 加入了复制提醒

  • header.php合适位置( <body data-spy="scroll" data-target=".scrollspy">之后)添加如下代码:

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

  • header.php合适位置( <body data-spy="scroll" data-target=".scrollspy">之后)添加如下代码:

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

  • Step1:删除 functions.php文件的如下代码(1317-1319行)

  • Step2:删除 functions.php文件的如下代码(1349-1354行)

3. WordPress插件推荐及基本设置

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:Live2D模型的交互美观插件(自动换装版)
  • [15] eaplayer:网易云音乐插件(只需网易云的id即可播放歌单,无需上传音乐)

3.2 Crayon Syntax Highlighter插件说明

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

  • 问题描述:

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

    《搭建Wordpress个人网站》

    但如果不勾选 “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行附近):

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

    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 的设置中勾选如下选项:

    《搭建Wordpress个人网站》

4. WordPress网站SEO分析

[1] 借助“SEOquake”Chrome扩展程序,获取网站SEO信息。

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

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

《搭建Wordpress个人网站》

5. 参考资料

[1] 宝塔Linux面板安装教程

[2] WordPress建站教程

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

[4] 10款最值得使用的WordPress免费主题推荐

[5] WordPress主题安装的两个方法

[6] WordPress 主题 Sakura(Sakura主题作者的博客)

[7] Newlearnerの小站:使用WordPress—记博客成立一周年

[8] wordpress给文件添加最后修改时间标签

[9] 解决升级WordPress 5.1后回复评论框不跟随、页面刷新问题

[10] WordPress 插件推荐

[11] 定制 WordPress Markdown 编辑器及语法高亮

[12] WordPress Live2D 看板娘来了

[13] WordPress音乐播放器插件:eaplayer&Hermit

[14] 如何删除已被谷歌收录的404错误页面

[15] WordPress网站SEO优化指南,Rank Math安装使用教程

点赞

发表评论

电子邮件地址不会被公开。

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00