最近在B站刷到一个很不错的WordPress开发视频

https://www.bilibili.com/video/BV1E7411A7Yj?p=1

最近PHP8.0的发布, 性能得到极大提升, 再加上我本身也用WordPress构建了稳定的网站 v2fy.com, 我打算试水WordPress开发

前言

搭建WordPress开发环境, 需要安装PHP, Mysql, Apache集成开发环境Xampp, 从WordPress官网获取最新的WordPress安装包

所有的安装包都通过wget存放到/opt目录中,如果日后不想用, 可以直接进入/opt删除文件夹

本文从零开始完成WordPress本地开发环境的搭建.

下载XAMPP并进行安装

cd /opt
sudo wget https://www.apachefriends.org/xampp-files/8.0.0/xampp-linux-x64-8.0.0-2-installer.run
chmod 755 ./xampp-linux-*-installer.run
sudo ./xampp-linux-*-installer.run
在Ubuntu20.04搭建WordPress开发环境_Word在Ubuntu20.04搭建WordPress开发环境_Word_02在Ubuntu20.04搭建WordPress开发环境_Word_03在Ubuntu20.04搭建WordPress开发环境_Word_04在Ubuntu20.04搭建WordPress开发环境_Word_05在Ubuntu20.04搭建WordPress开发环境_Word_06

启动后会有一个图形化操作界面,  界面中可以管理Mysql, Apache, ProFtpD 三个服务的开启,停止,重启,和配置

在Ubuntu20.04搭建WordPress开发环境_Word_07

如果操作界面被关闭,可以通过终端运行以下命令重新开启

sudo /opt/lampp/manager-linux-x64.run 

**其实我们可以通过命令行,更加方便的开启和终止以上三个服务(Mysql, Apache, ProFtpD) **

开启服务

sudo /opt/lampp/lampp start
在Ubuntu20.04搭建WordPress开发环境_Word_08

终止服务

sudo /opt/lampp/lampp stop
在Ubuntu20.04搭建WordPress开发环境_Word_09

重启服务

sudo /opt/lampp/lampp restart
在Ubuntu20.04搭建WordPress开发环境_Word_10

更多Linux下的安装问题详见官方文档: https://www.apachefriends.org/faq_linux.html

验证安装成功

打开火狐浏览器,输入http://localhost , 如果浏览器自动跳转到 [http://localhost/dashboard] 则说明安装成功

http://localhost
在Ubuntu20.04搭建WordPress开发环境_Word_11

目前PHP, Apache, Mysql 已经安装完成! 我们接下来开始获取最新的WordPress源码并开始运行

我们可以通过网页版的phpMyAdmin新建一个名为wordpress的数据库, 供后续的WordPress建站程序使用

进入phpMyAdmin

在Ubuntu20.04搭建WordPress开发环境_Word_12

创建登录用户

在Ubuntu20.04搭建WordPress开发环境_Word_13在Ubuntu20.04搭建WordPress开发环境_Word_14在Ubuntu20.04搭建WordPress开发环境_Word_15在Ubuntu20.04搭建WordPress开发环境_Word_16

从wordpress.org获取WordPress 5.6源码

# 进入/opt目录
cd /opt
# 获取源码
sudo wget https://wordpress.org/wordpress-5.6.tar.gz
# 解压源码
sudo tar -zxvf wordpress-5.6.tar.gz
# 将wordpress移动到 /opt/lampp/htdocs
sudo mv wordpress /opt/lampp/htdocs
在Ubuntu20.04搭建WordPress开发环境_Word_17

现在打开 http://localhost/wordpress 即可看到WordPress界面

在Ubuntu20.04搭建WordPress开发环境_Word_18

为了方便以后的开发,我们可以通过Apache的VirtualHost功能, 为wordpress配置一个域名

我未来的网站将会上线到 fangyuanxiaozhan.com , 所以我在本地为wordpress配置一个fangyuanxiaozhan.com的本地域名

首先在host文件中追加 127.0.0.1    fangyuanxiaozhan.com

sudo chmod 777 /etc/hosts
sudo echo "127.0.0.1    fangyuanxiaozhan.com" >> /etc/hosts
sudo chmod 755 /etc/hosts
在Ubuntu20.04搭建WordPress开发环境_Word_19

在 /opt/lampp/etc/httpd.conf 中取消https-vhost.conf的注释

在Ubuntu20.04搭建WordPress开发环境_Word_20

在 /opt/lampp/etc/extra/httpd-vhosts.conf 中追加以下配置

<VirtualHost *:80>
    DocumentRoot "/opt/lampp/htdocs/wordpress"
    ServerName fangyuanxiaozhan.com
    ErrorLog "logs/dummy-fangyuanxiaozhan.com-error_log"
    CustomLog "logs/dummy-fangyuanxiaozhan.com-access_log" common
</VirtualHost>
在Ubuntu20.04搭建WordPress开发环境_Word_21

运行以下命令重启服务

sudo /opt/lampp/lampp restart

在浏览器中访问fangyuanxiaozhan.com ,本地apache服务配置完成

在Ubuntu20.04搭建WordPress开发环境_Word_22

最后总结以下, 我们通过配置 127.0.0.1   fangyuanxiaozhan.com 让本地浏览器对fangyuanxiaozhan.com 的http请求全部发送到本地的apache服务器上, 通过为apache 配置vhosts , 让fangyuanxiaozhan.com 的主目录,定位到本机的 /opt/lampp/htdocs/wordpress 文件夹, 最后达成的效果是, 本地浏览器访问 fangyuanxiaozhan.com 即是访问本地服务

另外, 由于我们的Ubuntu20.04本身是虚拟机 , 我们还可以通过在终端输入 ifconfig | grep inet , 获取Ubuntu虚拟机的ip地址, 比如为10.211.55.6

在Ubuntu20.04搭建WordPress开发环境_Word_23

我们可以在外层物理机的host文件填入  10.211.55.6 fangyuanxiaozhan.com  ,实现外层物理机也能通过浏览器访问 fangyuanxiaozhan.com  查看开发中的wordpress

物理机MacBook也可以轻松访问开发环境

在Ubuntu20.04搭建WordPress开发环境_Word_24

为了保证后续数据库信息成功写入wp-config.php, 我们需要运行以下命令,  为 /opt/lampp/htdocs/wordpress 文件夹添加写入权限

sudo chmod 777 -R /opt/lampp/htdocs/wordpress

我们可以直接在MacBook中完成wordpress的配置

填入数据库信息

在Ubuntu20.04搭建WordPress开发环境_Word_25

数据库校验完成, 开始构建网站

在Ubuntu20.04搭建WordPress开发环境_Word_26

设置网站初始化属性

在Ubuntu20.04搭建WordPress开发环境_Word_27

网站安装完成

在Ubuntu20.04搭建WordPress开发环境_Word_28

登录

在Ubuntu20.04搭建WordPress开发环境_Word_29

WordPress安装完成

在Ubuntu20.04搭建WordPress开发环境_Word_30

 

 

 

 

在Ubuntu20.04搭建WordPress开发环境_Word_31