将你的WordPress主题转换为HTML5。

Html5引入了一系列出色的新功能和简单的选项。很快，今天使用的大多数浏览器都将完全支持它。最终每个人都必须将wordpress主题从xhtml转换为html5。谷歌熊猫更新后，你的网站需要更清晰易读的代码才能在谷歌上获得更好的排名。我将教你如何将一个主题从xhtml转换成html5。我们还将照顾2%禁用javascript的互联网用户（为了向后兼容）。

在本教程中，我们的目标是将WordPress主题从XHTML转换为HTML5。我们将通过下面列出的文件逐步了解这些变化（这些文件位于您的主题文件夹中，即WP-content/Themes/your theme/Here！)

footer.phpsingle.php（可选）基本HTML5布局让我们看看我们将构建的基本HTML5布局。HTML5不仅仅是代码开头的一个文档类型。几个新引入的元素帮助我们以更少的标签以有效的方式设计样式和代码（这是HTML5更好的原因之一）。

标题|口号！文章标题此处显示您帖子的部分内容。

文章正文结束。

人行道版权信息中的一些小部件现在我们只需要知道在哪里放置标题、页脚、导航、部分和文章的新HTML5标签。与div结构化的XHTML相比，新引入的标签的名称不言而喻。

步骤1将header.php转换成HTML5现在我将向您展示在header.php常用的XHTML WordPress主题代码。

XHTML主题标题。phpmyblog“》我的博客运行良好。有人一定会问我们为什么要做这一切？答案很简单，就是HTML5的语义标签。它减少了标签的数量，使其非常易于理解和管理。

HTML5 header.php（转换）读取代码，然后根据以下指令将主题的header.php转换为HTML 5。

我的博客“》我的博客运行良好。如您所见，转换后的代码与XHTML代码非常相似。让我们讨论一下这些变化。

HTML5有一个非常简单的doctype，但它包含许多新的语义标签-标题部分的语义标签-我们用一个新的语义标签替换了导航栏的div代码，以控制HTML 5中的导航栏。注意:有些人在标题中包含了section标签。关于这一点有很多争论。我个人反对在标题中包含section标签，因为这会破坏HTML5的美感。当然，您可以在那里使用旧的div。

脚本和样式表怎么样？将WordPress主题转换为HTML5时，标题中包含的脚本和样式表非常简单。在HTML5中，我们只使用和标签。因此，delete type =“text/javascript”-所有浏览器都会将该标签视为JavaScript，除非您显式编写其类型。同样，从样式表的标记中删除type =“text/CSS”。

考虑旧浏览器！包括HTML shiv以支持旧浏览器。这是一个简单的JavaScript文件。shiv的一些示例是Remy Sharp的HTML5脚本或Modernizr脚本。让我们使用Modernizr。

我们需要对functions.php文件中的脚本进行排队，如下所示:

函数html 5 _ scripts（）{//注册Modernizr script WP _ Register _ script（‘Modernizr‘，get_template_directory_uri）。/js/Modernizr-1.6 . min . js’）；//Enqueue Modernizrwp _ Enqueue _ script（‘modernizr‘）；} add _ action（‘WP _ enqueue _ scripts’，‘html 5 _ scripts’，1）；提示:将连续出现的标题标记放在。

注意:这个脚本需要放在标签中，这就是为什么我们优先将add_action设为1。

2步骤2将index.php转换为HTML5常见的XHTML index.php由以下标签组成。我将逐一转换它们并解释转换后的整个过程。

注意:我不会在这里添加整个代码，因为这会使帖子无缘无故变长。

XHTML索引。服务器端编程语言（Professional Hypertext Preprocessor的缩写）...5html 5 index.php（转换）...在查看我们所做的更改之前，我们必须知道HTML5为我们提供了三个基本的布局建模标签:Section、article和side。Section将替换条目的div，article将替换文章的div，side将在稍后的侧栏中使用。

–HTML 5有一个名为section的布局标签，用于分隔其中使用的代码块–文章部分的语义标签，类似于Section–文章图像的语义标签，用于将其放在一侧和侧栏面包屑和页面导航–例如，如果我们的主题有面包屑，它们将用于div中...，对于页面导航，我们将使用完整的Index.php in8html 5。注意:我粘贴了一个通用的index.php，如下所示。下面是一些转换成HTML5的完整代码。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：将你的WordPress主题转换为HTML5。 https://zhujicankao.com/98804.html