41Mag - Convertir son thème WordPress au HTML5

Convertir son thème WordPress au HTML5

Le HTML5 introduit un grand nombre de nouvelles fonctionnalités et d’options (structuration, vidéo, mp3 …). Bientôt, il aura le plein soutien de la plupart des navigateurs en usage aujourd’hui. Tout le monde aura à convertir son thèmes WordPress à partir du xHTML vers le HTML5. Après la mise à jour Panda de Google, votre site a besoin d’un code plus clair et plus lisible pour mieux se placer sur Google. Je vais vous apprendre comment convertir votre thème WordPress du xHTML au HTML5. Nous allons également prendre soin de quelques personnes dont le JavaScript est désactiver.

Informations complémentaires : xHTML et HTML5 / Le Doctype et ses balisesQu’est-ce que le HTML5 ?A quoi sert-il ?

Dans ce tutoriel, nous allons nous concentrer sur la conversion de notre thème WordPress à partir du xHTML vers le HTML5. Nous allons y aller étape par étape, nous effectuerons des changements à travers les fichiers listés ci-dessous (ces fichiers sont présents dans votre dossier de thème, c’est à dire : wp-content/themes/votreTheme/Fichier_a_modifier)

  • header.php
  • index.php
  • sidebar.php
  • footer.php
  • single.php

Structuration classique en HTML5

Pour commencer, jetons un coup d’oeil à la disposition du document HTML5 de base que nous souhaitons construire. La conversion en HTML5 ne se résume pas modifier uniquement le doctype au début de votre code. Plusieurs éléments nouvellement introduits vont optimiser de manière efficace notre code source.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Titre du site ou blog</title>
</head>
<body>
    <nav role="navigation"></nav>
<!--fin header.php-->
<!--debut  index.php-->
    <section id="content">
        <article role="main">
            <h1>Titre de l'article</h1>
            <time datetime="YYYY-MM-DD"></time>
            <p>Texte de votre article</p>
            <p>Fin du texte de votre article</p>
        </article>
 
        <aside role="sidebar">
            <h2>Widget de la colonne lateral</h2>
        </aside>
    </section>
<!--fin index.php-->
<!--debut  footer.php-->
    <footer role="foottext">
        <small>Copyright ou footer</small>
    </footer>
</body>
</html>

Il nous suffit maintenant de savoir où mettre les nouvelles balises HTML5 du leader, footer,nav, section et article. Les noms des variables nouvellement introduites sont explicites au sujet de leur fonction, en contraste avec les div du xHTML.

Convertir le fichier header.php en HTML5

Voici le code couramment utilisé dans les header.php de thèmes WordPress en xHTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre du site ou blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header  -->
<div class="header">
    <div class="container">
        <h1><a href="<?php bloginfo('url');?>">Infos du site ou blog</a></h1>
    </div><!-- End  Container -->
</div><!-- End  Header -->
 
<!-- Navigation -->
<div class="navbar">
    <div class="container">
        <ul class="grid nav_bar">
            <?php wp_list_categories('navs_li='); ?>
         </ul>
    </div>
</div>
<!-- End  Navigation  -->
<div class="container">

Pourquoi faisons-nous tout cela ? La réponse est simple : pour le balisage sémantique du HTML5. Il réduit le balisage, ce qui le rend très facile à comprendre et à gérer ainsi, Google le lira plus facilement et votre positionnement sera optimisé.

Conversion du fichier header.php au HTML5

Veuillez Lire le code ci-dessous, puis suivez les instructions pour convertir le fichier header.php de votre thème en HTML5.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
<head>
<title>Titre de mon site ou blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<header>
    <div class="container">
        <h1 class="grid"><a href="<?php bloginfo('url');?>">Infos sur mon blog</a></h1>
    </div>
</header>
<!-- End Header  -->
 
<!-- Navigation -->
<nav>
    <div class="navbar">
        <ul class="grid nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</nav>
<!-- End  Navigation -->
<section class="container">

Comme vous pouvez le constater le code converti est très similaire au code xHTML. Voici les principaux changements :

  • <DOCTYPE html!> – Le HTML5 a un doctype ( en savoir plus sur le doctype HTML5) vraiment simple, mais il comprend beaucoup de nouvelles balises sémantiques
  • <header> – La balise sémantique pour la partie en-tête
  • <nav> – Nous avons remplacé le code div la barre de navigation avec une nouvelle étiquette sémantique utilisée pour contrôler la barre de navigation en HTML5.

Note : Certaines personnes inclus la balise section dans le header. Il ya beaucoup de débat à ce sujet. Personnellement, je suis contre l’inclusion de cette balise dans le header car il va détruire la simplicité du HTML5. Vous pouvez utiliser la balise div à la place.

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

Les scripts et les feuilles de style sont inclus dans le header. Lors de la conversion d’un thème WordPress pour HTML5, c’est vraiment très simple. En HTML5 nous utilisons simplement la balise <script> et les balises <link>. Vous pouvez donc retirer l’attribut type=’text / javascript’ – tous les navigateurs comprennent que la balise <script> et pour le JavaScript, sauf si vous souhaitez écrire explicitement son type. De même pour la balise <link>, vous pouvez retirer l’attribut type=’text / css’ pour les feuilles de style.

