Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. WordPress
  3. Les principaux marqueurs et fonctions WordPress
Extrait - WordPress Conception et personnalisation des thèmes (4e édition)
Extraits du livre
WordPress Conception et personnalisation des thèmes (4e édition)
3 avis
Revenir à la page d'achat du livre

Les principaux marqueurs et fonctions WordPress

Les marqueurs et les fonctions

Pour afficher les contenus de votre site WordPress, les templates utilisent des marqueurs de modèle, des template tags en anglais. Les marqueurs sont des fonctions PHP spécialement dédiées à WordPress. Elles vont chercher des informations dans la base de données pour permettre l’affichage de leurs valeurs dans les templates.

Par exemple, le marqueur bloginfo(’url’) permet d’afficher l’URL de votre site. Le code pourrait être celui-ci : <p><?php bloginfo(’url’); ?></p>. Le template va afficher dans un paragraphe <p>, l’URL de votre site.

Les fonctions de référence de WordPress (functions reference en anglais) sont très similaires aux marqueurs. Contrairement aux marqueurs, les fonctions n’affichent rien, elles renvoient des valeurs que vous pouvez stocker dans des variables PHP. Ensuite, vous pouvez effectuer un traitement sur ces variables.

Par exemple, la fonction get_bloginfo(’template_url’) va renvoyer le chemin d’accès au thème actif. Cet exemple va permettre de stocker le chemin d’accès du thème actif dans une variable nommée $chemin_theme. Ensuite, nous allons afficher la valeur de cette variable dans un paragraphe <p> à l’aide de la fonction PHP echo() :

<?php  
  $chemin_theme = get_bloginfo('template_url');...

La boucle WordPress

Dans les thèmes, vous trouverez dans de très nombreux fichiers la "fameuse" boucle WordPress (loop en anglais) qui est le cœur de l’affichage des sites WordPress. C’est par cette boucle while() que sont affichés les contenus rédactionnels dans toutes les pages de vos sites WordPress.

La boucle va interroger la base de données pour savoir s’il y a des données à afficher. Si la réponse est oui, la boucle va afficher les données que nous lui demandons d’afficher.

Voici la boucle simplifiée (sans le test sur le nombre d’article) du thème par défaut de WordPress 5.3, le thème Twenty Twenty.

if ( have_posts() ) { 
    while ( have_posts() ) { 
        the_post(); 
        get_template_part( 'template-parts/content', 
get_post_type() ); 
    } 
} 

La première étape consiste à tester avec la fonction PHP if(), s’il y a du contenu disponible avec la fonction WordPress have_posts(). Voici l’URL de référence de cette fonction : https://developer.wordpress.org/reference/functions/have_posts/

S’il y a du contenu à afficher, la boucle PHP while() est appelée. Tant qu’il y a du contenu à afficher, have_posts(), la boucle utilise la fonction...

Créer de nouvelles boucles

1. Les objectifs

Nous venons de le voir, la boucle standard de WordPress permet d’afficher les contenus dans toutes les pages de votre site. Dans la page d’accueil, la boucle permet d’afficher la liste des X derniers articles créés, avec une configuration standard de type blog (menu Réglages - Lecture - options La page d’accueil affiche et Les pages du site doivent afficher au plus).

Mais pour personnaliser l’affichage en page d’accueil, vous pouvez souhaiter afficher en plus d’autres contenus selon d’autres critères. Par exemple, vous souhaiteriez afficher les X derniers articles d’une catégorie donnée, ou d’un auteur précis, ou d’un mois spécifié. Vous pouvez aussi vouloir afficher les articles d’un type de contenu personnalisé (Custom Post Type).

Si tel est votre objectif, vous devez alors créer une deuxième boucle WordPress à l’aide de la fonction WP_Query(), dont voici l’URL de référence sur le Codex de WordPress : https://developer.wordpress.org/reference/classes/wp_query/

2. Créer une boucle sur une catégorie

