• 15 hours
  • Easy

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 3/13/18

Le processus de rendu

Log in or subscribe for free to enjoy all this course has to offer!

Après avoir créé un thème pour personnaliser l'apparence du site avec notre propre code HTML et CSS, nous allons détailler le processus de rendu des pages dans WordPress, afin de savoir quelles fonctionnalités sont disponibles pour modifier le comportement de l'application à un point donné.

La boucle de rendu

Les templates tags

Présentation

L’ensemble des fonctions fournies et conçues pour être appelées directement dans les fichiers de thème, sont appelées des template tags. Ces fonctions de WordPress peuvent avoir plusieurs utilisations :

  • afficher un contenu sur une page ;

  • vérifier une condition ;

  • récupérer une information globale comme le titre du site ou son adresse.

Par exemple, la fonction bloginfo() permet de récupérer toutes sortes de valeurs dans la base de données en fonction du paramètre qu’on lui fournit : le nom du blog, le répertoire du thème utilisé, la version de WordPress… Aussi, la fonction wp_title() se charge de calculer la valeur du texte présent dans la balise<title>de votre page HTML en fonction de la page vue, ce qui nous évite de faire divers tests pour le déterminer (à moins que vous ne vouliez afficher une valeur spécifique).

Le but des template tags est donc d'afficher les éléments ajoutés par l’administrateur du site (par exemple les articles) grâce à l'utilisation de fonctions PHP spécifiques.

Structurer le site

Les template tags permettent aussi d'appeler des portions de code affichées sur de nombreuses pages, comme c'est le cas de l'en-tête et du pied de page, présents sur l'ensemble du site. Pour ces éléments, les fonctions get_header() et get_footer() ont été créées et se chargent de l'inclusion dans votre page des fichiers header.php et footer.php respectivement.

Ainsi, en créant ces deux fichiers avec les contenus pour l'en-tête et le pied de page, le fichier index.php peut être écrit ainsi :

<?php get_header() ?>

<!-- ici s'insère le contenu principal de la page -->

<?php get_footer() ?>

Rendu d’un contenu

Les pages et articles

Le rendu d’une page ou d’un article passe donc lui aussi par l’utilisation d’un template tag particulier. Cependant, il doit suivre un processus prévu par WordPress qui est appelé la boucle de rendu, consistant en un appel successif de fonctions qui permettent la récupération des informations au sein d’une boucle.

La boucle de rendu la plus simple fait appel à au moins trois fonctions différentes de WordPress afin de parcourir et afficher les articles récupérés.

<?php
while (have_posts()) :
    the_post();
    the_content();
endwhile; ?>

La fonction have_posts() renvoie un booléen pour savoir s’il reste des objets à afficher sur la page en cours. Par exemple, lorsque l’on cherche à lister les derniers articles d’un blog, la fonction renverratruetant que tous les articles récupérés dans la base de données n’auront pas été affichés.

À l’intérieur de la boucle, la fonction the_post() effectue la récupération d’un article. À chaque appel de cette fonction, un curseur interne à WordPress sélectionne l’article suivant dans la liste de ceux que l’on a récupérés. Lorsque le curseur arrivera au dernier article, alors la méthode have_posts() renverrafalseet la boucle se terminera.

Une fois que le curseur est positionné sur un article, il faut appeler la fonction the_content() qui se charge de l’affichage du contenu de l’article en lui même. Cette fonction est donc conçue pour fonctionner à l'intérieur de la boucle de rendu, car elle est associée au rendu d'un article donné. De même, l'utilisation de la fonction the_title() au sein de la boucle permettra d'afficher le titre de l'article en cours.

Pourquoi utiliser une boucle lorsque l’on sait que l’on aura un seul objet, par exemple une page ?

En effet, utiliser la boucle de rendu pour une page peut paraître lourd alors que l’on sait à l’avance qu’il n’y aura qu’un seul passage. N’oubliez cependant pas que WordPress a un système de fallback (c'est-à-dire une procédure par défaut) pour l’utilisation des templates. Il est donc possible (et c'est souvent le cas) qu’un template donné soit utilisé pour le rendu des pages et des listes d’articles, qui seront quant à eux plusieurs sur une même page HTML. Utiliser la boucle permet donc d’avoir des templates plus génériques et qui fonctionneront quel que soit l’entité que l’on cherche à afficher.

Les commentaires

Avec l'affichage des publications viennent aussi les commentaires de vos visiteurs, que vous aurez besoin d'intégrer dans votre thème. À nouveau, tout se joue avec l'utilisation des bons template tags à l'endroit où vous désirez afficher les commentaires. Tout d'abord, la fonction comments_template(), appelée dans la boucle de rendu, inclut le fichier comments.php que nous verrons plus bas et qui se charge de la mise en forme des commentaires. Ensuite, la fonction comment_form() crée le formulaire pour les utilisateurs voulant ajouter un nouveau commentaire à une publication. La boucle de rendu se complète donc encore un peu avec ces nouvelles fonctions.

<?php
while (have_posts()) :
  the_post();
  the_content();

  comments_template();
  comment_form();
endwhile; ?>

Le fichier comments.php, si l'on met de côté la mise en forme, n'a besoin que d'appeler wp_list_comments() pour afficher les commentaires associés à l'article. Cette fonction se charge de l'itération au travers de la liste des commentaires associés la publication actuellement parcourue par la boucle de rendu.

<ol>
  <?php wp_list_comments(); ?>
</ol>

Les filtres

Même si nous avons à notre disposition toutes les fonctions nécessaires pour récupérer les contenus du site, il y a fort à parier pour que vous vouliez, à un moment ou un autre, modifier la valeur de retour d'une fonction native de WordPress.

Prenons la fonction the_title(), qui permet d’obtenir le titre de l’article ou de la page en cours. Supposons que vous ne vouliez afficher au maximum que les 50 premiers caractères du titre si celui-ci est trop long. Regardons le prototype de la fonction (dans le fichier wp-includes/post-template.php) :

<?php function the_title($before = '', $after = '', $echo = true)

Le fonction permet de rajouter du code HTML avant et après le titre avec les deux premiers paramètres, tandis que le troisième indique si elle doit retourner la valeur du titre ou l’afficher elle-même via un echo.

Ce dernier argument pourrait être utilisé (en choisissant la valeur false) pour faire un traitement à la suite de la récupération du titre. En revanche, ce traitement particulier devrait être exécuté pour chaque template qui utilise cette fonction : c’est lourd et cela charge les templates de traitements supplémentaires.

Pour éviter cela, WordPress propose un système de filtres sur lesquels vous pouvez brancher des fonctions effectuant un traitement comme celui que l’on désire obtenir.

Appeler un filtre

Pour bien comprendre comment WordPress vous permet d’ajouter un traitement particulier à un endroit du code, il faut voir comment les filtres sont appelés.

La fonction apply_filters() déclenche l’application de toutes les fonctions rattachées à une clé de filtre donnée. Cette clé de filtre est le premier argument de la fonction, suivi par les paramètres envoyés.

Si nous revenons à la fonction the_title(), nous voyons qu’elle fait elle-même un appel à la fonction get_the_title() située dans le même fichier (wp-includes/post-template.php). C’est cette dernière qui exécute apply_filters() avant de renvoyer la valeur du titre le l’article que l’on désire obtenir. Cet appel contient trois arguments :

<?php apply_filters( 'the_title', $title, $id );

La clé du filtre est donc the_title, tandis que deux arguments sont passés aux fonctions de retour : le titre de l’article et son ID dans la base de données. À partir de ces données qui seront transférées au filtre, vous avez les moyens d’appliquer vos traitements.

Brancher un filtre

Pour brancher une fonction de filtre, nous utilisons la fonction add_filter() prenant deux paramètres : le nom du filtre et une fonction de rappel lorsque le filtre doit être exécuté.

Pour cela, vous devrez utiliser le fichier functions.php (créez-le si vous ne l’avez pas encore) de notre thème et qui est inclus automatiquement par WordPress s’il existe.

<?php add_filter('the_title', 'truncate_long_title');

Bien entendu il faut maintenant déclarer la fonction truncate_long_title() pour que le filtre fonctionne. Faites cela à la suite, toujours dans functions.php.

<?php
function truncate_long_title($title)
{
    if (strlen($title) > 50) {
        $title = substr($title, 0, 50).'...';
    }
    return $title;
}

Maintenant, si vous créez un article avec plus de 50 caractères dans son titre, il sera coupé.

Ce qu’il faut vraiment retenir ici, c’est que nous avons pu étendre une fonctionnalité de WordPress sans pour autant avoir modifié le code du cœur de l’application : tout le code supplémentaire se trouve uniquement dans le thème que nous avons créé. C’est un principe de développement auquel il faut se tenir si l’on veut proposer du code maintenable et pouvant rester fonctionnel même avec de nouvelles versions du moteur.

Ajouter des templates personnalisés

Nous avons un dernier point important à éclaircir pour conclure cet aperçu des thèmes de WordPress. Jusque là, vous savez comment déclarer des fichiers de thème dont le nom est défini par WordPress (comme content.php ou footer.php) et comment les surcharger grâce aux thèmes enfants. Mais comment utiliser des fichiers totalement personnalisés qui ne sont utilisables que sur votre site et dont le choix du nom sera arbitraire ?

On ne peut pas simplement utiliser la fonction require de PHP ?

C'est une solution envisageable, mais qui manque beaucoup de souplesse, car vous devrez indiquer le chemin du fichier lors de l'appel.

<?php
require __DIR__ . '/mon-template.php';
// ou mieux :
require STYLESHEETPATH . '/mon-template.php';

Malheureusement avec ce fonctionnement, nous perdons tout le mécanisme de fallback de WordPress. En effet, si le fichier n'existe pas, nous aurons une erreur d'exécution lors de la tentative d'inclusion. De plus, dans le premier cas, il n'est pas possible pour un thème enfant de surcharger uniquement le fichier mon-template.php, il faudra aussi surcharger les appels. Et dans le second cas d'inclusion, le fichier devrait obligatoirement être redéfini dans le thème enfant, ce qui va à l'encontre du système d'héritage de thème.

Pour résoudre ce problème, il existe la fonction get_template_part() définie dans le fichier wp-includes/general-template.php comme suit :

<?php function get_template_part( $slug, $name = null )

Cette fonction inclut le fichier de template de la forme $slug-$name.php, ou $slug.php si $name vaut null ou que le premier n'existe pas, tout en conservant le mécanisme de fallback.

Ainsi, l'appel à notre fichier spécifique devient tout simplement :

<?php
get_template_part( 'mon-template.php' );
  • La boucle de rendu est chargée d'afficher l'ensemble des articles correspondant à une page donnée du site.

  • Les fonctions de filtres permettent de modifier le contenu de la valeur de retour de certaines fonctions, comme le titre de la page ou le contenu d'un article.

  • Vous pouvez inclure des fichiers spécifiques avec la fonction get_template_part().

Example of certificate of achievement
Example of certificate of achievement