首頁 >CMS教程 >＆＃＆按 >將您的 WordPress 主題轉換為 HTML5

將您的 WordPress 主題轉換為 HTML5

WBOY原創: 2023-09-06 09:33:091191瀏覽

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>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 相比，新引入的標籤的名稱是不言自明的。

步驟 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 程式碼非常相似。讓我們討論一下這些變化。

aba7b36f87decd50b18c7e3e3c150106
1aa9e5d373740b65a0cc8f0a02150c53
c787b9a589a3ece771e842a6176cf8e9 – 我們用一個新的語意標籤取代了導覽列的 div

注意： 有些人在標題中包含 section 標記。關於這一點有很多爭論。我個人反對在標頭中包含 section 標籤，因為它會破壞 HTML5 的美感。當然，您可以在那裡使用舊的 div 。

腳本和樣式表怎麼樣？

將 WordPress 主題轉換為 HTML5 時，標頭中包含的腳本和樣式表確實非常簡單。在 HTML5 中，我們只使用 3f1c4e4b6b16bbbd69b2ee476dc4f83a 和 2cdf5bf648cf2f33323966d7f58a7f3f 標籤。因此，刪除 type="text/javascript" - 所有瀏覽器都會將 3f1c4e4b6b16bbbd69b2ee476dc4f83a 標籤視為 JavaScript，除非您明確寫入其類型。同樣，從樣式表的 2cdf5bf648cf2f33323966d7f58a7f3f 標記中刪除 type="text/css"

。

考慮舊瀏覽器！

包含 HTML shiv 以支援舊版瀏覽器。這是一個簡單的 JavaScript 檔案。 shiv 的一些範例是 Remy Sharp 的 HTML5 腳本或 Modernizr 腳本。讓我們使用 Modernizr。

我們需要將腳本從我們的functions.php 檔案中排入佇列，如下所示：

function html5_scripts()
{
	// Register the Modernizr script
	wp_register_script( 'modernizr', get_template_directory_uri() . '/js/Modernizr-1.6.min.js' );

	// Enqueue Modernizr
	wp_enqueue_script( 'modernizr' );
}
add_action( 'wp_enqueue_scripts', 'html5_scripts', 1 );

提示： 將連續出現的標題標籤放入 d8eccd9ed644b68a6460a2bb84548c82

#注意： 此腳本需要放置在81af6cbca3c49e7cf9a1d222fe5e2407 標籤，這就是為什麼我們給 add_action 優先權為1。

第2步

將index.php轉換成HTML5

常見的 XHTML index.php 由下列標籤組成。我將逐一轉換，解釋轉換後的整個過程。

注意：我不會在此處添加整個程式碼，因為它會無緣無故地使帖子變得更長。

###

XHTML索引.php

<div id="container">
<div id="content">
<div id="entries">
<div id="post">...</div>

</div><!--Ending Entries-->
<?php get_sidebar(); ?>
</div><!--Ending content-->
</div><!--Ending container-->
<?php get_footer(); ?>

HTML5 index.php（转换）

<div id="container">
	<div id="content">
		<section id="entries">
			<article id="post">...</article>
		</section><!--end entries-->
		<?php get_sidebar(); ?>
	</div><!--end content-->
</div><!--end wrap-->
<?php get_footer(); ?>

在看我们所做的更改之前，我们必须知道HTML5为我们提供了三个基本的布局建模标签：Section、article和aside。 Section 将替换条目的 div，article 将替换帖子的 div，稍后 aside 将用于我们的侧边栏。

2f8332c8dcfd5c7dec030a070bf652c3 – HTML5 有一个名为 section 的布局标签，用于分隔其中使用的代码块
23c3de37f2f9ebcb477c4a90aac6fffd – 帖子部分的语义标签，类似于 section
15221ee8cba27fc1d7a26c47a001eb9b – 帖子图像的语义标记，用于将其放在一边和侧边栏
面包屑和页面导航 – 如果我们的主题有面包屑，那么它们将在 div 中使用，例如 26af29c551fce3a276c8c520c5161cd1...16b28748ea4df4d9c2150843fecfba68 ，对于页面导航，我们将使用 a8d116a310d40d10e32a84202dd15709

HTML5 中的完整 Index.php

注意： 我粘贴了一个通用的index.php，如下所示，下面是一些转换为 HTML5 的完整代码。

<section class="entries">
  <?php if (have_posts()) : while (have_posts()) : the_post();
  
<article class="post" id="post-<?php the_ID(); ?>">
    <aside class="post_image">
        <?php
        if ( has_post_thumbnail() ) { 
            the_post_thumbnail();
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    </aside>
    <section class="post_content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <p><?php echo get_the_excerpt(); ?></p>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more ">Read More</a>
    </section>
    <section class="meta">
 
    <p> <?php the_category(',') ?></p>
 
    <p><?php the_tags(""); ?></p>
 
    </section>
</article>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  <?php endif; ?>
 
  <?php posts_nav_link(' ⏼ ', __('« Newer Posts'), __('Older Posts »')); ?>
</section>

第 3 步处理 sidebar.php

我们将在侧边栏中使用 15221ee8cba27fc1d7a26c47a001eb9b 而不是 div，例如：

XHTML 中的 sidebar.php

<div id="sidebar">...</div>

使用15221ee8cba27fc1d7a26c47a001eb9b后变成如下。

HTML5 中的 sidebar.php

<aside id="sidebar">...</aside<

这很简单！

第 4 步 footer.php 编辑

我们将在 footer.php 中使用 c37f8231a37e88427e62669260f0074d 语义标签而不是简单的 div，例如：

XHTML 中的 footer.php

<div id="footer">
<div id="foot_widgets">...</div>
<div id="copyright">...</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

HTML5 中的 footer.php

<footer id="footer">
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<div id="copyright">...</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

第 5 步处理 single.php

single.php 没有什么特别的变化，所以我只是粘贴更改后的代码，这可能对一些初学者有帮助。我在其中使用了 section 和 article 标签。如果您愿意，您还可以使用 46dd80ba616c57a652514755c74c4211 标签。

XHTML 中的 single.php

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="container">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <div class="content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
 
        <div id="entry-content-single">
          <?php the_content('<p >Read More</p>'); ?>
        </div>
        <div class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 
 
          <p><?php the_tags(""); ?></p>
        </div>
        <div class="clearfix"></div>
    </div>
 
  <!-- End of post -->
</div></div>
 

<?php get_footer(); ?>

HTML5 中的 single.php

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<section class="content">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <article class="box">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
 
        <section id="entry-content-single">
          <?php the_content('<p>Read More</p>'); ?>
        </section>
        <section class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 
 
          <p><?php the_tags(""); ?></p>
        </section>
        <div class="clearfix"></div>
    </article>
  <!-- end post -->
</section></div>

<?php get_footer(); ?>

注意： 关于SEO，有些人在帖子标题之前使用 3534bfbbdb2128f14bde5b82a4f4d904 ，这也是一个很好的做法。

第6步最后是style.css

最终我们关心的是向后兼容性问题。出于对旧版浏览器的安全考虑，HTML5 元素应使用 display: block 样式显示为块。只需将以下代码放在 style.css 的顶部即可：

header, nav, section, article, aside, figure, footer { display: block; }

附加说明

如果您使用嵌入到模板文件中的音频或视频，则必须使用 HTML5 音频和视频元素。可以在下面的备忘单中查看更多标签。每当您添加一些新功能时，请研究一下如何使用其语义标签将其添加到 HTML5 中。

HTML5 资源

HTML5 备忘单
HTML5 教程
HTML5 演示

一些 HTML5 免费主题

二十一点
Yoko
15 个主题和框架

现在轮到你了

您要使用 HTML5 吗？您是否已更改为 HTML5？这些更改是否会影响您的 SEO 排名？请在下面的评论中告诉我们！

以上是將您的 WordPress 主題轉換為 HTML5的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript html5 css html xhtml class 样式表 display WordPress SEO

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何優化自訂WordPress外掛的資料庫查詢下一篇：如何優化自訂WordPress外掛的資料庫查詢

看更多