谁都可以开发 WordPress 主题（手把手教你开发WordPress主题）-牛奇网

本文将通过一个简单的教程，讲解如何从零开始创建自己的 WordPress 主题。

想要了解 WordPress 主题是如何工作的，最好的方法是自己动手开发一个简单的主题。虽然 WordPress 提供了很多免费主题供用户使用，还有很多个人和机构开发者开发了功能更多、性能更好、UI界面更美观的 WordPress 付费主题。但是，无论您使用的是什么主题，都会对某些地方不太满意，想要对主题进行更多定制化的更改。虽然可以通过安装插件来实现想要的功能，但是安装过多的插件又会对 WordPress 网站的性能造成不好的影响。所以自己掌握一点儿 WordPress 开发的基础知识，就可以根据自己的需要进行随意的更改了。

第 1 步：创建主题文件夹

如果要开发一款 WordPress 主题，首先需要知道组成 WordPress 主题的文件应该包括哪些部分，已经主题应该放到哪里才会发挥作用。下面的图片展示的就是 WordPress 程序的根目录结构，Wordpress 的主题就放置在 wp-content 文件夹下面一个名为 Themes 的目录中。

该目录包含以下文件和文件夹：

文件

composer.json
index.php
license.txt
readme.html
wp-activate.php
wp-blog-header.php
wp-comments-post.php
wp-config.php
wp-config-sample.php
wp-cron.php
wp-links-opml.php
wp-load.php
wp-login.php
wp-mail.php
wp-settings.php
wp-signup.php
wp-trackback.php
xmlrpc.php

文件夹

wp-admin
wp-content
wp-includes

这里我们需要了解的是 wp-content 文件夹。wp-content 文件夹内包含一个名为 “themes”的文件夹，是用来储存所有的 WordPress 主题的地方，这里面可以同时包含多个主题文件夹。如下图所示，在这个主题文件夹中，我们发现有三个文件夹分别为 twentyfifteen，twentysixteen 和 twentyseventeen。这些是 WordPress 默认自带的三个主题。另外，下图还有一个名为 customtheme 的文件夹，是我们将要创建的新主题文件夹。

第 2 步：在自定义主题文件夹中创建 style.css 和 index.php

知道了 WordPress 主题文件在 WordPress 文件系统中的位置，我们在主题文件夹中创建了一个名为 customtheme 的新文件夹。我们现在要在customtheme 文件夹中创建两个空文件，一个为 index.php，另一个为style.css，这两个文件是开发 WordPress 主题必备的两个文件。

Style.css

WordPress 会读取放置在 style.css 文件中的样式表信息。

style.css 是每个 WordPress 主题必备的样式表 (CSS) 文件。它控制网站页面的布局和视觉呈现。

在 Style.css 中，我们简单地添加主题名称、作者、作者 URI 和主题的版本号等信息。

index.php

我们向该文件中随意添加一些内容，来验证这个自定义主题正在工作。

至此，我们就已经成功创建了属于我们的第一个 WordPress 主题。

第 3 步：从 WordPress 仪表板激活新主题

访问 WordPress 仪表盘并导航到外观->主题，我们已经可以看到我们刚刚创建的新主题了。

我们可以点击“主题信息”来了解一下我们的自定义主题，发现我们在 style.css 文件中输入的信息在这里得到了体现。我们可以看到它的名称为 customtheme ，版本号 1.0 等信息。

点击主题上的“激活”，就启用了我们的主题。

第4步：添加代码以输出文章标题和文章内容

我们可以先随便发布几篇文章用来展示。

WordPress 循环

接下来我们来介绍一下 WordPress 循环，WordPress 循环是能够让 WordPress 运转起来的一个引擎，可以将每篇文章显示在需要的页面，并将这些文章按The Loop 标签中的指定标准进行排版。

<?php

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

?>

如上所示，要展示文章内容，我们需要用到两个 WordPress 函数，分别是 have_posts() 和 the_post() 。

have_posts() 函数只做一件事，就是来检查数据库中是否有文章。该函数将返回以下两个值分别为 true 或 false ，如果它返回true，则有可循环展示的文章；如果它返回 false，则没有文章可以循环展示。

另一个函数 the_post() 不返回任何内容。它的工作是要让 WordPress 准备好输出文章内容。具体来说，它从数据库中检索是否仍然有文章需要展示，如果有则将in_the_loop属性设置为 true 。接下来，我们将下面的代码复制到index.php 文件中。

<?php

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

        <h2><?php the_title() ?></h2>
		<?php the_content() ?>
	
	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

?>

现在已经能够看到内容了，接下来我们使用另外两个 WordPress 函数，the_title（）和the_content（）。大多数情况下，这两个函数在循环内使用，它们的作用是在循环遍历数据库中的每篇文章时，获取每篇文章的标题和内容。当循环开始运行时，它首先找到第一篇文章，然后将文章标题和正文输出到页面。在下一个循环中，它找到第二篇文章，然后再获取文章标题和内容并将它们输出到页面。

第5步：为帖子添加链接

我们可以使用 the_permalink() 函数链接到每篇文章页面。使用如下代码：

<?php

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

        <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
		<?php the_content() ?>
	
	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

?>

现在，我们点击文章标题就可以跳转到文章页面了。如下图所示：

第6步：为主题添加页眉和页脚

下面我们将介绍如何为主题添加页眉和页脚部分，页眉和页脚几乎展现在网站的所有页面上。我们在主题的模板文件中使用 get_header()和 get_footer() 函数来为主题增加 Header 区域和 Footer 区域。

<?php

get_header();

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

        <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
		<?php the_content() ?>
	
	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

get_footer();

?>

现在，我们可以看到自定义主题现在有一个页眉区域和一个页脚区域。页眉区域包括网站名称和标语，而在页脚中我们可以看到网站的一些其他信息。

主题文件从2个到 4 个

到目前为止，我们的 customtheme 文件夹中有两个文件分别为 style.css 文件和 index.php 文件。接下来，我们继续在主题目录下创建另外两个重要的文件分别为 header.php 和 footer.php 。

现在，当调用 get_header() 或 get_footer() 函数后，主题将会覆盖 WordPress 自带的页眉和页脚布局。如果我们现在刷新网站，看起来页眉和页脚都不见了。这是因为我们现在还没有向 Header.php 文件和 Footer.php 文件中添加任何代码。我们将下面的简单 html 代码添加到对应的文件中。

header.php 文件：

<h2>The Header!</h2>
<hr>

footer.php 文件：

<hr>
<h2>The Footer!</h2>

使用 header.php

通过上面的例子，我们能够了解到 header.php 文件是如何工作的。header.php 文件是一个非常重要的模板文件，因为网站上的每个页面都要调用它。首先，所有 HTML 页面都需要声明网页的文档类型，而 WordPress 需要在 header.php 文件中来进行声明。此外，所有的网页都有一个开始的 HTML 标签，Title 标签和 body 标签，而所有这些都要放在header.php 文件中。我们还将在这里使用一些新的WordPress的功能，包括如下几个函数： language_attributes()、bloginfo() 和 body_class()。

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
</head>

<body <?php body_class(); ?>>

<header class="site-header">
    <h1><?php bloginfo( 'name' ); ?></h1>
    <h4><?php bloginfo( 'description' ); ?></h4>
</header>

如果我们重加载页面，然后在浏览器中查看页面的源代码，我们就可以知道刚才这些函数起了什么作用。页面我们可以突出显示来自以下这些函数的输出：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>WordPress Tutorial</title>
</head>

<body class="home blog logged-in admin-bar no-customize-support">
<header class="site-header">
  <h1>WordPress Tutorial</h1>
  <h4>WordPress Tutorial Site</h4>
</header>
<h2><a href="http://wordpresstutorial.dev/2017/06/12/php-tutorial-blog-post/">PHP Tutorial Blog Post</a></h2>
<p>PHP is the language that most of WordPress is built with.  It is a scripting language that has humble roots, but has evolved to become a very powerful and modern language with full support for namespaces, object oriented programming, class reflection, closures, and much more.  This in fact, is just an example post so we can test our custom wordpress theme.  So glad you could read this example WordPress Post.</p>
<h2><a href="http://wordpresstutorial.dev/2017/06/12/wordpress-tutorial-blog-post/">WordPress Tutorial Blog Post</a></h2>
<p>Hello World!  We will write a short tutorial here about WordPress.  Of course this is just dummy text for this post so that we can have something to read.  Maybe you like swimming during the summer.  Eating hamburgers at the cook out is fun for all.  On Monday, you can go back to WordPress Website Development.  There are many things to do.</p>
<ul>
  <li>Commute to office</li>
  <li>Update WordPress Theme</li>
  <li>Finish Statistics Reports</li>
</ul>
<p>This is the end of this dummy post.</p>
</body>
</html>

我们可以在开发 WordPress 主题时，非常自由地使用 WordPress 提供的各种函数。事实上，我们没有写任何自定义代码。我们只要学习各种 WordPress 函数的作用，然后就可以将它们用于我们的主题开发了。

使用 wp_head()

在 WordPress 主题过程中，wp_head() 是一种特殊的函数，它与我们前文所述的各种函数用法不太一样。这个函数的作用是完成 header.php 文件的 <head> 部分内容的输出。当在站点安装各种插件时，通过该函数在前端的<head>标签中输出脚本或元数据信息。我们将在这里使用该函数：

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
	<?php wp_head() ?>
</head>

<body <?php body_class(); ?>>

<header class="site-header">
    <h1><?php bloginfo( 'name' ); ?></h1>
    <h4><?php bloginfo( 'description' ); ?></h4>
</header>

完成 footer.php

我们刚才已经讲了 header.php 文件，接下来我们继续讲一下 footer.php 文件。回想一下，刚才我们讲过，在header.php 文件中，我们有几个开始标签，包括 <html> 和 <body> ，我们需要在 footer.php 文件中结束这些标签。我们在 footer.php 文件中调用 wp_footer() 函数，然后还要添加</html>和</body>的结束标签。
footer.php

<footer class="site-footer">
    <p><?php bloginfo( 'name' ) ?></p>
</footer>

<?php wp_footer() ?>
</body>
</html>

在 WordPress 仪表盘中更改站点信息

你可能想知道，为什么我们必须利用这些函数来构建我们的主题。例如，当我们想输出我们网站的名称和标语时，我们使用了 bloginfo() 函数传递网站名称和描述参数。这样做是因为，我们一定不会想将这些内容直接写在网站文件中，因为我们可能随时会改变这些信息。此外，我们开发的主题不是只用在某一个站点上，我们可能想让它具有通用性，其他网站也可以使用。而其他用户在使用的时候，只需要登录 WordPress 的后台，填写某些信息后就能自动在前端显示出来。

网站标题链接到主页

大多数主题可以让用户直接点击网站LOGO，就可以跳转到网站首页。这样，无论用户在网站上的哪个位置，他们都可以随时单击返回网站的主页。现在让我们在 header.php 中添加该链接。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
	<?php wp_head() ?>
</head>

<body <?php body_class(); ?>>
<header class="site-header">
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <h4><?php bloginfo( 'description' ); ?></h4>
</header>

第 7 步：添加 functions.php

此时，我们创建的主题中有四个文件，分别为 index.php、style.css、header.php 和 footer.php 。我们现在要创建另一个非常重要的文件 functions.php 文件。

WordPress 中的 functions.php 文件有很重要的作用，通过它我们可以调整网站的很多功能和行为。我们也可以将functions.php 视为 WordPress 插件的另外一种形式，记住下面一些关键信息：

不需要唯一的标题文本
存储在主题文件夹中
仅在当前激活的主题目录中有效
仅适用于当前主题
可以调用 PHP 函数、WordPress 函数或自定义函数

让我们在 functions.php 文件中创建一个函数来将 style.css 文件引入到我们的主题中：

<?php

function custom_theme_assets() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );

这段代码可以激活我们自定义主题的样式表。

现在来稍微美化一下我们的主题。首先，让我们添加一个带有类的<div>容器。开头的 <div> 在 header.php 中，而结束的 <div> 将在 footer.php 中。我们使用带有类ID的<article> 标签将文章内容包含在里面。这样我们就可以定义文章的样式了。

第 8 步：为主题添加样式

header.php
在 header.php 文件中，添加一个 <div> 开始标签：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
	<?php wp_head() ?>
</head>

<body <?php body_class(); ?>>
<div class="container">
    <header class="site-header">
        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <h4><?php bloginfo( 'description' ); ?></h4>
    </header>

footer.php
在footer.php 文件中，添加一个</div> 结束标签。

<footer class="site-footer">
    <p><?php bloginfo( 'name' ) ?></p>
</footer>
</div> <!-- closes <div class=container"> -->

<?php wp_footer() ?>
</body>
</html>

index.php
用 <article> 标签包含文章内容部分：

<?php

get_header();

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

        <article class="post">
            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
			<?php the_content() ?>
        </article>
	
	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

get_footer();

?>

style.css
最后，我们添加了一些CSS 样式，使主题看起来更好看一些：

/*
Theme Name: customtheme
Author: Vegibit
Author URI: https://vegibit.com
Version: 1.0
 */

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #545454;
}

a:link, a:visited {
    color: #4285f4;
}

p {
    line-height: 1.7em;
}

div.container {
    max-width: 960px;
    margin: 0 auto;
}

article.post {
    border-bottom: 4px dashed #ecf0f1;
}

article.post:last-of-type {
    border-bottom: none;
}

.site-header {
    border-bottom: 3px solid #ecf0f1;
}

.site-footer {
    border-top: 3px solid #ecf0f1;
}

现在在浏览器中访问我们的网站时，就可以看到我们根据本教程开发的 WordPress 主题看起来还不错！

作者：牛奇网，本站文章均为辛苦原创，在此严正声明，本站内容严禁采集转载，面斥不雅请好自为之，本文网址：https://www.niuqi360.com/wordpress/wordpress-theme-development-tutorial-step-by-step/

谁都可以开发 WordPress 主题 （手把手教你开发WordPress主题）