创建自己的WordPress主题的三种方法

女爷i 2022-12-03 09:20 878阅读 0赞

**It’s common for WordPress users to pick a ready-made theme. But you can also create a theme of your own. This article covers various ways to go about this.**

**WordPress用户通常选择现成的主题。** **但是您也可以创建自己的主题。** **本文介绍了解决此问题的各种方法。**

Options range from making edits to an existing theme, to creating your own WordPress theme completely from scratch. In between these extremes are various other options that include duplicating and modifying themes, and using a range of tools to help you build your own theme.

选项范围从对现有主题进行编辑到完全从头开始创建自己的WordPress主题。 在这两种极端之间，还有其他各种选择，包括复制和修改主题，以及使用各种工具来帮助您构建自己的主题。

WordPress themes are made up of a collection of files, all contained within a single folder that lives within the `/themes/` folder: `wp-content/themes/`.

WordPress主题由文件集合组成，所有文件都包含在`/themes/`文件夹中的单个文件夹中： `wp-content/themes/` 。

![An example of the files contained within a WordPress theme][]

## 选项1：修改现有主题 **(**Option 1: Modify an Existing Theme**)** ##

Modifying an existing theme is perhaps the easiest option. You may just want to make some minor changes, like colors, font sizes, or simple layout changes.

修改现有主题可能是最简单的选择。 您可能只想进行一些小的更改，例如颜色，字体大小或简单的布局更改。

In this case your best option is to create a [child theme][]. A child theme references an existing theme, just modifying the bits you want to change. Using a child theme has the advantage that, if the parent theme is updated when you update WordPress, your changes won’t be wiped away.

在这种情况下，最好的选择是创建一个[子主题][child theme] 。 子主题引用现有主题，仅修改您要更改的位。 使用子主题的优势在于，如果在更新WordPress时更新了父主题，则所做的更改不会消失。

To create a child theme, create a new folder inside your `/themes/` folder. A handy tip is to use the name of the parent theme with `-child` appended, as this makes it clear what the child theme is. So, if you’re creating a child theme of the Twenty Seventeen theme, your child theme folder might be called `/twentyseventeen-child/`.

要创建子主题，请在`/themes/`文件夹内创建一个新文件夹。 一个方便的技巧是使用父主题的名称并附加`-child` ，因为这可以清楚地表明子主题是什么。 因此，如果您要创建第二十`/twentyseventeen-child/`主题的子主题，则您的子主题文件夹可能称为`/twentyseventeen-child/` 。

![Minimum default files for a child theme][]

In this child folder, you need at a minimum a `style.css` file and a `functions.php` file. In these files you need to add certain code to tell WordPress which is the parent theme, where the stylesheets are, and any other new functionality you want in your child theme.

在此子文件夹中，至少需要一个`style.css`文件和一个`functions.php`文件。 在这些文件中，您需要添加某些代码来告诉WordPress哪个是父主题，样式表在何处以及您希望在子主题中使用的其他任何新功能。

The last step for getting your child theme up and running is to enter the WordPress admin panel and go to *Appearance > Themes* to activate your child theme.

启动并运行您的子主题的最后一步是进入WordPress管理面板，然后转到*外观>主题*以激活您的子主题。

For a complete guide to this process, visit the [WordPress Codex][child theme]. For help with setting up a child theme, you can also use the WordPress [Child Theme Configurator][] utility.

有关此过程的完整指南，请访问[WordPress Codex][child theme] 。 要获得设置子主题的帮助，您还可以使用WordPress [子主题配置器][Child Theme Configurator]实用程序。

## 选项2：调整现有主题 **(**Option 2: Adapt an Existing Theme**)** ##

If you’re keen to dig into WordPress code a bit more, you can duplicate an existing theme and bend it to your will.

如果您想进一步研究WordPress代码，可以复制现有主题并将其随心所欲。

That might involve things like deleting all of the current styles and creating your own. You can also dig into the other theme files and remove elements you don’t need and add others. For example, you might want to alter the HTML structure of the theme. To do so, you’ll need to open various files such as `header.php`, `index.php` and `footer.php` and update the HTML parts with your own template elements.

