WordPress主题开发入门基础教程

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

如果你想把某件事做对,你可能必须自己做。虽然有很多WordPress主题可用,但要找到一个具有您需要的外观和功能的主题可能很困难。事实上,您可能会尝试创建自己的主题。然而,主题开发的入门似乎势不可挡——尤其是对于初学者而言。

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

WordPress主题开发简介

WordPress主题开发入门基础教程WordPress主题开发入门基础教程

您希望您的网站看起来很棒并拥有您需要的所有功能,因此您可以查看WordPress主题目录或者我们提供的WordPress原创主题。不幸的是,您看到的任何东西都不能满足您的所有要求,而且您不想在您的愿景上妥协。也许您想要一些独特的东西来让您的网站脱颖而出,或者您只是不想将钱花在高级主题上。

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

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

  • 您自己的WordPress 网站
  • 一个优质的服务器

您还将受益于拥有本地临时环境的经验,因为您将使用一个环境来创建您的主题。对CSS和PHP有一些了解也会有所帮助(如果没有必要)。

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

什么是入门主题

入门主题是一个基本的WordPress主题,您可以使用它来创建自己的主题。使用starter使您能够建立在一个可靠的框架上,而不必担心从头开始编写主题所涉及的复杂性。它还将通过向您展示主题的基本结构及其所有部分如何协同工作,帮助您了解WordPress的工作原理。

有很多优秀的入门主题在那里,其中包括下划线,UnderStrap和Bones(仅举几例)。

我们将在下面的示例中使用下划线。对于初学者来说,这是一个不错的选择,因为它只包含基础知识。另外,这个入门主题是由Automattic开发的,从长远来看,这使得它更有可能是安全的、兼容的并且得到很好的支持。

如何开发您的第一个WordPress主题

随着准备工作的进行,您终于可以开始创建您的第一个主题了。正如我们提到的,我们将在本演练中使用入门主题。

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

Step 1:设置本地环境

WordPress主题开发入门基础教程WordPress主题开发入门基础教程

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

有很多方法可以创建本地环境,但本次示例我们将使用DesktopServer。这是一种免费安装本地版本WordPress的快速、简单的方法,并且与Mac和Windows兼容。要开始使用,请选择DesktopServer的免费版本,完成注册过程,然后下载安装程序。

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

WordPress主题开发入门基础教程WordPress主题开发入门基础教程

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

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

WordPress主题开发入门基础教程WordPress主题开发入门基础教程

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

WordPress主题开发入门基础教程WordPress主题开发入门基础教程

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

WordPress主题开发入门基础教程WordPress主题开发入门基础教程

还有_sassify!选项,这会将Syntactically Awesome StyleSheets (SASS)文件添加到您的主题。SASS是一种CSS预处理语言,它使您能够使用变量、嵌套、数学运算符等。

当您做出选择后,您可以单击Generate,这将下载一个包含您的入门主题的.zip文件。这是您将围绕它开发自己的主题的核心,因此请将其安装在您的本地站点上。安装主题后,您可以预览站点以查看其外观。注:这只是一套最最最基础的主题,还需要您对其深加工!

Step 3:了解WordPress在幕后的工作原理

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

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

  1. 与slug匹配的文件,例如this-post
  2. 与文章ID匹配的文件。
  3. 通用的单个文章文件,例如single.php
  4. 存档文件,例如archive.php
  5. index.php文件。

由于所有主题都需要index.php文件,因此如果找不到其他文件,则默认使用该文件。Underscores已经包含了最常见的模板文件,它们开箱即用。但是,如果您想了解它们如何协同工作,您可以尝试编辑它们。

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

循环是一个复杂的主题,如果您想更好地掌握WordPress如何显示文章内容,我们建议您阅读更多相关内容。幸运的是,由于Underscores,Loop已经集成到您的主题中,因此现在无需担心。

Step 4:配置您的主题

很容易认为主题纯粹是为了装饰目的,但它们实际上对您网站的功能产生了巨大的影响。让我们看看如何进行一些基本的自定义。

使用“钩子”添加功能

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

让我们来看看一些最常见的钩子以及它们的用途:

  • wp_head() — 添加到header.php中的元素,并启用网站加载后立即运行的样式、脚本和其他信息。
  • wp_footer() — 在标签之前添加到footer.php。这通常用于插入Google Analytics代码。
  • wp_meta() — 这通常出现在sidebar.php中,以包含其他脚本(例如标签云)。
  • comment_form() — 在文件结束
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索