原文：Creating a WordPress Theme HTML Structure
原文作者：Ian Stewart
译文作者：Young
现在我们开始学习 WordPress 主题开发系列之 HTML 结构代码。
任何 HTML 结构的目标
编写网页代码的时候您应该遵循两个目标：精简和有意义，也就是使用尽可能少并且有意义的 HTML 标签。
同时编写 WordPress 主题（或者其他任何内容管理系统模板）要避免标签太少，也要避免 Divitis （DIV 标签) 太多。
如果看过一个网站或者主题的源代码，您可能认识 DIV 标签。那些网站或者主题可以看作是一个装满 HTML 代码的容器。我们需要适量的 DIV 标签，这些标签可以被重复利用于多个博客主题——我们想编写一些可重复利用的代码。
ＷordPress 主题 HTML 结构
下面的 HTML 代码将会用于我们制作的主题：
<head> </head> <body> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> </div><!-- #branding --> <div id="access"> </div><!-- #access --> </div><!-- #masthead --> </div><!-- #header --> <div id="main"> <div id="container"> <div id="content"> </div><!-- #content --> </div><!-- #container --> <div id="primary" class="widget-area"> </div><!-- #primary .widget-area --> <div id="secondary" class="widget-area"> </div><!-- #secondary --> </div><!-- #main --> <div id="footer"> <div id="colophon"> <div id="site-info"> </div><!-- #site-info --> </div><!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html>
把上面的主题复制粘贴到您的文本编辑器然后保存，代码后面还会用到，但让我们先来学习其他一些东西。
WordPress 主题 HTML 快速浏览
首先是 wrapper 代码类的 class 属性 hfeed。hfeed 属于 Microformat hatom 形式。简单来讲，hfeed 属性会告诉搜索引擎爬虫之类的东西读取我们网站上发表的聚合内容（例如博客文章）。后面您会看到很多类似的 class 标签。
看一下 header 和 footer 的 DIV 结构，您可能会发现我在调用外部函数，这可能会有 divitis 之嫌（开玩笑的——精博注）。我会尝试在 DIV 标签里面增加些内容，以后会用到。另外，为了实现某些输出，我们也需要这种标签结构。
在上面那段 HTML 代码里面，您会看到有两个 widget-area 代码，并且都是在 DIV 标签里面。这是很关键的。这不仅让我们侧边栏的主要内容可以被搜索引擎读取，并且通过借助 CSS 技术，还可以把主题分为一栏，两栏或者三栏。
这个 HTML 结构很好，以后还会用到，再加上 CSS 就可以创建出美仑美奂的 WordPress 主题。
如何创建 WordPress 主题
这篇文章是如何创建 WordPress 主题教程系列的其中一部分，该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。
- 介绍；
- WordPress 主题开发工具；
- 创建一个 HTML 结构；
- 模板和目录结构；
- Header 模板；
- Index 模板；
- Single、Attachment 和 404 模板；
- Comments 模板；
- Search 和 Page 模板；
- Archive、Author、Category 和 Tag 模板；
- Sidebar 模板；
- 如何创建 WordPress 主题 CSS 样式表。
相关博文：