这可能涉及删除所有当前样式并创建自己的样式。 您还可以深入研究其他主题文件，并删除不需要的元素并添加其他元素。 例如，您可能想要更改主题HTML结构。 为此，您需要打开各种文件，例如`header.php` ， `index.php`和`footer.php`并使用自己的模板元素更新HTML部分。

![A new folder containing files to be edited][]

Along the way, you might decide there are lots of features in the copied theme you no longer need, such as post comments and various sidebar elements such as categories and bookmarks. You’ll find PHP snippets for these elements in the various theme files, and you can simply delete them or move them around to other locations.

在此过程中，您可能会确定复制的主题中不再需要许多功能，例如帖子注释和各种侧边栏元素，例如类别和书签。 您可以在各种主题文件中找到这些元素PHP代码段，只需删除它们或将它们移动到其他位置即可。

It can take a bit of searching around to work out which files contain the elements you want to delete or move, but it’s a good way to get familiar with your WordPress theme to dig in to the files like this.

可能需要进行一些搜索才能确定哪些文件包含要删除或移动的元素，但这是熟悉WordPress主题以挖掘此类文件的好方法。

Another option here, rather than duplicating an existing theme, is to start with a “starter theme”, which we look at below.

在这里，除了复制现有主题之外，另一个选择是从“入门主题”开始，我们将在下面进行介绍。

## 选项3：从头开始构建主题 **(**Option 3: Build a Theme from Scratch**)** ##

A more daunting option — but more fun, too! — is to create your own theme completely from scratch. This is actually simpler than it sounds, because at a minimum you only need two files — `style.css` and `index.php`.

一个更艰巨的选择-但也更有趣！ -是完全从头开始创建自己的主题。 这实际上比听起来简单，因为您至少只需要两个文件`style.css`和`index.php` 。

![The minimum required files for building your own theme][]

That, however, would result in a pretty limited theme! At a minimum, you’d probably want a `functions.php` file for custom functions, and perhaps several other template files for the various sections of the site, such as a 404.php template file for showing 404 pages.

但是，这将导致主题非常有限！ 至少，您可能需要用于自定义功能的`functions.php`文件，以及网站各个部分的其他几个模板文件，例如用于显示404页面的404.php模板文件。

In this example, we’ve created a folder in our themes directory called `/scratch-theme/`. (You’ll want to choose a spiffier name than that, of course.) The `style.css` file will serve as the main stylesheet of our WordPress theme. In that CSS file, we first need to add some header text. This is a basic example:

在此示例中，我们在主题目录中创建了一个名为`/scratch-theme/`的文件夹。 (当然，您将选择一个比这个名称更漂亮的名称。) `style.css`文件将用作我们WordPress主题的主要样式表。 在该CSS文件中，我们首先需要添加一些标题文本。 这是一个基本示例：

/*
    Theme Name: My Scratch Theme
    Theme URI: https://sitepoint.com
    Author: Sufyan bin Uzayr
    Author URI: http://sufyanism.com
    Description: Just a fancy starter theme for SitePoint
    Version: 1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: clean, starter
    */

You can now head to the WordPress admin *Themes* section, where we’ll see our now theme listed.

现在，您可以转到WordPress管理员*主题*部分，在该部分中将列出我们现在的主题。

![Our new theme listed as an option][]

At this point, it doesn’t offer any custom styles and layouts, but can still be activated and used nonetheless. (You can add a thumbnail image for the theme by uploading an image file named “screenshot” to the theme’s root folder, preferably 880 x 660px.)

目前，它不提供任何自定义样式和布局，但仍然可以激活和使用。 (您可以通过将名为“ screenshot”的图像文件上传到主题的根文件夹(最好为880 x 660px)来为主题添加缩略图。)

For more in-depth guidance of WordPress theme development, check out the [WordPress Codex theme development guide][].

有关WordPress主题开发的更深入指导，请查阅[WordPress Codex主题开发指南][WordPress Codex theme development guide] 。

It’s fairly straightforward to create a very basic WordPress theme from scratch, but going beyond that is more challenging. Before deciding this is a bit outside your wheelhouse, let’s check out some of the tools that are available to help you along.

从头开始创建一个非常基本的WordPress主题是相当简单的，但是要做到这一点则更具挑战性。 在确定这有点超出您的期望之前，让我们检查一些可用来帮助您的工具。

## 使用入门主题 **(**Using a Starter Theme**)** ##

A starter theme is a barebones or blank WordPress theme that includes just the basic minimum of structural code. This means a starter WordPress theme has some foundational functionality, but doesn’t offer any customizations or tweaks. It’s a very handy starting point on which to build your unique theme.

入门主题是准系统或空白WordPress主题，仅包括结构代码的基本最低要求。 这意味着WordPress入门主题具有一些基本功能，但不提供任何自定义或调整。 这是构建您独特主题的非常方便的起点。

There are several choices when it comes to picking a starter theme for development, the most popular of which is [Underscores][]. It’s maintained by Automattic, the creator of WordPress, and is the basis for the recent default themes put out by WordPress.

在选择开发入门主题时，有多种选择，其中最受欢迎的是[Underscores][] 。 它由WordPress的创建者Automattic维护，并且是WordPress最近发布的默认主题的基础。

![Screenshot of the Underscores home page][]

Other options include [FoundationPress][], maintained by ZURB.

其他选项包括[FoundationPress][] ，通过ZURB维护。

![Screenshot of the FoundationPress home page][]

[Bones][] is another simple and easy-to-comprehend barebones WordPress theme that can function as a very good starting point for theme development.[HTML5 Blank][] is onother option that provides a reliable and well-documented code base for theme development.

[Bones][]是另一个简单易懂的准系统WordPress主题，可以作为主题开发的一个很好的起点。 [HTML5 Blank][]是另一个选项，它为主题开发提供了可靠且有据可查的代码库。

### 在主题开发中使用下划线 **(**Using Underscores in Theme Development**)** ###

To get started with Underscores, enter your theme details on the Underscores home page.

要开始使用Underscores，请在Underscores主页上输入主题详细信息。

![Setting up an Underscores starter theme][]

You can opt to include WooCommerce boilerplate as well — useful if the target theme is likely to have WooCommerce support, such as custom layouts for Shopping Cart and Checkout pages, etc. Click *Generate*, and that’s it! Our theme will be generated and available for download. In the resulting ZIP file, we can locate our theme directory.

您还可以选择包含WooCommerce样板-如果目标主题可能具有WooCommerce支持，例如购物车和Checkout页面的自定义布局等，则非常有用。单击*Generate* ，就这样！ 我们的主题将生成并可以下载。 在生成的ZIP文件中，我们可以找到我们的主题目录。

The Underscores-generated WordPress theme has quite a lot of templates as well as separate sections for custom layouts and JavaScript elements. This means our theme structure is ready for us, as are the template files, which come with minimal code in the form of PHP tags and comments. We can just get started straightaway by modifying whatever we need, and eliminating whatever we don’t need.

Underscores生成的WordPress主题具有很多模板以及用于自定义布局和JavaScript元素的单独部分。 这意味着我们的主题结构以及模板文件已经为我们准备就绪，模板文件以PHP标记和注释的形式提供了最少的代码。 我们可以通过修改所需内容并消除不需要的内容来直接开始。

This is obviously a great timesaver, as we don’t need to create each template file manually.

显然，这节省了很多时间，因为我们不需要手动创建每个模板文件。

## 使用WordPress主题框架 **(**Using a WordPress Theme Framework**)** ##

Similar to frameworks for CSS, JavaScript and PHP, a theme framework provides a standardized set of tools that you, as a developer, can use in creating your own themes. Theme frameworks come with predefined conventions that can aid in theme development by saving time and efforts that would otherwise be spent in coding and building those very conventions.

