將您的 WordPress 主題轉換為 HTML5-＆＃＆按-PHP中文網

首頁

CMS教程

＆＃＆按

將您的 WordPress 主題轉換為 HTML5

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2023 am 09:33 AM

HTML5 引入了一系列出色的新功能和簡單的選項。很快它將得到當今使用的大多數瀏覽器的全面支援。最終每個人都必須將 WordPress 主題從 XHTML 轉換為 HTML5。在 Google 的熊貓更新之後，您的網站需要更清晰、更易於閱讀的程式碼才能在 Google 上獲得更好的排名。我將教您如何將主題從 XHTML 轉換為 HTML5。我們還將照顧禁用 JavaScript 的 2% 的網路使用者（為了向後相容）。

我們的目標

在本教學中，我們將專注於將 WordPress 主題從 XHTML 轉換為 HTML5。我們將逐步透過下面列出的文件來了解更改（這些文件位於您的主題資料夾中，即wp-content/themes/yourtheme/here!）

header.php
##index.php
#sidebar.php：
#footer.php
#single.php（可選）

基本 HTML5 版面配置

讓我們來看看我們將要建立的基本 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 id="Title-of-the-Article">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 id="Some-Widget-in-The-Sidebar">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 相比，新引入的標籤的名稱是不言自明的。

步驟 1 將 header.php 轉換為 HTML5

現在我將向您展示XHTML WordPress主題的header.php中常用的程式碼。

XHTML 主題 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">

有人必須問我們為什麼要做這一切？答案很簡單，就是 HTML5 的語意標記。它減少了標記，使其非常易於理解和管理。

HTML5 header.php（轉換）

閱讀程式碼，然後按照以下說明將主題的 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">

如您所看到的，轉換後的程式碼與 XHTML 程式碼非常相似。讓我們討論一下這些變化。