WordPress 模板的本质是 HTML5 文件，但它被 PHP 代码“包裹”和“驱动”，以实现动态内容加载。

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

下面我将从几个方面详细解释：

核心概念：WordPress 模板 = HTML5 + PHP

想象一下,一个纯 HTML5 网站就像一本静态的画册，每一页的内容都是固定不变的，而 WordPress 网站则像一个动态的相册，你可以随时添加、删除或更换照片（文章、页面），但相册的装帧、布局（模板）是固定的。

  • HTML5 (骨架)：负责定义网页的结构和内容。<header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 这些标签，HTML5 的核心，它们让网页结构清晰，对搜索引擎友好，也方便开发者维护。
  • PHP (灵魂)：负责处理动态逻辑，它就像一个“胶水”，连接你的 WordPress 数据库（存储文章、用户、设置等）和 HTML 模板，当有人访问你的网站时，PHP 代码会从数据库中抓取数据，然后将其“填入”到 HTML5 结构的相应位置，最终生成完整的 HTML 页面发送给访客的浏览器。

一个最简单的 WordPress 主题文件 index.php 的例子：

<?php get_header(); ?> // 加载 header.php 文件，通常包含 <head>, <header> 等
<main id="primary">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>">
                <header class="entry-header">
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                </header>
                <div class="entry-content">
                    <?php the_excerpt(); // 显示文章摘要 ?>
                </div>
            </article>
        <?php endwhile; ?>
    <?php endif; ?>
</main>
<?php get_sidebar(); // 加载侧边栏 ?>
<?php get_footer(); // 加载 footer.php 文件，通常包含 <footer> 等 ?>

在这个例子中：

wordpress 模板 html5
（图片来源网络，侵删）
  • <main>, <article>, <header>, <h2>, <a>, <div> 都是 HTML5 标签，构成了网页的骨架。
  • <?php ... ?> 内部的代码是 PHP，它们的作用是循环显示数据库中的文章、获取文章标题、生成文章链接等。

为什么 WordPress 模板要使用 HTML5？

HTML5 并非仅仅是增加了一些新标签，它为现代网页开发带来了巨大的好处，WordPress 采用 HTML5 作为其模板的默认标准（自 WordPress 3.6 起），主要有以下几个原因：

a. 语义化 (Semantics)

HTML5 的标签是“有意义的”。

  • <header>：代表页面或区域的头部，通常包含 logo、导航等。
  • <nav>：专门用于导航链接。
  • <main>：包含页面的核心独一无二的内容。
  • <article>：代表一篇独立的文章、博客条目、评论等。
  • <section>：代表文档中的一个区域，通常有标题。
  • <aside>：代表侧边栏或与主要内容相关但独立的内容。

好处：

  • SEO（搜索引擎优化）：搜索引擎（如 Google）能更好地理解网页的结构和内容的重要性，从而可能给予更好的排名。
  • 可访问性 (Accessibility)：使用屏幕阅读器的用户可以更容易地理解页面结构，导航网站。
  • 可维护性：代码结构清晰，开发者一看就知道哪个部分是做什么的，便于后续的修改和维护。

b. 多媒体支持

在 HTML5 之前，要在网页中播放视频和音频，需要依赖 Adobe Flash 这样的第三方插件，既不安全也不稳定，HTML5 原生提供了 <video> 和 <audio> 标签，让嵌入和处理多媒体变得无比简单。

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

c. 离线存储和本地缓存

通过 Application Cache 和 Service Workers 技术，HTML5 可以让网站在离线状态下也能部分或完全工作，这对于 PWA（Progressive Web App）和提升用户体验非常重要。

d. 更简洁的代码

引入 CSS 和 JavaScript 的 <link> 和 <script> 标签不再需要 type="text/css" 或 type="text/javascript"，因为这是浏览器的默认行为，表单输入框也增加了新的类型（如 email, date, number），提供了更好的移动端输入体验。

如何创建一个基于 HTML5 的 WordPress 模板？

如果你想从头开始创建一个 WordPress 主题，遵循 HTML5 标准是必须的，基本步骤如下：

  1. 创建基本文件结构： 一个最简单的主题需要至少两个文件：

    my-html5-theme/
├── index.php
├── style.css
└── functions.php

  2. 编写 style.css (主题头信息)： 这个文件是必须的，它告诉 WordPress 这是一个主题，注释部分是关键。

    /*
Theme Name: My HTML5 Theme
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: A simple HTML5 theme for WordPress.
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-html5-theme
*/

  3. 创建模板文件： 将你的 HTML5 代码拆分到不同的 PHP 文件中，这是 WordPress 的最佳实践。

    • header.php：包含 <!DOCTYPE html>, <html>, <head> 和页面的 <header> 部分。
    • index.php：主页模板，循环显示文章。
    • single.php：单篇文章页面模板。
    • page.php：单页面模板。
    • footer.php：包含页面的 <footer> 部分。
    • sidebar.php：侧边栏。

  4. 在 functions.php 中注册 HTML5 特性： 这是至关重要的一步，它告诉你的主题支持 HTML5 的各种功能。

    <?php
function my_theme_setup() {
    // 让 WordPress 支持 HTML5 的评论表单、搜索表单、画廊和脚本
    add_theme_support( 'html5', array(
        'comment-list',
        'comment-form',
        'search-form',
        'gallery',
        'caption',
    ) );
    // 让 WordPress 支持特色图片
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => '主导航菜单',
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

  5. 使用 wp_head() 和 wp_footer()： 在 header.php 的 </head> 之前调用 <?php wp_head(); ?>，在 footer.php 的 </body> 之前调用 <?php wp_footer(); ?>，这两个函数是 WordPress 的“钩子”，用于插入插件、主题等需要的 CSS、JavaScript 和其他代码。

如何检查和修改现有主题的 HTML5 支持？

如果你使用的是第三方主题,并且想知道它是否支持 HTML5，或者想进行修改：

  1. 检查 functions.php： 打开主题的 functions.php 文件，查找是否有 add_theme_support( 'html5', ... ); 这行代码，如果有，说明该主题已经支持 HTML5。

  2. 直接查看模板文件： 使用代码编辑器（如 VS Code）打开主题的模板文件（如 header.php, index.php），检查其中是否使用了语义化的 HTML5 标签（如 <main>, <article>）而不是过时的 <div>。

  3. 如何修改（进阶）：

    • 使用子主题：强烈建议不要直接修改父主题，创建一个子主题，在子主题中覆盖父主题的文件（例如复制一份 header.php 到子主题目录下进行修改）。
    • 使用插件：对于不熟悉代码的用户，可以使用一些插件来强制网站输出 HTML5 标记，但这通常不是最佳实践，修改代码才是根本。
  • WordPress 模板是 PHP 和 HTML5 的结合体，PHP 负责动态逻辑，HTML5 负责页面结构。
  • 使用 HTML5 是现代 WordPress 开发的标准，它带来了更好的 SEO、可访问性和可维护性。
  • 创建或修改 WordPress 主题时，务必在 functions.php 中使用 add_theme_support( 'html5' ); 来声明 HTML5 支持。
  • 语义化标签（如 <main>, <article>）是构建高质量 WordPress 网站的基础。

遵循 HTML5 标准不仅能让你的网站更专业，也能确保它在未来的 Web 技术中保持良好的兼容性。