类似于CSS，JavaScript和PHP的框架，主题框架提供了一组标准化的工具，您作为开发人员可以用来创建自己的主题。 主题框架附带了预定义的约定，这些约定可以通过节省时间和精力来帮助进行主题开发，而这些工作和精力将花费在编码和构建这些约定上。

Many WordPress theme frameworks nowadays come with features such as:

如今，许多WordPress主题框架都具有以下功能：

*  custom hooks and filters
    
    定制钩子和过滤器
 *  custom functions to be used in the theme
    
    主题中使用的自定义函数
 *  custom callbacks
    
    自定义回调
 *  integration with or compatibility for custom libraries, such as jQuery, etc.
    
    与自定义库(例如jQuery等)的集成或兼容性。

These WordPress theme frameworks come with several added advantages of their own as well. They obviously make the task of building a WordPress theme quicker and easier. Some also offer bespoke features and coding norms that can enable newer developers to code quickly and learn the ropes more efficiently. Of course, this also means you have less control than when building a theme from scratch, but depending on your requirements and level of expertise, a beginner-friendly theme framework can really prove useful.

这些WordPress主题框架也具有自己的其他一些优点。 显然，它们使构建WordPress主题的任务变得更快，更容易。 有些还提供了定制功能和编码规范，可以使新开发人员快速进行编码并更有效地学习绳索。 当然，这也意味着与从头开始构建主题相比，您的控制更少，但是取决于您的要求和专业水平，对初学者友好的主题框架可能真的有用。

### 选择一个WordPress主题框架 **(**Picking a WordPress Theme Framework**)** ###

There are quite a few WordPress theme frameworks to choose from. One popular choice is [Genesis framework][], by StudioPress. Priced at $59.95, Genesis comes with features such as custom page templates, multiple customizable layout options as well as full support for Gutenberg, the upcoming WordPress editor.

有很多WordPress主题框架可供选择。 一个流行的选择是StudioPress的[Genesis framework][] 。 Genesis的价格为59.95美元，具有自定义页面模板，多个可自定义的布局选项以及对即将推出的WordPress编辑器Gutenberg的全面支持等功能。

![A Genesis framework example][]

Another worthy premium option is the [Divi theme][] by Elegant Themes. Divi comes loaded with realtime design elements, customizable layouts and page templates, draggable and visually editable assets, etc. In other words, Divi is a page builder disguised as a theme framework that lets you export your developmental settings and quickly put together websites.

另一个值得选择的高级选项是Elegant Themes的[Divi][Divi theme]主题。 Divi带有实时设计元素，可自定义的布局和页面模板，可拖动和可视化可编辑资产等。换句话说，Divi是伪装成主题框架的页面构建器，可让您导出开发设置并快速组合网站。

If you’re looking for something free, [Gantry][] is well worth a look. This developer-friendly and robust theme framework isn’t solely for use with WordPress. Built by RocketTheme, Gantry is more of a conglomerate of custom extensions and template methodologies adopted from the likes of Joomla, WordPress and GravCMS.

如果您正在寻找免费的东西， [龙门][Gantry]非常值得一看。 此开发人员友好且健壮的主题框架不仅仅与WordPress一起使用。 Gantry由RocketTheme构建，是来自Joomla，WordPress和GravCMS之类的自定义扩展和模板方法的集合。

Gantry lets coders build powerful frontend themes and templates atop it. It also has many custom pre-made templates and skins as well as visually editable interface to make life easier for non-coders as well.

Gantry使编码人员可以在其上构建强大的前端主题和模板。 它还具有许多自定义的预制模板和外观以及可视化可编辑界面，从而使非编码人员的生活也更加轻松。

There are lots of other worthy contenders in this field, as you’ll find with any online search for “WordPress theme builders” or similar.

在该领域还有许多其他有价值的竞争者，您可以在任何在线搜索“ WordPress主题构建器”或类似内容中找到。

## 结论 **(**Conclusion**)** ##

This article has been a brief tour around the options for modifying or creating your own WordPress theme. We started with the simplest option of creating a child theme, which only contains a few files that modify aspects of an existing theme.

本文简要介绍了用于修改或创建自己的WordPress主题的选项。 我们从创建子主题的最简单选项开始，该子主题仅包含几个修改现有主题各方面的文件。

We next looked at digging in a bit deeper by duplicating and modifying an existing theme. That’s a fun way to dig into a WordPress theme, learn how it works and tailor it to your exact requirements, without having to reinvent the wheel and start from scratch.

接下来，我们研究通过复制和修改现有主题来进行更深入的挖掘。 这是探索WordPress主题，了解其工作原理并根据您的确切要求进行调整的一种有趣方式，而无需重新发明轮子并从头开始。

A more ambitious option is to code an entire theme from scratch. We’ve only touched on that here, but we’ve prepared [a series of articles to show how to do that in depth][].

一个更雄心勃勃的选择是从头开始编写整个主题。 我们在这里只涉及到这一点，但是我们准备[了一系列文章来展示如何深入地做到这一点][a series of articles to show how to do that in depth] 。

As a way to fast track building a theme from scratch, we looked at starter themes like Underscores and theme frameworks like Genesis. In a sense, this brings us full circle, as some of these offer drag-and-drop/WYSIWYG tools that don’t require a lot of technical knowledge and might be the most user-friendly option if you’d rather not dig into code.

作为快速从头构建主题的方法，我们研究了Underscores等入门主题和Genesis等主题框架。 从某种意义上讲，这使我们有了一个完整的圈子，因为其中一些提供了拖放/所见即所得的工具，不需要大量的技术知识，并且如果您不想深入研究，可能是最人性化的选择。码。

Hopefully this brief introduction has given you a better sense of how to get started creating a WordPress theme that suits your requirements.

希望这个简短的介绍使您更好地了解如何开始创建适合您需求的WordPress主题。

> 翻译自: [https://www.sitepoint.com/creating-wordpress-themes-overview/][https_www.sitepoint.com_creating-wordpress-themes-overview]

[An example of the files contained within a WordPress theme]: /images/20221123/c0f9901e477d490ebff20be24d4e2548.png
[child theme]: https://codex.wordpress.org/Child_Themes
[Minimum default files for a child theme]: /images/20221123/eb0136d9c26741cca3e7057a18280eae.png
[Child Theme Configurator]: https://wordpress.org/plugins/child-theme-configurator/
[A new folder containing files to be edited]: /images/20221123/7904a74d74de4b8686db128e9fa603a8.png
[The minimum required files for building your own theme]: /images/20221123/f6641d732bb04f5b8c604d547a3d8e65.png
[Our new theme listed as an option]: /images/20221123/444c62fb5e1e495c8208eff7f5913b5e.png
[WordPress Codex theme development guide]: https://codex.wordpress.org/Theme_Development
[Underscores]: http://underscores.me/
[Screenshot of the Underscores home page]: /images/20221123/d90e7ba3653f429a98e07b17138e232b.png
[FoundationPress]: https://foundationpress.olefredrik.com/
[Screenshot of the FoundationPress home page]: /images/20221123/ed95f02b510445bab5cdcfc138b9b8c3.png
[Bones]: https://themble.com/bones/
[HTML5 Blank]: http://html5blank.com/
[Setting up an Underscores starter theme]: /images/20221123/1418ddf890f34368b37da2ccd947b0e1.png
[Genesis framework]: https://my.studiopress.com/themes/genesis/
[A Genesis framework example]: /images/20221123/e02db465187242dd943233a6dc93776c.png
[Divi theme]: https://www.elegantthemes.com/gallery/divi/
[Gantry]: http://gantry.org/
[a series of articles to show how to do that in depth]: https://www.sitepoint.com/build-wordpress-theme-from-scratch-first-steps/
[https_www.sitepoint.com_creating-wordpress-themes-overview]: https://www.sitepoint.com/creating-wordpress-themes-overview/