Pour ce premier exemple, nous allons créer une boucle sur une catégorie donnée. La première étape consiste à connaître l’identifiant de la catégorie voulue. Pour ce faire vous pouvez utiliser un plug-in comme Catch IDs (https://wordpress.org/plugins/catch-ids/) ou bien repérer cet identifiant au survol de ladite catégorie, dans la barre d’état de l’administration de votre site. Dans cet exemple, l’identifiant de la catégorie ciblée est 2.

images/C05-047.png

Nous allons afficher le résultat de cette nouvelle boucle dans la page d’accueil. C’est donc dans le fichier index.php que nous allons insérer ce code, sous la boucle principale.

La première étape consiste à définir les arguments de la nouvelle requête, avec les critères de sélection. Dans cet exemple, les critères seront d’afficher les contenus de type Article de la catégorie Voyage dont l’identifiant est 2 et d’afficher les 10 derniers. Voici la déclaration de cette requête...

Les inclusions des fichiers et des templates

1. Insérer les fichiers de structure

Nous l’avons déjà évoqué, les thèmes WordPress sont constitués de plusieurs fichiers de structure qu’il faut associer afin de constituer l’affichage complet des pages.

De manière usuelle nous avons quatre fichiers de structure :

  • la page principale : index.php qui est le fichier maître, celui qui assemble l’ensemble des autres fichiers, des autres templates.

  • l’en-tête des pages est construit avec le fichier header.php.

  • la colonne latérale avec le fichier sidebar.php.

  • le pied de page avec le fichier footer.php.

Depuis le fichier index.php (et d’autres fichiers de structure, comme archive.php, page.php...), pour intégrer ces trois fichiers, WordPress utilise trois fonctions dédiées :

Les marqueurs de site

Les marqueurs de site permettent d’afficher toute une série d’informations concernant les paramètres du site : le titre du site, son slogan, son URL, le chemin d’accès aux fichiers CSS... C’est le marqueur bloginfo($show) qui permet d’afficher les informations voulues par l’intermédiaire du paramètre $show. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/bloginfo/

Voici des exemples d’utilisation avec différents arguments :

  • bloginfo(’name’) permet d’afficher le titre du site tel qu’il est indiqué dans Réglages - Général, dans le champ Titre du site.

  • bloginfo(’description’) permet d’afficher le slogan du site tel qu’il est indiqué dans Rég ...

Les injections de code

Les développeurs de thèmes et de plug-ins pour WordPress peuvent injecter du code dans l’en-tête et dans le pied de page à l’aide de deux fonctions dédiées.

La fonction wp_head(), généralement placée dans l’élément HTML <head>, permet d’y injecter du code. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/wp_head/. Le code en question peut être des liaisons à des fichiers CSS, JavaScript, des scripts, des règles CSS...

La fonction wp_footer(), généralement placée avant la balise de fermeture de l’élément <body> fonctionne sur le même principe. Le code injecté sera exécuté en toute fin de chargement de la page. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/wp_footer/.

Ces deux fonctions ne font qu’insérer le code injecté dans la page HTML. C’est dans le fichier functions.php qu’est indiqué le code à injecter à l’aide, par exemple, de la fonction wp_enqueue_scripts(). 

Les fonctions pour les liens

1. Les liens dans WordPress

Dans tout site web, le visiteur doit pouvoir afficher le contenu qu’il souhaite par l’intermédiaire de liens. WordPress ne déroge pas à la règle et nous propose des marqueurs et des fonctions pour créer plusieurs types de liens.

2. Le lien vers la page d’accueil

Pour revenir à la page d’accueil, c’est la fonction home_url() qu’il faut utiliser. Voici son URL de référence : https://developer.wordpress.org/reference/functions/home_url/

Cette fonction propose deux paramètres : home_url( string $path = ’’, string|null $scheme = null ).

  • l’argument $path permet de préciser le caractère de fin de l’URL du site. home_url( ) donnera http://www.mon-site. home_url(’/’ ) donnera http://www.mon-site/.

  • l’argument $scheme permet de préciser le protocole : ’http’, ’https’ ou ’relative’.

Cette fonction home_url() s’utilise avec la fonction esc_url() qui permet de "nettoyer" l’URL des caractères interdits. Voici son URL de référence : https://developer.wordpress.org/reference/functions/esc_url/

Ces deux fonctions imbriquées s’utilisent dans un lien <a>. Voici la syntaxe usuelle utilisée : <a href="<?php echo esc_url( home_url( ’/’ ) ); ?>"> <?php bloginfo(’name’); ?></a>.

3. Les URL du site

Avec une installation standard de WordPress...

Les marqueurs des contenus

Pour afficher tout le contenu rédactionnel des articles et des pages, WordPress nous propose plusieurs marqueurs.

1. Afficher le titre

Commençons par le titre de l’article ou de la page. C’est le marqueur the_title() qui gère cet affichage. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/the_title/. Notez que ce marqueur doit être utilisé dans la boucle WordPress.

Dans un template donné, le marqueur <?php the_title(); ?>, sans paramètre, affiche le titre du contenu.

Ce marqueur propose plusieurs paramètres optionnels : the_title( string $before = ’’, string $after = ’’, bool $echo = true ) :

  • $before permet d’insérer du code HTML/CSS avant l’affichage du titre.

  • $after permet d’insérer du code HTML/CSS après l’affichage du titre.

  • $echo indique ce que doit retourner ce marqueur. La valeur par défaut true indique que le titre doit être affiché. La valeur false indique que le marqueur renvoie la valeur, le titre donc, sans l’afficher, afin de l’utiliser dans du code PHP.

Par exemple, ce code : <?php the_title(’<h2 class="titre-contenu">’,’< h2>’); ?> affichera le titre du contenu dans un élément HTML <h2>, avec la classe...

Les marqueurs de date et d’heure de rédaction

Il est d’usage d’indiquer a minima la date de création des articles. C’est une indication précieuse pour les visiteurs des sites. Vous avez aussi la possibilité d’y ajouter l’heure.

1. Afficher la date de création

Le marqueur the_date() affiche la date de création de l’article et donc pas forcément la date de publication sur le site, puisqu’un article peut être enregistré en tant que brouillon avant sa publication. Voici l’URL de référence de ce marqueur : https://developer.wordpress.org/reference/functions/the_date/. Ce marqueur doit être utilisé dans la boucle WordPress.

L’utilisation du marqueur the_date() sans paramètre affiche la date sans aucun conteneur HTML.

2. Les paramètres d’affichage de la date

Ce marqueur nous propose plusieurs paramètres : the_date( string $d = ’’, string $before = ’’, string $after = ’’, bool $echo = true ).

Le premier paramètre $d permet de personnaliser la date affichée. Par défaut, c’est le format de la date réglée dans Réglages - Général - Format de date, qui est utilisé.

images/C05-008N.png

Voici une URL pour déterminer le format de date que vous souhaitez : http://php.net/manual/fr/function.date.php...

Les marqueurs des auteurs

WordPress nous propose de nombreux marqueurs pour afficher le nom des rédacteurs et des informations provenant des profils des utilisateurs.

1. Afficher le nom de l’auteur

Le marqueur the_author() affiche le nom de l’auteur du contenu. Voici son URL de référence : https://developer.wordpress.org/reference/functions/the_author/. Ce marqueur s’utilise dans la boucle WordPress.

Voici un exemple d’utilisation : <p>Rédigé par : <?php the_author() ?></p> et l’affichage obtenu :

images/C05-017.png

Le nom de l’auteur qui est affiché provient du champ Nom à afficher publiquement dans le profil de l’utilisateur, si ce champ est renseigné :

images/C05-015N.png

Si le champ Nom à afficher publiquement n’est pas renseigné, c’est la valeur du champ Identifiant qui est utilisée, puisque ce dernier est obligatoire.

Si vous souhaitez récupérer le nom de l’auteur, utilisez la fonction get_the_author() : https://developer.wordpress.org/reference/functions/get_the_author/

2. Afficher le site de l’auteur

Le marqueur the_author_link() affiche le nom de l’auteur, avec un lien vers son site. Voici l’URL de référence de ce marqueur : https://developer.wordpress.org/reference/functions/the_author_link/. Il n’y a pas de paramètre. Le site est indiqué dans le profil utilisateur, dans la zone Informations de contact, dans le champ Site web.

images/C05-016N.png

Voici un exemple d’utilisation : <p>Le site de l’auteur : <?php the_author_ link() ?></p> et l’affichage obtenu :

images/C05-017N.png

Si vous souhaitez récupérer le site de l’auteur, utilisez la fonction get_the_author_link()...

Les marqueurs des images mises en avant

1. Utiliser les images mises en avant

Depuis de nombreuses versions maintenant, WordPress propose d’utiliser des images mises en avant. Ces images sont faites pour illustrer les articles ou les pages sans que l’insertion de ces images se fasse dans le contenu rédactionnel. Elles ne sont donc pas affichées avec le marqueur the_content(). Ces images sont affichées là où vous le souhaitez dans le template.

Mais attention, tous les thèmes n’utilisent pas forcément les images à la une, il faut que cette fonctionnalité soit explicitement activée dans le fichier functions.php du thème. C’est la fonction add_theme_support( ’post-thumbnails’ ) qui permet d’activer cette fonctionnalité. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/add_theme_support/#post-thumbnails

Dans la colonne latérale de droite, dans l’onglet Document, dans le volet Image mise en avant, cliquez sur le bouton Définir l’image mise en avant, pour sélectionner l’image voulue.

images/C05-020N.png

2. Afficher les images mises en avant

C’est le marqueur the_post_thumbnail() qui permet d’afficher l’image mise en avant de l’article. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/the_post_thumbnail/

Le marqueur...

Les marqueurs des catégories

Vous le savez, il est obligatoire de classer vos articles dans des catégories. Si vous ne le faites pas, vos articles seront classés dans la catégorie déclarée par défaut dans le menu Réglages - Écriture. Suite à une installation standard de WordPress, cette catégorie par défaut est nommée Non classé. 

1. Afficher le nom des catégories

Le marqueur the_category() affiche le nom de la ou des catégories d’appartenance de l’article. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/the_category/

Avec le thème Twenty Twenty, ce marqueur affiche les catégories dans une boîte : <div class="entry-categories-inner">. Chaque nom de catégorie est inséré dans un lien <a href="..." rel="category tag">.

Voici le code généré avec le thème Twenty Twenty dans un site local, avec la fonction générique de WordPress 5.3 :

<div class="entry-categories-inner"> 
    <a href="http://localhost:8888/wordpress-themes/category/
projets/" rel="category tag">Projets</a> 
    <a href="http://localhost:8888/wordpress-themes/category/
voyage/" rel="category tag">Voyage</a> 
</div>

Voici l’affichage obtenu avec...

Les marqueurs des étiquettes

Les étiquettes permettent d’associer des mots-clés aux articles et ainsi d’avoir une classification indépendante des catégories. Les étiquettes sont une forme de taxinomie, au même titre que les catégories.

1. Afficher les étiquettes

Le marqueur the_tags() affiche la ou les étiquettes associée(s) à l’article. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/the_tags/

Dans cet exemple, l’article possède trois étiquettes : Mer, Ville et Montagne.

images/C05-028N.png

Voici l’affichage obtenu avec le thème Twenty Twenty :

images/C05-029N.png

Les étiquettes sont placées dans des liens <a> qui permettent d’afficher la page d’archive correspondante.

Voici le code généré dans un site en local avec le thème Twenty Twenty :

<ul class="post-meta"> 
    <li class="post-tags meta-wrapper"> 
        <span class="meta-icon"> 
            <span class="screen-reader-text">Étiquettes</span> 
            <svg class="svg-icon" aria-hidden="true" role="img" 
focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" ...

Les marqueurs conditionnels

1. Les objectifs

Les templates permettent de créer des mises en page et des mises en forme pour des contextes spécifiques : affichage des archives, affichage des articles d’un auteur, affichage du contenu des articles ou des pages...

Mais vous serez certainement confrontés au fait d’avoir un seul template qui doit répondre à plusieurs contextes d’affichage. Dans ce cas, il faudrait obligatoirement tester le contexte d’affichage pour savoir quels éléments sont à afficher et de quelle manière.

Pour ce faire, vous devrez utiliser les marqueurs conditionnels. Ces marqueurs s’utilisent avec un simple if() PHP pour tester un contexte d’affichage. Ces marqueurs vont vous permettre de tester et donc de connaître la page affichée.

Voici quelques exemples :

  • is_home() renvoie true quand la d’accueil est définie sur Les derniers articles ou quand la page affichée est celle du blog, avec Une page statique,

  • is_front_page() renvoie true quand la page d’accueil est définie sur Les derniers articles ou avec Une page statique,

  • is_single() renvoie true avec un article en page seule,

  • is_page() renvoie true avec une page affichée en tant que type de contenu,

  • is_category() renvoie true avec une page d’archive de catégorie,

  • is_tag() renvoie true avec une page d’archive d’étiquette,

  • is_author() renvoie true avec une page d’archive d’un auteur.

Il existe bien d’autres marqueurs conditionnels. Voici l’URL de référence pour les marqueurs conditionnels : https://developer.wordpress.org/themes/basics/conditional-tags/

2. Les articles épinglés

Prenons un premier exemple. Supposons que vous ayez créé un seul template pour afficher le contenu des articles. Mais, dans ce template, vous voulez différencier les articles épinglés des articles courants.

Pour indiquer qu’un article est épinglé, dans l’onglet Document, dans le volet État et visibilité, l’option Épingler en haut du blog doit être cochée.

images/C05-032N.png

Dans ce cas, il faut dans le template, pouvoir distinguer ces deux types d’articles. Dans cet exemple, nous allons devoir tester si l’article est mis en avant avec le marqueur conditionnel is_sticky(), dont voici...

Créer un emplacement pour des widgets

1. Utiliser les widgets

Les widgets sont un des composants emblématiques de WordPress. Ils permettent d’ajouter des éléments de navigation sur les articles, d’afficher les derniers commentaires ou encore d’effectuer la taxinomie (catégories et étiquettes). Ils permettent aussi d’ajouter des zones de texte libre que vous pouvez mettre en forme.

Chaque thème propose des emplacements de widget que le designer peut placer où il veut et avec la mise en forme qu’il veut. Ensuite, ces emplacements sont disponibles dans l’administration de WordPress dans le menu Apparence - Widgets.

La gestion des emplacements de widgets se fait dans le fichier functions.php du thème.

2. Déclarer les emplacements

La première étape consiste à déclarer le ou les emplacements de widgets dans votre thème. Pour cela, nous allons utiliser le fichier functions.php qui est le fichier le plus couramment utilisé. Mais sachez que certains thèmes peuvent avoir plusieurs fichiers de type functions.php, nommés différemment et placés parfois dans des sous-dossiers du thème. Donc la situation n’est pas toujours la même, ce qui ne facilite pas la vie des développeurs WordPress !

La fonction qui permet de déclarer des emplacements de widgets est register_sidebar(), dont voici l’URL de référence : https://developer.wordpress.org/reference/functions/register_sidebar/.

Voici l’URL sur la conception des emplacements des widgets : https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar.

Certains thèmes, parfois un peu anciens, commencent par vérifier si cette fonction n’a pas déjà été utilisée, ceci afin d’éviter les doublons, notamment dans la conception de thème enfant. Pour cela vous trouverez cette syntaxe :

if (function_exists('register_sidebar')) {  
  ...  
}

Sans ce test, la déclaration commence donc par la création d’une fonction qui va permettre de créer un ou des emplacements de widgets. Dans le thème Twenty Twenty, cette fonction est nommée...

Créer un emplacement pour un menu

1. Utiliser les menus

Originellement, les menus servaient exclusivement à afficher des pages statiques. Mais depuis longtemps déjà, vous pouvez y afficher des articles, des catégories, des formats d’articles, des liens personnalisés...

Chaque thème propose des emplacements pour les menus que le designer peut placer où il veut et avec la mise en forme qu’il souhaite. Ensuite, ces emplacements sont disponibles dans l’administration de WordPress : menu Apparence - Menus.

La gestion des emplacements des menus se fait dans le fichier functions.php du thème.

2. Déclarer les emplacements

La procédure va être en tout point similaire à celle des widgets. Dans le fichier functions.php du thème utilisé, repérez la fonction register_nav_menus(). C’est cette fonction qui permet de créer les emplacements pour les menus. Voici l’URL de référence : https://developer.wordpress.org/reference/functions/register_nav_menus/

Dans le thème Twenty Twenty de WordPress 5.3, cette fonction est utilisée dans la fonction plus générale function twentytwenty_menus() :

function twentytwenty_menus() { 
    $locations = array( 
        'primary' => __( 'Desktop Horizontal Menu', 'twentytwenty' ), 
        'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ), 
        'mobile' => __( 'Mobile Menu', 'twentytwenty' ), 
        'footer'...