×

主题开发

本栏目提供WordPress主题开发制作,WordPress模版开发修改,WordPress网站集成等WordPress开发方面的资讯和技巧。

如何使用GitHub开发WordPress主题或插件

王超 2021-11-22 主题开发 27 次

由于最近一个客户和我们签订了一个深度合作协议,共同开发一个WordPress项目链,并共同运营,共同受益,考虑到项目的长期发展,需要将项目代码托管到GitHub上面,后期该项目会吸纳全球WordPress经营共同开发管理,所以就需要研究一下如何使用GitHub开发WordPress主题或插件,于是发现了一篇文章,然后先粘贴过来,慢慢研究,同时也分享给大家一起学习。

如果你花了不少时间了解WordPress建站,那么你应该也知道GitHub。对大部分程序员和开发人员来说,GitHub是最流行的平台,这个平台可以托管所有跟编程和代码有关的项目,而且还可以跟其他人进行合作开发。或许你也自己尝试过,但是可能不知道从哪里下手。

我们应该了解GitHub这个平台,它是一个对开发项目进行跟踪、管理和合作开发的优秀平台,对开发人员来说熟悉并利用这个平台非常值得。它可以在线托管开发项目,而且还可以利用其强大的Git版本对项目的每次更改进行监控。

GitHub简介

多数对GitHub不了解的人可能会认为GitHub上面的东西太过复杂,太过深奥。其实GitHub的核心部分十分简单。实际上,GitHub是专门为开发人员开发的代码免费托管服务。它的主要用途是放置、存储用于共享和协作的开发项目,便于其他用户可以贡献代码并下载代码。

GitHub的核心便是Git功能,这个功能相当强大。这是一个版本控制系统,可以对一个项目所有的改动进行追踪。这个系统的强大之处在于它的综合程度。因为Git对一个项目里的每个文件和改动情况都进行追踪,因此用户可以利用它迅速回到之前的任意一个版本。

开发人员还可以在GitHub上创建“分支”(branch),这里的分支指的是一个项目的拷贝版本。“分支”还便于开发人员对一个项目进行单独编辑、更改和测试,而且不会影响整体项目。另外,如果你想把自己的修改版本跟原来的进行合并(merge)也可以,当然也可以放弃合并。

这些功能是理解Git重要性的关键。比如说,项目负责人不用担心开发人员对项目造成致命的错误,因为开发人员可以创建分支并随时可以返回之前的版本。另外,开发人员还可以跟平台上其他开发人员合作开发项目。事实上,WordPress自身就是这样被开发出来的。

入手GitHub

在入手GitHub前,我们需要一个可以同时使用Git和GitHub的系统。首先,我们需要将Git下载下来并安装到本地计算机上。然后我们就可以利用它来完成一些重要的功能,例如在计算机和GitHub的文件存储库之间传输文件。

GitHub只是一个项目的托管和存储平台,因此所有有关项目的实际开发都是在本地计算机上进行的。开发人员可以使用“repository”来存储每个项目。

从理论上来说,这听起来可能有点儿绕口。所以我们来了解一下最典型的工作流程:

1、用户在GitHub的存储库(repository)中托管了一个项目;

2、用户创建一个本地存储库(repository),并使用Git将项目的最新版本从GitHub上抽取出来;

3、用户可以在本地计算机上运行该项目,当用户对项目做出更改以后,还可以将项目存放回去。

开发人员要根据自己的喜好和根据项目的要求制定详细的工作流程。不过最重要的是开发过程要适合开发人员本身、项目本身和其他项目开发人员。

为了充分利用Git,开发人员还需要利用命令行。Git最常见的方式是SSH(安全框架协议),它的功能就是命令行接口。如果你还不知道如何利用命令行,建议你先熟悉一下流程。

利用GitHub开发WordPress(11个步骤)

现在我们可以尝试自己利用GitHub开发项目了。在本例中,我们可以创建一个GitHub项目用于开发WordPress主题。接下来我们来看一下如何创建GitHub账户和2个存储库(repository),然后再向大家演示如何将主题在新旧版本中切换。

第1步:创建WordPress本地环境

要开发WordPress,我们需要一个模拟环境。这个模拟环境我们可以随意使用,也可以测试一些新的WordPress插件和主题,而且无需担心会对实际的网站造成任何负面影响,毕竟这是一个本地环境。

因此,我们需要将WordPress安装到本地计算机上。使用方法也很简单,这里我们推荐使用MAMP这款软件。大家可以利用MAMP快速搭建WordPress网站所需的模拟环境。

将MAMP下载下来并安装到本地计算机上

首先,我们需要进入MAMP下载页面,一般来说我们选择MAMP就足够了,不需要下载MAMP Pro,毕竟Pro版本需要付费的。

在下载MAMP时,我们需要根据自己的计算机型号选择相应的版本下载。

下载并解压WordPress建站程序

登录wordpress.org,然后选择Get WordPress来下载WordPress程序。

完成下载后,我们得到的是一个ZIP文件(压缩文件),不过后缀可能包含WordPress的版本号,如WordPress-5-5.1。不过这里我们需要将这个ZIP文件解压出来,形成单独的一个以WordPress命名的文件夹,后边不能包含版本号。如下图所示:

在MAMP上建立数据库并命名为WordPress

首先我们打开已经安装好的MAMP软件,等右侧的Apache Server和MySQL Server后边点全部变成绿色后,我们点击Open Start Page(整个过程不要关闭这个MAMP界面

在新弹出的页面中,我们在Tools的下拉菜单中找到phpMyAdmin并点击该选项,随后我们就进入了数据库创建页面。

在新弹出的phpMyAdmin界面,我们点击右侧区域最左上角的Databases,然后在Create Database下方开头处输入WordPress,接着点击最后的Create按钮来创建名为WordPress的数据库。请参照下图:

操作完成后,我们可以在界面左侧看到名为WordPress的数据库。

接下来,我们需要找到安装MAMP软件的硬盘位置。本例中我将MAMP安装在了计算机的D盘里。

接下来我们必须找到MAMP文件夹里一个名叫htdocs的文件夹,然后将这个WordPress文件夹(即刚才解压出来的WordPress文件夹)都放在htdocs里。

本例中我按照计算机\本地磁盘D\MAMP\htdocs的顺序操作。点开该文件夹后,发现htdocs文件夹下只有一个名为index的文件和MAMP-PRO-Logo的图片文件。接下来我们把刚才命名为WordPress的文件夹粘贴在这个文件夹里。

将WordPress安装到本地计算机上

上一步操作中我们已经把名为WordPress的文件夹放在了htdocs文件夹里。接下来我们需要在浏览器中搜索该路径,并完成WordPress安装。注意!整个过程不要关闭刚才的MAMP软件界面。

我们回到刚才MAMP软件的界面,再次点击Open Start Page。我们可以看到这个页面的链接为localhost/MAMP/,这里我们将MAMP替换成WordPress(即http://localhost/wordpress/),然后再次输入索引该连接。

接下来就会进入WordPress安装界面:

接下来我们点击“现在就开始!”按钮,开始安装WordPress。在新出现的页面里,我们能看到WordPress的图标和下方的几个字段。

数据库的用户名和密码都默认为root。这里我们输入2个root,然后点击最下方的“提交”按钮。参见下图:

接下来,我们需要在新出现的页面里点击“现在安装”按钮!因为我们之前已经将wp文件夹放在了htdocs文件夹里,因此整个安装过程估计也就1-3秒钟。接下来,我们可以点击登录按钮,登录WordPress网站。

注意!首次登录,账户和密码都是root,登陆进去以后可以更改账户和密码。

这里我已经登录了进去,参见下图。

经过上述步骤,我们已经将WordPress建站程序安装在了本地计算机上。

在本地计算机上搭建的WordPress网站链接为localhost/wordpress/,而进入网站后端要使用localhost/wordpress/wp-admin/

接下里,我们进入下一步操作。

第2步:登录GitHub并创建存储库(Repository)

登录GitHub,然后给新主题创建一个存储库(repository)。完了创建存储库以后,我们就可以获得存储库的克隆URL(链接)。如下图所示:

下图中红色圈里的部分就是存储库的链接。

第3步:利用GitHub开发WordPress之关键 – 克隆GitHub存储库

接下来我们克隆一个新的GitHub库(这里使用的是Windows GitHub桌面程序,我们选择)到我们的本地计算机上。打开Windows GitHub,然后在主界面选择Clone a repository from the internet选项。如下图所示:

接下来,我们把上一步在GitHub网站上创建的存储库(repository)的链接粘贴在标有Repository URL or GitHub username and repository下方第一栏里。如下图所示:

接下来我们还需要对本地路径(上图红色线圈下方的Local Path)进行设置。点击上图中choose按钮,然后找到MAMP安装所在的文件夹(这里是计算机上的D盘),然后通过D\MAMP\htdocs\wordpress\wp-content\themes\操作。这里我们找到了themes文件夹,我们选中这个themes文件但不要继续往下点。

第4步:复制粘贴文件

接下来我们将默认WordPress主题中的所有文件复制并粘贴到localhost/wordpress/wp-content/themes/theme_repo_name文件夹里(此处我们使用的是twentyseventeen主题)。如果你还有其他主题,也可以将默认主题的所有文件复制下来。

这里我选择twentyseventeen这款默认主题。

第5步:启用新主题

登录到WordPress后端,然后在本地服务器上启用新WordPress主题(即刚才复制到themes文件夹下的test-repo文件夹里的主题内容)。

我们先进入wordpress网站的后端,链接为localhost/wordpress/wp-admin/,然后我们在后端左侧按照外观→主题的顺序操作。

第6步:commit所有文件并将所有文件推送到GitHub上

接下来我们就将本地存储库的所有文件commit并推送到远程GitHub存储库。

在上个截图里,我们点击左侧最下方的commit to master按钮。操作完之后,我们会进入下面的页面:

接下来,我们要回到GitHub网站上查看刚才建立的名为test-repo的存储库,然后刷新页面,我们就可以看到里面已经有不少文件了。

第7步:将WordPress安装在远程服务器上

将WordPress安装在远程服务器上比较简单,而且不同的远程服务器的操作步骤也不太一样。

苦心孤译博客使用的是Bluehost中国服务器,个人也推荐这款服务器。这款服务器位于香港,是WordPress官方网站推荐的Bluehost主机在香港的分部,而且用户可以使用支付宝支付。

此外还有SiteGroundCloudWays国外最好的远程服务器,大家可以随意挑选使用。

第8步:通过终端克隆存储库(repo)

在远程服务器上使用命令行,然后将存储库(repository)克隆到远程服务器上的wp-content/themes文件夹里。例如https://guoyuguang.com git clone github.com/yuguangguo/t。然后它会让你输入GitHub的用户名和密码,然后才能进行克隆。

如下图所示,在SSH里输入命令行:root@45prod:# cd/ var/ www/ testsite/ wp-content/ themes

第9步:启用新主题

在远程服务器上登录自己的WordPress网站,并启用新主题,过程跟第5步类似。

第10步:对本地主题进行更改

在本地服务器(即个人计算机上)使用Sublime Text高级文本编辑器对主题进行修改,然后将所有更改通过推送到远程存储库(repository)。

首先,我们对现有主题进行修改,在WordPress后台,按照外观→主题编辑器的顺序操作。然后我们在页面右侧的主题文件栏目下找到需要修改的板块进行编辑。

本例中,我对404模板进行编辑,参见下图:

编辑完成后,我们点击页面左下方的更新文件按钮。

然后我们打开GitHub桌面程序,就可以看到404板块已经同步进行了修改。如下图所示:

第11步:远程同步更改

在远程服务器上使用命令行,使用、wp-content/themes/theme_repo_name/目录里的/git pull/将修改情况同步到远程服务器上。我们只需要目录里输入/git pull/就可以完成更新。如果你的存储库(repository)属于私密的,在终端我们还需要输入GitHub的用户名和密码,然后将最新的更新情况同步到远程服务器上。

本例中输入的代码为root@45Prod: #/var/www/testsite/wp-content/themes,参见下图:

小结

上面11步完成后,我们已经在自己的网站上对主题进行了修改。这11个简单的步骤可以帮助大家使用GitHub将本地主题同步更新到网站所在的无服务器上。

在开发WordPress的过程中使用GitHub可以对项目进行完全掌控。利用Git强大的版本控制功能,我们可以访问每次的更新情况,更可以在不同版本之间进行切换。而且世界各地的开发人员还可以利用Git和GitHub开发同一个项目。

WordPress日记主要承接WordPress主题定制开发PSD转WordPressWordPress仿站以及以WordPress为管理后端的小程序、APP,我们一直秉持“做一个项目,交一个朋友”的理念,希望您是我们下一个朋友。如果您有WordPress主题开发需求,可随时联系QQ:919985494