WordPress 使用的不是纯粹的 HTML 模板，而是一个结合了 PHP、HTML、CSS 和 JavaScript 的模板系统。

wordpress html 模板
（图片来源网络，侵删）

你不可能只提供一个 .html 文件就让 WordPress 直接使用，WordPress 是一个用 PHP 编写的动态内容管理系统，它需要 PHP 代码来从数据库获取数据（比如文章标题、内容、评论等），然后将这些数据插入到 HTML 结构中，最终生成用户在浏览器里看到的网页。

当你寻找或创建一个“WordPress HTML 模板”时，你实际上是在寻找或创建一个 WordPress 主题。

WordPress 主题的核心结构

一个标准的 WordPress 主题主要包含以下几个部分：

模板文件

这些是 PHP 文件，但里面包含了大量的 HTML 代码，它们定义了网站不同页面的结构和布局。

wordpress html 模板
（图片来源网络，侵删）
  • index.php: 主题的主模板文件，WordPress 找不到更具体的模板文件（如 single.php），就会默认调用这个文件。
  • header.php: 网站的头部模板，通常包含 <head> 部分、网站标题、导航菜单等。
  • footer.php: 网站的页脚模板，通常包含版权信息、页脚小工具等。
  • sidebar.php: 侧边栏模板，用于放置小工具。
  • single.php: 单篇文章的页面模板。
  • page.php: 单个“页面”（Page，区别于文章 Post）的模板。
  • archive.php: 存档页面模板，用于显示分类、标签、日期等归档下的文章列表。
  • search.php: 搜索结果页面模板。
  • php: 404 错误页面模板。
  • functions.php: 主题的核心功能文件，它是一个 PHP 文件，用于添加主题支持（如特色图像、自定义菜单）、注册小工具区域、引入 CSS/JS 文件等。

样式表

  • style.css: 这是主题的必需文件，它不仅包含了网站的 CSS 样式，还必须在文件顶部包含一个注释块，用来定义主题的元信息（主题名称、作者、描述、版本等），WordPress 通过这个信息来识别主题。

模板标签

这是连接 PHP 和 HTML 的关键，在模板文件中，你会看到很多类似 <?php ... ?> 的代码，这些就是 PHP 模板标签，它们的作用是告诉 WordPress “在这里插入什么内容”。

常用模板标签示例：

  • <?php bloginfo('name'); ?>: 显示网站标题。
  • <?php wp_head(); ?>: 在 <head> 标签内插入必要的 CSS 和 JS 链接（由 WordPress 核心或插件生成）。必须放在 </head> 之前。
  • <?php wp_footer(); ?>: 在 </body> 标签之前插入必要的脚本。必须放在 </body> 之前。
  • <?php the_permalink(); ?>: 显示当前文章或页面的永久链接（URL）。
  • <?php the_title(); ?>: 显示当前文章或页面的标题。
  • <?php the_content(); ?>: 显示当前文章或页面的内容。
  • <?php get_header(); ?>: get_header(), get_footer(), get_sidebar() 等函数是用来引入对应的模板文件的。

如何获取 WordPress HTML 模板（主题）？

你有以下几种主要途径：

使用官方主题库（最推荐）

WordPress.org 官方主题库提供了数千个免费主题。

wordpress html 模板
（图片来源网络，侵删）
  • 优点: 免费、安全、经过审核、易于安装和更新。
  • 如何使用: 在 WordPress 后台，点击 外观 -> 主题 -> 添加新主题，然后浏览、搜索并安装你喜欢的主题。

使用第三方主题市场

像 Themeforest、TemplateMonster 等网站提供大量高质量的付费主题。

  • 优点: 设计精美、功能强大、通常包含详细文档和技术支持、SEO 优化更好。
  • 缺点: 需要付费。

从开发者的官网下载

很多独立开发者或设计工作室会在自己的网站上发布免费或付费的主题。

自己动手创建（最灵活）

如果你懂一些前端和 PHP，可以自己创建一个主题，这是从零开始构建独一无二网站的最佳方式。

自己创建一个简单 WordPress 主题的步骤

下面我们通过创建一个极简主题,来理解“HTML 模板”是如何与 WordPress 结合的。

第 1 步：创建主题文件夹

在 wp-content/themes/ 目录下创建一个新文件夹，my-first-theme。

第 2 步：创建 style.css 文件

在 my-first-theme 文件夹中创建 style.css 文件，并填入以下内容：

/*
Theme Name: My First Theme
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: My first WordPress theme.
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-first-theme
*/

你可以在 WordPress 后台的 外观 -> 主题 页面看到你的新主题了，虽然它还不能正常显示。

第 3 步：创建模板文件

在 my-first-theme 文件夹中，创建以下文件： index.php, header.php, footer.php, functions.php

第 4 步：编写模板代码

header.php 这个文件定义了网站的头部。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
    <div class="site-branding">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
    </div>
    <nav id="site-navigation" class="main-navigation">
        <?php
            wp_nav_menu( array(
                'theme_location' => 'primary',
                'menu_class'     => 'nav-menu',
            ) );
        ?>
    </nav>
</header>

footer.php 这个文件定义了网站的页脚。

<footer>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

index.php 这是主页模板，它会把头部和页脚“组装”起来，并在中间显示文章列表。

<?php get_header(); ?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main">
        <?php if ( have_posts() ) : ?>
            <?php if ( is_home() && ! is_front_page() ) : ?>
                <header>
                    <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                </header>
            <?php endif; ?>
            <?php
            /* Start the Loop */
            while ( have_posts() ) : the_post();
                /*
                 * Include the Post-Format-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */
                get_template_part( 'content', get_post_format() );
            endwhile;
            the_posts_pagination();
        else :
            get_template_part( 'content', 'none' );
        endif; ?>
        </main><!-- #main -->
    </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

functions.php 这个文件用于引入我们的 CSS 文件。

<?php
function my_theme_enqueue_styles() {
    // 引入我们自己的 style.css 文件
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
// 注册一个导航菜单
function my_theme_register_menus() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
    ) );
}
add_action( 'init', 'my_theme_register_menus' );

第 5 步：激活并查看

回到 WordPress 后台，激活你的 "My First Theme" 主题，如果你的网站有文章，你应该就能看到一个由你自己的模板代码构建的网站了！

重要提醒：HTML 模板 vs. WordPress 主题

特性 纯 HTML 模板 (如 HTML5UP, Tooplate) WordPress 主题
文件类型 .html, .css, .js .php, .css, .js, .php (functions.php)
工作方式 静态文件，内容直接写在 HTML 里。 动态生成，PHP 从数据库获取数据并插入 HTML。
可重用性 低，每个页面都是一个独立的文件。 高，通过模板文件自动生成所有页面。
功能扩展 困难，需要手动编写大量代码。 容易，通过安装插件即可添加功能。

不要直接寻找“WordPress HTML 模板”，而应该去寻找或学习创建 “WordPress 主题”，理解了 PHP 模板标签和模板文件的作用，你就能明白如何将一个静态的 HTML 设计稿，转换成一个功能完整的 WordPress 动态网站。