面向初学者的WordPress开发:构建主题

导语:根据WordPress Codex的说法:“WordPress主题是文件的集合,这些文件一起工作来产生一个图形界面,并为博客提供统一的底层设计。”简而言之,主题提供了一种给站点“换皮”的方式,允许您修改内容的显示方式。

这是我们面向初学者的五篇系列文章中的第三篇,向您传授WordPress开发的基本概念,以便您可以从修补人员跳到开发人员。到本系列结束时,您将能够创建您自己的基本主题和插件,并使用您自己的特性来充实它们。

在本教程中,我们将直接跳到主题开发。我们将从构成主题的基本文件开始,再到使用模板、模板标记和循环,使您可以在单个页面、归档页面和其他页面上显示帖子。在本文结束时,您将能够组织您自己的主题。

注意:对于本系列,重要的是您已经彻底了解了HTML和CSS,因为这两种语言在使用WordPress时都是必不可少的构建块。

我们开始吧。

错过了我们面向初学者的WordPress开发系列教程?你可以在这里找到全部五篇文章:

开始

到目前为止,您应该已经在您的机器上设置了一个本地主机环境,可以在其中工作和运行WordPress。如果没有,请查看本系列的第二部分,并向下滚动到底部以了解更多信息。

如果你已经准备好继续前进,你需要知道的第一件事是WordPress将主题存储在哪里。主题通常位于您安装的wp-content/Themes目录中。如果您导航到本地主机环境中的该文件夹,您应该已经在其中有几个主题,即默认的WordPress主题。可以使用wp-config.php文件中的命令更改主题的位置,但很少这样做。

让我们创建一个新的主题。要做到这一点,您需要做一些相当简单的事情:

在您安装的“Themes”目录中创建一个新文件夹,并将其命名为一些独特的名称,如my-awawed-heme。

在这个新文件夹中,创建两个文件:style.css和index.php。

打开样式表并粘贴以下代码:

/*
Theme Name: My Awesome Theme
Theme URI: https://www.wordpressleaf.com
Author: Yezi
Author URI: https://www.wordpressleaf.com
Description: The theme for my awesome site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
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.
*/

这些详细信息将自动填充WordPress后端的外观>主题屏幕中的主题详细信息部分。主题名称是您必须在注释中包含的唯一行,但最好将所有内容都填写出来。请注意,文本域必须与文件夹的名称完全匹配(在本例中,名称为my-awee-heme)。这是用于翻译的,我们不会在本教程中讨论,但最好遵循惯例。

如果您访问外观>主题部分,您现在应该能够在列表中看到您的主题,甚至可以激活它。这个主题还没有任何代码,所以你只会在前端看到一个白屏–但是我们很快就会改变这一点!

模板的工作原理

WordPress主题使用模板文件工作。这实际上是一种巧妙的方法,因为与常规的旧HTML相比,它极大地减少了网站运行所需的文件数量。如果您有一个HTML站点,那么您发布的每篇文章都需要一个文件。每个文件都将包含站点的页眉、侧边栏和页脚-这些信息对于每个文件都是相同的。不同文件之间唯一不同的是文章本身的内容。

因为PHP是在服务器上处理的,所以只要节省文件空间,我们就可以做得更好。我们可以只使用一个文件,检测我们所在的页面,并要求PHP用文章的实际标题和实际内容替换占位符,而不是所有这些单独的文件。

下面是一些伪代码来说明这是如何工作的:

<!DOCTYPE html>
<html>
<head>
<title>A single post template</title>
</head>
<body>

<div id="site-header">
<h1>Welcome to my site</h1>
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
</div>

<div id="article">
<h2 class="article-title"><?php the_title() ?></h2>
<div class="article-content"><?php the_content() ?></div>
<div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?

></div>
</div>

<div id="site-footer">
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
<div id="copyright">&copy; Daniel Pataki</div>
</div>

</body>
</html>

请注意,您在文章区域中没有看到任何硬编码的内容。没有看到实际的标题,而是有一个函数-the_title()-负责输出标题。这些函数检测当前请求的文章(基于URL),并在数据库中查找所需的适当信息。

因此,我们为站点上的每一篇文章创建了一个文件,每个文件都有一个文件。包括WordPress在内的许多系统甚至更进一步,将页眉和页脚分开。事实上,管理单个文章的文件看起来更像这样:

<?php get_header() ?>

<div id="article">
<h2 class="article-title"><?php the_title() ?></h2>
<div class="article-content"><?php the_content() ?></div>
<div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?

></div>
</div>

<?php get_sidebar() ?>

<?php get_footer() ?>

由于我们的网站还将有单页、存档页和404页等,因此我们可能还希望在那里重用页眉和页脚。可重用代码使服务器端编码变得如此有用和高效。

主题的工作原理

我们将在主题中使用一堆模板文件来创建我们的网站。我们需要知道的是,我们需要为哪个页面创建哪些文件。这是由WordPress模板层次结构管理的。让我们来看看我们需要考虑的页面类型:

  • 档案页(类别档案、日期档案、标签档案、作者档案等)。
  • 单页(单页文章、单页页面、单一自定义文章类型)。
  • 首页和索引页。
  • 错误页面。
  • 搜索结果页面。

之所以称其为“层次结构”,是因为WordPress在确定要显示哪个特定文件时会查找一堆不同的文件。

让我们看一个例子。

假设我们正在查看一个作者档案页面,比如我在WordPressLeaf博客上的帖子。WordPress首先检查主题文件夹中是否有名为Author-leaf.php的文件。如果有,则使用该文件。否则,它将转到包含我的作者ID的文件。我不知道我的作者ID是什么,但假设它是882,在这种情况下,使用的文件将是Author-882.php。如果该文件不存在,它使用author.php,然后是archive.php,最后-如果所有其他方法都失败-它使用index.php,这是必需的文件,因此它将存在。

请注意,WordPress从更具体的文件开始,然后转向通用文件。这很有用,因为就像我们在上一节中所做的那样,您可以创建一个文件来处理所有作者-author.php。但是,您可能希望使某个特定作者的配置文件有所不同,在这种情况下,您可以使用Author-leaf.php来实现这一点。

让我们建立一个主题吧!

在构建新主题时,我喜欢从构建工作框架开始。这通常意味着首先创建页眉和页脚部分。

与其通过没完没了的知识段落来倾注,我总是认为最好的办法是马上开始做一些事情,因为熟能生巧。

您应该已经有了一个主题,并用一个空的index.php文件和一个样式表激活了它,所以让我们在此基础上进行构建。

构建框架

我通常首先创建一个屏幕截图,可以在WordPress后端的外观>主题屏幕中显示我的主题。这对于主题的构建阶段一点也不重要,但它会立即给我一些有用的东西,并作为我的主题的灵感。如果你对即将到来的主题有一个设计,那就使用它,或者你也可以使用像Unspash这样的图像库中的漂亮图片。

当我们谈到图片时,如果你要为WordPress主题目录创建一个主题,你必须使用CC0图片。这是“随心所欲”的版权许可,比你想象的要罕见。Unspash上的所有图片都是令人惊叹的美丽和CC0,这使得该网站成为一个非常棒的资源。

一旦你找到了你喜欢的图片,把它剪到880px宽,660px高,把它命名为screenshot.png,放到你的“主题”文件夹中。

下一步是创建主题的HTML框架。这包括加载到所有页面上的代码,如HTML head元素、doctype等。

让我们从创建header.php文件开始。在该文件中,我们将粘贴HTML代码的开头,如下所示:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

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

我们将通过创建footer.php文件来结束它,该文件将包含我们的开始元素的结束标记:

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

我应该指出其中的两个重要函数:wp_head()和wp_footer()。在本系列下周的教程中,我们将在探索钩子时讨论小工具和菜单中的这些函数,但现在,您应该记住,无论何时创建主题,都必须将wp_header()放在head元素的结束标记之前,wp_footer()放在结束body标记之前。这些作为标记,帮助WordPress和插件将功能注入到您的主题中。

现在,让我们将注意力转向index.php。如果你在这个阶段访问你的网站,你只会看到一个空屏幕。这是因为index文件是空的,页眉和页脚文件根本没有使用。

让我们改变这一点。将以下内容添加到index文件:

<?php get_header() ?>

My Awesome Theme

<?php get_footer() ?>

如果你现在加载你的页面,你会看到文本“My Awesome Theme”,如果你看一下源代码,你应该会看到更多。如果你已经登录,WordPress还会在页面顶部显示管理栏,还有很多其他你在这个阶段不需要担心的事情。

难题的最后一块是能够添加样式,因为我们的样式表不是自动加载的。在创建HTML网站时,您可能习惯于在标题部分添加样式。你不应该在主题中这样做–你应该让WordPress来处理这件事。

创建一个functions.php文件并添加以下代码:

<?php
add_action( 'wp_enqueue_scripts', 'mat_assets' );
function mat_assets() {
wp_enqueue_style( 'my-awesome-theme', get_stylesheet_uri() );
}

还记得我提到过WordPress如何向主题注入功能吗?它做这件事的地方之一是wp_head()函数。嗯,我们在函数文件中所做的是告诉WordPress我们的样式表,而WordPress负责在head部分添加适当的代码。最终结果是完全相同的,但此方法允许更大的灵活性,稍后您将看到这一点。

现在,只需将其保存为代码片段以备将来参考-在本系列的后续教程中,您将更多地了解所有这些功能的工作原理。

在这一点上,我们已经准备好了所有最初的小细节。例如,如果您现在在样式表中键入类似body{Background:red}的内容,您将在站点上获得一个漂亮的红色背景。

在继续之前,让我们先创建一个可在其中工作的可视化框架,一个简单的站点标题和一个包含我们的内容的框。我是这么想的:

为此,我向头文件添加了标题,并打开了一个容器。在页脚中,我关闭了容器并添加了页脚版权文本。最后,我向样式表添加了一些样式以使其看起来更美观。嗯,不管怎么说,在这个开发阶段都是很好的。

以下是组成上述网站的三个完整代码文件:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

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

<div id="site-header">
<h1><?php bloginfo('title') ?></h1>
</div>

<div id='site-content'>
</div> <!-- site content -->

<div id='site-footer'>
<p>&copy; My Awesome Theme</p>
</div>

<?php wp_footer() ?>
</body>
</html>
/*
Theme Name: My Awesome Theme
Theme URI: https://myawesometheme.awesome
Author: Daniel Pataki
Author URI: https://danielpataki.com
Description: The theme for my awesome site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
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.
*/

html {
height: 100%;
background:#444;
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.5em;
}

#site-header {
text-align: center;
}

#site-header h1 {
font-size:32px;
color: #ffffff;
font-weight: 300;
letter-spacing: 1px;
}

#site-content {
max-width:625px;
background: #fff;
margin: 0 auto;
padding: 22px;
border-radius:5px;
}

#site-footer {
color: #fff;
text-align:center;
font-size:12px;
text-transform: uppercase;
}

此外,我在索引文件中添加了一些虚拟内容-没有什么特别的,只有一个标题和几段用<p>标记包装的lorem ipsum填充文本。

现在,您在网站上访问的任何页面看起来都是一样的,因为我们只有一个index.php文件,它是所有页面的后备文件。

了解WordPress循环

循环几乎是WordPress中所有页面的核心。循环包含页面上显示的内容。WordPress知道每个页面应该包含什么,所有这些都是从URL派生出来的。例如,单个文章页面应该包含单个文章,您的主页应该包含10个最近的文章,类别存档页面应该包含任何给定类别中的10个最近的文章,依此类推。

这些信息是自动从数据库中提取的,您所需要做的就是“循环”所有检索到的文章。显示它比解释它容易,所以下面是我如何将它添加到index文件中的方法:

<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post() ?>
<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php the_content() ?>
</div>
<?php endwhile ?>
<?php else : ?>
<p>Oh No, there are no posts!</p>
<?php endif ?>

一旦你准备好了,PHP、WordPress和Themes的魔力就会显现出来。你会在首页看到一个文章列表,如果你在后端添加一个文章,它就会显示出来。如果你点击标题,它会显示一个页面,上面显示了那个帖子,即使你没有为那个帖子创建特殊的文件。

让我们分析一下代码,看看它是如何工作的。

这一切都是从一条if语句开始的,该语句检查have_posts()函数的值。如果有要显示的文章,此函数将返回true;如果没有要显示的文章,此函数将返回false。从语句的其他部分可以看到,如果没有帖子,我们会显示一条快速消息。

如果有文章,我们将创建一个while循环,只要have_posts()返回true,就会执行该循环。我们使用的第一个函数是the_post(),它为我们设置一些文章数据(目前还不用担心),并推进内部计数器。如果我们在最后一个文章上,这意味着它将被显示,但是下一次have_posts()将返回false,这就是我们最终退出循环的方式。

在显示文章时,我只添加了标题和完整内容。我使用the_permalink()函数检索帖子的URL,使用the_title()获取标题,使用the_content()显示完整内容。这些类型的函数在WordPress中被称为模板标签,它们可以在循环中使用,并将如预期的那样检测到正确的文章。

从现在开始,以奇特的方式显示文章只需要知道可以使用WordPress中的哪些函数,并使用一些CSS技能即可。这里有一个便捷的WordPress Codex模板标签列表,你可以用它来输出类别、标签、发布日期、作者、特色图片等等。

模板和IF语句

那么,如果您希望在索引页上显示摘录,但在单个页面上显示完整内容,该怎么办呢?您有两个选择:使用条件标签或创建新模板文件。

条件标签可用于检查WordPress中的各种内容,例如,您是否在单个页面上。有关更多信息,请查看WordPress Codex中的条件标签的完整列表。

在is_singular()标记的帮助下,我们可以执行以下操作:

<?php get_header() ?>

<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post() ?>
<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php if( is_singular() ) : ?>
<?php the_content() ?>
<?php else : ?>
<?php the_excerpt() ?>
<?php endif ?>
</div>
<?php endwhile ?>
<?php else : ?>
<p>Oh No, there are no posts!</p>
<?php endif ?>

<?php get_footer() ?>

另一种方法是使用两个单独的文件:index.php将包含显示摘录的变体,single.php将使用内容。继续创建single.php,并在那里的循环中使用the_content()。

我听到你在问:哪一个更好?这个问题没有很好的答案,因为它实际上取决于你想要实现什么。如果要在单个文件和索引文件之间进行更改的只有一个函数,那么使用if语句可能会更好。

实际上,单个页面和列表页面的差异通常足以保证两个单独的文件,但也有使用这两种技术的很好的主题示例。

许多主题所做的是更进一步,为循环中的内容创建模板。正如您稍后将看到的,这使我们的代码更具可读性和可重用性。

我们来看一个修改后的索引文件:

<?php get_header() ?>

<?php
if( have_posts() ) {
while( have_posts() ) {
the_post();
get_template_part( 'template-parts/content', '' );
}
}
else {
get_template_part( 'template-parts/content', 'none' );

}
?>

<?php get_footer() ?>

啊,好多了!首先,我去掉了所有的PHP开始和结束标记,这增加了很多混乱。但更重要的是,我把所有的文章内容都放到了不同的文件中。get_template_part()函数只是从文件中拉入内容,基本上将第二个参数附加到第一个参数-添加破折号-来构建路径。

在else语句中进行第二次调用的情况下,该函数将尝试调用template-parts/content-none.php。在第一个实例中,我将第二个参数留空,这将调用template-parts/content.php。

在single.php中,我将添加相同的代码,但添加single作为get_template_part()函数的第二个参数。

最后,我将创建template-parts文件夹和三个文件:content.php、none.php和content-single.php,并将相关代码片段粘贴到那里。例如,content.php将如下所示:

<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php the_excerpt() ?>
</div>

继续阅读和学习

我们在本教程中介绍的是创建一系列非常基本的文件来处理WordPress中循环的基本要点。这将允许您按照您的想法和样式显示您的文章。

这只是对即将发生的事情的一瞥!下周回到这里查看我们系列的第四部分:面向初学者的WordPress开发:窗口小部件和菜单。

但是在此期间,您应该回顾一下本系列中上周的文章“面向初学者的WordPress开发:学习PHP”来温习PHP,并再次彻底阅读这篇文章,以便为下周的文章做好准备。

你觉得这个教程有帮助吗?你为什么想学习WordPress开发?你想了解更多关于什么的信息?在下面的评论中让我们知道。

发表评论

电子邮件地址不会被公开。 必填项已用*标注