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 更好的原因之一)。

<!DOCTYPE html>
<html lang="en">
<head>
	<title>TITLE | Slogan!</title>
</head>
<body>
	<nav role="navigation"></nav>
<!--Ending header.php-->
<!--Begin  index.php-->
	<section id="content">
		<article role="main">
			<h1>Title of the Article</h1>
			<time datetime="YYYY-MM-DD"></time>
			<p>Some lorem ispum text of your post goes here.</p>
			<p>The article\'s text ends.</p>
		</article>
		
		<aside role="sidebar">
			<h2>Some Widget in The Sidebar</h2>
		</aside>
	</section>
<!--Ending index.php-->
<!--begin  footer.php-->
	<footer role="foottext">
		<small>Some Copyright info</small>
	</footer>
</body>
</html>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。