HTML5 引入了一系列出色的新功能和簡單的選項。很快它將得到當今使用的大多數瀏覽器的全面支援。最終每個人都必須將 WordPress 主題從 XHTML 轉換為 HTML5。在 Google 的熊貓更新之後,您的網站需要更清晰、更易於閱讀的程式碼才能在 Google 上獲得更好的排名。我將教您如何將主題從 XHTML 轉換為 HTML5。我們還將照顧禁用 JavaScript 的 2% 的網路使用者(為了向後相容)。
在本教學中,我們將專注於將 WordPress 主題從 XHTML 轉換為 HTML5。我們將逐步透過下面列出的文件來了解更改(這些文件位於您的主題資料夾中,即wp-content/themes/yourtheme/here!)
讓我們來看看我們將要建立的基本 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>
現在我們只需要知道header
、footer
、nav
、section
和article
的新HTML5標籤放在哪裡即可。與 div
結構化 XHTML 相比,新引入的標籤的名稱是不言自明的。
現在我將向您展示XHTML WordPress主題的header.php中常用的程式碼。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My Blog</title> <?php wp_head(); ?> </head> <body> <!-- Header --> <div class="header"> <div class="container"> <h1><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1> </div><!-- End Container --> </div><!-- End Header --> <!-- Navigation Bar Starts --> <div class="navbar"> <div class="container"> <ul class="grid nav_bar"> <?php wp_list_categories('navs_li='); ?> </ul> </div> </div> <!-- Navigation Bar Ends --> <div class="container">
閱讀程式碼,然後按照以下說明將主題的 header.php 轉換為 HTML5。
<!doctype html> <html> <head> <title>My Blog</title> <?php wp_head(); ?> </head> <body> <!-- Header --> <header> <div class="container"> <h1 class="grid"><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1> </div> </header> <!-- End Header --> <!-- Navigation Bar Starts--> <nav> <div class="navbar"> <ul class="grid nav_bar"> <?php wp_list_categories('title_li='); ?> </ul> </div> </nav> <!-- Navigation Bar Ends --> <section class="container">
注意: 有些人在標題中包含
section 標記。關於這一點有很多爭論。我個人反對在標頭中包含
section 標籤,因為它會破壞 HTML5 的美感。當然,您可以在那裡使用舊的
div 。
將 WordPress 主題轉換為 HTML5 時,標頭中包含的腳本和樣式表確實非常簡單。在 HTML5 中,我們只使用