Avec WordPress, même s’il existe des milliers de thèmes gratuits et premiums, on n’a jamais à 100% ce qu’on veut. On fait toujours un compromis. Pour avoir à 100% ce qu’on veut, on n’a pas le choix, on doit aller dans le thème pour le bidouiller et aller ajouter ou modifier ce don’t on a besoin.

Par exemple pour ajouter un template pour un type de contenu personnalisé, pour modifier vos styles, une police de caractères ou pour ajouter des informations à un template existant, on est obligé d’ouvrir un éditeur de code.

La première étape c’est de comprendre quels sont les fichiers qui constituent votre thème, comment ils sont organisés et comment ils s’appellent les uns les autres pour construire les pages de votre site.

Où se cachent les thèmes WordPress?

Avant tout, il faut savoir où trouver votre thème. Sur une installation classique de WordPress, les thèmes se trouvent dans wp-content/themes/.  Tous les thèmes sont tous bien rangés dans leur dossier, et à la racine, on retrouve un certain nombre de fichiers.

Ce qui est important de remarquer et de bien comprendre, c’est que tous les thèmes n’ont pas le même nombre de fichiers mais on retrouve les mêmes fichiers dans beaucoup de thèmes. Par exemple, tous les thèmes ont un fichier appelé index.php, tous les thèmes ont un fichier appelé single.php. Certains thèmes ont un fichier appelé home.php ou front-page.php.

Tous ces noms de fichiers sont des conventions WordPress. Votre feuille de style principale doit s’appeler style.css, sinon votre thème ne sera pas reconnu. Les fonctionnalités du thème sont à ranger dans functions.php, etc…

Les deux fichiers essentiels

Pour que WordPress reconnaisse votre thème, il doit contenir au moins deux fichiers : index.php et style.css. Sans ces deux fichiers, WordPress ne considérera pas votre thème comme un thème valide.

De plus, style.css doit contenir une entête particulière. C’est un bloc de commentaires contenant des informations sur le thème que WordPress peut afficher dans l’administration.

Juste pour le fun, dans votre installation locale de WordPress, créez un dossier dans wp-content/themes et appelez-le mon_super_theme, puis dans ce dossier, créez un fichier index.php et style.css

Dans index.php, ajoutez :

<h1>Hello World !</h1>

Dans style.css, ajoutez:

/*
 * Theme name: Mon Super Thème
 */

Tadaa!! Vous avez crée un thème. Si vous allez dans l’admin, WordPress reconnait votre thème. Mais bon, il est vraiment pas terrible.

Les templates

Les thèmes WordPress fonctionnent par templates, ou modèles. C’est-à-dire que pour chaque page du même type, vous n’avez qu’un seul fichier qui gère comment s’affiche ce type de page, et WordPress s’occupe d’aller chercher le bon contenu pour celle-ci.

Par exemple, si vous cliquez sur un article, il s’affichera d’une certaine manière. Vous aurez des informations sur l’auteur de l’article, la date de publication, et peut-être une barre latérale. Si vous cliquez sur un autre article, il s’affichera normalement de la même façon. Seul le contenu sera différent. Une page standard n’affichera pas d’information sur la date de publication et n’aura peut être pas de barre latérale, ou pas de commentaire.

C’est simplement parce que les articles et les pages n’utilisent pas le même fichier de template. Quand vous cliquez sur une page, WordPress va chercher un fichier nommé page.php pour afficher votre page et quand vous cliquez sur un article, c’est single.php que WordPress va chercher.

Là où WordPress est magique, c’est que si vous n’avez pas ces fichiers dans votre thème, ça marche quand même ! C’est juste que WordPress utilisera index.php à la place ! Ce système de plan B s’appelle la hiérarchie des templates.

La hiérarchie des templates

Quand vous demandez une page, WordPress va chercher le template le plus spécifique possible pouvant afficher le contenu désiré. S’il ne le trouve pas, il va chercher si le thème comporte un fichier un peu plus générique. Puis va encore descendre d’un niveau de spécificité jusqu’à ce qu’il tombe sur un template existant qui fera l’affaire. En dernier recours, il utilise index.php.

Schéma illustrant la hierarchie des templates WordPress

Ce schéma représente la hiérarchie des templates complète. Les types de pages sont listés sur fond noir, à gauche et les templates pouvant être utilisés sont listés de gauche à droite, en allant du plus spécifique au moins spécifique. Les templates très spécifiques sont en rouge, les templates secondaires en bleu ciel et les templates principaux sont en bleu plus foncé.

