Convertissez votre thème WordPress en HTML5-WordPresse-php.cn

HTML5 introduit une gamme de nouvelles fonctionnalités intéressantes et d'options simples. Bientôt, il sera entièrement pris en charge par la plupart des navigateurs utilisés aujourd'hui. À terme, tout le monde devra convertir ses thèmes WordPress de XHTML en HTML5. Après la mise à jour Panda de Google, votre site Web a besoin d'un code plus clair et plus facile à lire pour être mieux classé sur Google. Je vais vous apprendre à convertir votre thème de XHTML en HTML5. Nous nous occuperons également des 2% d'internautes qui ont désactivé JavaScript (pour des raisons de rétrocompatibilité).

Notre objectif

Dans ce tutoriel, nous nous concentrerons sur la conversion d'un thème WordPress de XHTML en HTML5. Nous vous guiderons pas à pas à travers les modifications à travers les fichiers répertoriés ci-dessous (ces fichiers se trouvent dans le dossier de votre thème, c'est-à-dire wp-content/themes/yourtheme/ici ! )

header.php
index.php
sidebar.php :
footer.php
single.php(facultatif)

Mise en page HTML5 de base

Jetons un coup d'œil à la mise en page HTML5 de base que nous allons créer. HTML5 est plus qu'un simple type de document au début du code. Plusieurs éléments nouvellement introduits nous aident à styliser et à coder de manière efficace avec moins de balisage (c'est l'une des raisons pour lesquelles HTML5 est meilleur).

<!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>

Copier après la connexion

Il ne nous reste plus qu'à savoir header、footer、nav、section 和 article 的新 HTML5 标签放在哪里即可。与 div Comparé au XHTML structuré, le nom de la balise nouvellement introduite est explicite.

Étape 1 Convertir header.php en HTML5

Maintenant, je vais vous montrer le code couramment utilisé dans header.php des thèmes WordPress XHTML.

En-tête du thème XHTML.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">

Copier après la connexion

Quelqu’un doit se demander pourquoi nous faisons tout cela ? La réponse est simple, c'est le balisage sémantique du HTML5. Il réduit le balisage, ce qui le rend très facile à comprendre et à gérer.

En-tête HTML5.php (conversion)

Lisez le code et suivez les instructions ci-dessous pour convertir le header.php de votre thème en 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">

Copier après la connexion

Comme vous pouvez le constater, le code converti est très similaire au code XHTML. Discutons de ces changements.

<!doctype html> – HTML5 a un doctype très simple, mais il inclut de nombreuses nouvelles balises sémantiques
<header> – Balisage sémantique pour les parties d'en-tête
<nav> – 我们用一个新的语义标签替换了导航栏的 div Code pour contrôler la barre de navigation en HTML5.

Remarque : Certaines personnes incluent section 标记。关于这一点有很多争论。我个人反对在标头中包含 section 标签，因为它会破坏 HTML5 的美感。当然，您可以在那里使用旧的 div dans l'en-tête.

Qu'en est-il des scripts et des feuilles de style ?

Lors de la conversion d'un thème WordPress en HTML5, les scripts et feuilles de style inclus dans l'en-tête sont vraiment simples. En HTML5, nous utilisons simplement <script> 和 <link> 标签。因此，删除 type="text/javascript" - 所有浏览器都会将 <script> 标记视为 JavaScript，除非您明确写入其类型。同样，从样式表的 <link> 标记中删除 type="text/css".

Pensez aux anciens navigateurs !

Contient du HTML shiv pour prendre en charge les anciens navigateurs. Il s'agit d'un simple fichier JavaScript. Quelques exemples de shivs sont le script HTML5 de Remy Sharp ou le script Modernizr. Utilisons Modernizr.

Nous devons mettre le script en file d'attente à partir de notre fichier function.php comme ceci :

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 );

Copier après la connexion

Conseil : Mettez des balises de titre consécutives dans <hgroup>

Remarque : Ce script doit être placé <?php wp_head(); 内部的最顶部?> 标签，这就是为什么我们给 add_action avec la priorité 1.

Convertissez votre thème WordPress en HTML5

Étape 2Convertir index.php en HTML5

Common XHTML index.php se compose des balises suivantes. Je vais parcourir la conversion étape par étape et expliquer l'ensemble du processus après la conversion.

REMARQUE : Je n'ajouterai pas l'intégralité du code ici car cela allongerait la publication sans raison.

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(); ?>

Copier après la connexion

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(); ?>

Copier après la connexion

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

<section> – HTML5 有一个名为 section 的布局标签，用于分隔其中使用的代码块
<article> – 帖子部分的语义标签，类似于 section
<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="<?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>

Copier après la connexion

第 3 步处理 sidebar.php

我们将在侧边栏中使用 <aside> 而不是 div，例如：

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

Copier après la connexion

使用<aside>后变成如下。

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

Copier après la connexion

这很简单！

第 4 步 footer.php 编辑

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

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

Copier après la connexion

<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>

Copier après la connexion

第 5 步处理 single.php

single.php 没有什么特别的变化，所以我只是粘贴更改后的代码，这可能对一些初学者有帮助。我在其中使用了 section 和 article 标签。如果您愿意，您还可以使用 <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(); ?>

Copier après la connexion

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(); ?>

Copier après la connexion

注意： 关于SEO，有些人在帖子标题之前使用 <header class="entry-header"> ，这也是一个很好的做法。

第6步最后是style.css

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

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

Copier après la connexion

附加说明

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

HTML5 资源

HTML5 备忘单
HTML5 教程
HTML5 演示

一些 HTML5 免费主题

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

现在轮到你了

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

1 Il y a quelques mois By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7640

Tutoriel CakePHP

1391

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

150

Afficher plus

Related knowledge

WordPress est-il facile pour les débutants? Apr 03, 2025 am 12:02 AM

WordPress est facile pour les débutants de commencer. 1. Après se connecter à l'arrière-plan, l'interface utilisateur est intuitive et le tableau de bord simple fournit tous les liens de fonction nécessaires. 2. Les opérations de base incluent la création et l'édition de contenu. L'éditeur WYSIWYG simplifie la création de contenu. 3. Les débutants peuvent étendre les fonctions du site Web via des plug-ins et des thèmes, et la courbe d'apprentissage existe mais peut être maîtrisée par la pratique.

Comment commencer un blog WordPress: un guide étape par étape pour les débutants Apr 17, 2025 am 08:25 AM

Les blogs sont la plate-forme idéale pour que les gens expriment leurs opinions, opinions et opinions en ligne. De nombreux débutants sont impatients de créer leur propre site Web, mais hésitent à s'inquiéter des obstacles techniques ou des problèmes de coûts. Cependant, comme la plate-forme continue d'évoluer pour répondre aux capacités et aux besoins des débutants, il commence maintenant à devenir plus facile que jamais. Cet article vous guidera étape par étape comment créer un blog WordPress, de la sélection de thème à l'utilisation des plugins pour améliorer la sécurité et les performances, vous aidant facilement à créer votre propre site Web. Choisissez un sujet et une direction de blog Avant d'acheter un nom de domaine ou d'enregistrer un hôte, il est préférable d'identifier les sujets que vous prévoyez de couvrir. Les sites Web personnels peuvent tourner autour des voyages, de la cuisine, des critiques de produits, de la musique ou de tout passe-temps qui suscite vos intérêts. Se concentrer sur les domaines qui vous intéressent vraiment peuvent encourager l'écriture continue

À quoi sert WordPress? Apr 07, 2025 am 12:06 AM

WordPressisGoodForvirontuallyAnyWebprojectDuetOtsSversatityAsacms.itexcelsin: 1) une convivialité, permettant à la manière

Puis-je apprendre WordPress en 3 jours? Apr 09, 2025 am 12:16 AM

Peut apprendre WordPress dans les trois jours. 1. Master les connaissances de base, telles que les thèmes, les plug-ins, etc. 2. Comprenez les fonctions principales, y compris les principes d'installation et de travail. 3. Apprenez l'utilisation de base et avancée à travers des exemples. 4. Comprendre les techniques de débogage et les suggestions d'optimisation des performances.

Dois-je utiliser Wix ou WordPress? Apr 06, 2025 am 12:11 AM

Wix convient aux utilisateurs qui n'ont aucune expérience de programmation, et WordPress convient aux utilisateurs qui souhaitent plus de capacités de contrôle et d'extension. 1) Wix fournit des éditeurs de glisser-déposer et des modèles riches, ce qui facilite la création d'un site Web rapidement. 2) En tant que CMS open source, WordPress possède un énorme écosystème communautaire et plug-in, soutenant la personnalisation et l'expansion approfondies.

Combien coûte WordPress? Apr 05, 2025 am 12:13 AM

WordPress lui-même est gratuit, mais il en coûte supplémentaire à utiliser: 1. WordPress.com propose un package allant du gratuit à payant, avec des prix allant de quelques dollars par mois à des dizaines de dollars; 2. WordPress.org nécessite l'achat d'un nom de domaine (10-20 dollars américains par an) et des services d'hébergement (5-50 dollars américains par mois); 3. La plupart des plug-ins sont gratuits, et le prix payant se situe entre des dizaines et des centaines de dollars; En choisissant le bon service d'hébergement, en utilisant des plug-ins et des thèmes raisonnablement, et en maintenant et en maintenant régulièrement, le coût de WordPress peut être efficacement contrôlé et optimisé.

WordPress est-il toujours gratuit? Apr 04, 2025 am 12:06 AM

La version principale de WordPress est gratuite, mais d'autres frais peuvent être engagés pendant l'utilisation. 1. Les noms de domaine et les services d'hébergement nécessitent un paiement. 2. Des thèmes et des plug-ins avancés peuvent être facturés. 3. Les services professionnels et les fonctionnalités avancées peuvent être facturés.

Pourquoi quelqu'un utiliserait-il WordPress? Apr 02, 2025 pm 02:57 PM

Les gens choisissent d'utiliser WordPress en raison de son pouvoir et de sa flexibilité. 1) WordPress est un CMS open source avec une forte facilité d'utilisation et une évolutivité, adaptée à divers besoins en site Web. 2) Il a des thèmes et des plugins riches, un énorme écosystème et un fort soutien communautaire. 3) Le principe de travail de WordPress est basé sur des thèmes, des plug-ins et des fonctions de base, et utilise PHP et MySQL pour traiter les données, et prend en charge l'optimisation des performances.

See all articles

Convertissez votre thème WordPress en HTML5

Notre objectif

Mise en page HTML5 de base

Étape 1 Convertir header.php en HTML5

En-tête du thème XHTML.php

En-tête HTML5.php (conversion)

Qu'en est-il des scripts et des feuilles de style ?

Pensez aux anciens navigateurs !

Étape 2Convertir index.php en HTML5

XHTML索引.php

HTML5 index.php（转换）

HTML5 中的完整 Index.php

第 3 步 处理 sidebar.php

XHTML 中的 sidebar.php

HTML5 中的 sidebar.php

第 4 步 footer.php 编辑

XHTML 中的 footer.php

HTML5 中的 footer.php

第 5 步处理 single.php

XHTML 中的 single.php

HTML5 中的 single.php

第6步最后是style.css

附加说明

HTML5 资源

一些 HTML5 免费主题

现在轮到你了

Outils d'IA chauds

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Article chaud

Outils chauds

Bloc-notes++7.3.1

SublimeText3 version chinoise

Envoyer Studio 13.0.1

Dreamweaver CS6

SublimeText3 version Mac

Sujets chauds

第 3 步处理 sidebar.php