Compatibilité avec les anciens navigateurs

HTML Shiv est inclus pour le support des anciennes versions de navigateurs. C’est un simple fichier JavaScript.

Nous aurons besoin d’écrire sur notre fichier functions.php les quelques lignes de code suivantes pour assurez la compatibilité, comme ceci:

1
2
3
4
5
6
7
8
9
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 );

Astuce : Placez les balises de titre qui se produisent consécutivement à l’intérieur à l’interieur de la balise <hgroup>.

Remarque : Ce script doit être placé tout en haut à l’intérieur de l’emplacement <?php wp_head(); ?> , c’est pourquoi nous avons donné le add_action une priorité de 1.

Header wordpress en HTML5

Convertir le fichier index.php en HTML5

Un fichier index.php quelconque en xHTML comprend les balises suivantes. Nous allons convertir chacune d’entre elles, en vous détaillant tout le processus.

Le fichier index.php en xHTML

1
2
3
4
5
6
7
8
9
10
<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(); ?>

Noté que je n’ai pas écris tous le code en entier car cela aurais alourdis notre exemple inutilement.

Fichier index.php en HTML5

Convertir le fichier index.php en HTML5

1
2
3
4
5
6
7
8
9
<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(); ?>

Avant de regarder les changements effectués, il faut savoir que le HTML5 nous fournit trois nouvelles balises de base de mise en page: section, article et aside. Section remplacera par les div entries, article remplacera les div post, et aside sera utilisé pour notre colonne latérale un peu plus tard.

  • <section> – HTML5 a un calque de mise en page appelé section qui sépare un bloc de code
  • <article> – Une balise sémantique pour la partie du post (article), semblable à la balise article
  • <aside> – Une balise sémantique pour les images de ce post (article) pour les mettre sur le côté et / ou pour les colonnes latérales
  • Breadcrumbs et navigation – Si votre thème a des calques Breadcrumbs, ils seront utilisés dans un calque div tel que <div class=’breadcrumbs’> … </div> et pour la navigation de page, nous utilisererons <nav id=’pgnav’>…</nav>

fichier index.php en HTML5

Compléter le fichier index.php en HTML5

Note : Voici un fichier index.php converti en HTML5 complètement. C’est un exemple Général.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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 ">Lire la suite</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>

Convertir le fichier sidebar.php en HTML5

Nous allons utiliser dans notre sidebar – colonne latérale – la balise <aside> au lieu d’un calque symbolisé par la balise <div>, comme dans l’exemple ci-dessous :

Le fichier sidebar.php en xHTML

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

Convertir le fichier sidebar.php en HTML5

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

La conversion du fichier sidebar.php du xHMTL au HTML5 est très simple !

Le fichier sidebar.php en HTML5

Convertir le fichier footer.php en HTML5

Nous allons utiliser la balise <footer> pour optimiser la sémantique au lieu d’un simple div pour le fichier footer.php, comme dans l’exemple ci-dessous :

Le fichier footer.php en xHTML

1
2
3
4
5
6
7
<div id="footer">
<div id="foot_widgets">...</div>
<div id="copyright">...</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

le fichier footer.php en HTML5

Convertir le fichier footer.php en HTML5

1
2
3
4
5
6
7
8
9
<footer id="footer">
<section class="foot_widgets">...</section>
<section class="foot_widgets">...</section>
<section class="foot_widgets">...</section>
<div id="copyright">...</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Modifier le fichier single.php

Il n’ya aucun changement majeur dans single.php. Voici le code modifié, il pourrait être utile à certains d’entre vous qui sont débutants. J’ai utilisé des balises section et article. Vous pouvez également utiliser la balise <time> si vous le souhaitez.

Le fichier single.php en xHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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(); ?>

Le fichier single.php en HTML5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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"> Posté par:
          <?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(); ?>

Remarque : En ce qui concerne le référencement, certaines personnes utilisent l’attribut class=’entry-header’ pour la balise <header> avant les titres des posts (article), ce qui est également une bonne pratique.

Et enfin, les feuilles de style, le fichier style.css

Une chose importante est la question de compatibilité, être sur que les anciens navigateurs affichent les nouveaux éléments HTML5 sous forme de bloque. Il vous suffit de rajouter le code suivant au début de vos style.css (après les reset …) :

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

Ressources additionnelles

Si vous utilisez des fichiers audio ou vidéo intégrée dans un fichier de modèle, vous devez utiliser les éléments audio HTML5 et des éléments vidéo.

[cadreHTML5]

Article du même thême : .

  • Philippe da Cruz

    Attention pour le doctype c’est et non :)

  • Philippe da Cruz

    Merci pour ce post qui est simple à suivre mais attention, pour le doctype c’est !DOCTYPE html et non DOCTYPE html!.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.