HTML5 introduces a range of great new features and simple options. Soon it will be fully supported by most browsers used today. Eventually everyone will have to convert their WordPress themes from XHTML to HTML5. After Google’s Panda update, your website needs clearer, easier-to-read code to rank better on Google. I'll teach you how to convert your theme from XHTML to HTML5. We will also take care of the 2% of internet users who have JavaScript disabled (for backwards compatibility).
Our goal
In this tutorial, we will focus on converting a WordPress theme from XHTML to HTML5. We'll walk through the changes step by step through the files listed below (these files are located in your theme folder, i.e. wp-content/themes/yourtheme/here!)
- header.php
- index.php
- sidebar.php：
- footer.php
- single.php(optional)
Basic HTML5 layout
Let's take a look at the basic HTML5 layout we're going to build. HTML5 is more than just a document type at the beginning of the code. Several newly introduced elements help us style and code in an efficient way with less markup (this is one of the reasons why HTML5 is better).
<!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>
Now we just need to know the new HTML5 for header, footer, nav, section and article Just place the label wherever you want. In contrast to div structured XHTML, the names of the newly introduced tags are self-explanatory.
Step 1 Convert header.php to HTML5
Now I will show you the code commonly used in header.php of XHTML WordPress themes.
XHTML theme 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">
Someone must ask why we do all this? The answer is simple, it is the semantic markup of HTML5. It reduces markup making it very easy to understand and manage.
HTML5 header.php (conversion)
Read the code, then follow the instructions below to convert your theme's header.php to 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">
As you can see, the converted code is very similar to the XHTML code. Let's discuss these changes.
-
– HTML5 has a very simple doctype, but it contains many new semantic tags -
<header></header>– Semantic markup for the header part -
<nav></nav>– We replaced the navbar’sdivcode with a new semantic tag for controlling the navbar in HTML5.
Note: Some people include the section tag in the header. There's a lot of debate about this. I personally object to including the section tag in the header as it ruins the aesthetics of HTML5. Of course you can use the old div there.
What about scripts and stylesheets?
When converting a WordPress theme to HTML5, the scripts and stylesheets included in the header are really simple. In HTML5, we only use the <script></script> and <link> tags. So remove type="text/javascript" - all browsers will treat the <script></script> tag as JavaScript unless you explicitly write its type. Likewise, remove the type="text/css" from the <link> tag in the stylesheet.
Consider old browsers!
Contains HTML shiv to support older browsers. This is a simple JavaScript file. Some examples of shivs are Remy Sharp's HTML5 script or Modernizr script. Let's use Modernizr.
We need to enqueue the script from our functions.php file like this:
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 );
Tips: Put consecutive title tags into <hgroup></hgroup>
Note: This script needs to be placed at the very top inside the <?php wp_head();?> tag, that's why we gave add_action has priority 1.
Step 2Convert index.php to HTML5
Common XHTML index.php consists of the following tags. I will go through the conversion step by step and explain the entire process after conversion.
NOTE: I won't add the entire code here as it will make the post longer for no reason.
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 将用于我们的侧边栏。
-
<section></section>– HTML5 有一个名为section的布局标签，用于分隔其中使用的代码块 -
<article></article>– 帖子部分的语义标签，类似于section -
<aside></aside>– 帖子图像的语义标记，用于将其放在一边和侧边栏 -
面包屑和页面导航– 如果我们的主题有面包屑，那么它们将在div中使用，例如<div class="breadcrumbs">...</div>，对于页面导航，我们将使用<nav id="pgnav" php cngtphpcn...></nav>
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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/887/227/169396399231136.jpg?x-oss-process=image/resize,p_40" class="lazy"template_directory');? alt="Convert your WordPress theme to HTML5" >/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
我们将在侧边栏中使用 <aside></aside> 而不是 div，例如：
XHTML 中的 sidebar.php
<div id="sidebar">...</div>
使用<aside></aside>后变成如下。
HTML5 中的 sidebar.php
<aside id="sidebar">...</aside<
这很简单！
第 4 步 footer.php 编辑
我们将在 footer.php 中使用 <footer></footer> 语义标签而不是简单的 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 标签。如果您愿意，您还可以使用 <time></time> 标签。
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，有些人在帖子标题之前使用 <header class="entry-header"></header> ，这也是一个很好的做法。
第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 排名？请在下面的评论中告诉我们！
The above is the detailed content of Convert your WordPress theme to HTML5. For more information, please follow other related articles on the PHP Chinese website!
How to get logged in user information in WordPress for personalized resultsApr 19, 2025 pm 11:57 PMRecently, we showed you how to create a personalized experience for users by allowing users to save their favorite posts in a personalized library. You can take personalized results to another level by using their names in some places (i.e., welcome screens). Fortunately, WordPress makes it very easy to get information about logged in users. In this article, we will show you how to retrieve information related to the currently logged in user. We will use the get_currentuserinfo(); function. This can be used anywhere in the theme (header, footer, sidebar, page template, etc.). In order for it to work, the user must be logged in. So we need to use
How to display child categories on archive page of parent categoriesApr 19, 2025 pm 11:54 PMDo you want to know how to display child categories on the parent category archive page? When you customize a classification archive page, you may need to do this to make it more useful to your visitors. In this article, we will show you how to easily display child categories on the parent category archive page. Why do subcategories appear on parent category archive page? By displaying all child categories on the parent category archive page, you can make them less generic and more useful to visitors. For example, if you run a WordPress blog about books and have a taxonomy called "Theme", you can add sub-taxonomy such as "novel", "non-fiction" so that your readers can
How to display query count and page loading time in WordPressApr 19, 2025 pm 11:51 PMOne of our users asked other websites how to display the number of queries and page loading time in the footer. You often see this in the footer of your website, and it may display something like: "64 queries in 1.248 seconds". In this article, we will show you how to display the number of queries and page loading time in WordPress. Just paste the following code anywhere you like in the theme file (e.g. footer.php). queriesin
How to sort posts by post expiration date in WordPressApr 19, 2025 pm 11:48 PMIn the past, we have shared how to use the PostExpirator plugin to expire posts in WordPress. Well, when creating the activity list website, we found this plugin to be very useful. We can easily delete expired activity lists. Secondly, thanks to this plugin, it is also very easy to sort posts by post expiration date. In this article, we will show you how to sort posts by post expiration date in WordPress. Updated code to reflect changes in the plugin to change the custom field name. Thanks Tajim for letting us know in the comments. In our specific project, we use events as custom post types. Now
How to easily move your blog from WordPress.com to WordPress.orgApr 18, 2025 am 11:33 AMDo you want to move your blog from WordPress.com to WordPress.org? Many beginners start with WordPress.com but quickly realize their limitations and want to switch to the self-hosted WordPress.org platform. In this step-by-step guide, we will show you how to properly move your blog from WordPress.com to WordPress.org. Why migrate from WordPress.com to WordPress.org? WordPress.com allows anyone to create an account
How to Automate WordPress and Social Media with IFTTT (and more)Apr 18, 2025 am 11:27 AMAre you looking for ways to automate your WordPress website and social media accounts? With automation, you will be able to automatically share your WordPress blog posts or updates on Facebook, Twitter, LinkedIn, Instagram and more. In this article, we will show you how to easily automate WordPress and social media using IFTTT, Zapier, and Uncanny Automator. Why Automate WordPress and Social Media? Automate your WordPre
How to Fix Custom Menu Item Limits in WordPressApr 18, 2025 am 11:18 AMJust a few days ago, one of our users reported an unusual problem. The problem is that he reaches the limit of custom menu items. Any content he saves after reaching the menu item limit will not be saved at all. We've never heard of this issue, so we decided to give it a try on our local installation. More than 200 menu items were created and saved. The effect is very good. Move 100 items to the drop-down list and save them very well. Then we knew it had to do with the server. After further research, it seems that many others have encountered the same problem. After digging deeper, we found a trac ticket ( #14134 ) that highlighted this issue. Read very
How to add custom metafields to custom classification in WordPressApr 18, 2025 am 11:11 AMDo you need to add custom metafields to custom taxonomy in WordPress? Custom taxonomy allows you to organize content besides categories and tags. Sometimes it is useful to add other fields to describe them. In this article, we will show you how to add other metafields to the taxonomy they create. When should custom metafields be added to custom taxonomy? When you create new content on your WordPress site, you can organize it using two default taxonomy (category and tag). Some websites benefit from the use of custom taxonomy. These allow you to sort content in other ways. For example,
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
WebStorm Mac version
Useful JavaScript development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Zend Studio 13.0.1
Powerful PHP integrated development environment
