使用 HTML5 改造 WordPress 主题

分类： , 标签：‚ ‚ ‚  评论：34

关注互联网的你会很容易发现， 在 2012 年， HTML5 正以前所未有的速度发展起来， HTML5 不但强化了 Web 的表现，还加入了像本地数据库（ Web Database SQL ）以及强大的音频、视频支持这一类的 Web 应用功能。这样强大的 HTML5 无疑会为 Web 带来颠覆性的变化。当然，并非所有的平台和浏览器都支持 HTML5 ，即使浏览器支持 HTML5 的部分规则，也不一定支持所有的规则，因此 HTML5 的普及仍需时，但其中一些功能已经在各种浏览器间有着良好的支持，这次 Kayo 要介绍的就是 HTML5 的语义化标签和微数据，语义化标签在主流的现代浏览器（ Chrome 、 Firefox 等）以及 IE9 以上版本的 IE 中已经被支持了，对于低版本的 IE 开发者也可以使用 html5shiv 提供的 html5.js 来让 HTML5 标签获得支持，微数据作为一种华丽丽的 SEO 也逐渐被更多搜索引擎支持了。下面主要给大家叙述一下如何使用 HTML5 改造你的 WordPress 主题。

 

一.使用 HTML5 的 声明

在 HTML 4.01 和 XHTML 中那段长长的 DTD 类型声明应该是所有标签中最难记住的标签了，但在 HTML5 中， DTD 声明非常简单：

<!DOCTYPE html>

就是这么简洁，要使用 HTML5 ，第一步肯定是先使用 HTML5 的 <!DOCTYPE> 声明。

 

二.加入 html5.js

我们可以在主题的 head 元素内加入一段 js 来让 IE8 及以下的 IE 完全支持 HTML5 的标签。

下载由 html5shiv 提供的这个 html5.js 文件。

<!--[if lte IE 9]>
    <script type="text/javascript" src="./js/html5.js"></script>
<![endif]-->

 

代码中使用了条件注释针对低版本的 IE（IE8 及以下版本）浏览器来调用这个 js 文件，其他浏览器会忽略掉这段代码，不会造成浪费的 HTTP 请求。

 

三.CSS Reset

CSS Reset 是为了把浏览器提供的默认样式去掉的一段 CSS ，详细的介绍可以参见 Kayo 之前所写的一篇文章 《关于 CSS Reset 》，本文中的 CSS Reset 是根据前文的 CSS Reset 改造的，主要是加入了对 HTML5 中新加入的标签的重置。下面是 Kayo 针对 HTML5 的 CSS Reset ，供大家参考，也可以参照前文定制更适合个人情况的 CSS Reset 。

/*** 加入 HTML5 新标签的样式重置  ***/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body{line-height: 1; text-align: left; }
:focus {outline: 0; }
/*** 将一些可以代替 div 标签的 HTML5 标签定义为块状元素 ***/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none; }
ins {text-decoration: none; }
mark {background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del {text-decoration: line-through; }
table {border-collapse: collapse; border-spacing: 0; }
input, select {vertical-align: middle; }

 

现在，你可以放心的在 WordPress 主题中使用 HTML5 标签了。

 

四.修改主题中的标签为语义化的 HTML5 标签

在网页重构中，我们舍弃了没有任何语义的 table 布局，取而代之的是新的标记，最常见的莫过于 div 这个标签，不过在设计复杂的页面时，新的问题出来了—— div 的滥用导致页面变得臃肿并且难于理解。值得兴奋的是， HTML5 为开发者引入了新的语义化标记，下面给大家介绍一些适合在 WordPress 主题中使用的 HTML5 标签。

 

<header> 用于定义文档的页眉，可以代替原本包裹页眉的 <div> 。

<footer> 用于定义文档的页脚，可以代替原本包裹页脚的 <div> 。

<nav> 用于定义导航链接的部分，即代替包裹菜单的 <div> 。

<article> 用于定义独立的内容，很适合代替包裹文章的 <div>，如 WordPress 首页、归档页或文章页的文章列表中可使用该标签包裹文章。

<aside> 该标签用于定义其所处内容之外的内容，并且 aside 的内容应该与附近的内容相关，因此很适合用来包裹 WordPress 的侧边栏。

 

另外 <time>, <small>, <section> 等 HTML5 标签也适合用来改造升级 WordPress 主题，这些标签的具体意义可以参见 W3school 。

 

五.为主题加入 HTML5 微数据

关于 HTML5 微数据的介绍和使用方法可以参见 Kayo 之前所写的文章 《HTML5 之微数据》，这里主要介绍一些适合 WordPress 使用的微数据规范，因此建议读者先阅读前文再阅读下文。

 

这里我们使用的是 schema.org 的微数据规范，加入微数据是为了让机械（如搜索引擎）识别网页内容的意义，可以说是华丽丽的 SEO 。

 

下面列举一些适合的微数据规范：

 

http://schema.org/WPHeader 这是定义网页版头的微数据，需要注意的是 WPHeader 的 “WP” 不是指 WordPress ，而是 Web Page 的缩写，不过用在 WordPress 上也是非常合适的。

http://schema.org/WPFooter 定义网页页脚。

http://schema.org/BlogPosting 定义一篇博客文章。

http://schema.org/Review 定义一条评论。

 

这些规范的详细用法以及更多的规范可以在 schema.org 搜索得到。

本文由 Kayo Lee 发表，本文链接：https://kayosite.com/improve-wordpress-theme-by-html5.html

你可能也喜欢

评论列表

  • 评论者头像
    回复

    适当的加一些html5的功能。。

    • 评论者头像
      回复

      @刘印博客 html5的确有很多很好的应用技术，离线程序，本地数据库这些简直是让人震撼的功能，不过比起PC网页，我觉得这些应用层面的技术用在移动互联网方面会更适合了！

  • 评论者头像
    回复

    博主技术党啊! 永远都是走在技术的前沿!
    HTML5 真心不错! 学习了

    • 评论者头像
      回复

      @dzc 哈哈，其实只是前沿技术的一小部分而已了，不过HTML5确实不错，值得一学！

  • 评论者头像
    回复

    這篇是為了我寫的嗎？？？ :mrgreen:

  • 评论者头像
    回复

    H5 + c3 会不会比较拉风?

    • 评论者头像
      回复

      @沫 一起用那绝对是相当的拉风了！

    • 评论者头像
      回复

      @沫 拉风也难弄….(对我而言)

      • 评论者头像
        回复

        @kkstx 其实一些简单的修改不会很难的，小改一下就很拉分了！

        • 评论者头像
          回复

          @Kayo 看来要花点时间看看H5~~~要弄本书来看才行..

          • 评论者头像
            回复

            @kkStx 我感觉最快的方法是直接看HTML5手册，然后找个HTML5的网站研究一下！哈哈，纯个人喜好了！

  • 评论者头像
    回复

    总之很好很强大 :mrgreen: :mrgreen:

  • 评论者头像
    回复

    HTML5。。。还没上。。。打算把一个主题转换为此，但一直在拖，可能是懒得学习和使用HTMl5

    • 评论者头像
      回复

      @zwwooooo 话说我还是比较喜欢尝尝鲜的，所以还是果断改造成HTML5了，动动手，感受一下HTML5的魅力也好！

  • 评论者头像
    回复

    对HTML5，因为据说现在很多主流浏览器还不支持，就没怎么去看，现在还在学XHTML+CSS，对5我最喜欢它的声明和层次分明的标签，非常简便好用~

    • 评论者头像
      回复

      @野草 嗯嗯,现阶段来说,HTML5在PC网页上最实用的就是语义化的标签了,支持高,有利seo而且页面结构看上去也清晰很多.

  • 评论者头像
    回复

    H5 应用还有点早呀 得等等看

    • 评论者头像
      回复

      @久酷 其实应用已经有不少呢，倒是HTML5网页的发展的确还有很长的路！

  • 评论者头像
    回复

    帅啊，哈哈，有时间重写下我的小博！ :wink:

  • 评论者头像
    回复

    这个离我太遥远了 :evil:

    • 评论者头像
      回复

      @不能吧 现在某些HTML5元素的使用已经比较普遍了，留意一下就会发现！

  • 评论者头像
    回复

    说实话，我还没怎么解除过html5

  • 评论者头像
    回复

    感谢！写得很详细。

  • 评论者头像
    回复

    学习了html5和css3之后，我感觉javascript、php等脚本语言有些多余了。。。难道以后，要被取代了吗？

    • 评论者头像
      回复

      @潜行者m 取代脚本就不大可能了，完善、易维护的网站需要各种技术协同构建，html5带给web的只会是进步而不是要取代web的其他组成！

  • 评论者头像
    回复

    代码高亮用的哪家的插件？尖括号看样子是没解析出来哦，都变成&amp了，有点丑

    • 评论者头像
      回复

      @啄木游弋 这个是调用修正版本时WP自动把尖括号转换为实体了，跟插件没什么关系！

  • 评论者头像
    回复

    Html5实在是没的说。酷~对了刚发现一个问题。就是这个文章列表有点问题。比如我翻了几页以后吧，然后点了其中一篇文章。文章是在当前窗口直接打开的。所以我看完后就应该后退回去阅读其他文章。那么问题来了。我后退回去后又得从第一页开始翻了。 :-?

    • 评论者头像
      回复

      @野人部落 是的，这也是 Ajax 翻页最欠缺的地方，所以主题内是可以设置使用自动翻页或者不使用的，个人习惯了用 Ajax 翻页，就用下去了 :mrgreen:

1 2

回复

你正在以游客身份访问网站，请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O