如何从头开始构建WordPress主题：基础知识

本是古典何须时尚 2022-12-03 09:19 991阅读 0赞

**In this tutorial, we’ll explore WordPress theme file structure in depth, and learn how to create a basic WordPress theme from scratch.**

**在本教程中，我们将深入探讨WordPress主题文件的结构，并学习如何从头开始创建基本的WordPress主题。**

In the [first part of this series][], we introduced WordPress theming, and the fundamental terminology relating to WordPress theme development. We covered *templates*, *partials*, *template hierarchy*, *WordPress post types*, the *style.css* stylesheet, WordPress *filter* and *action* hooks, *WordPress loop*, *conditional tags*, and we briefly took a look at a typical simple WordPress theme file structure.

在[本系列][first part of this series]的[第一部分中][first part of this series] ，我们介绍了WordPress主题，以及与WordPress主题开发有关的基本术语。 我们介绍了*模板* ， *局部视图* ， *模板层次结构* ， *WordPress帖子类型* ， *style.css*样式表，WordPress *过滤器*和*操作*钩子， *WordPress循环* ， *条件标签* ，并简要介绍了一个典型的简单WordPress主题文件结构。

## 创建裸机最低主题 **(**Creating the Bare Minimum Theme**)** ##

The first thing we’ll do is install a plugin that will enable us to batch create WordPress posts and other content. This way, we’ll be able to quickly populate our development website without losing too much time. One plugin that serves this purpose is [FakerPress][] by [Gustavo Bordoni][], available in the WordPress plugin repository.

我们要做的第一件事是安装一个插件，使我们能够批量创建WordPress帖子和其他内容。 这样，我们将能够快速填充我们的开发网站而不会浪费太多时间。 用于此目的的一个插件是[Gustavo Bordoni的][Gustavo Bordoni] [FakerPress][] ，可在WordPress插件存储库中找到。

We quickly install and activate the plugin via WP-CLI.

我们通过WP-CLI快速安装并激活插件。

Now, when we log in to the admin dashboard, we’ll see that FakerPress is installed, and we can create all sorts of content in batch, including any custom post types we have.

现在，当我们登录到管理仪表盘时，我们将看到已安装FakerPress，并且可以批量创建各种内容，包括我们拥有的任何自定义帖子类型。

![FakerPress is installed][]

Now, using this plugin, we’ll create some fake content. This is the result, using the default *TwentySeventeen* WordPress theme:

现在，使用此插件，我们将创建一些虚假内容。 这是使用默认的*TwentySeventeen* WordPress主题的结果：

![The TwentySeventeen theme with placeholder content][]

Now, we quickly dive in and set up a bare minimum theme that consists of the catch-all `index.php` file, and `style.css`, which we need for the WordPress templating system to recognize the theme:

现在，我们快速进入并设置一个基本的最小主题，该主题由万能的`index.php`文件和`style.css` ，WordPress模板系统需要这些主题才能识别该主题：

/*
    Theme Name: Botega Simple Theme
    Theme URI: https://botega.co.uk
    Author: Tonino Jankov
    Author URI: https://botega.co.uk
    Description: Basic WordPress theme for Sitepoint theme building tutorial
    Text Domain: bsimple
    Version: 1.0.0
    License: GNU General Public License v2 or later
    */

This is the `style.css`, which consists only of meta CSS comments for now. These comments are required.

这是`style.css` ，目前仅包含meta CSS注释。 这些注释是必需的。

This is the `index.php` file. It will catch all the requests for now:

这是`index.php`文件。 它将立即捕获所有请求：

<?php
    /**
     *
     * @package Botega_Scratch_Theme
     */
    ?>
    
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
        <title><?php bloginfo('name'); ?></title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
        <?php wp_head(); ?>
    </head>
    <body>
    
          <header>
             <h1><?php bloginfo('name'); ?></h1>
             <h3><?php bloginfo('description'); ?></h3>
          </header>
    
            <?php
            if ( have_posts() ) :
                /* Start the Loop */
                while ( have_posts() ) :
                    the_post();
                endwhile;
            endif;
            ?>
    
    </body>

We now upload and activate the minimal theme we have. I activate it using WP-CLI:

现在，我们上传并激活我们拥有的最小主题。 我使用WP-CLI激活它：

The theme is now visible to WordPress, and is active:

该主题现在对WordPress可见，并且处于活动状态：

![The theme is now activated][]

We haven’t provided a screenshot, so the display in the backend is basic.

我们没有提供屏幕截图，因此后端的显示是基本的。

If we visit our website now in the browser, this is what we’ll see:

如果我们现在在浏览器中访问我们的网站，将会看到以下内容：

![The current home page][]

Obviously, we have work to do.

显然，我们有工作要做。

If we view the source code of the home page, we’ll see that the `wp_head()` function has outputted a lot of default WordPress tags in the `<head>`, like CSS, JavaScript, `link` and `meta` tags.

如果查看主页的源代码，我们会看到`wp_head()`函数在`<head>`输出了许多默认的WordPress标签，例如CSS，JavaScript， `link`和`meta`标签。

The `bloginfo()` function is [used to output website information][].

`bloginfo()`函数[用于输出网站信息][used to output website information] 。

Our home page is empty, because we aren’t outputting anything inside [the Loop][] — a pattern that WordPress uses in all of its templates to output content.

我们的主页为空，因为我们没有[在Loop][the Loop]内输出任何内容-WordPress在其所有模板中使用的一种模式来输出内容。

The [Codex page about the Loop][the Loop] goes deep into details about it. A typical structure for the loop — which is based on PHP *while* control structure — looks like this:

[有关循环的][the Loop] “ [法典”页面][the Loop]将深入介绍其细节。 循环的典型结构-基于PHP *而*控制结构-如下所示：

<?php
    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post();
            //
            // Post Content here
            //
        } // end while
    } // end if
    ?>

We need to fill that `while` loop with content — or with content-outputting WordPress tags.

我们需要用内容或输出内容的WordPress标签填充`while`循环。

If we change our loop, by adding `the_title()`, `the_excerpt()`, and we add HTML markup and `the_ID()`, to look like this:

如果更改循环，则添加`the_title()` ， `the_excerpt()` ，并添加HTML标记和`the_ID()` ，如下所示：

<?php
        if ( have_posts() ) : while ( have_posts() ): the_post(); ?>
    
        <div id="post-<?php the_ID(); ?>">
            <h2><?php the_title(); ?></h2>
            <div class="post-excerpt"><?php the_excerpt(); ?></div>
        </div>
    
        <?php endwhile;
        endif;
        ?>

We’ll now get a list of posts on our home page, with no style applied:

现在，我们将在我们的主页上获得帖子列表，但未应用任何样式：

![Unstyled output][]

WordPress shows A blog page — an archive page for all the blog posts — by default.

WordPress默认显示一个博客页面(所有博客文章的存档页面)。

If we now visit single post URL — something like `http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/` — we’ll see something like this:

如果现在访问单个帖子URL(例如`http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/` ，我们将看到以下内容：

![Our current single post layout][]

Our *loop*, albeit very crude, actually works.

我们的*循环*虽然很粗糙，但实际上有效。

## 将主题结构化为文件并应用Bootstrap标记 **(**Structuring Our Theme into Files and Applying Bootstrap Markup**)** ##

We’ll now implement [partials][], like `header.php` and `footer.php` and various specialized templates, all using [Twitter Bootstrap][] markup, so that we can style it more easily.

现在，我们将使用[Twitter Bootstrap][]标记来实现[headers][partials] ，例如`header.php`和`footer.php`以及各种专门的模板，以便我们可以更轻松地对其进行样式设置。

Starting with `index.php`, we replace all the content before and after the loop with `get_header()` and `get_footer()` functions:

从`index.php`开始，我们用`get_header()`和`get_footer()`函数替换循环前后的所有内容：

<?php
    /**
     *
     * @package Botega_Scratch_Theme
     */
    
    get_header(); ?>
    
        <?php
        if ( have_posts() ) : while ( have_posts() ): the_post(); ?>
    
        <div id="post-<?php the_ID(); ?>">
            <h2><?php the_title(); ?></h2>
            <div class="post-excerpt"><?php the_excerpt(); ?></div>
        </div>
    
        <?php endwhile;
        endif;
        ?>
    
    <?php get_footer(); ?>

This means we need to provide all that content in the partials we mentioned.

这意味着我们需要在我们提到的部分内容中提供所有这些内容。

In line with what we said — that we’ll use Twitter Bootstrap theme — our `header.php` file will look like this:

符合我们所说的(我们将使用Twitter Bootstrap主题)，我们的`header.php`文件将如下所示：

<?php
    /**
     * The header for our theme.
     *
     * @package Botega_Scratch_Theme
     *
     */
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    
      <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header page-scroll">
                  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="navbar-brand"><?php bloginfo( 'name' ); ?></a>
          </div>
    
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
              <?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?>
              </ul>
          </div>
        </div>
      </nav>
    
      <div class="container">
          <div class="row">

Our `footer.php` file will look like this:

我们的`footer.php`文件将如下所示：

<?php
    /**
     * Footer template partial
     *
     * @package Botega_Scratch_Theme
     *
     */
    ?>
         </div>
         
      </div>
      
    
      
      <footer>
        <div class="container">
          <div class="row">
              <div class="col-lg-8 col-md-10 mx-auto">
              </div>
          </div>
        </div>
      </footer>
    
    <?php wp_footer(); ?>
    
    </body>
    </html>

We are using Bootstrap classes in our HTML tags, and [wp\_head()][wp_head] and [wp\_footer()][wp_footer] fire `wp_head` and `wp_footer` action hooks.

我们在HTML标记中使用Bootstrap类，并且[wp\_head()][wp_head]和[wp\_footer()][wp_footer]触发`wp_head`和`wp_footer`操作挂钩。

The next thing we’ll do is include the CSS and JavaScript from [clean bootstrap template][] from startbootstrap.com, which comes with an MIT license, so we can freely use it. This way, our theme will come with predefined styles, responsiveness, and we’ll still be able to style it further.

接下来，我们将包括来自startbootstrap.com的[干净启动模板][clean bootstrap template]CSS和JavaScript，该[模板][clean bootstrap template]带有MIT许可证，因此我们可以自由使用它。 这样，我们的主题将具有预定义的样式，响应能力，并且我们仍然可以对其进行进一步的样式设置。

## functions.php **(**functions.php**)** ##

`functions.php` is a file that comes with any serious WordPress theme. This is a file that acts as a poor man’s plugin archive. It allows us to include any custom functionality in our theme.

`functions.php`是任何严肃的WordPress主题附带的文件。 这是一个充当穷人的插件档案的文件。 它允许我们在主题中包含任何自定义功能。

We’ll firstly use this file to include Bootstrap and our bootstrap theme’s styles and scripts:

首先，我们将使用此文件包括Bootstrap以及bootstrap主题的样式和脚本：

function bsimple_scripts() {
        wp_enqueue_style( 'bsimple-style', get_stylesheet_uri() );
        wp_enqueue_style( 'bsimple-clean', get_template_directory_uri() . '/css/clean-blog.min.css' );
        wp_enqueue_style( 'bsimple-bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
        wp_enqueue_style( 'bsimple-fontawesome', get_template_directory_uri() . '/css/fa-all.min.css' );
        wp_enqueue_style( 'bsimple-font1', "https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" );
        wp_enqueue_style( 'bsimple-font2', "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" );
    
        wp_enqueue_script( 'bsimple-jq', get_template_directory_uri() . '/js/jquery.min.js');
        wp_enqueue_script( 'bsimple-bootstrap', get_template_directory_uri() . '/js/bootstrap.bundle.min.js');
        wp_enqueue_script( 'bsimple-clean', get_template_directory_uri() . '/js/clean-blog.min.js');
    }    
    
    add_action( 'wp_enqueue_scripts', 'bsimple_scripts' );

This is a WordPress-idiomatic way of including scripts and styles in a theme. It allows us to specify that the position of the scripts will be enqueued (header vs footer) and the priority of enqueuing. We can even specify the dependency of each particular resource on the other. This will ensure resources will be loaded in the right order.

这是一种WordPress惯用的方式，在主题中包括脚本和样式。 它允许我们指定将脚本的位置排入队列(页眉与页脚)以及排队的优先级。 我们甚至可以指定每个特定资源对另一个的依赖。 这将确保以正确的顺序加载资源。

We’re using the `wp_enqueue_scripts` action hook here. We can learn more about it [in the Codex][]. (We covered action hooks in the [previous article][first part of this series].)

我们在这里使用`wp_enqueue_scripts`操作钩子。 我们可以[在食典中][in the Codex]了解更多信息。 (我们在[上一篇文章中][first part of this series]介绍了动作挂钩。)

Inside our custom `bsimple_scripts()` function — which we hook to `wp_enqueue_scripts` action hook — we use two WordPress functions to load our scripts and styles — [wp\_enqueue\_script()][wp_enqueue_script] and [wp\_enqueue\_style()][wp_enqueue_style]. Arguments for these functions — as specified in its linked reference pages — allow us to fully leverage flexibility that we mentioned.

在我们自定义的`bsimple_scripts()`函数(我们将其钩到`wp_enqueue_scripts`操作钩)内部，我们使用两个WordPress函数来加载脚本和样式[\-wp\_enqueue\_script()][wp_enqueue_script]和[wp\_enqueue\_style()][wp_enqueue_style] 。 这些功能的参数(如其链接的参考页中所述)使我们能够充分利用我们提到的灵活性。

We can see that we’re loading styles from the Internet (Google fonts) and from our theme folder. Therefore, we create `css`, `js` and `webfonts` directories in our theme folder, and copy our Bootstrap theme’s CSS, JavaScript files, and FontAwesome icon-font files.

我们可以看到我们正在从Internet(Google字体)和主题文件夹中加载样式。 因此，我们在主题文件夹中创建`css` ， `js`和`webfonts`目录，并复制Bootstrap主题CSS，JavaScript文件和FontAwesome图标字体文件。

We also copy our `index.php` file to `archive.php`, `page.php` and `single.php` files, which we’ll modify.

我们还将`index.php`文件复制到`archive.php` ， `page.php`和`single.php`文件中，我们将对其进行修改。

Now our theme file structure will look something like this:

现在我们的主题文件结构将如下所示：

![Our current theme file structure][]

## 调整标记 **(**Adjusting the Markup**)** ##

If we now visit our home page, we’ll see the menu on the top — though it and the page are still a mess – because the following line in our header is still outputting the menu wrapped in `div` and its own `ul` tags, so it isn’t affected by our bootstrap styles:

如果现在访问主页，我们将在顶部看到菜单(尽管它和页面仍然很混乱)，因为标题中的以下行仍输出用`div`和自己的`ul`标签包装的菜单，因此它不受我们的引导程序样式的影响：

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?>

To solve this, we first need to go to our `wp-admin` dashboard and create — in the customizer — a new menu. we’ll name it *Top Menu*.

为了解决这个问题，我们首先需要转到`wp-admin`仪表板，并在定制程序中创建一个新菜单。 我们将其命名为*Top Menu* 。

After we’ve done this, we’ll go to our `header.php` file remove these lines:

完成此操作后，我们将转到`header.php`文件，删除以下`header.php`行：

<ul class="nav navbar-nav navbar-right">
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?>
    </ul>

In their place we put these lines:

我们将这些行放在它们的位置：

<ul class="navbar-nav ml-auto">
        <?php wp_nav_menu(array(
          'menu' => 'Top Menu',
          'items_wrap'=>'%3$s',
          'container' => false,
          )); ?>
    </ul>

This will remove the `div` tag and the duplication of the `ul` tag for us, but we still need to apply `nav-item` and `nav-link` to our menu items (to `li` and `a` tags respectively). How will we go about this? `wp_nav_menu` [does not provide arguments for this][]. We’ll use the `nav_menu_link_attributes` and `nav_menu_css_class` filter hooks. We put this into our `functions.php` file:

这将删除`div`标签和的重复`ul`对我们的标签，但我们仍然需要应用`nav-item`和`nav-link` (向我们的菜单项`li`和`a`分别标记)。 我们将如何处理？ `wp_nav_menu` [不为此提供参数][does not provide arguments for this] 。 我们将使用`nav_menu_link_attributes`和`nav_menu_css_class`过滤器挂钩。 我们将其放入我们的`functions.php`文件中：

Now we can specify new attributes in our `wp_nav_menu` in our `header.php`:

现在，我们可以在`header.php`的`wp_nav_menu`中指定新属性：

<ul class="navbar-nav ml-auto">
          <?php wp_nav_menu(array(
            'menu' => 'Top Menu',
            'items_wrap'=>'%3$s',
            'container' => false,
            'list_item_class' => "nav-item",
            'link_class' => "nav-link",
            )); ?>
    </ul>

Now our top menu links can take advantage of styles already defined in our Bootstrap theme’s CSS.

现在，我们的顶级菜单链接可以利用Bootstrap主题CSS中已经定义的样式。

## 动态标题 **(**Dynamic Header**)** ##

To be able to use a dynamic header — that is, a different header for the front page, for other selected pages, or for archives — we’ll define a `dynamic_header()` function in our `functions.php` file, where we’ll output our header markup dependent on the page the visitor loads.

为了能够使用动态标头(即首页，其他选定页面或存档的不同标头`dynamic_header()` ，我们将在`functions.php`文件中定义`dynamic_header()`函数，在其中输出我们的标题标记取决于访问者加载的页面。

So now our `header.php` file will end like this:

所以现在我们的`header.php`文件将像这样结束：

</nav>
    
    <?php dynamic_header(); ?>
    
    <div class="container">
        <div class="row">

We’ll also define that function like this:

我们还将定义该函数，如下所示：

if(!function_exists('dynamic_header')){
    
    function dynamic_header(){
    
        global $post;
    
        ?>
    
        <?php if (is_front_page()){ ?>
    
            <header class="masthead" style="background:#ccc;">
                <div class="overlay"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-md-10 mx-auto">
                            <div class="site-heading">
                            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                            <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
    
        <?php } else if (is_home()){ ?>
    
            <header class="masthead" style="background:#ccc;">
                <div class="overlay"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-md-10 mx-auto">
                            <div class="site-heading">
                            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                            <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
    
        <?php } else if (is_page()){ ?>
    
            <header class="masthead" style="background:#ccc;">
                <div class="overlay"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-md-10 mx-auto">
                            <div class="site-heading">
                            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                            <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
    
        <?php } else if (is_single()){ ?>
    
            <header class="masthead" style="background:#ccc;">
                <div class="overlay"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-md-10 mx-auto">
                            <div class="site-heading">
                            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                            <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
    
        <?php } else { ?>
    
            <header class="masthead" style="background:#ccc;">
                <div class="overlay"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-md-10 mx-auto">
                            <div class="site-heading">
                            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                            <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
    
        <?php }
    }
    
    }

To be able to use all the current URL or post data — like in the loop — we declare a `$post` variable `global`. Then we just fill different page or request cases with filler header HTML, which we’ll finish later. This sets the foundation for a truly dynamic header.

为了能够使用所有当前URL或发布数据(例如在循环中)，我们声明一个`$post`变量`global` 。 然后，我们仅使用填充标头HTML填充不同的页面或请求案例，我们将在稍后完成。 这为真正的动态标头奠定了基础。

We need to make sure that our front page — with dynamic top menu — will look good even when the user is logged in. WordPress shows an *admin bar* when visitors are logged in, even when they visit the front page. Because it has `position: fixed`, it overlays the top zone on our website, covering whatever is there, so we need to specify an offset for our top menu.

我们需要确保即使用户登录后，带有动态顶部菜单的首页也将看起来不错。当访客登录时，即使他们访问首页，WordPress也会显示一个*管理栏* 。 因为它的`position: fixed` ，所以它覆盖了我们网站的顶部区域，覆盖了那里的所有内容，因此我们需要为顶部菜单指定一个偏移量。

We’ll add this to our `style.css`:

我们将其添加到我们的`style.css` ：

body.logged-in.admin-bar #mainNav {
        margin-top: 32px;
    }
    
    @media screen and (max-width: 782px) {
        body.logged-in.admin-bar #mainNav {
            margin-top: 46px;
        }
    }

This makes sure the `#mainNav` — our menu container — has enough offset from the top, so it isn’t covered when user is logged in. WordPress adds `logged-in` and `admin-bar` classes to `body` in these cases, so we can easily target it.

这可以确保`#mainNav` (我们的菜单容器)与顶部之间有足够的偏移量，因此在用户登录时不会覆盖它。在这种情况下，WordPress将`logged-in`和`admin-bar`类添加到`body`中，因此我们可以轻松地进行操作。瞄准它。

We can see that we address two cases in our CSS — one default, and another one for smaller screens. This is because WordPress outputs a wider admin bar on mobile devices, so we need to provide a 46px offset.

我们可以看到我们在CSS中处理了两种情况-一种是默认情况，另一种是用于较小屏幕的情况。 这是因为WordPress在移动设备上输出了更宽的管理栏，因此我们需要提供46px的偏移量。

On mobile, we should now have a responsive, JavaScript-powered dropdown menu:

在移动设备上，我们现在应该有一个响应性的，基于JavaScript的下拉菜单：

![Our dropdown on mobile][]

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

In this second part on creating a WordPress theme from scratch, we created a very basic WordPress theme, and we included Bootstrap styles and scripts into it. We adjusted the menu output to fit our predefined styles. We also separated header and footer output into their respective partials.

在从头开始创建WordPress主题的第二部分中，我们创建了一个非常基本的WordPress主题，并且其中包含了Bootstrap样式和脚本。 我们调整了菜单输出以适合我们的预定义样式。 我们还将页眉和页脚输出分成各自的部分。

The `functions.php` file — a crucial file in theme development — is another topic we introduced and leveraged. Header output has been separated into its own function, which will use particulars of page visit, and site-owner–defined variables to determine the final output.

`functions.php`文件(在主题开发中至关重要的文件)是我们引入并利用的另一个主题。 标头输出已被分成自己的函数，该函数将使用页面访问的详细信息以及站点所有者定义的变量来确定最终输出。

In the third part of the guide, we’ll finish building particular templates, give better structure to our theme functions and partials, and finish up the styling of our website.

在指南的第三部分中，我们将完成特定模板的构建，为主题功能和部分提供更好的结构，并完成我们网站的样式。

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

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

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

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

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

[first part of this series]: https://www.sitepoint.com/build-wordpress-theme-from-scratch-first-steps/
[FakerPress]: https://wordpress.org/plugins/fakerpress/
[Gustavo Bordoni]: http://bordoni.me/
[FakerPress is installed]: /images/20221123/0f4f5afb750d4f7d981a821fe0e533ed.png
[The TwentySeventeen theme with placeholder content]: /images/20221123/e9fd5e0549cb4af885d0f2a78bec6d09.png
[The theme is now activated]: /images/20221123/8e7da8507e6c40e0ab31787bcbba4fd2.png
[The current home page]: /images/20221123/c80b7868a6bb40b0a4bc4c422460fb77.png
[used to output website information]: https://developer.wordpress.org/reference/functions/bloginfo/
[the Loop]: https://codex.wordpress.org/The_Loop
[Unstyled output]: /images/20221123/f057c886d88048c0b3c122770a487a5f.png
[Our current single post layout]: /images/20221123/f15e4cfec42946aba27addd44aed6615.png
[partials]: https://developer.wordpress.org/themes/template-files-section/partial-and-miscellaneous-template-files/
[Twitter Bootstrap]: https://getbootstrap.com/
[wp_head]: https://codex.wordpress.org/Function_Reference/wp_head
[wp_footer]: https://codex.wordpress.org/Function_Reference/wp_footer
[clean bootstrap template]: https://startbootstrap.com/template-overviews/clean-blog
[in the Codex]: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
[wp_enqueue_script]: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
[wp_enqueue_style]: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
[Our current theme file structure]: /images/20221123/7d1f6b9ad6e84ea5a54281bee6cfcf7b.png
[does not provide arguments for this]: https://developer.wordpress.org/reference/functions/wp_nav_menu/
[Our dropdown on mobile]: /images/20221123/adfa16d265144db4a115a7fe1aa6af87.png
[refining the theme]: https://www.sitepoint.com/build-wordpress-theme-from-scratch-final
[https_www.sitepoint.com_build-wordpress-theme-from-scratch-basics]: https://www.sitepoint.com/build-wordpress-theme-from-scratch-basics/