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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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

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="http://css.4design.tl/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» ;-)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



30 commentaires pour “Création de site WordPress de A à Z — B comme Basics”

  1. Hello,

    Belle initiative Br1o. Ça devrait ravir les débutants en intégration de thème pour WordPress (surtout que tout ça me paraît très bien documenté !). Tu viens du coup de faire une entrée fracassante dans les ressources essentielles de mes cours WP pour webdesigners ;—) Good job !

    • br1o dit :

      Merci Jean-Baptiste, n’hésite pas à tester et à me donner ton avis

      • Sacripant dit :

        Super boulot.

        Mais franchement, le Theming c’est vraiment pas la force de WordPress. On sent que le business model de ce CMS c’est de vendre du template, tout en conservant un systeme de théming Php qui necessite une sacré courbe d’apprentissage. Drupal fonctionne pareil.

        Alors WordPress pour webdesigner qui ne veulent pas entendre parler de php. Hoho. Cet article comforte mon choix : WordPress, pas pour moi, sans façon. Je reste sur Textpattern.

        Fabien Potencier a écrit un bon billet sur « Pourquoi PHP n’est pas un bon langage pour du templating »: http://fabien.potencier.org/article/34/templating-engines-in-php

        • « Drupal fonctionne pareil. »

          Ouaip. Enfin à la différence près que ce qui m’a convaincu d’utiliser WP, c’est la durée de formation du client pour utiliser son site web. Drupal : 1 jour de formation pour publier/gérer du contenu ; Spip, une demie journée ; WordPress : 1 heure. Yapaphoto :—)

          Le système de theming de WordPress est ce qu’il est, et ça reste moins flexible que d’autres (peut-être effectivement textPattern, mais le back-office est quand même archi-simple pour le client, et ça, ça a un vrai intérêt.

          (au passage, je te remercie pour le lien vers le billet de F. Potencier, vraiment très intéressant)

        • br1o dit :

           » le Theming c’est vraiment pas la force de WordPress  » <- Hum, je dirais que ça dépend de beaucoup de chose. Je me complique sûrement la vie mais j’aime bien partir de rien quand j’attaque un nouveau projet. Enfin, jusqu’à il y a peu, car effectivement, je passais beaucoup de temps à repartir d’un ancien projet puis à enlever le superflu. Ce thème Basics est le résultat d’un compromis issu de mon expérience qui évoluera certainement un peu dans le temps.

          Ceci dit, vendre du Template, je ne sais pas ce que ça veut dire. Personnellement, je vends des sites web (conception graphiques, intégration HTML & CSS) et il se trouve que mon pote développeur s’appelle WordPress.

          Ce n’est pas un hasard, et très honnêtement, j’ai souvent eu l’occasion de laisser le choix du CMS au client au niveau du back office. Le test est simple : tu présente au client ou à la personne chargée de gérer le site en interne : l’admin de WordPress, de Drupal, de Joomla!, etc.

          Ensuite, tu lui demande de rédiger un article avec un titre, deux ou trois paragraphes accompagnés d’une image. Tu ne donnes pas d’autres indications. Tu attends 10 mn. Généralement, quand arrive le tour de WordPress, en 10 mn la personne à déjà pas mal avancé ; avec Drupal ou consort, c’est la cata, mais vraiment la cata.

          Ensuite, tu donnes quelques indications (par exemple, l’insertion des média sous WordPress nécessite certains pré-requis) et tu recommence.

          Neuf fois sur 10, c’est WordPress qui l’emporte haut la main. Une fois sur dix, le client pleure, parce que je lui dit qu’il devrait plutôt passer sur Prestashop ou Magento ^__^v

          Vala, pareil que Jean-Bastiste (cf. http://css4design.com/creation-de-site-wordpress-de-a-a-z-b-comme-basics#comment-198490680 )

  2. Thierry dit :

    Très intéressant et bien documenté. Bravo et merci !

    Une petite remarque : Je suis abonné au blog et je n’ai pas revé d’avoir lu un article à propos de la suppression du hgroup du html5 ? (hgroup présent dans le header de basic)

  3. Anonyme dit :

    Beau travail ! Vivement la suite !

  4. [...] réseaux sociaux en Lozère) avec en pièce jointe les trois fichiers permettent d’avoir le thème WordPress Basics en français ! Oui, le web est comme ça, rempli de gens de bonne volonté Pour avoir la version [...]

  5. [...] les actus et liens que j’ai sélectionné pour vous durant ma journéeCréation de site WordPress de A à Z — B comme BasicsYouTube – Dexter Season 6 TeaseDexter returns and nothing can prepare you for what comes next. [...]

  6. Très complet cet article, chapeau.

  7. Pictode dit :

    Dans les fichiers sidebar-one.php et sidebar-two.php est-ce qu’il ne faudrait pas mieux mettre la ligne du endif avant le /div pour les #widget-area-2 et #widget-area-5 ?

    sidebar-one.php : ligne 34-35 sidebar-two.php : ligne 23-24

  8. Régis dit :

    Ben mes aïeux ^^ en voila une belle leçon ! Je n’étais pas forcement fan de WordPress mais avec des didacticiels de ce genre, ca va pas tarder ;) Vivement la suite ( C ? ) !

  9. [...] de A à Z — C comme CSS & Composé HTML5 «For Those About To Rock…» Dans B comme Basics, j’ai abordé la mise en place d’un Blank Theme pour démarrer différents projets de [...]

  10. Lashonwp dit :

    ça c’est du super boulot, Bruno, et je t’en remercie je zieute sérieusement et te fais un retour utile

  11. Lashonwp dit :

    ça c’est du super boulot, Bruno, et je t’en remercie je zieute sérieusement et te fais un retour utile

  12. [...] Création de site WordPress de A à Z — B comme Basics [...]

  13. [...] → Lire le tutoriel WordPress de A à Z — B comme Basics [...]

  14. [...] → Lire le tutoriel WordPress de A à Z — B comme Basics [...]

  15. Agence ACS04 dit :

    Bruno, 

    je confirme quel IE9 ne se comporte ni comme Firefox, ni comme Google Chrome. Mais, j’ai également découvert que Chrome ne se comportait pas de la même manière sous Windows et sous Ubuntu…

    Pour le reste, super article, comme d’habitude !  et vivement la lettre C !

    Bonne continuation

    Jean-Luc

  16. Article tres complet, prendre le temps de detailler une installation de wordpress c’est un travail enorme!!! vraiment chapeau !! Pas de raison de rater l’integration d’un theme maintenant je vais relire a tete reposer je pense que deux trois petites choses m’ont échappées :)

  17. [...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? Création de site WordPress de A à Z — B comme Basics [...]

  18. Naïa dit :

    Bonsoir,

    Ce qui m’avait plu dans wordpress c’est l’existence d’un template neutre/vide (toolbox). Récemment, j’ai trouvé dans un magazine un article complet sur H5BP. J’ai vite été séduite par le principe. Et puis vient une idée de projet qui m’impose de passer par un CMS (gestion de communauté, articles réguliers, et je ne suis pas développeur mais juste webdesigner). Je ne pouvais donc pas tester ce fameux H5BP. Petit éclat de géni, je tape « HTML5 Boilerplate WordPress » et là je tombe ici. Votre idée d’un template basique avec H5BP est juste géniale !

    Maintenant je vais pouvoir continuer mon entrainement HTML5 et y ajouter de l’entrainement WordPress et responsive design :). Un grand merci pour ce travail, c’est un gain de temps considérable et je trouve superbe que certains trouvent encore autant de consacrer à un projet sans nous en faire payer le prix fort (et donc le mettre en libre service gratuitement). Cela permet aux débutants WordPress comme moi de se concentrer sur le détail plutôt que de se noyer dans les bases. Mille fois merci !

    Cordialement, Naïa.

    PS : Je ne m’y connais pas encore assez mais un autre article du magazine cité plus haut parle d’un framework (Less : http://lesscss.org/) qui me semble d’une utilité à ne pas négliger en matière de css et mise en forme. Effectivement, en l’utilisant on part du principe que l’utilisateur a javascript activé (si j’ai compris), mais quand on code en html5 c’est aussi le cas aujourd’hui je crois. Peut-être une autre piste à étudier. Moi je vais essayer de m’y plonger en tout cas !

  19. JMC dit :

    Pour revenir sur la compat IE avec # navigateurs (chrome, firefox)…. Je suis d’accord avec toi que IE 9 n’est toujours pas OK, surtout dans le positionning des éléments.

    Je me bats avec ça depuis un certain temps! Il s’agit du code « position-absolute » qui ne place pas les éléments au même endroit dans la page « home » (par exemple FireFox les situe plus haut et à l’extrème gauche) –même avec un reset des margin & padding.

    Mais serait-il aussi possible que des attributs tels-que ‘parent, child, etc.. ‘ influent le moteur d’affichage ??? SOS, votre avis sur ce point & merci++ voir mon site sous IE9 et # sous Firefox: http://jmcideas.wordpress.com

  20. [...] Basics is not a framework! It’s a small set of files and functions to make sites developpment with WordPress easier. Nothing more, nothing less. If you want to know more about Basics, feel free to take a look at my long french post B comme Basics. [...]

  21. [...] en français et la documentation sur le site est en français également. Le blog de Bruno Bichet La documentation du thème Le site de [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site