也想出现在这里?联系我们

开发WordPress主题的初学者指南(5个步骤)

  • 文章介绍
  • 升级版本
  • 评价&建议

在本指南中,我们将讨论如何开始进行主题开发。然后,我们将带您逐步完成创建全新的自定义主题的过程。

如果您想正确地做某事,则可能必须自己做。尽管有许多可用的WordPress主题,但要找到具有所需确切外观和功能的主题可能很困难。实际上,您可能会想创建自己的主题。但是,主题开发的入门似乎似乎很困难-尤其是对于初学者。

幸运的是,为WordPress创建自定义主题是一个相对简单的过程。它还不需要太多的网络开发技术知识或经验。此外,构建自己的主题非常值得付出努力,因为您可以使网站看起来和运行得恰到好处。

WordPress主题开发简介

您希望自己的网站看起来很棒,并具有所需的所有功能,因此请查看WordPress主题目录。不幸的是,您所看到的一切都无法满足您的所有要求,并且您不想在视觉上妥协。也许您想要独特的东西来使您的网站脱颖而出,或者您只是不想将钱花在高级主题上

此时,您可能会开始考虑创建自己的主题。幸运的是,为WordPress开发主题并不是您可能想象的那么复杂。由于平台固有的用户友好性和可用的众多工具,几乎任何人都可以创建自定义主题。

我们将带您完成创建第一个主题的过程。首先,您需要做两件事:

  • 您自己的WordPress网站
  • 一个优质的托管计划

您还将受益于使用本地暂存环境的经验,因为您将使用一个环境来创建主题。对CSSPHP有所了解也将有所帮助(如果没有必要)。

最后,您需要拥有一个重要的工具,它将使创建主题的过程变得更加容易:入门主题。

什么是入门主题(以及为什么要使用入门主题)

入门主题是WordPress的准系统主题,您可以使用该主题来创建自己的主题。使用启动程序使您可以构建一个坚实的框架,而不必担心从头开始编写主题所涉及的复杂性。通过向您展示主题的基本结构及其各个部分如何协同工作,它还将帮助您了解WordPress的工作原理。

有很多优秀的入门主题在那里,其中包括我们自身的主题

下面的示例将使用Underscores。对于初学者来说,这是一个不错的选择,因为它仅包含基础知识。另外,此启动程序主题是由Automattic开发的,从长远来看,使其更有可能变得安全,兼容并得到良好的支持。

如何开发您的第一个WordPress主题(5个步骤)

随着准备工作的进行,您终于可以开始创建第一个主题了。如前所述,本演练将使用入门主题。

但是,如果您想尝试创建没有模板的所有内容,则可以随意这样做。请记住,这将需要更多的编码能力和对Web开发的理解。

步骤1:设置本地环境

wordpress本地环境配置

您需要做的第一件事是创建本地开发环境。这实际上是一台安装在计算机上的服务器,可用于开发和管理本地WordPress网站。本地站点是一种开发主题的安全方法,而不会以任何方式影响您的实时站点。

创建本地环境的方法有很多,但是我们将使用DesktopServer。这是一种免费安装本地版本WordPress的快速,简便的方法,并且与Mac和Windows兼容。首先,选择免费版本的DesktopServer,完成注册过程,然后下载安装程序。

下载安装程序后,即可运行它。

wordpress插件开发

安装完成后,您可以打开程序,在该程序中将要求您配置新的本地环境。这是一个简单的过程,几分钟后您就可以准备好本地WordPress网站。安装后,新站点的外观和工作原理将与实时WordPress网站完全相同。

步骤2:下载并安装您的入门主题

像大多数入门主题一样,Underscores非常容易上手。实际上,您要做的就是访问网站并命名您的主题。

如果需要,还可以单击“高级选项”以进一步自定义基本主题。在这里您可以填写更多信息,例如作者姓名,并为主题提供描述。

还有_sassify!选项,它将为您的主题添加语法很棒的样式表(SASS)文件。SASS是CSS的预处理语言,使您可以使用变量,嵌套,数学运算符等。

做出选择后,可以单击Generate,这将下载一个包含入门主题的.zip文件。这是您开发自己的主题的核心,因此请将其安装在本地站点上。安装主题后,您可以预览您的网站以查看其外观。现在这是非常基本的,但是不会持续很长时间了!

步骤3:了解WordPress在幕后的运作方式

在自定义主题之前,您需要了解其组件的用途以及它们如何组合在一起。首先,让我们讨论模板文件,它们是WordPress主题的主要构建块。这些文件确定网站上内容的布局和外观。例如,header.php用于创建标头,而comments.php用于显示注释。

WordPress通过遍历模板层次结构来确定要在每个页面上使用的模板文件。这是WordPress每次在您网站上的页面加载时将寻找匹配的模板文件的顺序。例如,如果您访问URL http://example.com/post/this-post,WordPress将按以下顺序查找以下模板文件:

  1. 与该段匹配的文件,例如this-post
  2. 与帖子ID匹配的文件。
  3. 通用的单个发布文件,例如single.php
  4. 存档文件,例如archive.php
  5. 的index.php文件。

由于所有主题都需要index.php文件,因此如果找不到其他文件,则为默认设置。下划线已经包含最常见的模板文件,它们将立即可用。但是,如果您想了解它们如何协同工作,可以尝试对其进行编辑。

您需要掌握的另一个重要元素是The Loop。这是WordPress用于显示内容的代码,因此在许多方面,它都是您网站的跳动心脏。它出现在所有显示帖子内容的模板文件中,例如index.phpsidebar.php

循环是一个复杂的主题,如果您想更好地掌握WordPress显示帖子内容的方式,我们建议您阅读更多信息。幸运的是,由于有了Underscores,循环已经集成到您的主题中,因此现在无需担心。

步骤4:配置主题

容易想到主题仅仅是出于装饰目的,但实际上它们对您网站的功能有巨大影响。让我们看一下如何进行一些基本的自定义。

使用“挂钩”添加功能

挂钩是插入模板文件中的代码段,使您可以在网站的不同区域上运行PHP操作,插入样式并显示其他信息。大多数挂钩都直接实现到WordPress核心中,但是有些挂钩对于主题开发人员也很有用。

让我们看一些最常见的钩子以及它们可以用于什么:

  • wp_head() —添加到header.php中的<head>元素,并启用样式,脚本和其他信息,这些信息在网站加载后立即运行。
  • wp_footer() —在</ body>标记之前添加到footer.php。通常用于插入Google Analytics(分析)代码。
  • wp_meta() -通常显示在sidebar.php中,以包括其他脚本(例如标签云)。
  • comment_form()-在文件结束</ div>标记之前直接添加到comment.php中,以显示注释数据。

这些将已包含在您的Underscores主题中。但是,我们仍然建议您访问Hooks数据库以查看所有可用的钩子并了解有关它们的更多信息。

使用CSS添加样式

级联样式表(CSS)定义网站上所有内容的外观。在WordPress中,这是使用style.css文件完成的。您已经将这个文件包含在主题中,但是目前它仅包含基本的默认样式。

wordpress自定义CSS

如果要快速了解CSS的工作原理,可以在此处编辑任何样式并保存文件以查看效果。例如,您可以找到以下代码(通常在485行上):

a {color: royalblue;}

这可以控制未访问的超链接的颜色,默认情况下,其显示为宝蓝色:wordpress自定义css

步骤5:导出主题并将其上传到您的网站

完成主题修改后,是时候确保其正常工作了。您可以通过测试主题来确保这一点。为了快速确保您的主题在大多数情况下都能正常运行,可以使用“主题单元测试”数据。这是一组虚拟数据,您可以上传到您的网站,其中包含样式和内容的许多不同变体。它使您能够查看主题如何应对不可预测的数据。

当您对主题进行了全面测试并确信其符合要求的标准时,剩下的就是将其导出。最简单的方法就是简单地找到网站在本地计算机上的安装位置,最有可能在默认“文档”目录内名为“网站”的文件夹中。打开网站的文件夹,然后访问/ wp-content / themes /,在其中可以找到您的主题。

有用0
  • 2020.10.16初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