Par exemple, si un utilisateur clique sur une étiquette nommée ‘CSS’ pour obtenir la liste des articles concernant des astuces CSS, il demande une page d’archive (tout en haut à gauche du schéma). Plus précisément une archive d’étiquette. Donc, WordPress va chercher dans le thème s’il existe un template nommé tag-CSS.php. S’il ne le trouve pas, il va chercher l’identifiant de l’étiquette et va chercher un template avec cet identifiant, par exemple tag-3.php si l’identifiant de l’étiquette CSS est 3.

S’il ne trouve toujours pas ces templates bien spécifiques, il va chercher un template plus générique appelé tag.php, puis archive.php pour finalement se rabattre sur index.php si aucun ne fait l’affaire.

Un exemple pour bien comprendre la hierarchie des templates WordPress

On a pas si souvent que ça besoin de templates ultra spécifiques comme ceux notés sur fond rouge, et vous verrez qu’énormément de thèmes n’utilisent que des templates plutôt génériques notés sur fond bleu foncé ou bleu ciel. Donc on va simplifier notre hiérarchie comme ça:

Une version allégée de la hiérarchie des templates WordPress

La page d’accueil

La page d’accueil est un cas un peu spécial dans la hiérachie. Si vous avez réglé vos préférences de lecture pour afficher une page statique en accueil, alors c’est un template normal de page qui sera utilisé (par exemple page.php). Si vous choisissez d’afficher vos derniers articles en page d’accueil, alors c’est home.php ou index.php qui sera utilisé. Jusqu’ici, pas trop de soucis.

Par contre si le thème comporte un fichier front-page.php, alors c’est celui-ci qui sera utilisé, que vous ayez choisi d’afficher une page statique ou vos articles !

C’est une des raisons pour laquelle j’évite d’utiliser ce template. Si mon thème a besoin d’une page d’accueil bien particulière, et que je veux laisser le choix aux utilisateurs d’utiliser une page standard ou une page d’articles, je préfère créer un modèle de page personnalisé pour la page d’accueil.

Mettons les mains dans le code

Pour bien comprendre comment WordPress et votre thème construisent vos pages, on va explorer un bon thème classique: Twenty Fifteen.

Quand on ouvre Twenty Fifteen dans un éditeur de texte, on trouve plein de fichiers.

Structure des fichiers de twentysixteen
  • 404.php va être utilisé par WordPress quand l’utilisateur va sur une page inexistante, en cliquant sur un lien cassé par exemple.
  • archive.php est utilisé pour les pages d’archive, par exemple les pages catégories. Notez qu’on peut aussi créer des templates plus spécifiques pour les pages d’archive, comme category.php qui va être utilisé pour afficher les archives d’une catégorie, ou date.php pour les archives du mois. archive.php est un template assez générique.
  • functions.php est un des fichiers les plus importants. Ce n’est pas un fichier de template, mais il contient toutes les fonctionnalités de votre thème. Toutes les fonctions personnalisés de votre thème sont dans ce fichier ! Même s’il n’est pas obligatoire pour que WordPress reconnaisse votre thème, il est essentiel !
  • search.php pour les résultats de recherche.
  • page.php pour les pages simples.
  • single.php pour les articles.
  • index.php pour tout le reste.
  • style.css : la feuille de style principale.

Mais on trouve aussi tout un tas de fichiers dont on a pas encore parlé.

  • header.php , footer.php et sidebar.php : ces fichiers affichent l’entête du site, la barre latérale (zone de widgets) et le pied de page. Ils sont appelés par les autres fichiers de template et permettent de ne pas répéter le même code sur tous les fichiers de template. Vous codez une seule fois l’entête de votre thème et l’appelez sur les autres templates.
  • content.php et ses amis : Ces fichiers sont appelés par les templates principaux et gèrent comment sont affichés les articles et autres contenus du site. Par exemple, les articles au format vidéos sont affichés en utilisant le code contenu dans content-video.php, les articles au format audio utilisent content-audio.php, les pages simples utilisent content-page.php, etc… On peut donc afficher les contenus des articles différemment tout en utilisant le même template principal.
  • readme.txt : c‘est la doc! C’est donc un fichier très important. Vous y trouverez des informations sur l’installation, les changements dans les différentes versions, et tout un tas d’autres informations utiles.
  • screenshot.png : c‘est le screenshot qui apparait dans l’admin de WordPress.
  • rtl.css : C’est la feuille de style pour les langues se lisant de droite à gauche.

Explorons index.php

index.php est le template par défaut. C’est le template le plus générique que WordPress va utiliser quand il ne trouve aucun template plus spécifique pour la page requise.

Examinons-le. Voici le fichier index.php de twenty-fifteen.

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * e.g., it puts together the home page when no home.php file exists.
 *
 * Learn more: {@link https://codex.wordpress.org/Template_Hierarchy}
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php if ( have_posts() ) : ?>

            <?php if ( is_home() && ! is_front_page() ) : ?>
                <header>
                    <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                </header>
            <?php endif; ?>

            <?php
            // Start the loop.
            while ( have_posts() ) : the_post();

                /*
                 * Include the Post-Format-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */
                get_template_part( 'content', get_post_format() );

            // End the loop.
            endwhile;

            // Previous/next page navigation.
            the_posts_pagination( array(
                'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
                'next_text'          => __( 'Next page', 'twentyfifteen' ),
                'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
            ) );

        // If no content, include the "No posts found" template.
        else :
            get_template_part( 'content', 'none' );

        endif;
        ?>

        </main><!-- .site-main -->
    </div><!-- .content-area -->

<?php get_footer(); ?>

Le code commence avec un get_header(). Cette fonction appelle le fichier header.php, qui contient le code de l’entête du site. Cette entête est répétée sur toutes les pages du site ou presque, donc pour ne pas répéter le code sur chaque fichier de template, on va simplement appeler ce fichier header.php avec cette fonction.

Puis, un div est ouvert avec une classe ‘content-area‘, suivi d’un main avec une classe ‘site-main‘. Ce sont les conteneurs du contenu principal.

A l’intérieur de ces conteneurs, on a un des concepts les plus puissants et les plus importants: la boucle.

La boucle

La boucle de WordPress est responsable de l’affichage de la liste des articles ou de l’article et la page demandée. C’est un concept très puissant qu’il faut bien comprendre pour appréhender le développement de thème.

La boucle commence par vérifier s’il y a bien du contenu existant pour la requête.

<?php if ( have_posts() ) : ?>

Par exemple, si vous demandez la page d’accueil, cette fonction va chercher s’il existe des articles sur votre blog, ou si la page que vous avez choisi d’afficher en page d’accueil existe bien.

S’il y a des posts ou que votre page statique d’accueil existe bien, on continue.

Ignorons ce petit bloc pour le moment.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <header>
        <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
    </header>
<?php endif; ?>

Ensuite, nous avons une boucle while qui va afficher les articles de notre page.

while ( have_posts() ) : the_post();
    get_template_part( 'content', get_post_format() );
endwhile;

En français, ce bloc nous dit:

Tant que (il y a des posts à afficher) : prépare-le;
    Affiche-le en utilisant le code contenu dans le fichier content-$format.php, où $format est le format du post (lien, audio, vidéo, standard…) Recommence.

Une fois atteint le nombre d’articles maximal par page, on affiche les liens de navigation entre les pages d’articles.

// Previous/next page navigation.
    the_posts_pagination( array(
        'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
        'next_text'          => __( 'Next page', 'twentyfifteen' ),
        'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
) );

S’il n’y avait pas d’articles, on affiche un message d’erreur, en appelant le fichier content-none.php

// If no content, include the "No posts found" template.
    else :
    get_template_part( 'content', 'none' );

Puis on ferme les balises main et div ouverte précédemment.

    </main><!-- .site-main -->
</div><!-- .content-area -->

Enfin, on affiche le pied de page du site, dont le code est dans footer.php

<?php get_footer(); ?>

Pour simplifier et résumer, voici ce que ça donne:

Appelle l’entête du site (<?php get_header(); ?>)

Vérifie s’il y a bien du contenu (<?php if have_posts(): ?>)

Tant que (il y a des posts à afficher) : prépare-le;  (<?php while( have_posts() ) : the_post(); ?>)

Affiche-le en utilisant le code contenu dans le fichier content-$format.php, où $format est le format du post (lien, audio, vidéo, standard…) (<?php get_template_part( 'content', get_post_format() ); ?>)

Recommence. (<?php endwhile; ?>)

S’il n’y a pas de contenu, affiche un message d’erreur (<?php get_template_part( 'content', 'none' ); ?>)

Enfin, affiche le pied de page du site (<?php get_footer(); ?>)

Les template tags

Les template tags sont des fonctions de WordPress utilisées pour afficher les différentes données de votre site ou de vos articles.

Par exemple, <?php bloginfo('name'); ?> va afficher le titre de votre site, alors que <?php the_post_thumbnail(); ?> va afficher l’image à la une de votre article.

Ce sont ces fonctions qui vont vous permettre de personnaliser les informations que vous voulez présenter dans chaque template.

index.php a beau être le template responsable de l’affichage de la liste de vos articles, on a vu que la boucle est mise en place dans ce fichier, mais qu’il appelle content.php pour afficher le contenu des articles. Examinons donc content.php.

content.php

content.php contient uniquement le contenu de la balise <article>. Il utilise les templates tags de WordPress pour afficher les informations sur l’article.

<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>

    <header class="entry-header">
    <?php
        if ( is_single() ) :
            the_title( '<h1 class="entry-title">', '</h1>' );
        else :
            the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
        endif;
    ?>
    </header><!-- .entry-header -->

    <div class="entry-content">
    <?php
        /* translators: %s: Name of current post */
        the_content( sprintf(
            __( 'Continue reading %s', 'twentyfifteen' ),
            the_title( '<span class="screen-reader-text">', '</span>', false )
            ) );

        wp_link_pages( array(
            'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:',     'twentyfifteen' ) . '</span>',
            'after' => '</div>',
            'link_before' => '<span>',
            'link_after' => '</span>',
            'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
            'separator' => '<span class="screen-reader-text">, </span>',
            ) );
    ?>
    </div><!-- .entry-content -->

    <?php
        // Author bio.
        if ( is_single() && get_the_author_meta( 'description' ) ) :
            get_template_part( 'author-bio' );
        endif;
    ?>

    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->

</article><!-- #post-## -->

Le fichier commence avec un twentyfifteen_post_thumbnail(); qui est une fonction du thème qui va afficher l’image à la une associée à l’article demandé.

C’est une fonction personnalisée et l’auteur aurait pu utiliser the_post_thumbnail() qui est une fonction de WordPress pour afficher l’image.

Ensuite, on a le titre de l’article, affiché dans une entête header. Ce titre est affiché entre deux balises h1 si on est sur une page d’article simple ou entre deux balises h2 et dans un lien sur une liste d’articles.

Ce titre est affiché grace au tag the_title() auquel l’auteur a donné deux paramètres qui sont les balises situées avant et après le titre. En gros, le titre de l’article est affiché entre deux balises h1 ou h2.

Il aurait pu écrire : <h1><?php the_title(); ?></h1> ou <h2><a href="…"><?php the_title(); ?></a></h2>

L’adresse du lien est affichée à l’aide d’un autre tag: the_permalink(), qui renvoie l’url de l’article.

Le contenu de l’article à proprement parler est affiché à l’aide de the_content().

Les paramètres passés permettent de déterminer comment afficher le lien ‘Lire la suite’ quand il est inséré dans un article.

Puis wp_link_pages() vient insérer les liens de pagination si l’article a été divisé en plusieurs pages.

Une petite bio de l’auteur est affichée, puis un pied d’article <footer>.

Dans ce <footer>, on  trouve les informations sur l’article: auteur, date de publication, etc… qui sont affichées avec un tag personnalisé twentyfifteen_entry_meta().

Enfin, edit_post_link() vient afficher le raccourci permettant aux utilisateurs connectés ayant les permissions d’éditer le contenu de la page.

Comme on vient de le voir, WordPress fournit toutes les fonctions dont vous avez besoin pour afficher les éléments de l’article que vous souhaitez: nom de l’auteur, titre de l’article, contenu, image, date de publication, liste des catégories et étiquettes, etc… et vous permet aussi de créer les vôtres, pour ne pas alourdir le code du template ou si vous traitez tel ou tel élément de contenu différemment.

Parcourez le codex WordPress pour découvrir une liste des templates tags et des possibilités offertes.

Conclusion

Voila pour ce bref tour de Twenty Fifteen.

On a vu où trouver vos thèmes dans votre installation de WordPress, à quoi servaient la plupart des fichiers du thème et comment ils intéragissaient entre eux pour construire les pages de votre site.

J’espère que j’ai pu vous éclairer sur comment fonctionne la hiérarchie des templates et comment WordPress choisit le template qu’il va utiliser pour quelle page, ainsi que sur comment fonctionne la boucle de WordPress, qui est responsable de l’affichage du contenu de chaque page.

On a vu aussi comment les templates tags de WordPress permettaient d’afficher les informations précises de chaque article, comme l’image à la une, le contenu, le titre, etc…

Il nous faudrait beaucoup plus de temps pour faire un tour approfondi du thème, mais le but de l’article n’est pas de décortiquer le thème à 100%, mais plutôt de comprendre comment fonctionnent un thème et un template de manière générale.

Maintenant, c’est à vous d’aller explorer votre thème préféré, de lire sa documentation, de chercher dans la documentation de WordPress ce que font les fonctions de votre thème pour découvrir comment il fonctionne et quelles modifications vous pouvez lui apporter. Cela prend du temps, mais la documentation de WordPress est bien faite, avec de nombreux exemples et morceaux de codes à copier-coller et modifier.

Au boulot !

PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !