Créer son site web avec WordPress de A à Z… avec le Codex

La saga Créer son site web avec WordPress de A à Z… avec le Codex — et quelques ressources supplémentaires, ne boudons pas notre plaisir –, débutera avec «A, comme : Allons-y !» et se terminera avec «Z, comme Z’ai fini !». Cet article est un prologue, un galop d’essai, qui me permets de présenter rapidement les ressources essentielles concernant WordPress. Lors de la création d’un site (ou d’un blog, soyons fou !) avec WordPress, il m’arrive souvent de chercher des informations en dehors du Codex. Or, sept fois sur dix, le Codex propose la même chose, souvent en mieux. C’est une véritable mine d’information qu’il est profitable de consulter en première intention avant d’aller voir ailleurs si le code est plus vert. A ce propos, de nombreuses ressources ne font que reprendre le Codex avec plus ou moins de bonheur, alors autant puiser la connaissance directement à la source. Voici le sommaire complet des 26 articles de WordPress de A à Z.

Le bonheur est dans le Codex ?

Les exemples de codes disponibles dans le Codex répondent généralement à une majorité de besoins et il suffit souvent de les copier-coller pour obtenir un résultat satisfaisant. Pour aller plus loin, il suffira de vous rendre sur les forums de WordPress pour poser vos questions. Les réponses y sont généralement très pointues si vous prenez la peine de bien poser vos questions 😉

Les liens contenus dans ce billet pointent vers la version anglaise du Codex. Il existe néanmoins une version française, plus ou moins complète et à jour (ce qui explique ma préférence pour la version originale). J’imagine aussi que la majorité des intégrateurs et des développeurs WordPress ont les compétences nécessaires dans la langue de Richard Stallman William Shakespeare pour se débrouiller 😉

N’hésitez pas à vous rendre sur WordPress-fr, la communauté francophone du CMS WordPress. Ne ratez pas le blog qui présente les dernières actualités autour de WordPress et faites le tour de la planète WordPress avec une sélection des articles publiés par des blogueurs amoureux de WordPress.

Qu’est-ce qu’un thème WordPress ?

Faire un site avec WordPress revient à faire un thème WordPress. On peut faire un thème totalement fonctionnel avec deux fichiers seulement : index.php et style.css.

→ Using Themes explique rapidement ce qu’est un thème WordPress.

style.css

Le moteur de WordPress attend que votre feuille de style comporte deux ou trois lignes précisant quelques informations. Elles permettront de retrouver votre thème dans les options du panneau d’administration de votre site. Les tags permettent par ailleurs de qualifier votre thème dans le moteur de recherche de thème en donnant des renseignements sur la couleur, le nombre de colonnes, etc., ainsi que sur les fonctionnalités intégrées :

• Post Thumbnails (vignettes miniatures)
• Navigation Menus (menus de navigation)
• Widgets
• Post Formats (format de billet)
• Custom Backgrounds (fonds de page personnalisés)
• Custom Headers (Image d’en-tête personnalisée)
• Editor Style (style pour l’édition des billets)
• Automatic Feed Links

Voici le code permettant à votre CSS style.css d’être reconnue :

/*
Theme Name: WTF
Theme URI: https://4design.xyz/wtf/
Description: WordPress Theme Framework
Author: Bibi
Author URI: https://4design.xyz/a-propos/
Version: 0.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post
*/

En dehors de l’administration du site pour le choix du thème, il est possible de récupérer ces informations d’en-tête de fichiers. Pour afficher le nom de l’intégrateur et son site web, on peut utiliser la fonction get_theme_data() :

<?php
$theme_data = get_theme_data(ABSPATH . 'wp-content/themes/default/style.css');
echo $theme_data['Title'];
echo $theme_data['Author'];
?>

index.php

Ce fichier contient les appels de fonction du moteur de WordPress et les boucles PHP permettant d’afficher les contenus. Ce seul fichier peut gérer tout les contextes d’affichage (archives, recherche, page d’erreur, etc.).  Dans la terminologie de WordPress, ces appels de fonctions s’appellent des Template tags, autrement dit, des marqueurs de modèles. Rien de très compliqué, il suffit de se laisser guider par le Codex.

Par exemple, pour afficher le nom du site et sa description, on fera appel à la fonction bloginfo() :

<a href="<?php bloginfo('url'); ?>">
    <?php bloginfo('name'); ?>
</a>

Comprendre la hiérarchie des templates

Si le fichier index.php vu plus haut peut afficher tous les contextes d’affichage (accueil, pages, article seul, catégories, tags, etc.), il est possible de créer autant de fichiers que de contexte pour personnaliser vos templates. Ainsi, si une page.php existe, elle sera utilisée à la place de index.php, c’est la même chose pour tag.php, search.php, category.php, etc.

Ce diagramme montre quel modèle de fichier est appelé pour générer une page en fonction de la hiérarchie des différents modèles.

A Chaque fichier PHP correspond une fonction permettant de tester si l’on se trouve dans un contexte d’affichage ou non. Par exemple, en utilisant uniquement le fichier index.php, on peut mettre un marquage HTML différent pour le contexte des catégories avec is_category() ; des pages avec is_page(), dans une page affichant l’article complet avec is_single(), etc.

→ Lire la page consacrée aux tag conditionnels.

The Loop (1)

Le coeur de WordPress est consitué par la boucle (The Loop). Il s’agit d’un ensemble de fonction qui collecte les variables nécessaires à l’affichage des informations comme le titre de l’article, la date de publication, l’auteur, le contenu du billet lui-même et tout un tas d’autres choses dont l’énumération serait bien fastidieuse.

Exemple minimal de boucle :

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!-- do stuff ... -->
    <?php endwhile; ?>
<?php endif; ?>

→ Lire The Loop.

(1) Les titres auxquels vous avez échappé jusque là : Danse avec les loops ; She got the loop, Loop, y es tu ? T’en loop pas une… 😉

Les marqueurs de modèle (Template Tags)

Il s’agit des variables ramenées par la boucle. Leur utilisation est très simple : il suffit par exemple d’appeller <?php the_title(); ?> pour afficher le titre du billet. De nombreux marqueurs comme the_title() doivent être utilisés à l’intérieur de la boucle tandis que d’autres sont plus génériques et peuvent servir à afficher la barre latérale de votre site, comme get_sidebar() si le coeur vous en dit.

→ Lire Template Tags.

WordPress & Webdesign

J’en profite également pour attirer votre attention sur mon petit blog WordPress & Webdesign (WP 4 Design) où vous trouverez des nouvelles de WordPress sur le même principe que Javascript et Webdesign (JS 4 Design) : des articles brefs mais courts.

Voici en avant-première une ébauche de logo pour l’en-tête de WP 4 Design. N’hésitez pas à me dire ce que vous en pensez. OK, c’est un peu plus qu’une ébauche, mais rien de définitif, surtout en ce qui concerne les couleurs.

Comme d’habitude, j’ai commencé par le commencement, c’est-à-dire le contenu avant de réfléchir à son organisation. En attendant d’avoir pris un rythme de croisière pour mettre en place un design digne de ce nom, j’ai installé Toolbox. C’est un thème minimaliste HTML5 créé par Auttomatic croisé avec HTML5 boilerplate.