WordPress et HTML5

Le nouveau thème est maintenant terminé. Son développement m’a permis de travailler sur deux technos: le couple HTML5/CSS3 d’une part, et le « Responsive Design » d’autre part.
Il est donc temps de faire un point sur ces techniques, en commençant par HTML5 et CSS3. Est-ce différent de développer un site conforme HTML5/CSS3, est-ce plus complexe?

Lorsque j’ai démarré le développement de ce thème, l’objectif était d’obtenir quelque chose le plus conforme possible à HTML 5, tout en restant compatible avec des navigateurs du type Internet Explorer 7 ou Firefox 3.

La démarche utilisée comportait trois étapes:

Structure globale d’une page

La structure que j’ai adopté, reprend globalement les conventions prises par ces thèmes. Ces conventions sont assez logiques, et constituent un bon compromis, entre respect de la sémantique des balises, et facilitée de développement.

Une page listant les articles ressemble à cela:

Liste des articles

Une page article ressemble à cela:

Affiche d"un article et des commentaires

Pour résumer ces choix

  • Utiliser la balise <aside> pour marquer la sidebar n’est pas correct, parce que le contenu de cette sidebar n’a pas forcement de rapport avec l’article, et <aside> doit désigner un contenu. La balise <section> dans ce cas est plus logique,
  • La partie principale du site, celle qui présente le contenu est également une balise <section>, avec un attribut ARIA role="main",
  • A l’intérieur de la sidebar, les widgets utilisent la balise <aside>, sans distinction. Il est trop compliqué de différencier les widgets en fonction de leur contenu. Le choix de la balise <div> ici est tout aussi correct,
  • Je me suis longtemps posé la question sur les commentaires: balise <aside>, <section>? Finalement, j’ai choisi <aside>, tout simplement parce que les commentaires sont bien liés sémantiquement à l’article auquel ils sont rattachés,
  • Chaque commentaire est contenu dans une balise <article> pour indiquer qu’ils sont considérés comme du contenu.

Réalisation

La réalisation suit un processus tout à fait classique. HTML5 n’apporte aucun particularité / difficulté supplémentaire. Les personnalisations sont relativement limitées. J’en ai noté trois principales:

  • Les menus,
  • Les widgets,
  • Les commentaires

Les menus

Pour que les menus utilisent bien la balise <nav>, et pas <div>, deux méthodes possibles:

  • Spécifier la balise lors des appels à ces menus,
  • Gérer soit même les balises <nav>.

Pour la première méthode:

wp_nav_menu( array(  'theme_location' =&gt; '... ', 'container' =&gt; 'nav', 'container_id' =&gt; 'main-menu') );

Pour la seconde:

&lt;nav role="navigation" class="main-menu"&gt;
    &lt;?php wp_nav_menu( array( 'theme_location' =&gt; '... ' ) ); ? &gt;
&lt;/nav&gt;

La première méthode est plus concise, la seconde permet d’ajouter des éléments entre la conteneur <nav>, et le menu proprement dit, et de gérer les attributs ARIA comme role="navigation". La seconde méthode est utilisée dans les thèmes Twenty Eleven.

Les widgets

Habituellement, les widgets sont contenus dans des balises <div>. Si vous souhaitez utiliser d’autres balises, comme <aside>, la méthode est strictement la même. Dans le fichier functions.php, le code doit être:

function my_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Main Sidebar', 'textdomain' ),
        'id' =&gt; 'sidebar-1',
        'before_widget' =&gt; '&lt;aside id="%1$s" class="widget %2$s"&gt;',
        'after_widget' =&gt; "&lt;/aside&gt;",
        'before_title' =&gt; '&lt;h3 class="widget-title"&gt;',
        'after_title' =&gt; '&lt;/h3&gt;'
    ) );
}
add_action( 'widgets_init', 'my_widgets_init' );

Comme HTML5 spécifie qu’il ne faut utiliser les balises dites sémantiques pour faire du positionnement, vous pouvez ajouter un conteneur supplémentaire, à l’intérieur, ou à l’extérieur de la base <aside>.

 ... ...
'before_widget' =&gt; '&lt;div class="widget_wrapper"&gt;&lt;aside id="%1$s" class="widget %2$s"&gt;',
'after_widget' =&gt; "&lt;/aside&gt;&lt;/div&gt;",
... ...

Les commentaires

Les thèmes comme Twenty Eleven, adoptent la structure suivante:

&lt;div id="comments"&gt;
    &lt;h2 id="comments-title"&gt; ... ... &lt;/h2&gt;
    &lt;nav id="comment-nav-above"&gt;
        &lt;h1 class="assistive-text section-heading"&gt;Comment navigation&lt;/h1&gt;
        &lt;div class="nav-previous"&gt;Older Comments&lt;/div&gt;
        &lt;div class="nav-next"&gt;Newer Comments&lt;/div&gt;
    &lt;/nav&gt;
    &lt;ol class="commentlist"&gt;
        &lt;li&gt;
            &lt;article&gt;
                &lt;footer class="comment-meta"&gt;
                    ... ...
                &lt;/footer&gt;
                &lt;div class="comment-content"&gt;
                    ... ...
                &lt;/div&gt;
                &lt;div class="reply"&gt;
                    ... ...
            &lt;/div&gt;
            &lt;/article&gt;
        &lt;/li&gt;
        &lt;li&gt;
            ... ...
        &lt;/li&gt;
    &lt;/ol&gt;
&lt;/div&gt;

J’ai préféré simplifier la structure en n’utilisant pas de liste ol/li. J’ai également choisi de placer tous les commentaires dans une balise <aside>:

&lt;aside id="comments"&gt;
    &lt;h2 id="comments-title"&gt; ... ... &lt;/h2&gt;
    &lt;nav id="comment-nav-above"&gt;
        &lt;h1 class="assistive-text section-heading"&gt;Comment navigation&lt;/h1&gt;
        &lt;div class="nav-previous"&gt;Older Comments&lt;/div&gt;
        &lt;div class="nav-next"&gt;Newer Comments&lt;/div&gt;
    &lt;/nav&gt;
    &lt;article&gt;
        &lt;header class="comment-meta"&gt;
            ... ...
        &lt;/header&gt;
        &lt;div class="comment-content"&gt;
            ... ...
        &lt;/div&gt;
        &lt;footer class="reply"&gt;
            ... ...
        &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article&gt;
            ... ...
    &lt;/article&gt;
&lt;/aside&gt;

Dans tous les cas, la structure de base, proposée par WordPress n’inclut aucune balise HTML 5. Il faut donc, à la fois, personnaliser le formulaire, mais également la fonction d’affichage des commentaires.

Je conseille d’utiliser, comme point de départ, ce qui a été développé dans Twenty Eleven: la fonction twentyeleven_comment du fichier functions.php, ainsi que le fichier comments.php.

N’oublions pas le contenu

A ce stade, nous avons un thème dont la structure est conforme à HTML5. Le contenu sera donc intégré dans cette structure. Notre site sera donc conforme, si ce contenu est conforme.

Hors le contenu peut inclure des shortcodes qu’il faudra donc également adapter. Les deux shortcodes qui viennent immédiatement à l’esprit sont [ caption] et [ gallery]. HTML5 propose en effet deux balises pour la présentation des images <figure> pour l’image elle-même, et <figcaption> pour la légende de cette image.

Nous verrons dans de prochains articles, comment personnaliser ces shortcodes.

Partir de zéro, ou réutiliser un thème?

Lorsque j’ai démarré le développement de ce thème, je me suis assez vite posé la question. En effet, des thèmes comme Twenty Eleven

  • correspondent à l’état de l’art en terme de développement de thèmes pour WordPress,
  • sont à la fois basiques du point de vue de la structure du design, et complets du point de vue de WordPress, des standards d’accessibilité, …
  • sont basés sur de bons compromis entre contrainte de développement WordPress, et respect des standards HTML / CSS.

La sortie de Twenty Twelve, et de _S (avec quelques explications ICI) n’ont fait que renforcer mon opinion.

En partant d’un thème déjà fait, nous obtenons des résultats plus rapides, et de meilleure qualité: plus rapide parce qu’il y a moins de chose à écrire, parce que les recherches dans le Codex sont moins nombreuses. Meilleure qualité, parce que ces thèmes incluent, en général, un grand nombre de templates, censées couvrir tous les besoins.

Conclusion

Le développement de ce thème m’amène à trois commentaires principaux:

  • D’abord, obtenir un code HTML conforme à HTML5 nécessite un développement particulier du thème, mais également des aménagements complémentaires d’autres éléments comme les shortcodes,
  • Ensuite, il est plus pratique et efficace de partir d’un thème existant, et de le transformer.

En partant d’un thème, nous gagnons un temps non négligeable, pour nous concentrer sur les personnalisations poussées. Le thème _S a d’ailleurs été développé dans ce but.

Dans deux prochains articles, j’aborderai les shortcodes [ caption] ou [ gallery].

2 thoughts on “WordPress et HTML5”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *