Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
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. Le thème de démarrage Underscores
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

Le thème de démarrage Underscores

L’objectif

Aujourd’hui, il ne serait pas efficace de créer un thème en partant de zéro et de devoir tout créer depuis une page de code vide. Cela prendrait énormément de temps de créer tous les fichiers nécessaires, tous les templates et d’y insérer tous les marqueurs utiles.

Pour permettre un développement de thème plus rapide, il est plus judicieux de partir depuis une base solide qui propose déjà une structure de fichier élaborée comprenant tous les fichiers et templates nécessaires avec, dans chaque template, l’essentiel des marqueurs nécessaires à l’affichage des contenus.

Pour aborder cette façon de travailler, vous pouvez utiliser les Starter Themes, les thèmes de démarrage.

Parmi les nombreux Starter Themes qui existent, nous allons aborder Underscores (ou _s). Ce Starter Themes a été élaboré par l’équipe d’Automattic (https://automattic.com) qui est la maison mère de WordPress.

images/C07-001.png

Attention, il est très important de noter que Underscores ne propose aucune mise en forme ni mise en page du thème. Le fichier style.css est présent, car il est obligatoire, mais il est vide de toute règle CSS s’appliquant sur la mise en page. Il ne contient que des règles CSS harmonisant l’affichage dans les différents...

L’installation d’Underscores standard

1. Télécharger le Starter Theme

Le téléchargement d’Underscores se fait en indiquant le nom de thème que vous souhaitez. Cela peut être le nom du site, votre nom de développeur ou tout autre, du moment que vous respectiez la syntaxe web : pas d’espace, pas de caractères spéciaux ni de caractères accentués.

 Allez sur le site d’Underscores : http://underscores.me

images/C07-002.png

 Dans le champ Theme Name, saisissez le nom de votre thème.

images/C07-003.png

 Cliquez sur le bouton GENERATE.

Vous téléchargez une archive au format .zip nommée selon le nom que vous avez choisi. Dans cet exemple, l’archive se nomme voyage.zip.

2. Installer votre thème

 Dans l’administration de votre site WordPress, installez le thème de manière classique.

images/C07-004.png

Le thème reprend bien le nom que vous aviez indiqué lors de sa création, voyage dans cet exemple.

Vous voyez que le thème n’affiche pas de vignette, ce qui est normal, puisqu’il n’y a jamais de styles CSS d’installés. Si vous souhaitez avoir une vignette, modifiez le fichier screenshot.png, qui se trouve à la racine du dossier du thème.

 Au survol de ce thème, cliquez sur le bouton Détails du thème.

images/C07-005.png

Il n’y a aucune indication technique sur votre thème...

L’installation d’Underscores avec les options

1. Télécharger le Starter Theme

Vous pouvez télécharger Underscores avec des options. Ces options seront utilisées dans le paramétrage du thème et affichées dans l’administration.

 Allez sur le site d’Underscores : http://underscores.me et sous le nom Theme Name, cliquez sur le lien Advanced Options.

images/C07-006.png

Vous avez accès à plusieurs champs pour paramétrer votre thème :

images/C07-001N.png

Le champ Theme Name permet de saisir le nom du thème.

Le champ Theme Slug sera utilisé dans la configuration de certaines fonctions propres au thème.

Le champ Author permet d’indiquer le nom de l’auteur du thème, il sera affiché dans les détails du thème.

Le champ Author URI permet d’indiquer le site web de l’auteur du thème, il sera affiché dans les détails du thème.

Le champ Description permet de renseigner la description du thème, elle sera affichée dans les détails du thème.

images/C07-002N.png

 Si vous créez un site d’e-commerce avec WooCommerce, cochez l’option WooCommerce boilerplate.

 Si vous utilisez SASS pour concevoir vos règles CSS, vous pouvez cocher l’option _sassify!.

 Cliquez sur le bouton GENERATE.

Vous téléchargez une archive au format .zip nommée voyage.zip dans cet exemple....

Les fichiers du thème

Dans le dossier /themes/, vous avez le dossier de votre thème, voyage dans cet exemple.

Voici la liste des fichiers et leur utilisation :

  • 404.php : le template des pages non trouvées.

  • archive.php : le template pour afficher les archives (par mois, par catégorie, par étiquette, par auteur...).

  • comments.php : le template pour afficher les commentaires.

  • footer.php : le template pour afficher le pied de page.

  • functions.php : le fichier de personnalisation du thème.

  • header.php : le fichier pour afficher l’en-tête.

Le dossier inc contient des fichiers inclus qui sont utilisés pour la personnalisation du thème.

  • custom-header.php pour utiliser des en-têtes personnalisés.

  • customizer.php pour paramétrer l’interface de personnalisation du thème.

  • jetpack.php contient des fonctions pour la personnalisation du plug-in JetPack.

  • template-functions.php contient des fonctions de personnalisation de classes CSS utilisées par le thème.

  • template-tags.php contient des fonctions pour les marqueurs de template personnalisés du thème, comme par exemple l’affichage de la date de publication des articles et les métadonnées.

  • index.php c’est le fichier qui gère l’affichage de la page d’accueil.

Le dossier js contient des fichiers JavaScript.

  • customizer.js contient des fonctions pour optimiser le paramétrage...

La feuille de styles CSS

Le fichier style.css est absolument obligatoire pour qu’un thème soit valide. Dans ce fichier, sont aussi incluses en commentaire de nombreuses informations concernant le thème.

Voici le début de ce fichier :

/*! 
Theme Name: voyage 
Theme URI: http://underscores.me/ 
Author: Christophe AUBRY 
Author URI: http://www.neplume.net 
Description: Un thème basé sur Underscores pour un site de voyage 
Version: 1.0.0 
License: GNU General Public License v2 or later 
License URI: LICENSE 
Text Domain: voyage 
Tags: custom-background, custom-logo, custom-menu, featured-images, 
threaded-comments, translation-ready 
 
This theme, like WordPress, is licensed under the GPL. 
Use it to make something cool, have fun, and share what you've learned 
with others. 
 
voyage is based on Underscores https://underscores.me/, (C) 2012-2017 
Automattic, Inc. 
Underscores is distributed under the terms of the GNU GPL v2 or later. 
 
Normalizing styles have been helped along thanks to the fine work of 
Nicolas Gallagher and Jonathan Neal  
https://necolas.github.io/normalize.css/ 
*/ 

Nous y retrouvons le nom du thème, le nom de l’auteur et son URL, la description, tels que nous les avions indiqués lors de la création du thème. Libre à vous de modifier ces informations...

Les fonctions personnalisées du thème

Le nom que nous avons utilisé pour nommer le thème et/ou nommer le slug avec les options avancées est utilisé comme préfixe à de nombreuses fonctions de personnalisation du thème.

Par exemple, dans le fichier functions.php, la fonction qui permet de lier une feuille de style CSS se fait bien dans le domaine voyage : wp_enqueue_style( ’voyage-style’, get_stylesheet_uri() );.

Dans le fichier /inc/template-tags.php, la fonction qui permet l’affichage de la date de publication des contenus est nommée avec le nom du thème : function voyage_posted_on() {...}.

La traduction du thème

Le Starter Theme Underscores est prêt à la traduction, mais il n’est pas traduit. C’est à vous de faire la traduction des nombreuses chaînes de caractères qui sont utilisées dans les différents affichages.

Voici quelques exemples :

  • Résultat d’une recherche infructueuse :

images/C07-055.png

Voici l’utilisation de ces deux lignes de code dans le fichier /template-parts/content-none.php : esc_html_e( ’Nothing Found’, ’voyage’ ) et esc_html_e( ’Sorry, but nothing matched your search terms. Please try again with some different keywords.’, ’voyage’ ).

  • Page demandée inexistante :

images/C07-056.png

Voici l’utilisation de ces deux lignes de code dans le fichier 404.php : esc_html_e( ’Oops! That page can’t be found.’, ’voyage’ ) et esc_html_e( ’It looks like nothing was found at this location. Maybe try one of the links below or a search?’, ’voyage’ ).

  • Affichage de la taxinomie :

images/C07-057.png

Voici l’utilisation de ces lignes de code dans le fichier /inc/template-tags.php : esc_html__( ’Posted in %1$s’, ’voyage’ ), esc_html__( ’Tagged %1$s’, ’voyage’ ) et esc_html__( ’Edit %s’, ’voyage’ ).

Pour effectuer ces traductions, vous devez utiliser le fichier voyage.pot qui se trouve dans le dossier languages, à la racine...

La structure du thème

Voici le schéma de la structure du thème qui est constituée de classiques fichiers index.php, header.phpsidebar.php et footer.php.

images/C07-004N.png

Comme toujours, c’est le fichier index.php qui est le fichier "maître" pour la page d’accueil, celui qui agence et qui appelle les autres fichiers avec les fonctions get_header(), get_sidebar() et get_footer().

Le fichier header.php

1. L’en-tête HTML

Le fichier header.php gère l’en-tête HTML de toutes les pages et l’en-tête affiché du site.

images/C07-005N.png

L’en-tête HTML contient tous les éléments de structure classiques : <!DOCTYPE html>, <html>, <head> et <body>. Ces trois derniers éléments auront leur balise de fermeture dans le fichier footer.php. Notez dans le <head> la présence de la fonction wp_head().

Toute la structure des pages d’Underscores est insérée et affichée dans la boîte <div id="page" class="site">. Sa balise de fermeture se trouve dans le fichier footer.php.

Juste sous cette balise d’ouverture, nous avons un lien qui est utilisé pour l’accessibilité des sites web : <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( ’Skip to content’, ’voyage’ ); ?></a>.

2. L’affichage du titre et du slogan

L’en-tête du site est placé dans l’élément <header id="masthead" class= "site-header">. Dans celui-ci, le titre et le slogan du site sont insérés dans la boîte <div class="site-branding">.

images/C07-006N.png

Pour l’affichage du titre, le script teste si la page affichée est la page d’accueil : if ( is_front_page() && is_home() ) :. Si c’est le cas...

Le fichier sidebar.php

La colonne latérale, la sidebar, s’affiche usuellement sur un des côtés de la page, à gauche ou plus couramment à droite. Le fichier sidebar.php est appelé, entre autres, depuis le fichier index.php avec la fonction get_sidebar().

Usuellement, la sidebar permet d’afficher les widgets dans un emplacement qui est défini dans le fichier functions.php :

function voyage_widgets_init() {  
  register_sidebar( array(  
       'name' => esc_html__( 'Sidebar', 'voyage' ),  
       'id' => 'sidebar-1',  
       'description'   => esc_html__( 'Add widgets here.', 'voyage' ),  
       'before_widget' => '<section id="%1$s" class="widget %2$s">',  
       'after_widget'  => '</section>',  
       'before_title'  => '<h2 class="widget-title">',  
       'after_title'   => '</h2>',  
  ) );  
}  
add_action( 'widgets_init', 'voyage_widgets_init' ); 

Cette...

Le fichier footer.php

1. La structure du pied de page

Le fichier footer.php gère l’affichage du pied de page commun à toutes les pages du site. Ce fichier est appelé, entre autres, dans le fichier index.php par la fonction get_footer().

Voici son affichage par défaut :

images/C07-021.png

Voici sa structure :

images/C07-010N.png

2. La fermeture du contenu principal

Le premier élément du fichier footer.php est la balise de fermeture de la boîte <div id="content" class="site-content"> ouverte dans le fichier header.php.

3. Le pied de page

C’est dans les éléments <footer id="colophon" class="site-footer"> et <div class="site-info"> que nous avons l’affichage du pied de page.

Dans un premier temps, nous avons l’affichage du texte Proudly powered by WordPress, avec un lien vers le site de wordpress.org, avec le code suivant :

<a href="<?php echo esc_url( __( 'https://wordpress.org/', 
'voyage' ) ); ?>"><?php printf( esc_html__( 'Proudly powered 
by %s', 'voyage' ), 'WordPress' ); ?></a> 

Pour traduire cette chaîne de caractères, il faut utiliser le fichier /languages/voyage.pot.

Nous avons ensuite l’affichage du caractère "barre verticale", pipe en anglais : <span class="sep"> | </span>.

Puis nous terminons par l’affichage...

La page d’accueil

1. La structure de la page d’accueil

C’est le fichier index.php qui contient la structure de la page d’accueil. Voici cette structure simplifiée :

images/C07-011N.png

Nous avons tout d’abord l’appel au fichier d’en-tête, header.php, avec la fonction get_ header().

Puis deux éléments structurants imbriqués contiennent l’affichage de la page d’accueil et les autres types de page : <div id="primary" class="content-area"> et <main id="main" class="site-main" role="main">.

Le fichier se termine par l’inclusion de la sidebar (sidebar.php) et du pied de page (footer.php) avec les fonctions get_sidebar(); et get_footer().

2. Les deux types de pages d’accueil

Vous le savez, WordPress permet d’afficher deux types de pages d’accueil : celle en blog, qui affiche la liste des derniers articles, et celle en pages statiques, qui affiche une page de votre choix pour l’accueil et une autre page dans le menu pour afficher les derniers articles.

C’est dans le menu Réglages - Lecture que se paramètre cette page d’accueil.

La page d’accueil en blog, avec l’option Les derniers articles :

images/C07-012N.png

Voici l’affichage obtenu avec quelques articles listés en page d’accueil :

images/C07-013N.png

La page d’accueil statique, avec l’option Une page statique :

images/C07-014N.png

Voici un extrait de l’affichage...

Le fichier single.php

Quand un article est affiché en page seule, c’est le fichier single.php qui gère son affichage.

Voici sa structure :

images/C07-019N.png

Voici l’affichage obtenu :

images/C07-020N.png

Nous retrouvons en début de script l’appel au fichier header.php avec la fonction get_header().

Ensuite, nous avons deux éléments structurants imbriqués : <div id="primary" class="content-area"> et <main id="main" class="site-main" role="main">.

Dans ce deuxième élément de structure, nous avons la boucle WordPress, while ( have_posts() ) : the_post(), qui affiche l’article avec le template-part content.php : get_template_part( ’template-parts/content’, get_post_format() ), puisque Underscores n’exploite pas les formats d’article nativement.

Ensuite, la fonction the_post_navigation() permet d’afficher les titres des articles précédent et suivant. Voici son URL de référence : https://developer.wordpress.org/reference/functions/the_post_navigation/

Si les commentaires sont ouverts, if ( comments_open() || get_comments_number() ), ils sont affichés avec la fonction comments_template() qui appelle le template dédié : comments.php. Voici l’URL de référence de cette fonction : https://developer.wordpress.org/reference/functions/comments_template/

Pour terminer...

Le fichier page.php

Quand une page, au sens type de contenu Page, est affichée, c’est le fichier page.php qui l’affiche.

Voici la structure de ce fichier :

images/C07-016N.png

Voici l’affichage obtenu :

images/C07-021N.png

Comme toujours, nous avons en début de script l’appel au fichier header.php avec la fonction get_header().

Ensuite, nous avons deux éléments structurants imbriqués : <div id="primary" class="content-area"> et <main id="main" class="site-main" role="main">.

Dans ce deuxième élément de structure se trouve la boucle WordPress, while ( have_posts() ) : the_post(), qui affiche la page statique avec le template content-page.php : get_template_part( ’template-parts/content’, ’page’ ).

Si les commentaires sont ouverts, if ( comments_open() || get_comments_number() ), ils sont affichés avec la fonction comments_template() qui appelle le template dédié : comments.php. Voici l’URL de référence de cette fonction : https://developer.wordpress.org/reference/functions/comments_template/

Pour terminer, le script appelle les deux fichiers sidebar.php et footer.php, avec les fonctions get_sidebar(); et get_footer().

Le fichier archive.php

Le fichier archive.php gère l’affichage des pages des archives. Ce sont les pages qui affichent la liste des articles par catégorie, par étiquette, par auteur et par mois.

Voici la structure de ce fichier :

images/C07-022N.png

Voici l’affichage obtenu pour les archives de la catégorie nommée Photographie :

images/C07-023N.png

Voici l’affichage obtenu pour les archives de l’étiquette nommée Nature :

images/C07-024N.png

À nouveau, nous avons en début de script l’appel au fichier header.php avec la fonction get_header().

Ensuite, se trouvent les deux éléments structurants imbriqués que nous avons vus de nombreuses fois : <div id="primary" class="content-area"> et <main id="main" class="site-main">.

Le script commence par tester s’il y a des contenus à afficher : if ( have_posts() ). Si c’est le cas, dans un élément <header class="page-header">, le script affiche le titre de l’archive, the_archive_title( ’<h1 class="page-title">’, ’</h1>’ ) (https://developer.wordpress.org/reference/functions/the_archive_title/) et sa description, the_archive_description( ’<div class="archive-description">’, ’</div>’ ) (https://developer.wordpress.org/reference/functions/the_archive_description/).

Ensuite, la boucle WordPress...

Le fichier search.php

Le fichier search.php est utilisé pour afficher le résultat d’une recherche.

Voici sa structure :

images/C07-025N.png

Voici l’affichage obtenu avec la recherche du mot lorem :

images/C07-026N.png

À nouveau, nous avons en début de script l’appel au fichier header.php avec la fonction get_header().

Ensuite, se trouvent les deux éléments structurants imbriqués que nous avons vus de nombreuses fois : <div id="primary" class="content-area"> et <main id="main" class="site-main">.

Le script commence par tester s’il y a des contenus à afficher : if ( have_posts() ). Si c’est le cas, dans un élément <header class="page-header"> et dans un élément <h1 class="page-title">, le script affiche la chaîne de traduction (si elle existe) Search Results for et la chaîne de caractères recherchés : <?php printf( esc_html__( ’Search Results for: %s’, ’voyage’ ), ’<span>’ . get_search_query() . ’</span>’ ); ?>.

Ensuite, nous avons la boucle WordPress, while ( have_posts() ) : the_post(), qui affiche les articles avec le template-part content-search.php : get_template_part( ’template-parts/content’, ’search’ );.

Après la boucle WordPress, la fonction the_posts_navigation() permet d’afficher les articles...

Les template-parts

1. L’utilisation des template-parts

Pour afficher les contenus des articles et des pages selon le contexte d’affichage des pages, les thèmes utilisent des templates dédiés. Tous les template-parts sont placés dans le dossier /template-parts à la racine du dossier d’Underscores.

Initialement, Underscores nous propose quatre fichiers : content-none.php, content-page.php, content-search.php et content.php. Bien sûr, rien ne vous empêche de créer vos propres template-parts.

2. Le fichier content.php

Ce template-part est utilisé dans les fichiers index.php, single.php et archive.php, avec la fonction get_template_part( ’template-parts/content’, get_post_format() ). Mais comme il n’y a pas de template-part pour les formats d’article, c’est le fichier content.php qui est utilisé par défaut.

Voici sa structure :

images/C07-027N.png

Voici l’affichage obtenu :

images/C07-028N.png

Toute la structure de la page est contenue dans l’élément <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>. Le script génère dynamiquement l’attribut id et les classes nécessaires. Voici un exemple de code généré pour un article dont l’identifiant dans l’administration est 60, classé dans la catégorie Photographie et possédant l’étiquette Nature : <article id="post-60" class="post-60 post type-post status-publish format-standard hentry category-photographie tag-nature">.

Ensuite, nous avons l’affichage de l’en-tête de l’article dans un élément <header class="entry-header">. Le script commence par tester si l’article est affiché en page seule avec le marqueur conditionnel is_singular()(https://developer.wordpress.org/reference/functions/is_singular/) : if ( is_singular() ) :.

Si c’est le cas, le script affiche le titre de l’article dans un élément <h1> : the_title( ’<h1 class="entry-title">is_single - ’, ’</h1>’ ), (https://developer.wordpress.org/reference/functions/the_title/). Si ce n’est pas le cas, else :, le titre est affiché dans un élément <h2> : the_title( ’<h2 class="entry-title"><a...

Le fichier 404.php

Le fichier 404.php est le template qui est utilisé lorsqu’une page demandée n’est pas disponible. Cela peut être dû à une page supprimée du site, une erreur d’URL...

Voici l’affichage de la page d’erreur 404 :

images/C07-041.png

Voici sa structure :

images/C07-034N.png

À nouveau, nous avons en début de script l’appel au fichier header.php avec la fonction get_header().

Nous avons ensuite trois éléments HTML structurants : <div id="primary" class="content-area">, <main id="main" class="site-main"> et <section class="error-404 not-found">.

Ensuite, dans l’élément <header class="page-header">, puis dans un élément <h1>, le script affiche la traduction du texte Oops! That page can’t be found.

images/C07-035.png

Vous effectuerez la traduction de ce texte à partir du fichier /languages/voyage.pot.

Nous avons ensuite une boîte <div class="page-content"> qui contient tout le contenu de la page.

Dans un premier temps, dans un paragraphe <p>, le script affiche la traduction du texte It looks like nothing was found at this location.Maybe try one of the links below or a search?. Même principe pour la traduction que précédemment.

images/C07-036.png

Puis juste en dessous, le script affiche le champ de recherche avec la fonction get_ search_form().

images/C07-037.png

Ensuite, le script...