【07】WordPress建站优化系列教程 – 主题安装

(返回课程列表)

在前面的课程中,我们克服了大量困难,使用命令完成了网站的安装、备份、还原、完善。

从本节起,就渐渐不用操作命令——大多数工作都是在后台进行内容层面的运营了。

今天这一节,我们安装一下程序的主题与模板。

如果你不想看文字,可以直接点视频:

安全建议

在开始本节操作之前,黄师傅有 2 个安全上的建议。

其实之前也都提过,只是再废话一遍而已。

建议 1:不要上传来历不明的压缩包

我们前面也装过一些插件,但黄师傅还是要提醒你,有些破解版插件/非官方模板很强大、很好看,但也不安全。

这么说你可能觉得有些危言耸听,毕竟搞 WP 运营的,很多都没有太循规蹈矩,你身边可能因为安全问题翻车的并不多。

不过,第三方模板套件,虽然安全隐患并没有那么大,但因为与主题的兼容性因素,随着时间推移,总会出现一些样式上的问题。黄师傅就经常收到粉丝这样的提问:

wordpress-tutorial-07-bad-template-failure-case

看他给我的截图,明显是网站样式全乱了。据他所说,只是在某个公共模板库里面买了一套模板(Template Kit),后面什么都没做,有一天起来,问题就突然发生了。

所以,如果是我自己的话,我宁愿牺牲一些审美上的要素(第三方模板确实选项多,也好看些),来换取长期的兼容与稳定。

当然了,你硬是要用,也没人拦着你,毕竟这些平台上都是写了免责声明的:

wordpress-tutorial-07-third-party-template-disclaimer

有一定声誉的公共平台上的模板尚且如此,个人手上或者破解平台上的无名压缩包就更加可怕了。

所以黄师傅的建议是,能在后台自带的插件/主题面板装东西,就不要在外面下好压缩包再传上来。

另外,如果买插件的预算不够,就用免费版。

建议 2:重要节点及时备份

我们之前已经操作过了备份,可能你觉得比较麻烦,还没有照着做。但请不要等发生了什么,再去补救,因为那样就已经迟了。

所以,黄师傅建议你,如果不嫌麻烦,每天早上起来都要照着第五节的备份部分做一下。要做的其实并不多,几分钟就够了。

另外,下面这些重要节点,就更应该及时备份:

  • 执行任何“更新”动作之前。例如,WordPress 的程序、主题、插件更新之前,要备份。黄师傅在视频里面就提醒过,后台的那些更新小红点,别老忍不住去点,正确的做法是,攒够几天,备好份,然后再批量点开升级;
  • 大规模发布或修改内容之后。辛苦做完了一篇文章,或者一个重要的着陆页,弄完之后最好备份下。不说别的,万一被心怀恶意的同事给你删了,你手上有数据,就还能及时还原;
  • 网站服务器环境维护前后。就像上一节中,我们增加了一系列环境上的设置。对于新手朋友来说,命令行操作已经很不容易了,除了刻意练习,没人想从头再来一遍。所以,做完之后就立即备份,万一以后要还原,也不至于还原到更久的版本,多走冤枉路;
  • 网站准备迁移。当服务器快到期的时候,如果你发现续费价格疯涨,那就备份出来,换一台服务器(并更换解析之后)继续还原;

总的来讲,你应该把备份工作当成单机游戏中的存档。多存几次,失败了还能再回到打 boss 之前继续开始,要不然,一切从头,就太无趣了。

上一节的备份尾巴

第六节做完后,我们应该备份。

正好这是第二次备份(等下你会看到比第一次多了一步),黄师傅就带着你再做一次,模拟你以后每天早上起来的流程场景。

首先连接服务器。打开命令提示符/终端:

ssh [email protected]

输入密码登进去之后,我视频里面就直接开始第一步的创建备份目录了,其实这里应该把之前的备份目录连同里面的文件一起删掉。要不然的话,等下打包的时候会把上一次的内容也带进去,增加不必要的文件体积。

所以,此时应该:

rm /home/backup -r -f

rm 是 remove 的缩写,这样就删除了 /home/backup 下的所有历史备份文件。你应该也还有一点印象,这个 /home/backup 是我们自己之前备份的时候创建的。

rm 命令有点危险,粘贴的时候要小心点:

wordpress-tutorial-07-rm-home-backup

删除完之后(删完不会给反馈,光标换行就是完成了),我们再使用 ls 命令看看之前的备份目录:

ls /home/backup -lah
wordpress-tutorial-07-ls-home-backup-after-remove

