wordpress html5主題怎么編輯

wordpress主題最主要的幾個文件index.php; style.php;header.php; fooder.php.sidebar.php，然后把相應的HTML的代碼放到相應的文件里，主題就算初步完成了。

撫順縣網站建設公司成都創(chuàng)新互聯,撫順縣網站設計制作，有大型網站制作公司豐富經驗。已為撫順縣上千余家提供企業(yè)網站建設服務。企業(yè)網站搭建\成都外貿網站建設公司要多少錢，請找那個售后服務好的撫順縣做網站的公司定做！

相應的教程在我的盤里面，共同進步：

wordpress html5主題怎么編輯？

編輯方法如下：

一.使用 HTML5 的 聲明

在 HTML 4.01 和 XHTML 中那段長長的 DTD 類型聲明應該是所有標簽中最難記住的標簽了，但在 HTML5 中， DTD 聲明非常簡單：

1

!DOCTYPE html

就是這么簡潔，要使用 HTML5 ，第一步肯定是先使用 HTML5 的 !DOCTYPE 聲明。

二.加入 html5.js

可以在主題的 head 元素內加入一段 js 來讓 IE8 及以下的 IE 完全支持 HTML5 的標簽。

下載由 html5shiv 提供的這個 html5.js 文件。

1

2

3

!--[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 為開發(fā)者引入了新的語義化標記，下面給大家介紹一些適合在 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 使用的微數據規(guī)范，因此建議讀者先閱讀前文再閱讀下文。

這里使用的是 schema.org 的微數據規(guī)范，加入微數據是為了讓機械（如搜索引擎）識別網頁內容的意義，可以說是華麗麗的 SEO 。

下面列舉一些適合的微數據規(guī)范：

這是定義網頁版頭的微數據，需要注意的是 WPHeader 的 “WP” 不是指 WordPress ，而是 Web Page 的縮寫，不過用在 WordPress 上也是非常合適的。

定義網頁頁腳。

定義一篇博客文章。

定義一條評論。

wordpress如何調用html5文件

就WP核心來說，只需要在下面的HOOK

after_setup_theme

的函數內添加如下代碼：

/*

?*?Switch?default?core?markup?for?search?form,?comment?form,?and?comments

?*?to?output?valid?HTML5.

?*/

add_theme_support(?'html5',?array(

'search-form',?'comment-form',?'comment-list',?'gallery',?'caption'

)?);

如果沒有找到掛到上面HOOK的函數，需要在functions.php中添加：

add_action(?'after_setup_theme',?'suoling_net_after_theme_setup'?);

function?suoling_net_after_theme_setup(){

/*

?*?Switch?default?core?markup?for?search?form,?comment?form,?and?comments

?*?to?output?valid?HTML5.

?*/

add_theme_support(?'html5',?array(

'search-form',?'comment-form',?'comment-list',?'gallery',?'caption'

)?);

}

插件的HTML輸出一般都是符合HTML5標準的；此外，就是主題對HTML5的支持了，這個需要自行修改，沒有什么便捷的方法。

不了解再問，祝愉快！

本文名稱：包含wphtml5的詞條
當前網址：http://www.rwnh.cn/article40/dscogeo.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站制作、標簽優(yōu)化、企業(yè)網站制作、用戶體驗、建站公司、自適應網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