哈咯米娜~久违的又来更新Wordpress单元啦!

之前和大家分享了如何使用FILEZIILA连接至SITEGROUND主机的FTP服务器

相信大家已经知道了如何通过FTP连接至主机服务器,下载和上传web代码了~

但是光是下载和上传,只能够进行最简单的备份与小范围的代码更新。

如果想进行主题修改之类的话,还是搭建一个本地环境会比较方便+安全。

因此本篇将教大家如何在本地搭建WordPress的开发环境哦~

1.为什么要搭建本地开发环境?

可能很多人会想,在wordpress上的自定义编辑器也可以更新主题的代码呀~何必大费周章搭建本地环境呢?

确实,如果你觉得只要使用免费主题的现有功能就可以满足你的需求的话,使用自定义编辑器就可以了。

毕竟大多数的人也不是为了学习网页设计而搭建网站,比起这个更倾向于专注于内容创作~

但如果你学会搭建本地开发环境的话会有以下好处:

1.1.可以更加安全的管理代码

如果只是小范围的更新,确实使用自定义编辑器即可。

可是如果是大范围的更新,很难保证你写的代码中有bug,导致bug直接反映在了你的网站上。

如果你还忘记备份的话,那基本上就无法还原至最初状态了。

1.2.免去插件中的冗赘代码

相信大多数的wordpress初学者都会通过安装插件来添加各种小功能。

但其实并不是所有的插件开发者都能写出简洁漂亮的代码。

很多插件中其实带有很多冗赘css或js码,这会导致你的网页在加载的时候速度变得很慢。

因此如果你可以在本地开发环境自己修改插件的代码的话,就可以优化网站的加载速度。

1.3.可以设计或开发自己想要的界面/功能

如果你觉得现有的开源主题都不是你的理想,无反满足你需要的功能的话。

就可以通过本地环境自己开发想要的主题或功能。

当然最初肯定要先学习基本的html,css,php等。

建议大家可以在youtube或是Udemy上学习如和做wordpress开发。

2.搭建WordPress本地开发环境需要准备什么?

那么接下来就进入今天的主题吧~

搭建Wordpress本地开发环境的话需要下面三点:

1.Web服务器:用来运行Web软件

2.数据库:存储你的网站数据

3.PHP:WordPress开发时使用的后端语言

4.代码编辑器:推荐使用VScode

3.本地开发工具“Local by Flywheel”

要在本地搭建WordPress环境可以使用很多种工具,但这里最推荐的是“Local by Flywheel”~

3.1.Local的特点

Local最大的特点就是,它包含了所有Wordpress开发所需要的工具(Web服务器,数据库,PHP)。

所以你只要安装Local,和一个代码编辑器就可以马上开始进行wordpress开发了。

当然除此之外,还有以下特点:

1.搭建步骤简单易懂

2.可以创建复数个本地网站

3.可以启用外部访问网址

4.可以切换数据库和PHP的版本

3.2.使用Local搭建本地环境

那么接下来我们就实际来搭建看看吧!

首先大家先到官网下载最新的软件 Local官网

3.2.1.环境定义

下载完毕后,点击运行。可以看到以下界面。

点击“Create a New Site”。

Snipaste 2020 08 23 23 29 01

输入你的网站名称。

点击 Advanced Option,可以设置你的域名以及储存代码的本地路径。

Snipaste 2020 08 23 23 32 29

定义你的环境版本。

这里可以选择“Preferred”使用推荐设置,想自定义的可以选择“Custom”。

Snipaste 2020 08 23 23 29 57

接下来设置你的本地WordPress账户名以及密码。

*这个和你实际的wordpress账户不一样,仅仅是用于登陆本地的Wordpress环境

点击“Add Site”。

Snipaste 2020 08 23 23 37 24

Local开始创建你的本地开发环境啦~

Snipaste 2020 08 23 23 39 23

3.2.2.登陆本地环境

创建好以后,就会显示你的网页的基本情报。

点击“Admin”。

Snipaste 2020 08 24 00 01 11

输入你刚才设置好的账户和密码。

Snipaste 2020 08 24 00 01 30

就可以登录到本地worpress的管理界面啦!

Snipaste 2020 08 24 00 01 44

3.2.3.导入数据

由于这个是新安装的wordpress环境,所以一切都是空白的。

你需要将你的网站内容全部都移动过来。

因此我们需要到正式环境下载所有的网站内容。

*注意,正式环境是网站在互联网中正式运行的地方;本地环境只用于开发和测试。

Snipaste 2020 09 04 00 41 35

下载完毕后,再把下载到的xml档案导入到你的本地wordpress。

Snipaste 2020 09 04 00 48 53

之后就可以看到和你的正式环境一样的页面出现在本地环境中啦。

*可能会因为有些主题,插件或是菜单设置没有同步过来,因此和正式环境有些差别,但基本上自己手动添加就可以了。

Snipaste 2020 09 04 00 50 47

3.2.4.代码编辑

之后来到你刚才指定的储存代码的本地路径。

app文件夹下就可以看到一切有关你的网页的代码啦!

Snipaste 2020 08 24 00 02 05

在VSCode中导入你的文件路径就可以进行代码编辑啦!

编辑完毕后,只要把自己更新好的代码在通过FTP上传到正式环境的Web服务器就可以了!

Snipaste 2020 09 04 00 54 11

4.注意事项

4.1.不要和正式环境混淆

正式环境是你的网页正式运行的地方,来自互联网的所有人时时刻刻都有可能来访问。

因此,通过Wordpress管理界面的自定义编辑器做的任何修改都会马上反应在正式环境上。

而本地环境是为了开发和测试存在。由于你做的任何修改只会反应在本地环境,所以可以放心的进行各种试错。

许多人经常把两个环境混淆,因此在这里再次提醒大家~

4.2.记得随时备份

虽然本地环境可以放心的进行各种试错。

但一旦忘记备份的话就又得重新去正式环境下载代码了,这相当的没有效率。

因此建议大家修改代码的时候一定要随时备份哦!


那么今天的Wordpress单元就和大家介绍到这里啦!

写这类文章的时候尽量不太使用专业和抽象的语言,

主要是希望可以帮助到想建站,但又没有太多网页开发知识的朋友们~

如果有帮助到你的话,记得关注我哦~会定期更新相关内容哒!

 

Kikajia最近终于开设了FB粉丝专页!!

点赞即可追踪最新帖文哦!您的支持是我最大的动力(o^^o)