如上图所示,删完之后再查看,就提示我们没有这个文件或者目录了。和我们的预期相符。

接着,才是重新创建它。从现在起,步骤就跟之前一模一样了。我们还是照着之前 05 节的步骤做:

mkdir -p /home/backup/wordpress  
wordpress-tutorial-07-create-backup-directory

创建好备份目录之后,就开始直接备份 WordPress 程序文件:

tar -czvf /home/backup/wordpress/wordpress-files-$(date +%Y%m%d).tar.gz -C /var/www/html/wordpress .

上面的路径信息需要和你真实程序路径一致。你第一次备份的时候怎么写,现在就怎么写:

wordpress-tutorial-07-backup-wp-files-1

打包完程序文件之后,使用 ls 看看 /home/backup/wordpress 目录:

ls /home/backup/wordpress -lah
wordpress-tutorial-07-ls-backup-directory-after-backup-wp-files

上面是黄师傅的视频操作截图。我的视频里面,没有提前删备份文件,所以看到了几天前第一次备份的文件(如红线所示)。下面绿线所示,才是刚才打包的文件。

通过大小也能看出,因为我们两次备份期间新增了一些东西,所以打包文件大小也从 26M 增加到了 37M.

接着,备份数据库:

mysqldump -u root -p wordpressdb > /home/backup/wordpress/wordpressdb-$(date +%Y%m%d).sql

上面命令中的数据库名 “wordpressdb”,需要和你新装时候创建的库名保持一致。上一次备份你怎么写,这里也还是照抄:

wordpress-tutorial-07-mysqldump-backup

如上图所示,粘贴上述命令回车执行之后,它会问我们密码,我们需要输入数据库的 root 密码(原因显而易见),然后回车。等光标换行之后,数据库就备份完成了。

然后,我们再用上面的 ls 命令看看 /home/backup/wordpress 目录里面现在多了什么:

ls /home/backup/wordpress -lah
wordpress-tutorial-07-ls-backup-directory-after-mysqldump

上图中红线所示的文件,就是刚才备份数据库的文件。你这里应该只有两条记录(1 个 .sql 文件 与 1 个 .gz 文件),因为我视频里面没有事先清理目录,所以能看到之前的历史文件。

正好也可以在图中对比下,和上一次比,我们的备份文件从 118K 增长到了 546K.

接着,就是备份 SSL 证书:

cp -r /etc/letsencrypt /home/backup/letsencrypt
wordpress-tutorial-07-ssl-certificate-backup

证书路径都是固定的,所以这条命令可以无脑复制。

接着,打包所有备份:

tar -czvf /home/backup/full-backup-$(date +%Y%m%d).tar.gz /home/backup/wordpress /home/backup/letsencrypt

这条命令也不用确定路径了,直接复制就好:

wordpress-tutorial-07-backup-final-files

打包进度完成后,你可以再用 ls 看一下这个最终备份文件所在的目录,即 /home/backup:

ls /home/backup
wordpress-tutorial-07-ls-final-backup-directory

如上图所示,不带 -lah 参数的话,就是简单的文件列表形式。红线所示是刚才打包后的总文件。因为黄师傅之前没有清理这个目录(应该要删掉),所以前几天的备份文件(0519.tar.gz)还在。

看到这个最终备份文件之后,我们就把它拿到自己的电脑上。还是打开你专用的存储文件夹,然后按住 Shift 键,再在文件夹里面右键,选择“在此处打开 Powershell 窗口”:

wordpress-tutorial-07-open-powershell-window-1

如果你不习惯这样,也可以在文件夹里面点这里:

wordpress-tutorial-07-open-powershell-window-2

点开之后,只要光标前面的路径提示,是你当前的备份文件夹就行:

wordpress-tutorial-07-open-powershell-window-3

苹果电脑就不用这样,直接另外开一个终端就行。等下下载完之后,自己到默认的下载文件夹去找文件。

然后输入命令,进行备份文件下载:

scp [email protected]:/home/backup/full-backup-20250527.tar.gz ./

注意替换你服务器的地址和备份文件名字,然后回车,输入服务器的 root 密码,下载就开始了:

wordpress-tutorial-07-download-backup-file-in-powershell

好,下载完成后,本轮备份就完成了。以后每天(如果你嫌麻烦,就每三天,或者每次更新内容之后)就这么弄。

安装主题

备份好之后,我进就进网站后台安装主题吧。

有的纯小白朋友可能忘了怎么进后台。最简单的办法是在你的域名首页后面加上 /wp-admin,然后回车进去:

wordpress-tutorial-07-enter-website-admin

进来之后,点击左侧栏的 “Appearance(外观)” -> “Themes(主题)”:

wordpress-tutorial-07-appearance-theme

进来主题菜单之后,我们能看到:

wordpress-tutorial-07-current-default-themes

如上图所示,进来主题首页之后,WordPress 程序会默认给我们 3 个主题,一般都是以当年年份命名。

如果你是做电商网站,或者企业官方网站的话,这些默认主题都不是太适合。所以,我们等下就点击右边的加号,自己添加新主题。

添加什么主题呢?如果你是纯新手,黄师傅视频里面也提到一个办法,就是自己去搜一下热门的 WP 主题推荐:

wordpress-tutorial-07-popular-theme-list

在视频教程里面,黄师傅自己装的是 Astra,这个主题热门度不低,虽然公众对它褒贬不一,但遇事不决时,无脑装它,不会有大错。

接着,我们点上面图中的加号,添加新主题:

wordpress-tutorial-07-do-not-upload-zip-theme

如上图所示,红圈里面有一个上传主题的按钮。黄师傅再啰嗦一遍,绝大多数情况下,你不能点那个按钮。除了特殊情况下,你才能从主题官方网站上下压缩包,再在这里传上去。

所以,我们要想找某个主题,应该是在右侧的搜索框中查找。例如,我要找 Astra:

wordpress-tutorial-07-search-for-new-theme

但只要不瞎的话,眼皮子底下就是 Astra. 于是我们就点进去先看看:

wordpress-tutorial-07-preview-astra

如上图所示,这只是它默认的一个模板,你如果不喜欢也没关系,我们马上就会换成其他模板。

简单看下之后,直接点上面的 Install 按钮。或者左上角 X 退出来之后,在小缩略图界面点击 Install 安装:

wordpress-tutorial-07-installing-astra-theme

这个安装其实很快,几秒钟就差不多了。接着,我们点击 Activate,启用它:

wordpress-tutorial-07-activate-astra-theme

启用之后,就跳转到了刚才来过的主题首页:

wordpress-tutorial-07-astra-theme-installed

如上图所示,我们之前点开看,默认的主题还是 2025,现在就已经替换成我们刚装的 Astra 了。

蓝色圈中的文字也提醒我们去首页看看。所以,我们点那个 “Visit site” 看看(按住 Ctrl 键再点它,因为等下还要回来这个页面)。你没看到这句提示语也没关系,直接访问你网站首页就行:

wordpress-tutorial-07-default-ugly-astra-template-preview

如上图所示,当我们再次访问网站首页(即前台,下同)时,发现主题已经生效了。

你的应该也和黄师傅一样,不是这个丑陋的白板,就是之前缩略图界面显示的默认模板。

既然它们都很难看,我们就还要装一些合适的模板。

安装模板

现在,继续回来之前的主题安装成功界面,再点那个蓝色的 “Let’s Get Started with Started Templates” 按钮。如果你刚才关掉了那个页面,就再点进去 Appearance -> Themes,应该能找到:

wordpress-tutorial-07-install-starter-templates-1

如上图所示,你的按钮可能不长这样,但就算找不到它,也可以在插件里面装同名插件(所以,Starter Templates 实际上是一个插件):

wordpress-tutorial-07-starter-templates-in-plugin-store

点进去 Starter Templates 之后,它一开始就会问我们,如何构建网站。默认的选项是 AI 构建,右边是传统模板构建:

wordpress-tutorial-07-ai-builder-vs-traditional-builder

如上图所示,它默认想让我们使用 AI 构建网站。你可以直接选它。选了 AI 之后,它会让你描述一下你的业务,愿景,再传一些产品图片,指定一些风格倾向,接着整个网站就自动化生成了。整个流程就像我们平时使用 AI 一样,快速高效。

缺点就是免费额度只有一次,用完就没有了。黄师傅自己之前就用过,所以视频里面用的是右边的传统经典模板构建。

当然了,如果说左边的 AI 是自动挡,那么右边的经典模板就是手动挡。你要是学会了右边的构建流程,左边的更加不在话下。

好,接下来,黄师傅点了右边的 Build with Templates,即经典模板构建。马上,它会问我们,使用什么编辑器:

wordpress-tutorial-07-select-website-builder

如上图所示,一共有两个选项,左边的 Block Editor 是 WordPress 官方开发的,也叫做古腾堡(即 Gutenberg),默认内置在 WordPress 程序中。

它在刚面世的时候不太好用,被骂了多年,但现在已经比较舒服了(黄师傅自己挺喜欢它的,我个人就很讨厌另装东西)。

