如何创建 WordPress 自定义主题

已发表: 2021-08-06

WordPress 占据了全球网站的很大比例，占目前在线所有网站的 37% 。 虽然这种成功有很多原因和因素，但主要原因之一是所有用户都可以使用的功能很受欢迎。 插件、主题、帖子、页面、类别、分类法、用户角色和媒体处理等等。 为了充分利用 WordPress，建议用户学习并学习如何使用所有这些功能。 在本博客中，我们将重点讨论和讨论 WordPress 主题，并将引导您了解如何创建 WordPress 自定义主题所需的基础知识。

什么是自定义主题？

您网站前端的所有内容都使用称为“主题”的东西运行和控制。 网站的主题负责网站的特定设计和功能。 您可以查看WordPress 主题存储库或Themeforest以获取主题示例； 在这里，您会发现列出的数千个主题供您探索和下载。

虽然已建立的 WordPress 主题很棒，但如果您有能力和需要，您可能还想为客户、自己构建自己的自定义主题，或者提交给市场以出售它。 在创建商业主题时，您需要遵循市场准则关于编码标准、文件和文件夹的结构等。您可以在市场网站上找到有关这些准则的更多详细信息。

在本博客中，我们将通过一个教程向您展示如何创建您自己的 WordPress 主题的基本概述，涵盖与该过程相关的所有基础知识和步骤。

创建 WordPress 自定义主题

WordPress 主题是使用模板文件、脚本、样式、图像等构建的。要继续，您应该具备构建自定义主题所需的 PHP、HTML 和 CSS 的工作知识。 了解 JavaScript 也是一个额外的优势。

首先，我们将首先将主题命名为“Updraft”。 在wp-content/themes中创建一个名为“Updraft”的文件夹。 在这个“Updraft”文件夹中，您将编写与主题相关的代码、存储文件、图像、字体等。

自定义 WordPress 主题的主要文件有：

  • 样式.css
  • 索引.php
  • 函数.php

style.css将是主样式表文件，您可以在此文件中添加所有 CSS。 请记住，您必须包含有关主题的信息标题。 标头应类似于以下格式，并位于style.css的顶部。

 [代码]
/*
主题名称：上升气流
主题 URI：https://updraftplus.com
作者：UpdraftPlus
作者 URI：https://updraftplus.com
描述：为网站构建的自定义主题。
版本：1.0
许可证：GNU 通用公共许可证 v2 或更高版本
许可证 URI：http://www.gnu.org/licenses/gpl-2.0.html
文本域：上升气流
*/
[/代码]

接下来，转到外观>>主题，您将在其中看到您的主题。 激活它。 当您检查网站的前端时，它会显示一个空白屏幕——因为我们还没有向主题添加任何内容..

请记住将您的图像、脚本和样式存储到您的主题目录中。 主题目录是指“wp-content/themes/Updraft”文件夹。 确保通过使用良好的文件夹结构来组织它们，为图像、脚本和样式创建特定的文件夹； 将文件复制到相应的目录中。

函数文件

functions.php是您可以为不同目的添加代码的文件。 该文件在 WordPress 初始化期间自动加载，其中编写的代码会自动执行。

functions.php文件中的以下操作通常按此顺序进行：

  • 将主题样式表和脚本排入队列（将 JS 和 CSS 文件添加到网站）。
  • 启用侧边栏、导航菜单、发布缩略图等。
  • 定义在整个应用程序中使用的函数。
  • 等等。

用户可以从functions.php文件中添加他们的样式和脚本，如下所示。 请参阅以下链接以获取更多文档。

 [代码]
函数 include_js_css() {
wp_register_style（“引导程序”，get_stylesheet_directory_uri（）。
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style（“引导”）；
wp_register_script('bootstrap', get_stylesheet_directory_uri() 。
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/代码]

get_stylesheet_directory_uri ()函数给出了活动主题目录的相对路径。 剩下的代码可以看成是资产的路径。

同样，对于添加导航菜单，发布缩略图：

 [代码]
功能 updraft_theme_setup() {
add_theme_support('后缩略图');
注册导航菜单（
大批（
'主要' => __( '主菜单' ),
'footer1=' => __( '页脚菜单' ),
'商店' => __( '商店页面菜单' ),
)
);
}
add_action('after_setup_theme', 'updraft_theme_setup');
[/代码]

接下来，转到 WordPress 仪表板并添加帖子或页面。 您应该看到“特色图片”部分。 此外，在外观>>菜单下，您将在管理位置下找到主菜单和页脚菜单。

这些只是您在使用“功能”文件时可以涵盖的一些基本功能。 如果您愿意，可以在此文件中添加更多内容。

模板文件

构建主题时，模板文件可用于影响网站不同部分的布局和设计。 例如，您可以使用 header.php 模板来创建标题，或者使用 comments.php 模板来包含您网站上的评论。 模板文件具有.php扩展名。 由于它们是 PHP 文件，所有页面都以 HTML 格式输出。

使用模板，开发人员可以在多个文件之间分发代码。 下面列出了一些有问题的文件。

  • index.php ：主模板。 该文件应负责发布列表。 当您从Settings >> Readings设置 Posts 页面时，将执行此模板。
  • page.php ：这个模板负责渲染你的页面。 可以通过将自定义页面模板分配给各个页面来覆盖此设置。
  • single.php ：查询单个帖子时使用。
  • header.php ：在此模板中添加您的标题部分。
  • footer.php ：在此模板中添加您的页脚部分。
  • sidebar.php ：在此模板中添加小部件。

在此处获取所有可用模板文件的列表。

自定义页面模板

默认情况下，您的所有页面都通过page.php模板呈现。 但在实践中，有时您必须在不同页面上显示单独的流程。 在这种情况下，建议您使用自定义页面模板的强大功能。

例如，如果您有一个“职业”页面，并且您想将代码添加到此页面； 为此，您需要在主题目录中创建一个career.php文件，并将下面的注释放在文件顶部。

 [代码]
<?php
/*
模板名称：职业
*/
[/代码]

接下来，转到页面编辑部分并从页面属性框下分配此“职业”模板。

现在，当您访问职业页面时，将执行career.php中的代码。

头文件

您的网站将在所有页面上都有一个共同的标题。 您可以将此公共标头放入header.php中。 标头代码将是这样的：

 [代码]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<头部>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- 你的菜单 -->
[/代码]

在上面的代码中，您会注意到我们使用了 WordPress 中可用的一些功能。

  • wp_head() ：此方法将关键元素插入到您的文档中——例如，脚本、样式和元标记。
  • body_class() ：这将为 body 元素添加不同的类。
  • wp_body_open() ：用于在打开body标签后立即插入代码。 这方面的一个例子是 - Google Analytics 脚本。

菜单可以通过wp_nav_menu()函数动态添加。 假设您首先已经在外观>>菜单下创建了一个菜单并为其分配了“主要”位置。 下面的代码动态生成菜单元素。

 [代码]
<?php
wp_nav_menu(
大批（
'theme_location' => '主要',
'container_class' => '菜单',
)
);
?>
[/代码]

设置头文件后，使用get_header()函数将此文件包含到其他模板中。

页脚文件

与头文件类似，页脚的通用代码将放在footer.php模板中。

 [代码]
<!-- 页脚元素 -->
<?php wp_footer(); ?>
</正文>
</html>
[/代码]

在这里，使用wp_footer()在此位置插入元素，特别是脚本。 使用get_footer()将在其他地方包含此文件的内容。

边栏文件

侧边栏是一个垂直列，用于显示您网站上未显示在主要内容中的信息。 它可能包括热门文章、广告横幅、时事通讯提交表单等。侧边栏包含管理员可以自定义的小部件。 sidebar.php模板将包含您的站点小部件。

在此示例中，我们将通过将以下代码添加到functions.php文件来创建一个基本侧边栏。

 [代码]
函数 updraft_widgets_init() {
注册边栏（
大批（
'name' => esc_html__( Home Sidebar' ),
'id' => 'sidebar-1',
'description' => esc_html__('在此处添加小部件以显示在您的侧边栏中。'),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action('widgets_init', 'updraft_widgets_init');
[/代码]

接下来，转到外观>>小部件。 在这里你会找到上面的侧边栏。 在此示例中，我们将向此侧边栏添加一些小部件。 要将此侧边栏添加到前端，请在sidebar.php中添加以下代码。

 [代码]
<div class="侧边栏">
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar('sidebar-1');
}
?>
</div>
[/代码]

最后，请记住将方法命名为“ get_sidebar()” ，以便您可以在需要时轻松地将侧边栏包含在任何其他页面的任何位置。

渲染页面和帖子

如前所述，所有 WordPress 页面都使用您在page.php文件中编写的代码呈现和执行，具有自定义页面模板的页面除外。 下面的代码是一个示例，它将显示一个具有页面标题、描述和特色图像的页面。

 [代码]
<?php
get_header();
?>
<div class="内容区域">
<main class="site-main">
<?php
而（有_posts（））：
the_post();
?>
<?php
如果（has_post_thumbnail()）：
the_post_thumbnail();
万一;
?>
<header class="entry-header">
<?php the_title(); ?>
</标题>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
结束；
?>
</main>
</div>
<?php
get_footer();
[/代码]

类似的代码将进入single.php文件以显示帖子信息。 要正确呈现帖子列表（您的index.php ），除了上述方法 - 您可能还需要使用以下方法：

  • the_catgeory() ：显示帖子的类别列表。
  • the_permalink() ：显示当前帖子的永久链接。
  • the_excerpt() ：显示帖子摘录。

用于 WordPress 自定义主题的 I18n

在构建自定义主题时，请记住它应该以支持国际化的方式进行开发。 通过这样做，可以轻松地将您的主题翻译成其他语言。

要添加 I18n 支持，请记住使用可以解析源文件并从中提取可翻译字符串的文本域。 在此示例中，我们使用文本域“Updraft”，但您可以选择任何唯一标识符。 我们可以如下定义文本域。

 [代码]
功能 i18n_setup() {
load_theme_textdomain('updraft', get_stylesheet_directory() . '/languages');
}
add_action('after_setup_theme', 'i18n_setup');
[/代码]

现在，每当您在主题文件中使用静态字符串时，请将它们包装在__()或_e()函数中。

 [代码]
<h2><?php _e('First Name', 'updraft); ?></h2>
<?php echo __('用户邮箱', 'updraft'); ?>
[/代码]

有像 POEDIT 这样的特殊工具可以帮助生成翻译的语言文件。 请参阅此博客了解更多信息。

该博客涵盖了创建 WordPress 自定义主题的基础知识。 然而，这是一个庞大的话题，需要大量的时间和耐心。 以下是您应该熟悉的一些有用资源，它们将帮助您开始创建 WordPress 主题。

  • WordPress 循环
  • 模板标签
  • 类别页面
  • Function_Reference
  • 条件标签
  • WordPress 编码标准

为您的 WordPress 网站创建新主题时，请记住，每次更改后都需要对其进行备份，否则可能会丢失所有工作。 使用 UpdraftPlus – 世界领先且最值得信赖的 WordPress 备份、恢复和克隆插件。

如何创建 WordPress 自定义主题的帖子首先出现在 UpdraftPlus 上。 UpdraftPlus – WordPress 的备份、恢复和迁移插件。