html5 引入了一系列出色的新功能和简单的选项。很快它将得到当今使用的大多数浏览器的全面支持。最终每个人都必须将 wordpress 主题从 xhtml 转换为 html5。在 google 的熊猫更新之后，您的网站需要更清晰、更易于阅读的代码才能在 google 上获得更好的排名。我将教您如何将主题从 xhtml 转换为 html5。我们还将照顾禁用 javascript 的 2% 的互联网用户（为了向后兼容）。
我们的目标
在本教程中，我们将集中精力将 WordPress 主题从 XHTML 转换为 HTML5。我们将逐步通过下面列出的文件了解更改（这些文件位于您的主题文件夹中，即wp-content/themes/yourtheme/here！）
- header.php
- index.php
- sidebar.php：
- footer.php
- single.php（可选）
基本 HTML5 布局
让我们看一下我们将要构建的基本 HTML5 布局。 HTML5 不仅仅是代码开头的文档类型。几个新引入的元素帮助我们以更少的标记以有效的方式设计样式和编码（这就是 HTML5 更好的原因之一）。
TITLE | Slogan! Title of the Article
Some lorem ispum text of your post goes here.
The article's text ends.
立即学习“前端免费学习笔记（深入）”；
现在我们只需要知道 header、footer、nav、section 和 article 的新 HTML5 标签放在哪里即可。与 div 结构化 XHTML 相比，新引入的标签的名称是不言自明的。
步骤 1 将 header.php 转换为 HTML5
现在我将向您展示XHTML WordPress主题的header.php中常用的代码。
XHTML 主题 header.php
My Blog 有人必须问我们为什么要做这一切？答案很简单，就是 HTML5 的语义标记。它减少了标记，使其非常易于理解和管理。
HTML5 header.php（转换）
阅读代码，然后按照以下说明将主题的 header.php 转换为 HTML5。
My Blog 正如您所看到的，转换后的代码与 XHTML 代码非常相似。让我们讨论一下这些变化。
– HTML5 有一个非常简单的 doctype，但它包含许多新的语义标签– 标头部分的语义标记– 我们用一个新的语义标签替换了导航栏的div代码，用于控制 HTML5 中的导航栏。注意： 有些人在标头中包含
section标记。关于这一点有很多争论。我个人反对在标头中包含section标签，因为它会破坏 HTML5 的美感。当然，您可以在那里使用旧的div。脚本和样式表怎么样？
将 WordPress 主题转换为 HTML5 时，标头中包含的脚本和样式表确实非常简单。在 HTML5 中，我们只使用
和标签。因此，删除type="text/javascript"- 所有浏览器都会将标记视为 JavaScript，除非您明确写入其类型。同样，从样式表的标记中删除type="text/css"。考虑旧浏览器！
包含 HTML shiv 以支持旧版浏览器。这是一个简单的 JavaScript 文件。 shiv 的一些示例是 Remy Sharp 的 HTML5 脚本或 Modernizr 脚本。让我们使用 Modernizr。
我们需要将脚本从我们的functions.php 文件中排入队列，如下所示：
function html5_scripts() { // Register the Modernizr script wp_register_script( 'modernizr', get_template_directory_uri() . '/js/Modernizr-1.6.min.js' ); // Enqueue Modernizr wp_enqueue_script( 'modernizr' ); } add_action( 'wp_enqueue_scripts', 'html5_scripts', 1 );提示： 将连续出现的标题标签放入
注意： 此脚本需要放置在
标签，这就是为什么我们给add_action优先级为 1。
第2步将index.php转换为HTML5
常见的 XHTML index.php 由以下标签组成。我将逐一进行转换，解释转换后的整个过程。
注意： 我不会在此处添加整个代码，因为它会无缘无故地使帖子变得更长。
XHTML索引.php
...HTML5 index.php（转换）
... 在看我们所做的更改之前，我们必须知道HTML5为我们提供了三个基本的布局建模标签：
Section、article和aside。Section将替换条目的 div，article将替换帖子的 div，稍后aside将用于我们的侧边栏。
– HTML5 有一个名为section的布局标签，用于分隔其中使用的代码块– 帖子部分的语义标签，类似于section– 帖子图像的语义标记，用于将其放在一边和侧边栏面包屑和页面导航– 如果我们的主题有面包屑，那么它们将在div中使用，例如，对于页面导航，我们将使用HTML5 中的完整 Index.php
注意： 我粘贴了一个通用的index.php，如下所示，下面是一些转换为 HTML5 的完整代码。
"> Read More
第 3 步 处理 sidebar.php
我们将在侧边栏中使用
而不是div，例如：XHTML 中的 sidebar.php
使用
后变成如下。HTML5 中的 sidebar.php
HTML5 中的 single.php
Read More'); ?>