右边的 Elementor 是第三方开发的编辑器,历史也比较悠久了,界面对新手和设计师比较友好,所以很多主题/模板都推荐它。也正是因为这个原因,Elementor 编辑器与很多主题/模板的样式兼容性都要好一些。

本教程用的是右边的 Elementor. 我们选它,接着,后台会自动帮我们装好这个编辑器(其实也是一个插件)。

不管你这一步选哪个,下一步都会自动加载可用的模板库:

wordpress-tutorial-07-syncing-template-library

加载完之后,就可以选择你喜欢的模板了:

wordpress-tutorial-07-all-templates-loaded

如上图所示,里面有很多模板。你可以随便点开一个你想要的,简单预览一下各个页面,喜欢的话就装。右上角有 Premium 标志的是付费模板(一般是按年订阅付费,一年也不便宜,要 119 美金,和 Astra Pro 合起来卖的)。

黄师傅也是它的白嫖用户,我们在免费模板中随便选一个差不多的,自己拿过去改改,也是一样用。

这里就要考虑你的用途来选择模板了。如果你是 C 端,那就要在顶部的 “E-Commerce” 栏目中选择(因为只有这些模板里面才带了购物模块)。

如果你是 B 端,就随便选,既可以和 C 端一样,选择带产品的模块,方便后面页面内容构建,也可以选不带产品的模块,因为只要做出询盘按钮就行,所以后面自行慢慢构建产品介绍页也没问题。

黄师傅的视频里面就选了这个 C 端模板:

wordpress-tutorial-07-select-final-demo-template

如上图所示,我选的是红圈中这个。通过 E-Commerce 筛选之后的模板,都是自带 WooCommerce 模块,用户可以下单购买的。

接着,我们点进去。就看到了模板初始自定义的一些选项(当然,你也可以先拉下去看看,确定下是不是你想要的。也不需要 100% 符合预期,超过 70% 就差不多了):

wordpress-tutorial-07-customize-template-1

如上图所示,左边有一些初始化选项,例如网站 Logo, 全局字体与颜色方案等,可以选择了。如果还没想好,就先用默认的,后面可以再改。

这里,我们直接点下面的 Continue 按钮,进入下一步:

wordpress-tutorial-07-select-features

如上图所示,接下来他要我们选择功能特性,前三项是不能取消的,其中就有 WooCommerce,另外四项可以先不选,等我们要的时候再来装。当然,如果你十分确定自己需要,也可以直接带上。

黄师傅之前应该提过,插件装多之后的负面效果,是让网站变得更加臃肿,所以,在一开始我们尽量精简一些。

点击蓝色的继续(即 Continue)按钮之后,黄师傅的视频演示里面报了一个错:

wordpress-tutorial-07-insufficient-upload-space

如上图所示,它说上传空间不足。这是因为我视频演示的时候,没有提前在 php.ini 中把上传限制改掉。但我们这里是在上一节就已经做了的。

所以,你如果是参照的文字版,这里不会报错。接着,黄师傅视频里面就开始上一节课中的《增补设置 2:上传文件大小限制》操作了。

改完上传大小之后,下一步就是填写个人信息:

wordpress-tutorial-07-collect-personal-information

如上图所示,我们瞎填一点就行了。

接着点继续,就开始构建了:

wordpress-tutorial-07-building-website

如上图所示,这个进度条会比较久,我们耐心等待一阵。

万一装到一半中断了,你的网站就会乱掉。这种情况下,最好是用之前的备份文件还原一下网站,因为数据库里面肯定是乱的,删也删不干净。

等它跑到百分之百,就会看到这条祝贺消息:

wordpress-tutorial-07-congratulations

如上图所示,我们这个时候就可以点蓝色按钮,查看自己的网站了。

第一次加载会有点卡,等加载完,新首页就能看到了:

wordpress-tutorial-07-new-homepage-overview

如上图所示,现在网站前台就和模板一模一样了,虽然填充数据还不是我们自己的,但看起来也是有模有样。

顶部的黑色功能栏没关系,是方便我们在登录状态下快速操作的,客户不会看到。例如,我们点上面的网站 title,就可以快速来到后台首页(后台状态下反之亦然):

wordpress-tutorial-07-quick-goto-dashboard

进来后台,发现侧栏也多了好多东西,都是刚才模板带进来的。你的可能更多,没关系,慢慢认识它们:

wordpress-tutorial-07-enlarged-site-menu

现在,你就可以自由玩耍一阵了。

因为之前都做了备份,也不怕玩坏它,就算把网站弄崩溃了,马上还原就是了。

等玩够了,就开始下一节,准备自己的网站内容。

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *