创建一个WordPress的主题HTML结构

前言

现在我们着手进入到WordPress的真正开发阶段:开始编写HTML结构

建立HTML结构的目的

当我们编写一个网站的时候,你一定会有两个目标:使代码精简并且有意义。这样就是说,尽可能使用少的标记(也就是HTML的标签)并且保证使用类和ID名称使得标记有意义。举个例子,对于小工具栏,你应该使用class=”widget-area” 而不是 class=”sidebar-left”

现在当我们编写一个WordPress的主题(或者任何针对内容管理系统的模板)的时候,我们需要找到一种介于精简代码和我们称之为冗余的东西。代码里包含了很多不必要的div元素。换句话说,有很多冗余结构。你可能在浏览网页或者WordPress的主题的源代码时候见过div。你可以把他们作为HTML代码的一个容器 - 这个容器对于使用CSS来操作HTML代码来说很方便。当然我们也会有一些,但是我们不会想要太多的以及没有意义的标签。

有一些诸如headernavfooter的标签,HTML5已经使得我们对于有意义的布局的请求变得更为简单。这些信的主题和div标签很相似,并且这些标签能够作为HTML代码的容器。同样的,他们也能够允许我们创造一个更能描述HTML大纲的框架。

所以我们已经有很好的框架了,使用在HTML5新的标签,这样我们能够针对我们的博客和站点布局来进行代码复用。

针对WordPress主题的HTML结构

让我们看一看我们将会使用在WordPress主题主体的HTML结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup></hgroup>
<nav role="navigation" class="site-navigation main-navigation"></nav><!-- .site-navigation .main-navigation -->
</header><!-- #masthead .site-header -->
<div id="main" class="site-main">
<div id="primary" class="content-area">
<div id="content" class="site-content">
</div><!-- #content .site-content --></div>
<!-- #primary .content-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary .widget-area -->
<div id="tertiary" class="widget-area">
</div><!-- #tertiary .widget-area --></div>
<!-- #main .site-main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
</div><!-- .site-info -->
</footer><!-- #colophon .site-footer -->
</div> <!-- #page .hfeed .site -->

事实上,这个HTML组成了_s的脊梁。继续把这个粘到你的文本编辑器并且把他存到一个顺手的地方,当我们勾践文件结构的时候,我们将会稍后使用到它。但是在这之前,我们还是要看一些事情。

WordPress主题HTML快速的预览

[caption id=”attachment_1390” align=”aligncenter” width=”768”]一个HTML的样例,点击获得大尺寸图片 一个HTML的样例,点击获得大尺寸图片[/caption]

看一下上面的HTML结构。块的颜色越深,也就代表其布局也越深。这些块的布局是由CSS所大致决定的,这些内容我们在后面会提到。

你也可以编辑HTML结构来满足你的需要。举个例子,你可以把导航(navigation)块移出header块或者把小工具(widget)块放进页脚(footer)块。根据这个指南的入门,我们将会使用CSS来安排我们的内容和小工具界面。

那么现在我们就开始写一点代码吧。

首先,在内容页的类,hfeedhfeed是hatom Microformat schema的一部分。用简单的英语来说,就是告诉计算机来阅读这个内容(比如搜索引擎的爬虫或者其他服务都会通过这个来访问)。

看下文件结构中的headerfooter的,你可能已经注意到了HTML5的新特征headerfooter。这些标签描述了文件的广义小节。通过借用这些类名称,我将会向标记中添加更多的信息。

你将会发现了在HTML标签中的ARIA role这个属性。这个role属性能够帮助一些残障辅助工具也来浏览你的站点。你可以在这里获得更多这一点的信息。

在我们HTML的主要区域中,注意一下我们的小工具块是在内容块之后的。你也许发现了我们的内容是在一个容器div(类名为‘content-area ’)这就是关键。它不仅让我们的主要内容在搜索引擎优先发现,而且使用CSS的时候也能精简CSS代码。

这个HTML的结构将会是你WordPress的未来框架,并且也会告诉你怎么使用CSS和这个强大的功能所搭配。