首页 >CMS教程 >WordPress >如何从头开始构建WordPress主题：基础知识

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

Lisa Kudrow原创: 2025-02-09 10:43:14126浏览

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

在本系列的第一部分中，我们介绍了WordPress主题，以及与WordPress主题开发有关的基本术语。我们介绍了

模板

，partials，>模板层次结构， wordpress post types ，style.css.css stylelesheet，wordpress，wordpress，wordpress， filter和操作挂钩， wordpress loop ，有条件标签，我们简要介绍了一个典型的简单WordPress主题文件结构。

钥匙要点

创建裸露的最低主题

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

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

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

现在，使用此插件，我们将创建一些虚假的内容。这是结果，使用默认如何从头开始构建WordPress主题：基础知识二十七

wordpress主题：

>现在，我们迅速潜入并设置了一个由catch-all index.php文件和style.css组成的裸露的最低主题，我们对于WordPress模板系统需要它以识别主题：如何从头开始构建WordPress主题：基础知识 >

这是style.css，目前仅由元CSS评论组成。这些评论是需要的。

这是index.php文件。它将暂时捕获所有请求：

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

>我们现在上传并激活我们拥有的最小主题。我使用wp-cli激活它：

现在，WordPress可以看到该主题，并且处于活动状态：>

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

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

如果我们现在在浏览器中访问我们的网站，这就是我们所看到的：

如何从头开始构建WordPress主题：基础知识显然，我们有工作要做。

如果我们查看主页的源代码，我们将看到WP_head（）函数在中输出了许多默认的WordPress标签，例如CSS，JavaScript，link和Meta标签。 >

> Bloginfo（）函数用于输出网站信息。>

我们的主页是空的，因为我们没有在循环中输出任何内容 - WordPress在其所有模板中使用的模式用于输出内容。关于循环的法典页面深入详细信息。循环的典型结构（基于php >而

>控制结构）看起来像这样：

我们需要在用内容循环时填充它 - 或用内容输出的WordPress标签。

如果我们通过添加the_title（），the_excerpt（）更改循环，然后添加html markup和the_id（），以使其看起来像这样：

> >现在，我们将在主页上获取帖子列表，而没有应用样式：

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

WordPress显示一个博客页面 - 所有博客文章的存档页面 - 默认情况下。

如果我们现在访问单个帖子URL - 类似于http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/-我们会看到这样的东西：

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

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

loop

，尽管很粗糙，但实际上是有效的。

>将我们的主题构造到文件中并应用Bootstrap Markup

>现在，我们将使用Twitter Bootstrap标记来实现partials，例如header.php and footer.php和各种专用模板，以便我们更轻松地进行样式。

>从index.php开始，我们用get_header（）和get_footer（）函数替换循环之前和之后的所有内容如何从头开始构建WordPress主题：基础知识

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

>与我们所说的一致 - 我们将使用Twitter bootstrap主题 - 我们的header.php文件将看起来像这样：

我们的footer.php文件将看起来像：

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

我们正在使用HTML标签中的Bootstrap类，以及WP_head（）和WP_FOOTER（）FIRE WP_HEAD和WP_FOOTER ACTION HOCKS。

我们将要做的接下来的事情是从startbootstrap.com上包括Clean Bootstrap模板的CSS和JavaScript，该模板带有MIT许可证，因此我们可以自由使用。这样，我们的主题将带有预定义的样式，响应能力，我们仍然能够进一步设置。

> functions.php

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

>我们首先使用此文件包括Bootstrap和Bootstrap主题的样式和脚本：

这是一种在主题中包含脚本和样式的WordPress-事务方式。它允许我们指定脚本的位置将被登录（标题与页脚）和重点的优先级。我们甚至可以指定每个特定资源对彼此的依赖性。这将确保资源将以正确的顺序加载。

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

我们在这里使用WP_ENQUEUE_SCRIPTS ACTION HONK。我们可以在法典中了解更多有关它的信息。（我们在上一篇文章中介绍了动作钩。）在我们的自定义bsimple_scripts（）函数（我们将其连接到wp_enque_scripts action Hook）中

>我们可以看到我们正在从Internet（Google字体）和主题文件夹中加载样式。因此，我们在主题文件夹中创建CSS，JS和WebFonts目录，并复制Bootstrap主题的CSS，JavaScript文件以及Fontawesome Icon-Font Files。

>我们还将index.php文件复制到Archive.php，page.php和single.php文件，我们将修改。

现在，我们的主题文件结构将看起来像这样：

调整标记

>如果我们现在访问主页，我们将在顶部看到菜单 - 尽管它和页面仍然是一团糟 - 因为标题中的以下行仍在输出包装在DIV及其自己的UL中的菜单标签，因此不受我们的bootstrap样式的影响：如何从头开始构建WordPress主题：基础知识

为了解决这个问题，我们首先需要转到我们的WP-Admin仪表板，然后在定制器中创建一个新菜单。我们将其命名

顶部菜单

。

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

> https://uploads.sitepoint.com/wp-content/uploads/2018/11/11/1542595661customizer.mp4

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

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

在他们的位置，我们将这些行：

<?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> 

>这将为我们删除DIV标签和UL标签的重复，但是我们仍然需要将NAV-ITEM和NAV-LINK应用于我们的菜单项（分别为LI和A标签）。我们将如何解决？ WP_NAV_MENU不为此提供参数。我们将使用NAV_MENU_LINK_ATTRIBUTES和NAV_MENU_CSS_CLASS过滤器挂钩。我们将其放入我们的functions.php文件中：
>
<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?> 

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

<?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; ?> 

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

动态标头

>能够使用动态标头 - 即首页的不同标头，其他选定页面或档案 - 我们将在我们的function.php文件中定义dynamic_header（）函数， 'll输出我们的标头标记取决于访问者加载的页面。
>现在我们的header.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 /** * 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"> 
>能够使用当前的所有URL或发布数据（例如在循环中），我们声明了$ post actible global。然后，我们只用填充标头HTML填充不同的页面或请求案例，我们将在以后完成。这为真正动态的标题奠定了基础。

>我们需要确保即使登录用户时，我们的头版也将看起来不错。WordPress登录访问者，即使在访问者访问时也显示 admin bar
首页。因为它具有位置：修复了，它覆盖了我们网站上的顶部区域，涵盖了那里的任何内容，因此我们需要为我们的顶级菜单指定偏移。我们将其添加到我们的style.css：

>这确保#mainnav（我们的菜单容器）从顶部具有足够的偏移，因此在用户登录时未覆盖。WordPress在这些情况下添加了登录名和管理式式类别，因此我们可以很容易地定位它。
<?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> 

>我们可以看到我们解决了CSS中的两种情况 - 一个默认情况，另一种用于较小的屏幕。这是因为WordPress在移动设备上输出更宽的管理栏，因此我们需要提供46px偏移。
在移动设备上，我们现在应该有一个响应迅速的JavaScript供电下拉菜单：>

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

> functions.php文件（主题开发中的关键文件）是我们介绍和利用的另一个主题。标题输出已分为自己的函数，该功能将使用页面访问的细节和站点所有者定义的变量来确定最终输出。
在指南的第三部分中，我们将完成特定的模板，为我们的主题功能和部分提供更好的结构，并完成我们网站的样式。

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

>在主题结构
上
主题基础

完善主题

经常询问有关从头开始构建WordPress主题的问题（常见问题解答）
>从头开始构建WordPress主题的先决条件是什么？这些是WordPress主题开发中使用的核心技术。此外，您应该熟悉WordPress平台本身，包括其文件结构和模板层次结构。在计算机上设置了本地开发环境，例如MAMP或XAMPP，在构建主题时可以测试主题。

如何开始从scratch构建WordPress主题？如何将自定义功能添加到我的WordPress主题中？

>您可以通过WordPress主题添加自定义功能在主题目录中创建functions.php文件。该文件的作用像插件，使您可以在主题中添加自定义功能和功能。您可以使用它来注册导航菜单，添加侧边栏，排名样式和脚本等等。 'LL需要在CSS代码中使用媒体查询。媒体查询允许您根据用户屏幕的大小应用不同的样式。这意味着您可以为台式机，平板电脑和移动设备创建不同的布局。您还需要确保图像响应迅速，您可以将其宽度设置为100％。

>如何自定义WordPress主题的标头和页脚？

>您可以通过在主题目录中创建headpress.php文件和footer.php文件来自定义WordPress主题的标题和页脚。 header.php文件是您为标题编写HTML和PHP代码的地方，footer.php文件是您为页脚编写代码的地方。然后，您可以使用get_header（）和get_footer（）functions。通过在您的functions.php文件中使用register_post_type（）函数的自定义帖子类型为您的WordPress主题。此功能使您可以定义具有自己的标签，功能和功能的新帖子类型。然后，您可以创建一个单{postType} .php文件和一个存档 - {postType} .php文件来控制您自定义帖子类型的显示。

>如何将导航菜单添加到我的WordPress主题？

>您可以在您的WordPress主题中添加导航菜单WordPress主题通过在您的functions.php文件中使用register_nav_menus（）函数。此功能使您可以在主题中注册一个或多个导航菜单。然后，您可以使用wp_nav_menu（）函数在其他模板文件中显示您的菜单。

>如何自定义我的WordPress主题中的循环？>您可以在WordPress主题中自定义循环通过在index.php文件或其他模板文件中修改循环代码。循环是WordPress用于显示帖子的PHP代码。您可以将其自定义以更改显示帖子的显示方式，显示的帖子数量等等。

如何更新WordPress主题？

>您可以通过更改来更新WordPress主题到您的主题文件，然后将它们上传到您的WordPress网站。如果您使用的是子主题，则可以更新父主题而不会失去更改。如果您不使用儿童主题，则应在更新主题之前对主题进行备份，因为更新将覆盖您的更改。

以上是如何从头开始构建WordPress主题：基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Do You Need to Know React as a WordPress Developer?下一篇：Adding Custom Routes to the WordPress REST API

查看更多