WordPress 是一种非常流行的内容管理系统（CMS），用于创建博客、电子商务商店和其他网站。它的突出之处在于其灵活性，支持多个平台上成千上万的免费和付费主题，这有助于加快网站创建过程。
不过，WordPress 的真正威力在于它的定制选项，因为您可以使用各种页面构建工具和块主题来调整网站的外观，以满足自己的喜好。但是，如果这些选项仍然不能满足您的特定需求怎么办？好消息是你可以从头开始开发自己的主题。
本指南将介绍如何开发一个经典的WordPress 主题。您将学习如何逐步开发创建主题，为将来创建更高级的主题打下基础。
注：您可能会问，什么是经典 WordPress 主题，什么是经典主题，是否还有其他类型的主题。如果您突然想到这些问题，那么直接的答案就是：经典 WordPress 主题使用传统的 PHP 模板文件和函数来构建网站结构和布局。
这与古腾堡编辑器引入的现代块主题不同，后者使用块和全站编辑（FSE）来创建和管理主题元素。这两种类型各有优势，但本指南侧重于经典主题。
先决条件
从零开始开发主题是一个涉及编写代码的技术过程。您应该熟悉以下内容：
此外，建立开发环境也至关重要。您可以通过 WordPress 网站的本地开发软件创建一个开发环境。
了解 WordPress 主题结构
在逐步了解创建经典主题的过程之前，了解 WordPress 经典主题的结构和所涉及的关键文件至关重要。这些知识将为您的主题开发奠定坚实的基础。
WordPress 主题目录
所有 WordPress 主题都存储在 WordPress 安装的 wp-content/themes directory 中。每个主题都位于该目录下的文件夹中。
WordPress 主题中的关键文件
每个经典 WordPress 主题都必须包含两个主要文件：
index.php– 这是主模板文件，是所有其他模板文件的备用文件。它是 WordPress 用来显示内容的核心文件。style.css– 该文件包含主题的元数据和自定义 CSS 样式。它对于定义主题外观和提供基本信息（如名称、作者和版本）至关重要。
要很好地构建主题并添加功能，可以使用额外的模板文件，例如本指南中创建的示例主题中使用的经典主题常用的以下模板文件：
header.php：该文件可包含主题的页眉部分，包括网站的徽标和导航菜单。footer.php：该文件应包含主题的页脚部分。-
functions.php：该文件可用于添加自定义函数、功能和主题支持选项。 single.php：此模板文件用于显示单个博客文章。page.php：用于显示静态页面的模板文件。
在了解了基本文件及其作用后，让我们继续一步步创建经典 WordPress 主题。
如何创建一个经典的 WordPress 主题
有句俗话说得好，最好的学习方法就是边做边学。让我们运用这一原则，创建一个经典的博客主题，在主页上以自定义 CSS 风格和附加功能显示 WordPress 文章。
经典 WordPress 博客主题。
第 1 步：创建新主题文件夹
在 themes 目录下创建一个文件夹，如myblogtheme。
第 2 步：添加主题元数据信息
接下来，让我们在 style.css 文件中设置主题细节。下面是一个可以在 style.css 文件中添加元数据信息的示例：
/* Theme Name: Kinsta Blog Theme Author: Joel Olawanle Author URI: https://kinsta.com/blog/author/joelolawanle/ Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design. Version: 1.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */
在上面的代码中：
- Theme Name：显示在 WordPress 管理区外观>主题下的主题名称。
- Author：显示主题创建者的姓名。
- Author URI：指向作者网站或简介的链接。
- Description：概述主题的目的和功能。
- Version：显示主题的当前版本，以便更新。
- License：指定发布条款。
- License URI：链接到许可证全文。
有关这些字段的更多信息，请参阅《WordPress 主题手册》。
将这些信息添加到 style.css 文件后，在 WordPress 管理区导航到外观>主题。您将看到新创建的主题列表。点击查看主题详情时，您会发现您添加的所有信息都出现在这里。
经典博客主题详情。
注：在主题的根文件夹中添加 screenshot.png 文件，它将作为预览图片出现在主题页面上。这样就能更容易地识别主题的外观。
现在我们已经设置好了 style.css 文件，接下来创建其他重要的主题文件。
第 3 步：为主题创建主模板文件
index.php 文件是主题的主模板文件。您在此添加的任何代码都将用于显示网站的主要内容。
例如，如果你在这里添加了一些基本的 HTML 代码，那么当你激活并预览主题时，所有内容都会显示出来。不过，您希望通过主题的模板文件从 WordPress CMS 中提取信息来显示，这就是使用 PHP 添加 WordPress 功能的地方。
以下是 index.php 文件的基本结构：
<?php get_header(); ?> <main> <!-- Main content goes here --> </main> <?php get_footer(); ?>
在上述结构中，get_header() 和 get_footer() 用于从各自的模板文件（header.php 和 footer.php）中提取页眉和页脚部分。
我们将用正确的代码填充 index.php 文件，但让我们先处理主题的页眉和页脚部分。
第 4 步：创建页眉文件
header.php 文件显示网站的页眉部分，通常包括网站徽标和导航菜单等元素。它还包括样式表、脚本和元标记。下面是我们的 header.php 文件：
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>
让我们对该文件的每个部分进行分解和解释，并在 functions.php 中添加相应的函数和钩子。
让我们从<head>部分开始。该部分包括基本元数据、网站标题、字符编码和wp_head()函数：
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
language_attributes(); 函数为 HTML 文档设置语言属性。然后，wp_head(); 函数至关重要，因为它允许 WordPress 和插件在 <head> 部分插入重要元素，如样式表和脚本。
注：始终用
<?php ...?>标签封装 WordPress 函数。
在 functions.php 中添加以下内容，以调用样式表：
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
函数 wp_enqueue_style() 将主样式表添加到标题部分。为了避免与其他主题或插件冲突，我们在函数前添加了 my_custom_theme。你也可以使用 <link> 标签将其直接添加到 head 标签中。
同样，让我们声明一个函数，将网站标题添加到 head 部分：
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
现在，由于使用了 wp_head() 函数，样式和标题标签会动态添加到页眉中。你可以使用浏览器的开发工具检查你的 WordPress 网站来验证这一点。在 <head> 部分，您应该可以看到样式表链接和动态生成的标题标记，从而确认它们已被包含在内。
接下来，在正文中，我们声明了导航栏部分，在该部分中，我们显示了一个虚拟徽标，并确保在 WordPress 网站标识中设置时有一个使用自定义徽标的选项：
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
如果设置了自定义徽标，徽标部分会使用 _custom_logo() 函数显示自定义徽标。如果未设置自定义徽标，则显示默认图片。
要启用自定义徽标支持，请在 functions.php 中添加以下代码：
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
该函数增加了对自定义徽标的支持。最后是导航菜单部分：
<nav> <?php wp_nav_menu(array( 'theme_location' => 'header-menu', 'menu_class' => 'header-menu' )); ?> </nav> </header>
wp_nav_menu() 函数用于显示分配给页眉菜单（Header Menu）位置的导航菜单。要注册导航菜单，请确保在 functions.php 中包含此代码：
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));
下面是 function.php 文件现在的样子：
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>
通过这些步骤，您可以确保您的页眉支持自定义徽标并显示导航菜单，从而使其动态化并可通过 WordPress 管理仪表盘轻松自定义。
第 5 步：创建页脚文件
footer.php 文件将负责显示网站的页脚部分。对于本主题，footer.php 文件将只显示版权年份：
<footer> <p>Copyright © 2024</p> </footer> <?php wp_footer(); ?> </body> </html>
在这个文件中，我们加入了 wp_footer() 函数，就像在页眉中加入 wp_head() 函数一样。wp_footer() 函数允许WordPress和插件在结尾的 </body> 标签之前插入重要元素，例如脚本。这对于确保正确加载所有必要资源和网站按预期运行至关重要。
第 6 步：使用 WordPress 循环显示博文
让我们回到 index.php 文件，解释如何使用 WordPress 循环来循环显示 WordPress 网站上的文章–这是一种动态显示内容的强大方法。这就是循环的样子：
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
上面的代码在进入循环之前会检查是否有要显示的帖子。在循环中，WordPress 函数，如 the_title()、the_author()、the_time('F j, Y') 和 the_excerpt()，会显示每个 WordPress 文章的信息。
the_post_thumbnail() 函数也用于显示缩略图，但它被包裹在一个 if 语句中，因此只有当文章有特色图片时才会显示。在 functions.php 文件中，我们必须通过该函数添加对文章缩略图的支持，这样在创建新文章时就可以选择上传特色图片：
add_theme_support('post-thumbnails');
将此添加到我们在 functions.php 文件中创建的 my_custom_theme_setup() 函数中。这就是 index.php 文件现在的样子：
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>
你会注意到添加了一些静态代码，这些代码将被设计成一个横幅，显示 “Welcome to my blog” 和一段文字。
第 7 步：创建单个文章模板
在设计主题之前，我们先定义一个基本模板，以便在点击主题中的任何页面或文章时显示单个博客文章。为此，请在主题根目录下创建一个 single.php 文件，并添加以下代码：
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>
在上面的代码中，get_header() 和 get_footer() 包括页眉和页脚。在代码的其他部分，WordPress 函数显示动态内容。
第 8 步：为 WordPress 页面创建模板文件
就像为单个 WordPress 文章创建模板一样，您也可以创建一个模板来显示 WordPress 页面。为此，请在主题文件夹根目录下创建一个 page.php 文件，并添加以下代码：
<?php get_header(); ?> <main class="wrap"> <section class=""> <article class="article-full"> <div class="page-header"> <h1><?php the_title(); ?></h1> </div> <?php the_content(); ?> </article> </section> </main> <?php get_footer(); ?>
第 9 步：设计主题风格
到目前为止，我们已经为主题创建了一些基本模板。现在，是时候添加自定义样式，让它看起来更漂亮了。您可以将样式添加到主题文件夹中的 style.css 文件。要开始使用，请从本指南中创建的主题示例的 GitHub gist 中复制样式。
第 10 步：测试并部署主题
到目前为止，您已经成功创建了一个 WordPress 主题。现在，是测试和部署的时候了。
首先，进入 WordPress 管理仪表板，选择 外观>主题，确保主题已激活。如果尚未激活，请单击主题并将其激活。您还可以点击自定义按钮来设置网站标识、调整菜单和其他设置，以确保您的网站显示正确。
一旦你对主题满意，你有几个选项来部署它：
- 将本地网站推送到网上：如果您在本地使用 DevKinsta 进行开发，您可以轻松地将网站推送到暂存环境。这样，在将主题推送到实时环境之前，您就可以在类似于实时的环境中测试主题。
- 打包并上传主题：或者，您也可以将主题打包成压缩文件夹，然后上传到在线网站。在 WordPress 管理仪表板中进入外观>主题>安装新主题>上传主题，然后选择要上传的压缩主题文件。
在暂存环境中对主题进行全面测试，确保在正式上线前一切正常。这一步对于发现潜在问题并确保网站外观和功能完美至关重要。
小结
在本文中，我们从零开始创建了一个经典的 WordPress 主题。我们介绍了如何设置基本文件、添加自定义样式以及为单个文章和页面创建模板。
如果您想让自己的网站拥有自己想要的功能和外观，那么开发 WordPress 主题就是您的最佳选择。但是，如果您缺乏时间、技能或意愿，聘请专业人员可以帮助您高效地实现自己的愿景。
评论留言