WordPress A à Z

Création de site WordPress de A à Z — B comme Basics

Je comptais terminer la série WordPress de A à Z avec la livraison d’un thème de base, mais il m’a semblé que livrer un thème minimaliste dès le début serait une meilleure idée. J’ai donc plongé plus profondément dans le Codex pour voir si l’eau était bonne. J’en ai profité pour organiser concrètement les éléments abordés dans WordPress de A à Z — A comme Allons-y ! : installer la dernière version de WordPress en français et HTML5 Boilerplate, puis ajouter les fonctionnalités du moteur de WordPress à l’aide du Codex. A l’issue de cet article, vous aurez donc un Blank Theme qui servira de support pour la suite des articles de cette série et de base pour de nouveaux thèmes WordPress. Dans cet article, j’ai choisi de détailler (parfois brièvement) l’ensemble des éléments composant Basics. D’autres articles viendront bientôt pour justifier certains choix ou expliciter certaines notions ; il reste encore pas mal de lettres dans l’alphabet après la lettre «B» 😉 Voici le sommaire complet des 26 articles de WordPress de A à Z.

Articles déjà publiés dans la série WordPress de A à Z :


  1. Logo « WordPress je thème »
  2. WordPress de A à Z… avec le Codex
  3. A comme Allons-y !
  4. Vous lisez : B comme Basics
  5. Prochain article : C comme Commentaires

→ WordPress Basics.

Note : Ce lien pointera toujours vers la dernière version du thème Basics qui sera en évolution quasi permanente pour refléter les progrès de la science, mais aussi et surtout pour la correction des bugs qui ne manquent jamais de survenir aux endroits où on les attend le moins. Par conséquent, il y aura des différences entre les exemples de code présentés ici et le thème Basics. Nhésitez pas à me faire parvenir vos suggestions pour améliorer Basics dans les commentaires ou à l’adresse bruno.bichet@gmail.com

Basics, un thème WordPress basique

Basics est composé d’un fichier index.php et d’une feuille de style CSS. Pour des raisons de modularité qui deviendront évidentes à mesure que la série WordPress de A à Z s’étoffera — un thème un peu complexe nécessite souvent plusieurs fichiers –, index.php est scindé en plusieurs fichiers : header.php, sidebar.php, footer.php eux-même éventuellement constitués de plusieurs parties.

Ce système de construction gigogne permettra de créer facilement un nouveau thème. Il suffira de dupliquer et de renommer index.php en single.php, category.php ou tag.php, etc., pour modifier l’affichage des différents contextes d’affichage.

Comme on a souvent besoin d’afficher des boucles personnalisées sur la page d’accueil, j’ai également inclus un fichier home.php qui sera utilisé par WordPress pour afficher la page d’accueil. Ce fichier contient un exemple de boucle que vous pourrez adapter. Si vous n’en n’avez pas besoin, faites glisser home.php dans le dossier /utils et n’en parlons plus.

Basics contient également une page 404.php pour permettre aux visiteurs de trouver ce qu’ils sont venu chercher, lorsque vos pages sont «aux fraises».

Basics à la maison

La meilleure façon d’apprendre, c’est de faire soi-même. C’est pourquoi, je vous invite à télécharger et à installer les éléments suivants :

  1. Version française de la dernière version de WordPress,
  2. HTML5 Boilerplate,
  3. Le serveur Apache, PHP & MySQL WampServer.

Le serveur web s’installe comme n’importe quel logiciel. L’important est de repérer son emplacement et de naviguer dans l’arborescence pour trouver le dossier /www  dans lequel vous y installerez le dossier wordpress une fois «dézippé». Il suffira ensuite de copier le contenu de HTML5 Boilerplate dans le dossier themes  de wordpress. Et voilà !

Pssst, n’oubliez pas d’emporter le Codex avec vous 😉

HTML5 Boilerplate

J’ai opté pour la version sans commentaire, mais rien ne vous empêche d’utiliser la version complète ou personnalisée.

Pour commencer, je vais alimenter les fichiers header.php et footer.php avec H5BP. Je m’occuperai ensuite du fichier index.php proprement dit. Pour connaitre les explications concernant le contenu de H5BP, je vous conseille la lecture de la documentation officielle.

functions.php

Pour éviter certaines redondances que l’on retrouve souvent dans les thèmes, j’ai regroupé certaines portions de code dans le fichier functions.php. Certains préfèrent inclure ces bouts de code dans des fichiers à la racine du thème ou dans un dossier /inc/.

C’est un choix tout aussi judicieux, mais je voulais éviter : 1) d’augmenter le nombre de fichiers déjà conséquent pour un thème «basique», et 2) permettre de redéfinir ces fonctions dans le fichier functions.php d’un thème enfant (Child Theme) grâce à la vérification suivante :

<?php if ( ! function_exists( 'basics_title' ) ) :
    function basics_title() {...}
endif; ?>

Si la fonction basics_title() n’a pas été redéfinie dans le fichier functions.php de votre thème enfant, c’est la fonction basics_title() du thème Basics qui sera prise en compte.

La mise en place d’un thème enfant n’est pas obligatoire pour créer votre thème avec Basics. Il est tout à fait possible de modifier directement  functions.php de Basics et dupliquer les fichiers index.php ou home.php pour adapter les Templates à votre projet de site web.

phpDocumentor

Au début de chaque fichier, je précise quelques informations avec la syntaxe PHPDoc qui permet de générer une documentation d’après des commentaires formatés.

<?php
/**
* @package WordPress
* @subpackage Basics
* @author Bruno Bichet <bruno.bichet@gmail.com>
* @version 0.1
* @since Version 0.1
* @todo Check the markup http://validator.w3.org/
*/
?>

→ Ressources :

Internationalisation

Basics est prêt à chanter l’Internationale dans la langue de votre choix ! Toutes les chaines de caractères sont situées dans les fonctions prévues à cet effet :

  • __( 'Ma chaine', 'basics' ) — Retourne le résultat « Ma chaine » dans une fonction
  • _e( 'Ma chaine', 'basics' ) — Affiche « Ma chaine » (équivalent à echo __( 'Ma chaine', 'basics' )
  • etc.

J’ai choisi de conserver l’anglais comme langue de départ afin d’ajouter facilement des portions de code en provenance du Codex dont les exemples sont dans cette langue.

→ Ressources :

header.php

Doctype HTML5 et balise <html>

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->

Le Doctype précise le type du document. Il permet principalement au navigateur de savoir ce qu’il doit afficher. En effet, il n’existe pas qu’une seule version de HTML. On trouve : HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict.

Le Doctype permet de proposer les pages au validateur, tout en permettant de faire basculer Internet Explorer dans le model de boite standard, ce qui est bien pratique.

→ Ressources :

Classes pour cibler IE9

j’ai effectué quelques changements par rapport à H5BP :

  • Ajout des classes `.ie` pour cibler d’un seul coup toutes les versions d’Internet Explorer «au cas où»,
  • Ajout de la classe `.ie9` : je ne partage pas l’optimisme de Paul Irish quand à la capacité d’IE9 de se comporter comme Firefox, Google Chrome ou Opera… J’espère toutefois que Microsoft rendra une copie correcte avec IE 10 😉
Attributs de langue

J’ai remplacé la propriété en et l’attribut lang par la fonction <?php language_attributes(); ?> pour obtenir les informations concernant la langue et le sens de lecture du site.

→ Ressources :

<head>

Cette balise regroupe un ensemble de meta-données sur votre document.

<head>

Ouverture de la balise head.

→ Ressources :

Jeu de caractère (Charset)

<meta charset="<?php bloginfo( 'charset' ); ?>">

Encodage des caractères utilisés dans le document.

→ Ressources :

X-UA-Compatible

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->

Force l’utilisation du moteur de rendu le plus récent disponible dans les navigateurs Internet Explorer à partir de la version 8.

→ Ressources :

<title>

<title><?php echo basics_title(); ?></title>

Ce titre identifie le document. Afficher le nom du site seul n’est utile que sur la page d’accueil. Pour les pages d’articles il est préférable d’inclure également le titre du billet. C’est le but de la fonction basics_title() située dans le fichier functions.php.

→ Ressources :

<meta description>

<meta name="description" content="<?php echo basics_description(); ?>">

Slogan ou description du blog. Comme pour le title vu au-dessus, il est préférable de moduler cette description selon le contexte dans une optique SEO (amélioration pour les moteurs de recherche). C’est le but de cette fonction située dans functions.php.

→ Ressources :

  • Admin — Réglages -> Général (Options générales) ou directement à l’adresse [votre_site]/wp-admin/options-general.php.

<meta author>

<meta name="author" content="<?php the_author_meta( 'display_name', 1 ); ?>">

Affichage du prénom et du nom de l’administrateur du site. N’oubliez pas de renseigner ces élément dans les réglages de WordPress, sinon c’est votre pseudo qui s’affiche à la place.

→ Ressources :

<meta viewport>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Gestion de l’affichage par défaut sur les périphériques mobiles.

Favicons

<link rel="shortcut icon" href="<?php bloginfo( 'template_directory' ); ?>/favicon.ico">

Emplacement du favicon pour votre site.

<link rel="apple-touch-icon" href="<?php bloginfo( 'template_directory' ); ?>/apple-touch-icon.png">

Emplacement du favicon affiché sur les iPhones et certains terminaux Android.

Feuille de style principale

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=2">

Feuille de style principale de votre site. Le paramètre stylesheet_url nous amène directement à la feuille de style du thème. Dans Basics, cette CSS ne contient que les éléments permettant d’identifier le thème ainsi que les règles imports pour importer les feuilles de style situées dans le dossier /css.

→ Ressources :

Librairie Javascript Modernizr

<script src="<?php bloginfo( 'template_directory' ); ?>/js/libs/modernizr-1.7.min.js"></script>

Modernizr est une bibliothèque Javascript qui permet, d’une part d’activer les nouvelles balises HTML5 dans Internet Explorer, et d’autre part de de cibler précisément les fonctionnalités CSS3 et HTML5 dans les feuilles de styles. Le paramètre template_directory nous amène directement  dans le répertoire du thème.

WordPress propose plusieurs façons de pointer vers le dossier du thème pour permettre une meilleure gestion des thèmes enfants, notamment. J’aborderai cette question dans un autre article.

→ Ressources :

Microformat XFN

<link rel="profile" href="http://gmpg.org/xfn/11">

Ce microformat est utilisé par WordPress lorsqu’on utilise le type de contenu Liens. Il permet de représenter les relations humaines en utilisant les hyperliens. Par exemple, je pourrais indiquer que j’aime WordPress.org par la relation &lt;a href="http://wordpress.org" rel="muse"&gt;

→ Ressources :

Commentaires imbriqués

<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>

Activation des commentaires imbriqués dans WordPress.

→ Ressources :

Pingback et trackback

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

URL pour permettre les pingbacks.

→ Ressources :

Crochet wp_head

<?php wp_head(); ?>

Crochet (Hook) pour permettre aux plugins WordPress d’ajouter des éléments dans la balise head.

→ Ressources du Codex :

Fermeture de la balise head

</head>

Fermeture de la balise head

→ Ressources :

Ouverture de la balise body

<body <?php body_class(); ?>>

C’est le corps de la page qui contient l’ensemble du document. On met généralement à la suite une autre balise servant de container.

<div id="page" class="hfeed" role="document">

Toutefois, la balise body peut très bien servir de «container» global pour votre document. Dans ce cas, vous pouvez utiliser…

<body id="page" <?php body_class('hfeed'); ?> role="document">

…et supprimer la balise div#page. N’oubliez pas de supprimer également la balise de fermeture correspondante &lt;/div&gt; &lt;!-- eo #page --&gt; dans le fichier footer.php !

Notez la possibilité d’ajouter une classe à la fonction body_class() dont le rôle est d’ajouter une foultitude de classes à la balise body en fonction du contexte. Cette fonctionnalité qui a fait son apparition avec WordPress 2.8 était déjà présente dans le thème Sandbox.

→ Ressources :

Balise HTML5 <header>

<header id="banner" role="banner">
    <hgroup id="branding">
        <h1><a href="<?php echo home_url( '/' ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h2><?php bloginfo( 'description' ); ?></h2>
    </hgroup> <!-- eo #branding -->
    <nav id="site-navigation" role="navigation">
        <h1 class="visuallyhidden"><?php _e( 'Site navigation', 'basics' ); ?></h1>
        <div class="visuallyhidden focusable">
            <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'basics' ); ?>"><?php _e( 'Skip to content', 'basics' ); ?></a>
        </div>
        <?php wp_nav_menu( array( 'theme_location' => 'first' ) ); ?>
    </nav> <!-- eo #site-navigation -->
</header> <!-- eo #banner -->

→ Ressources W3C :

Balise <nav>

Sans surprise, cette balise nav regroupe les éléments pour naviguer dans le site : lien d’échappement pour accéder directement au contenu et les éléments de menu situés dans l’emplacement nommé «primary» dans le fichier functions.php où j’ai déclaré mes zones de menus personnalisés.

Les classes CSS .visuallyhidden et .focusable issues de H5BP.  Sur l’élément h1, .visuallyhidden sert à masquer proprement le titre au cas où il ne serait pas essentiel dans votre mise en forme, tout en le rendant accessible aux lecteurs d’écran. Idem pour le lien d’évitement ; quant à la classe .focusable, elle permet de donner le focus à l’élément en question quand on navigue au clavier au clavier, par exemple.

→ Ressources :

Début de #content

<div id="content">

Cet élément englobe le contenu principal et les barre latérale. La balise de fermeture correspondante &lt;/div&gt; &lt;!-- eo #content --&gt; est située au tout début du fichier footer.php.

L’intérêt de commencer l’ouverture de cette div dans l’en-tête et de la terminer dans le pied de page réside dans le fait que les Templates de certains plugins (Newsletter, Agenda, etc.) placent leur contenu directement entre le header et le footer.

index.php

<?php get_header(); ?>
    <div id="primary" role="main">
        <?php basics_content_nav( 'nav-above', 'menu' ); ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>
        <?php basics_content_nav( 'nav-below', 'menu' ); ?>
    </div> <!-- eo #main -->
<?php if ( ! is_singular() ) : ?>
    <?php get_sidebar( 'one' ); ?>
<?php endif; ?>
    <?php get_sidebar( 'two' ); ?>
<?php get_footer(); ?>

Les fonctions get_header(),  get_sidebar() et get_footer() permettent d’inclure respectivement les fichiers header.php, sidebar.php et footer.php. Si l’on indique un paramètre entre les parenthèses, comme par exemple get_header('home'), c’est le fichier header-home.php qui sera inséré automatiquement. Dans notre cas, il s’agit des barres latérales sidebar-one.php et sidebar-two.php.

→ Ressources du Codex :

La balise div#primary contient le contenu principal (les articles), tandis que les barres latérales sont chargées d’afficher des contenus annexes regroupés chacun dans une balise aside.

Conditional tag

Le marqueur conditionnel is_singular() permet de vérifier si l’on se trouve dans le contexte d’un article seul, d’une page ou d’un fichier attaché

→ Ressources :

Navigation entre les articles

La fonction basics_content_nav() située dans functions.php permet d’afficher les éléments pour naviguer dans la succession des billets «suivants» et «précédents». Le paramètre nav-above ou nav-below sert à préciser l’identifiant de la balise nav, selon qu’elle est située au-dessus des billets ou au-dessous ; le paramètre menu indique la classe associée à cet élément de navigation.

→ Ressources :

La boucle WordPress (The Loop)

L’élément principal de ce fichier est constitué par la boucle qui permettra d’afficher le contenu des articles en appelant le contenu approprié en fonction du format du billet.

Les différents type de boucle seront détaillées dans un prochain article.

→ Ressources :

Types de format de contenus

Les types de format pris en charge sont spécifier dans functions.php. Il s’agit de :

  • aside
  • chat
  • gallery
  • link
  • image
  • quote
  • status
  • video
  • audio

Ces types de format ont été popularisés par des plate-formes comme Tumblr ou Posterous qui permettent d’afficher différemment les contenus selon leur type. Le format aside a été popularisé par Matt Mullenweg qui l’utilisait pour donner des nouvelles brèves, sans titre, entre deux billets.

L’intérêt des Post Format réside dans le fait, qu’une fois paramétrés, ils permettent de diversifier la présentation des différents type de contenus que vous publiez sur votre site.

Le choix du type de contenu s’effectue depuis l’interface de rédaction des articles. Il s’agit d’une option à cocher parmi celles qui ont été définies dans votre thème dans functions.php.

Exemple d’activation de tous les types de format disponibles :

add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );

→ Ressources :

get_template_part

<?php get_template_part( 'content', get_post_format() ); ?>

Cette fonction ressemble beaucoup à ses petites soeurs get_header(), etc. il suffit de spécifier un ou deux paramètres pour que la magie s’opère :

  • get_template_part(  'content' ) — inclue automatiquement le fichier content.php situé à la racine de votre thème,
  • get_template_part( 'content', 'home' ) — idem pour content-home.php,
  • get_template_part(  'content', get_post_format() ) — idem pour content- suivi du type de format spécifié, tel que content-aside.php, content-gallery.php, etc.

Cette dernière option est donc très pratique, puisqu’elle va chercher, comme une grande, le fichier spécialement conçu pour votre format de billet.

→ Ressources :

Codex — http://codex.wordpress.org/Function_Reference/get_template_part

content.php

Le fichier content.php rassemble les éléments disponibles dans la boucle principale : le titre et le contenu de l’article, mais aussi les informations de date, d’auteur ainsi que les rubriques et les tags qui ont été associés à l’article lors de sa rédaction.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header>
        <h1><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'basics' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
        <?php if ( 'post' == $post->post_type ) : ?>
        <div class="entry-meta">
            <?php echo basics_posted_on(); ?>
        </div>
        <?php endif; ?>
    </header>
    <?php if ( is_search() ) : // Only display Excerpts for search pages ?>
    <div class="entry-summary">
        <?php the_excerpt( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'basics' ) ); ?>
    </div><!-- eo .entry-summary -->
    <?php else : ?>
    <div class="entry-content">
        <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'basics' ) ); ?>
        <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'basics' ), 'after' => '</div>' ) ); ?>
    </div> <!-- eo .entry-content -->
    <?php endif; ?>
    <footer class="entry-meta">
        <?php echo basics_posted_in(); ?>
    </footer> <!-- eo #entry-meta -->
</article> <!-- eo #post-<?php the_ID(); ?> -->

On commence par une balise article qui affiche, entre les balises header et footer, soit un extrait du billet si le visiteur effectue une recherche sur votre site, soit le billet (complet ou non, selon que vous avez utilisé la balise <!–more–> ou non).

Les informations liées au billet comme la date de publication, le nom de l’auteur, la catégorie, les tags, etc. sont affichées via les fonctions basics_posted_on() et basics_posted_in() dans functions.php.

Ce fichier content.php peut servir de base pour la création d’autres Templates, comme je l’ai fait pour content-news.php appelé via la fonctionget_template_part().

Barres latérales (Sidebar)

Basics est composé de deux sidebars appelés via get_sidebar( 'one' ) et get_sidebar( 'two' ). J’ai choisi deux fichiers séparés pour faciliter le passage d’une à deux colonnes selon le contexte.

Chaque barre latérale est composée de trois zones de widget : une zone centrale avec du contenu par défaut tant que l’on ne fait rien glisser dedans, une zone facultative au-dessus, et une autre au-dessous.

Toutes les zones de widgets sont déclarées à l’avance dans functions.php.

sidebar-one.php

<div id="secondary" role="complementary">
    <?php if ( is_active_sidebar( 'war-1' ) ) : ?>
        <div id="widget-area-1">
            <?php dynamic_sidebar( 'war-1' ); ?>
        </div> <!-- eo #widget-area-1 -->
    <?php endif; ?>
    <div id="widget-area-2">
    <?php if ( ! dynamic_sidebar( 'war-2' ) ) : ?>
        <?php wp_nav_menu( array( 'theme_location' => 'second' ) ); ?>
        <aside id="archives">
            <h1><?php _e( 'Archives', 'basics' ); ?></h1>
            <ul>
                <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside>
        <aside id="meta">
            <h1><?php _e( 'Meta', 'basics' ); ?></h1>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </aside>
    <?php endif; ?>
    </div> <!-- eo #widget-area-2 -->
<?php if ( is_active_sidebar( 'war-3' ) ) : ?>
    <div id="widget-area-3">
        <?php dynamic_sidebar( 'war-3' ); ?>
    </div> <!-- eo #widget-area-3 -->
<?php endif; ?>
</div> <!-- eo #secondary -->

sidebar-two.php

<div id="tercery" role="complementary">
<?php if ( is_active_sidebar( 'war-4' ) ) : ?>
    <div id="widget-area-4">
        <?php dynamic_sidebar( 'war-4' ); ?>
    </div> <!-- eo #widget-area-4 -->
<?php endif; ?>
    <div id="widget-area-5">
<?php if ( ! dynamic_sidebar( 'war-5' ) ) : ?>
        <?php wp_nav_menu( array( 'theme_location' => 'third' ) ); ?>
        <aside id="search-in">
            <?php get_search_form(); ?>
        </aside>
<?php endif; ?>
    </div> <!-- eo #widget-area-5 -->
<?php if ( is_active_sidebar( 'war-6' ) ) : ?>
    <div id="widget-area-6">
        <?php dynamic_sidebar( 'war-6' ); ?>
    </div><!-- eo #widget-area-6 -->
<?php endif; ?>
</div> <!-- eo #tercery -->

searchform.php

La fonction get_search_form() est prévue pour afficher le formulaire intégré dans le core de WordPress, sauf si le fichier searchform.php est présent à la racine du thème.

<form action="<?php echo home_url( '/' ); ?>" method="get">
    <fieldset>
        <label for="search" class="visuallyhidden focusable"><?php _e( 'Search in ','basics' ); ?><?php echo home_url( '/' ); ?></label>
        <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" placeholder="<?php _e( 'Search in ','basics' ); ?>">
        <input type="submit" value="<?php _e( 'Search in ','basics' ); ?>">
    </fieldset>
</form>

footer.php

footer.php est constitué 1) de la fin du document visible et 2) des appels de scripts placés là pour optimiser le temps de chargement de la page, comme cela est conseillé par H5BP.

Fermeture de la balise #content et pied de page

    </div> <!-- eo #content -->
    <footer id="content-info" role="contentinfo">
    <?php if ( is_active_sidebar( 'war-7' ) ) : ?>
        <div id="widget-area-7">
            <?php dynamic_sidebar( 'war-7' ); ?>
        </div> <!-- eo #widget-area-7 -->
    <?php endif; ?>
    <?php wp_nav_menu( array( 'theme_location' => 'fourth' ) ); ?>
    <?php if ( ! dynamic_sidebar( 'war-8' ) ) : ?>
        <div id="widget-area-8">
            <address>
                <?php _e('Contact the administrator '); ?><a href="mailto:<?php bloginfo('admin_email'); ?>"><?php bloginfo('admin_email'); ?></a>
            </address>
        </div> <!-- eo #widget-area-8 -->
    <?php endif; ?>
    <?php if ( is_active_sidebar( 'war-9' ) ) : ?>
        <div id="widget-area-9">
            <?php dynamic_sidebar( 'war-9' ); ?>
        </div> <!-- eo #widget-area-9 -->
    <?php endif; ?>
    <div id="credits">
        <a href="http://wordpress.org/" rel="generator"><?php _e( 'Proudly powered by WordPress', 'basics' ); ?></a><span class="sep"> | </span><?php printf( __( 'Theme: %1$s by %2$s.', 'basics' ), 'Basics', '<a href="https://4design.xyz/basics" rel="designer">WordPress je thème !</a>' ); ?>
    </div>
    </footer>
</div> <!-- eo #page -->

Appels des script et fin de la page web

Voici la fin du document HTML avec les liens vers les différentes bibliothèques dont vous pourriez avoir besoin. Mise à part le crochet wp_footer() qui permettra à vos plugins d’injecter du code dans cette zone, le reste suit la logique de H5BP.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='<?php bloginfo( 'template_directory' ); ?>/js/libs/jquery-1.5.1.min.js'>x3C/script>")</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="<?php bloginfo( 'template_directory' ); ?>/js/plugins.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/script.js"></script>
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg");</script>
<![endif]-->
<script>
var _gaq=[["_setAccount","UA-514927-1"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
<?php wp_footer(); ?>
</body>
</html>

home.php

Lorsqu’on réalise un site avec WordPress, on a souvent besoin d’afficher autre chose que la liste des derniers billets publiés en page d’accueil. C’est le rôle de ce fichier home.php qui contient deux boucles que vous pourrez personnaliser en modifiant les paramètres.

Merci au passage à @fabienthomas pour son aide. N’hésitez pas à le retrouver sur son Blog perso et pas forcément sérieux d’un travailleur du Web.

<?php get_header(); ?>
<div id="main" role="main">
    <!-- First loop: display the first post from the news's category -->
    <?php
    $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
        $args = array(
            'category_name' => 'news',
            'posts_per_page' => 1,
            'paged' => $paged
        );
        $featured_query = new WP_Query( $args );
    ?>
    <?php if ( ! $featured_query->have_posts() ) : ?>
        <p class="error"><?php _e( 'Posts not found. Tell the administrator that the category requested not exists.' ); ?
    ></p>
    <?php endif; ?>
    <?php while ( $featured_query->have_posts() ) : $featured_query->the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; wp_reset_postdata(); ?>
    <hr>
    <!-- Second loop: display the fifth followings posts from the same category as above -->
    <?php
        $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
        $args = array(
            'category_name' => 'news',
            'posts_per_page' => 5,
            'offset' => 1,
            'paged' => $paged
        );
        $featured_query = new WP_Query( $args );
    ?>
    <?php while ( $featured_query->have_posts() ) : $featured_query->the_post(); ?>
        <?php get_template_part( 'content', 'news' ); ?>
    <?php endwhile; wp_reset_postdata(); ?>
</div> <!-- eo #main -->
<?php get_sidebar( 'home' ); ?>
<?php get_footer(); ?>

La première boucle affiche le dernier article publié dans la rubrique News en utilisant le fichier conten-{post forma-}.php tandis que la deuxième affiche les cinq articles précédents de cette même rubrique en appelant le fichier content-news.php. J’en ai profité pour inclure une barre latérale spécifique à la page d’accueil.

Page 404

Il est toujours utile d’afficher un message personnalisé à vos visiteurs lorsqu’une page n’existe plus.

<?php get_header(); ?>
<div id="primary" role="main">
    <?php get_template_part( 'content', '404' ); ?>
</div> <!-- eo #primary -->
<?php get_sidebar( 'one' ); ?>
<?php get_sidebar( 'two' ); ?>
<?php get_footer(); ?>

Cette page 404.php fait appel au fichier content-404.php pour aider le visiteur à trouver ce qu’il cherche. C’est par ailleurs un exemple de structure que vous pourriez utiliser pour d’autres modèles de pages.

Feuilles de style

Juste un mot sur l’organisation des CSS. J’ai divisisé le fichier style.css — inclu dans le package HTML5 Boilerplate — en trois parties pour faciliter les mises à jour.

  • reset.css
  • author.css
  • tools.css

Normalement, il n’y a pas besoin de toucher à reset.css ou tools.css : le fichier author.css est là pour accueillir votre prose.

La CSS style.css à la racine du thème précise uniquement les informations liées au thème pour WordPress et sert à importer les feuilles de style présentes dans le dossier /css.

Pour éviter que le nombre de requêtes HTTP liées à ces fichiers CSS ne grève les performances d’affichage de votre site, je vous conseille d’utiliser le script PHP Minify ou son équivalent disponible dans W3 Total Cache.

Dossier Utils

Ce dossier contient quelques éléments issus de H5BP comme robots.txt, humans.txt, .htaccess que vous pouvez utiliser dès à présent.

En bref

Ce thème Basics devrait permettre de partir sur de bonnes base lors de la conception d’un thème WordPress en plus de refléter les nouvelles fonctionnalités qui ont fait leur apparition depuis la version 3.0. Les Templates pour personnaliser les commentaires sont inclus dans Basics mais feront l’objet d’un tutoriel dans «C comme commentaire» 😉

Publié le par Bruno Bichet