fcn从头开始_如何从头开始构建WordPress主题：第一步

叁歲伎倆 2022-12-03 01:38 220阅读 0赞

fcn从头开始

**WordPress themes give WordPress users the ability to completely change the look of a WP website, as well as add functionality to it. In this three-part series, we’ll introduce WordPress themes, showing how they work, how they’re structured, the PHP architecture behind them, and other relevant information. We’ll then embark on a journey to build a WordPress theme.**

**WordPress主题使WordPress用户能够完全更改WP网站的外观并为其添加功能。** **在这个由三部分组成的系列文章中，我们将介绍WordPress主题，展示它们的工作原理，结构，在其背后PHP体系结构以及其他相关信息。** **然后，我们将踏上构建WordPress主题的旅程。**

This first article prepares us for this journey by discussing the theory behind WordPress themes.

第一篇文章通过讨论WordPress主题背后的理论，为我们为这一旅程做好了准备。

## 一两个词的基础知识 **(**A Word or Two on the Basics**)** ##

WordPress was conceived as a blog engine, or a simple, blogging-oriented content management system. It was initially released in 2003, by Matt Mullenweg and Mike Little. Ever since then, its user base hasn’t stopped growing. WordPress is a PHP-powered web application that uses MySQL as its database, and is usually run behind a server program, such as NGINX or Apache.

WordPress被认为是一个博客引擎，或一个简单的，面向博客的内容管理系统。 它最初由Matt Mullenweg和Mike Little于2003年发行。 从那时起，其用户基础一直没有停止增长。 WordPress是PHP驱动的Web应用程序，使用MySQL作为数据库，通常在服务器程序(例如NGINX或Apache)后运行。

WordPress is basically just a bunch of PHP files that work together as an application. A PHP interpreter uses these files to produce web pages to web visitors. It produces HTML, to be more precise.

WordPress基本上只是一堆可以作为应用程序一起工作PHP文件。 PHP解释器使用这些文件来为Web访问者生成网页。 更确切地说，它产生HTML。

The role of the templating engine of WordPress is to enable us to write (primarily) presentational instructions — instructions on how exactly to structure and style the HTML content that WordPress will output. These instructions are encapsulated in WordPress *themes*.

WordPress模板引擎的作用是使我们能够(主要)编写演示性说明，即有关如何精确构造和设置WordPress输出HTML内容的说明。 这些说明封装在WordPress *主题中* 。

Each theme consist of a folder with PHP, CSS, and sometimes JavaScript files. The files that every WordPress theme must have — at the minimum — are `style.css` and `index.php`. This is the *technical* minimum required for the theme to function, but no serious WordPress theme stays with only these two files.

每个主题都包含一个包含PHP，CSS和JavaScript文件的文件夹。 每个WordPress主题必须至少具有的文件是`style.css`和`index.php` 。 这是该主题正常运行所需的*技术*最低要求，但是只有这两个文件才不会出现严重的WordPress主题。

## 基本模板和部分文件 **(**Basic template and Partials Files**)** ##

The minimum `index.php` file catches all the queries that don’t have their respective *specialized* template files within a theme. `front-page.php`, `home.php`, `page.php`, `taxonomy.php`, `author.php`, `archive.php` are some of the templates that we can use in our themes to further structure specific pages or queries in our theme.

最小的`index.php`文件可捕获主题中没有其各自*专用*模板文件的所有查询。 `front-page.php` ， `home.php` ， `page.php` ， `taxonomy.php` ， `author.php` ， `archive.php`是我们可以在主题中用来进一步构建主题中特定页面或查询的一些模板。

For example, the `archive.php` file will specify the HTML output structure when a visitor requests some of the pages that display list of posts. `page.php` will specify how to display individual pages, and so on.

例如，当访问者请求一些显示帖子列表的页面时， `archive.php`文件将指定HTML输出结构。 `page.php`将指定如何显示单个页面，依此类推。

**Partials files** encapsulate repeatable parts of pages in WordPress website. For example, the header and footer are usually consistent across all pages on a website, so WordPress themes separate these page parts into `header.php` and `footer.php`. `comments.php` will be used to display comments wherever applicable.

**部分文件**封装了WordPress网站中页面的可重复部分。 例如，页眉和页脚通常在网站上的所有页面上都是一致的，因此WordPress主题将这些页面部分分为`header.php`和`footer.php` 。 `comments.php`将在适用时显示评论。

These files are then required from the *template files* that we explained.

然后，从我们说明的*模板文件*中需要这些文件。

This way, we adhere to the [DRY principle][], and don’t repeat the code in all those files.

这样，我们遵守[DRY原则][DRY principle] ，并且不会在所有这些文件中重复执行代码。

## 模板层次结构 **(**Template Hierarchy**)** ##

In the WordPress templating system, there’s a hierarchy of template files that WordPress will try to use for each request. This hierarchy is based on specificity. WordPress will try to use the most specific file for each request, if it exists. If it doesn’t exist, it will look up the next, less specific file, and so on.

在WordPress模板系统中，WordPress将尝试使用每个模板文件的层次结构。 该层次结构基于特定性。 WordPress将尝试为每个请求使用最特定的文件(如果存在)。 如果不存在，它将查找下一个不太明确的文件，依此类推。

To explain this on a *page* request — when the visitor visits a specific page on a WordPress website — WordPress will first try to find the template the page author assigned to it in the `wp-admin` backend. That can be a completely custom template file, even completely static.

为了在*页面*请求中解释这一点-当访问者访问WordPress网站上的特定页面时-WordPress首先会尝试在`wp-admin`后端中找到页面作者为其分配的模板。 那可以是一个完全自定义的模板文件，甚至可以是完全静态的。

If there’s no such template, or it wasn’t assigned, WordPress will try to find a template file with a *slug* of that particular page in its filename. That would look like `page-mypageslug.php` — whatever our `mypageslug` may be.

如果没有这样的模板，或者它不分配，WordPress会尝试找到与特定页面的其文件名*蛞蝓*一个模板文件。 看起来就像`page-mypageslug.php`无论我们的`mypageslug`可能是什么。

The next file WordPress will try to use will be a file with that particular page’s ID in its filename — like `page-48.php`.

WordPress将尝试使用的下一个文件是文件名中带有该特定页面ID的文件，例如`page-48.php` 。

If none of those page-specific files exist, WordPress will try to use `page.php` — used for **all** the **pages**, unless otherwise specified.

如果没有这些特定于页面的文件，除非另有说明，否则WordPress将尝试使用`page.php`用于**所有** **页面** 。

If it doesn’t find `page.php`, it will try to use `singular.php`. This template file is used when — for *posts* — `single.php` is not found, and for *pages* when `page.php` is not found.

如果找不到`page.php` ，它将尝试使用`singular.php` 。 当(对于*帖子)*找不到`single.php` ，以及对于未找到`page.php` *页面*时，将使用此模板文件。

Now, if none of these are found in our *page* request example, WordPress will fall back to `index.php`.

现在，如果在我们的*页面*请求示例中没有找到这些，则WordPress将退回到`index.php` 。

This, briefly, explains the WordPress template hierarchy. All of these template files we mentioned will usually incorporate (require) partials like `header.php`, `footer.php` and others as needed. They can also specify their *specific* partials to use — for example, a page-specific header.

简要说明了WordPress模板层次结构。 我们提到的所有这些模板文件通常将根据需要合并(需要)一些部分，例如`header.php` ， `footer.php`和其他文件。 他们还可以指定要使用的*特定*部分(例如，页面特定的标题)。

The next thing you need to be familiar with to understand theming is the WordPress *post type*.

您需要熟悉的下一件事是WordPress *帖子类型* 。

## WordPress帖子类型 **(**WordPress Post Types**)** ##

The content in WordPress exists in the form of *post types*. The built-in types are *posts* and *pages*. These are the logical ones. WordPress also has a built-in *attachment* post type, *navigation menus* and *revisions*. These are also, technically, post types.

WordPress中的内容以*帖子类型*的形式存在。 内置类型是*posts*和*pages* 。 这些是合乎逻辑的。 WordPress还具有内置的*附件*发布类型， *导航菜单*和*修订版* 。 从技术上讲，这些也是职位类型。

We can also specify our own post types, whether in our themes or our plugins. We need use the following:

我们还可以在主题或插件中指定自己的帖子类型。 我们需要使用以下内容：

register_post_type( $post_type, $args )

Here, we specify the post type name, how it’s structured, how it’s represented in `wp-admin`, and so on.

在这里，我们指定帖子类型名称，其结构，在`wp-admin`的表示方式，等等。

When we have this defined, we can also create template files specific for this post type. Custom post types, like *pages* and *posts*, have their own template hierarchy.

定义完此内容后，我们还可以创建特定于此帖子类型的模板文件。 自定义帖子类型(例如*页面*和*帖子* )具有自己的模板层次结构。

*More about the template hierarchy can be found [here][].*

*有关模板层次结构的更多信息，请参见[此处][here] 。*

## style.css **(**style.css**)** ##

`style.css` is a crucial file in every WordPress theme, and its function goes beyond styling. This file is used to provide basic theme information to WordPress. Without this, WordPress would not be able to register a theme as a theme.

`style.css`是每个WordPress主题中的关键文件，其功能不只是样式。 此文件用于向WordPress提供基本主题信息。 没有这个，WordPress将无法将主题注册为主题。

The [WordPress Codex][] provides more information about all the details of this file. For the sake of brevity, we’ll review just some of them. In this CSS file’s header comments, we provide WordPress information on the following:

[WordPress Codex][]提供了有关此文件所有详细信息的更多信息。 为了简洁起见，我们将仅对其中一些进行回顾。 在此CSS文件的标题注释中，我们提供有关以下内容的WordPress信息：

*  theme name
    
    主题名称
 *  author
    
    作者
 *  description
    
    描述
 *  theme URI
    
    主题URI
 *  version
    
    版
 *  license
    
    执照
 *  and other details
    
    和其他细节

WordPress uses these details to display the theme properly in the back end.

WordPress使用这些详细信息在后端正确显示主题。

The meta header in the Twenty Seventeen theme, for example, looks like this:

例如，“二十一十七”主题中的元标头如下所示：

/*
    Theme Name: Twenty Seventeen
    Theme URI: https://wordpress.org/themes/twentyseventeen/
    Author: the WordPress team
    Author URI: https://wordpress.org/
    Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
    Version: 1.7
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: twentyseventeen
    Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
    
    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you’ve learned with others.
    */

This said, `style.css` file is, obviously, used to style our WordPress pages.

这`style.css` ， `style.css`文件显然用于设置WordPress页面的样式。

## WordPress动作和筛选器挂钩 **(**WordPress Action and Filter Hooks**)** ##

WordPress — and WordPress themes and plugins — heavily rely on *action hooks* and *filter hooks*. These are part of an [event-riven architecture][]. A simple explanation of this would be that, in the process of execution of the page connected to visitors’ web request, there are certain registered points — *hooks* — that enable us to fire actions at those points. We *hook* PHP functions to those points to be executed. Those are **action** hooks. **Filter** hooks are focused on processing — changing — pieces of data within the execution cycle. So, if the filter hook is registered for any piece of data (PHP variable), we can *hook* our own function and change, or process, this piece of data.

WordPress(以及WordPress主题和插件)在很大程度上依赖于*动作挂钩*和*过滤挂钩* 。 这些是[事件导向架构的一部分][event-riven architecture] 。 一个简单的解释是，在执行连接到访问者Web请求的页面的过程中，有某些注册点( *挂钩* )使我们能够在这些点上触发动作。 我们将PHP函数*挂钩*到要执行的那些点。 这些是**动作**挂钩。 **筛选器**挂钩专注于在执行周期内处理(更改)数据。 因此，如果为任何数据段(PHP变量)注册了过滤器挂钩，我们就可以*挂钩*自己的函数并更改或处理该数据段。

Although unorthodox, compared to the omnipresent [MVC][] software pattern, the reliance on the hook system in WordPress has played a big role in the popularization of WordPress, as it has made it very simple to plug new functionalities into it, without the need to touch — or even to deeply understand — the `core` codebase itself.

尽管是非正统的，但与无所不在的[MVC][]软件模式相比，对WordPress中的钩子系统的依赖在WordPress的普及中起了很大的作用，因为它使插入新功能变得非常简单，而无需接触—甚至深入了解- `core`代码库本身。

Hooks are explained [here][event-riven architecture] at greater length, and we’ll delve into it more in other parts of this guide.

[此处][event-riven architecture]将对钩子进行更详细的说明，我们还将在本指南的其他部分中对其进行深入研究。

## 循环 **(**The Loop**)** ##

[The Loop][] is the elementary part of the WordPress request cycle. As the WordPress Codex puts it:

[循环][The Loop]是WordPress请求周期的基本部分。 正如WordPress Codex所说：

> **The Loop** is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags.
> 
> **循环**是WordPress用于显示帖子PHP代码。 使用The Loop，WordPress处理要显示在当前页面上的每个帖子，并根据其与The Loop标记中指定条件的匹配方式对其进行格式化。

The WordPress loop is, basically, a PHP `while` loop that displays posts according to visitors’ request, and specified criteria in the *template file* in which it’s specified.

WordPress循环基本上是一个PHP `while`循环，它根据访问者的请求以及在指定*模板文件*中指定的条件显示帖子。

Within the loop, whether it outputs just a single post or a page, or a list of them, we can output various parts of the post, like title and content. We can specify any HTML output or structure we want. We can also use conditional tags, and so on.

在循环中，无论输出的是单个帖子还是页面，还是页面列表，我们都可以输出帖子的各个部分，例如标题和内容。 我们可以指定所需的任何HTML输出或结构。 我们还可以使用条件标签，等等。

The most rudimentary example of the loop might look something like this:

循环的最基本的示例可能看起来像这样：

if ( have_posts() ) {
        while ( have_posts() ) {
            the_post();
            //
            // Post Content here
            //
        } // end while
    } // end if

We can use multiple loops on one page (in which case we need to reset them), and there are specific WordPress functions that exist for use inside it.

我们可以在一页上使用多个循环(在这种情况下，我们需要将其重置)，并且内部存在一些特定的WordPress函数供使用。

## 条件标签 **(**Conditional Tags**)** ##

[WordPress Conditional Tags][] are snippets of PHP code that enable us to display pieces of content only when certain conditions are satisfied. For example, we have the site-wide `header.php`, which is used on every page of the website, but we may want certain HTML snippets to be displayed only on the home page or some other page.

[WordPress条件标签][WordPress Conditional Tags]是PHP代码的片段，使我们仅在满足某些条件时才显示内容。 例如，我们拥有站点范围的`header.php` ，它在网站的每个页面上都使用，但是我们可能希望某些HTML代码段仅显示在主页或其他页面上。

So, in the first example, we would use `is_front_page()`, and it would look something like this:

因此，在第一个示例中，我们将使用`is_front_page()` ，它看起来像这样：

if (is_front_page()){
        # do something
    }

There are [lots of conditional tags][WordPress Conditional Tags] provided, and they allow for big flexibility in WordPress development.

提供了[许多条件标签][WordPress Conditional Tags] ，它们使WordPress开发具有很大的灵活性。

These are the building blocks of WordPress, but there are also [taxonomies][] — which can be built in or custom ones we can specify — and *terms* within these taxonomies. We use them to categorize and sort our posts.

这些是WordPress的基本组成部分，但也包含[分类法][taxonomies] (可以内置或我们可以指定自定义的分类法)以及这些分类法中的*术语* 。 我们使用它们对帖子进行分类和排序。

## 主题结构 **(**Theme Structure**)** ##

At the end of this part, and before we endeavor to create our own theme, we’ll use the [WP-CLI][] tool to scaffold a minimal theme based on [Underscores][] — maintained by [Automattic][] — to get a glance of the typical, minimal WordPress theme structure:

在这一部分结束，在此之前，我们努力创造我们自己的主题，我们将使用[WP-CLI][]工具，脚手架基础上最小的主题[下划线][Underscores] \-维护[Automattic的][Automattic] \-让典型，最小的WordPress主题的一瞥结构体：

From this, we can get a sense of the way we can structure our theme files, folders, etc.

由此，我们可以了解构建主题文件，文件夹等的方式。

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

In this first part of our guide on WordPress theming, we introduced the terminology and the building blocks of WordPress themes, which we’ll use in the following tutorials to build our own WordPress theme.

在有关WordPress主题的指南的第一部分中，我们介绍了WordPress主题的术语和构建基块，我们将在以下教程中使用它们来构建自己的WordPress主题。

--------------------

There are three articles in this series on building a WordPress theme from scratch:

本系列中的三篇文章从头开始构建WordPress主题：

*  **understanging a theme’s structure**
    
    **强调主题的结构**
 *  [theme basics][]
    
    [主题基础][theme basics]
 *  [refining the theme][]
    
    [完善主题][refining the theme]

> 翻译自: [https://www.sitepoint.com/build-wordpress-theme-from-scratch-first-steps/][https_www.sitepoint.com_build-wordpress-theme-from-scratch-first-steps]

fcn从头开始

[DRY principle]: https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
[here]: https://developer.wordpress.org/themes/basics/template-hierarchy/
[WordPress Codex]: https://codex.wordpress.org/Theme_Development#Theme_Stylesheet
[event-riven architecture]: https://www.sitepoint.com/wordpress-hook-system/
[MVC]: https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
[The Loop]: https://codex.wordpress.org/The_Loop
[WordPress Conditional Tags]: https://codex.wordpress.org/Conditional_Tags
[taxonomies]: https://codex.wordpress.org/Taxonomies
[WP-CLI]: https://www.sitepoint.com/wp-cli-introduction/
[Underscores]: https://underscores.me/
[Automattic]: http://automattic.com/
[theme basics]: https://www.sitepoint.com/build-wordpress-theme-from-scratch-basics
[refining the theme]: https://www.sitepoint.com/build-wordpress-theme-from-scratch-final
[https_www.sitepoint.com_build-wordpress-theme-from-scratch-first-steps]: https://www.sitepoint.com/build-wordpress-theme-from-scratch-first-steps/