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. Créer un thème avec 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

Créer un thème avec Underscores

Les objectifs

Dans le chapitre précédent, nous avons étudié le Starter Theme Underscores et nous avons vu qu’il n’était pas livré avec une mise en page et une mise en forme. C’est au concepteur du site de prendre Underscores comme base et de créer le design voulu. Dans ce chapitre, nous allons créer un thème avec une mise en page et une mise en forme.

Vous pourrez télécharger l’archive de ce thème, mes-voyages.zip, et l’image d’arrière-plan utilisée, venise-en-tete.jpg depuis la page Informations générales.

L’installation d’Underscores

Dans un premier temps, nous allons installer Underscores dans le site.

 Comme nous l’avons vu dans le chapitre précédent, allez sur le site d’Underscores, http://underscores.me, et cliquez sur le lien Advanced Options. Renseignez les champs et cliquez sur le bouton GENERATE.

images/C08-001N.png

 Dans l’administration de votre site WordPress, faites une installation classique de ce thème et activez-le. Pour plus de facilité, vous pouvez créer un aperçu de ce thème à partir du fichier /mes-voyages/screenshot.png. Si vous souhaitez créer un aperçu de toute pièce, sachez que les dimensions optimales sont de 1 200 x 900 pixels.

images/C08-002.png

Concevoir une grille de mise en page

1. Le module CSS 3 Grid Layout

Nous allons concevoir une grille de mise en page à l’aide du module CSS Grid Layout Module Level 1 https://www.w3.org/TR/css-grid-1/. Pour avoir plus d’informations concernant la conception de sites web avec le module Grid, vous pouvez lire mon livre Flexbox et Grid - Créer des sites modernes et responsives, chez le même éditeur.

2. La structure du thème

Rappelons la structure du thème Underscores dans ce schéma :

images/C08-003N.png

Le fichier index.php est le fichier "maître". Il fait appel aux fichiers :

  • header.php avec la fonction get_header()

  • sidebar.php avec la fonction get_sidebar()

  • footer.php avec la fonction get_footer()

L’en-tête du site est affiché dans la boîte <header id="masthead" class= "site-header">. La partie centrale pour afficher le contenu et la sidebar est placée dans l’élément <divid="content" class="site-content">. Enfin, le pied de page est affiché dans l’élément <footer id="colophon" class="site-footer">.

3. Définir la grille

Voici le schéma permettant d’appréhender la structure de la grille utilisée pour afficher le site.

images/C08-004N.png

Nous allons utiliser des propriétés standards CSS 3 du module Grid. C’est donc dans le fichier style.css...

Les paramètres du site

Nous allons maintenant paramétrer le site : titre, slogan et traductions.

 Pour modifier le titre et le slogan du site qui sont affichés dans l’en-tête, allez dans le menu Réglages - Généraux. Modifiez les champs Titre du site et Slogan.

images/C08-008N.png

Dans les articles, nous trouvons des libellés qui sont en anglais, non traduits : Posted on, Posted in, Tagged, by, Edit...

images/C08-009N.png

Tous ces textes sont à traduire dans le fichier /languages/mes-voyages.pot, avec un logiciel comme Poedit (https://poedit.net) que nous avons évoqué dans le chapitre précédent.

 Ouvrez le fichier mes-voyages.pot, enregistrez les traductions dans un fichier fr_FR.po. Poedit génère aussi un fichier fr_FR.mo.

images/C08-010N.png

Voilà quelques traductions pour l’affichage des articles :

images/C08-011N.png

Le pied de page affiche des informations qui ne sont pas forcément indispensables :

images/C08-012.png

 Pour modifier cet affichage, ouvrez le fichier footer.php. Dans l’élément <footer id="colophon" class="site-footer" role="contentinfo"> et <divclass="site-info"> se trouvent ces affichages. À vous de les modifier, de les remplacer ou de les supprimer.

Ajouter une Google Font

Nous pouvons ajouter une Google Font pour l’affichage du titre des contenus, articles ou pages. Les Google Font sont des polices de caractères disponibles depuis les serveurs de Google que vous pouvez utiliser dans vos sites web par un simple lien dans votre code HTML/CSS.

 Allez sur le site des Google Font : https://fonts.google.com et faites votre choix. Pour cet exemple nous choisissons la police Lobster.

images/C08-012N.png

Dans l’onglet Embed, dans le champ Standard, vous avez l’URL de cette police.

 Copiez cette URL : https://fonts.googleapis.com/css?family=Lobster&display=swap.

 Maintenant, ouvrez le fichier functions.php et dans la fonction mes_voyages_scripts(), ajoutez cette liaison :

/* Ajout de la fonte Lobster */ 
   wp_enqueue_style ('mes-voyages-font', 'https://fonts.
googleapis.com/css?family=Lobster&display=swap'); 

Dans le site publié, nous avons bien dans la section <head> la liaison vers cette police :

<link rel="stylesheet" id="mes-voyages-font-css" href=
"https://fonts.googleapis.com/css?family=Lobster&amp;
display=swap&amp;ver=5.3" type="text/css" media="all"> 

 La dernière étape consiste à utiliser cette police dans le fichier style.css du thème. Dans cet exemple, la police est appliquée aux titres <h1> et <h2> dans l’affichage des contenus...

Personnaliser l’en-tête du site

1. La structure de l’en-tête

Le fichier header.php contient tout l’en-tête du site et toute la structure de l’en-tête est insérée dans l’élément <header id="masthead" class="site-header">. Le titre et le slogan sont affichés dans l’élément <div class="site-branding">, respectivement dans un élément <h1 class="site-title"> ou <p class="site-title"> pour le titre, selon le contexte d’affichage de la page d’accueil et dans un élément <p class="site-description">, pour le slogan.

images/C08-014N.png

2. Personnaliser les couleurs de l’en-tête

Nous voulons avoir un arrière-plan noir et le texte (titre et slogan) en blanc et centré.

Dans un premier temps, nous devons supprimer ou mettre en commentaire la couleur vert clair (Honeydew) appliquée au début de ce chapitre pour mieux visualiser la structure générale du site.

 Dans le fichier style.css du thème, mettez en commentaire ou supprimez ce sélecteur :

/* #masthead {  
  background-color: Honeydew;  
} */ 

 Ajoutez ces sélecteurs :

/* Styles de l'en-tête */  
.site-header {  
  background-color: #000;  
}  
.site-branding {  
  text-align: center;  
} 

 Ajoutez ces règles CSS pour le texte du titre et du slogan :

/* Pour le titre */  
.site-title, .site-title a:visited {  
  color: #fff;  
  text-transform: uppercase;  
}  
.site-title a {  
  text-decoration: none;  
  color: inherit;  ...

Personnaliser le menu de navigation

1. Le menu de navigation

Le Starter Theme Underscores ne propose qu’un seul emplacement pour le menu de navigation. Cet emplacement est défini dans le fichier functions.php et il est nommé Primary :

// This theme uses wp_nav_menu() in one location.  
  register_nav_menus( array(  
       'menu-1' => esc_html__( 'Primary', 'mes-voyages' ),  
) ); 

Voici ce menu Primary dans l’interface de personnalisation des menus :

images/C08-018N.png

C’est dans le fichier header.php qu’est affiché cet emplacement, dans l’élément <nav> :

<nav id="site-navigation" class="main-navigation"> 
   <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 
'mes-voyages' ); ?></button> 
   <?php 
       wp_nav_menu( array( 
           'theme_location' => 'menu-1', 
           'menu_id'        => 'primary-menu', 
       ) ); 
   ?> 
</nav> 

Voici comment est structuré le menu dans cet exemple :

images/C08-019N.png

Et voici l’affichage obtenu qui n’est...

La navigation dans la page d’accueil

Vous le savez, vous pouvez limiter le nombre d’articles affichés dans la page d’accueil. Ce réglage se fait dans le menu Réglages - Lecture, dans le champ Les pages du site doivent afficher au plus.

images/C08-026N.png

S’il y a plus d’articles à afficher en page d’accueil, Underscores insère automatiquement une navigation pour afficher les articles plus anciens :

images/C08-031.png

Et un autre lien pour afficher les articles les plus récents :

images/C08-032.png

C’est la fonction the_posts_navigation() qui gère cet affichage. Voici son URL de référence : https://developer.wordpress.org/reference/functions/the_posts_navigation/

Cette fonction, the_posts_navigation(), est placée dans le fichier index.php, dans l’élément <main id="main"> et dans la boucle WordPress. Donc ces deux liens se trouvent dans notre mise en page sur deux colonnes, ce qui n’est pas forcément l’idéal.

Voici l’affichage obtenu, avec le lien Articles plus anciens qui est placé en bas à gauche de la page d’accueil dans cet exemple :

images/C08-027N.png

Voici l’affichage obtenu, avec le lien Articles plus récents qui est placé en haut à droite de la page d’accueil dans cet exemple :

images/C08-028N.png

 Pour éviter cela, dans le fichier index.php, déplacez cette fonction, pour la placer après l’élément...

Personnaliser les images mises en avant

1. Utiliser les images mises en avant

Depuis de nombreuses versions, WordPress propose d’utiliser les images mises en avantqui permettent d’illustrer un contenu, sans afficher cette image dans le contenu rédactionnel. Les images mises en avant sont affichées là où le concepteur du thème l’a voulu.

images/C08-032N.png

Ces images mises en avant ne faisant pas partie du contenu, elles ne sont pas affichées avec le marqueur the_content(). Elles sont affichées avec le marqueur the_post_thumbnail(), dont voici l’URL de référence : https://developer.wordpress.org/reference/functions/the_post_thumbnail/

2. Paramétrer l’affichage des images mises en avant

Dans un premier temps, il faut indiquer au thème l’utilisation des images mises en avant. Ce n’est pas une fonctionnalité native de WordPress qui se trouve dans tous les thèmes. Il faut donc bien vérifier sa présence.

 Dans le fichier functions.php, repérez la fonction mes_voyages_setup() qui est la fonction de paramétrage du thème. Avec la version d’Underscores utilisée au moment de la rédaction de cet ouvrage, elle se trouve à la ligne 10 et s’étend jusqu’à la ligne 84. À la ligne 43, nous avons l’implémentation de cette fonctionnalité : add_theme_support( ’post-thumbnails’ );.

Nous allons maintenant pouvoir définir les tailles d’affichage par défaut des images à la une, toujours dans le fichier functions.php. Pour ce faire, nous utilisons la fonction set_post_thumbnail_size(), dont voici l’URL de référence : https://developer.wordpress.org/reference/functions/set_post_thumbnail_size/. Cette fonction se place dans la fonction de paramétrage du thème, dans la fonction mes_voyages_setup().

 Juste après la fonction add_theme_support( ’post-thumbnails’ );, ajoutez ces deux lignes :

/* Définition de la taille par défaut */  
set_post_thumbnail_size(420,200,true); 

Voici...

Personnaliser les extraits

1. Utiliser les extraits

Les extraits permettent de rédiger un résumé des articles et de les afficher là où nous le souhaitons, usuellement en page d’accueil ou dans l’affichage d’une recherche.

Les extraits sont accessibles dans la sidebar des contenus, dans l’onglet Document, dans le volet Extrait.

images/C08-037N.png

L’affichage des extraits dans le site publié dépend comme toujours du thème utilisé. Par défaut, Underscores n’affiche pas les extraits.

2. Afficher les extraits

Dans cet exemple, nous allons afficher les extraits uniquement sur la page d’accueil et s’ils existent.

Pour tester leur utilisation, nous utilisons le marqueur conditionnel has_excerpt(), dont voici l’URL de référence : https://developer.wordpress.org/reference/functions/has_excerpt/

Pour afficher l’extrait, nous utilisons le marqueur get_the_excerpt(), dont voici l’URL de référence : https://developer.wordpress.org/reference/functions/get_the_excerpt/

 Dans le fichier content.php, par exemple après l’affichage de l’image à la une, ajoutez ce code :

/* Afficher les extraits que sur la page d'accueil */  
if ( is_home() && has_excerpt() ) :  
  echo ('<div class="extrait">'.get_the_excerpt().'</div>');  
endif; 

L’ajout...

Personnaliser les articles en page seule

1. Le template-part content.php

Avec le thème Underscores, c’est le template-part content.php qui est utilisé pour afficher le contenu des articles en page seule. Ce template-part est aussi utilisé dans le fichier index.php pour afficher la page d’accueil.

C’est pour cela qu’il faut, avant de faire des personnalisations, impérativement tester la page affichée avec les marqueurs conditionnels : is_home() pour savoir si c’est la page d’accueil qui est affichée, et is_singular() pour savoir si c’est l’article en page seule.

2. L’affichage du titre de l’article

Pour l’affichage du titre de l’article, Underscores teste la page affichée pour décider dans quel conteneur HTML il sera affiché :

if ( is_singular() ) :  
  the_title( '<h1 class="entry-title">', '</h1>' );  
else :   
  the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );  
endif; 

Si c’est l’article affiché en page seule, is_singular(), le titre, the_title(),  est affiché dans un élément <h1> ; sinon c’est dans un élément <h2>, avec un lien .<a>, pour...

Personnaliser les pages statiques

L’affichage des pages statiques se fait avec le fichier page.php qui appelle le template-part content-page.php.

Utilisez les conteneurs HTML et les classes CSS associées pour personnaliser l’affichage.

Personnaliser les archives

1. Utiliser les archives

Les archives concernent l’affichage de la liste des articles : par auteur, par dates, par catégorie et par étiquette.

C’est le fichier archive.php qui les affiche avec le template-part content.php.

2. L’affichage du titre et de la description de l’archive

Dans le fichier archive.php, dans l’élément <header class="page-header">, sont affichés le titre de l’archive, the_archive_title( ’<h1 class="page-title">’, ’</h1>’ ) et sa description the_archive_description( ’<div class= "archive-description">’, ’</div>’ ).

Voici les URL de référence de ces deux marqueurs : https://developer.wordpress.org/reference/functions/the_archive_title/ et https://developer.wordpress.org/reference/functions/the_archive_description/

3. L’affichage du contenu

L’affichage du contenu des archives se fait dans le template-part content.php que nous avons déjà abordé plusieurs fois.

4. L’affichage des informations des auteurs

Les archives permettent d’afficher la liste des articles des auteurs du site. Vous le savez, chaque utilisateur d’un site WordPress possède un profil :

images/C08-044N.png

Quand l’archive d’un auteur est affichée, vous pouvez y ajouter des éléments de son profil.

Pour afficher...

Personnaliser la sidebar

1. Utiliser l’emplacement

C’est le fichier sidebar.php qui gère l’affichage de la sidebar. Cette sidebar affiche l’emplacement du widget nommé sidebar-1. Cet emplacement a été déclaré dans le fichier functions.php :

function mes_voyages_widgets_init() {  
  register_sidebar( array(  
       'name' => esc_html__( 'Sidebar', 'mes-voyages' ),  
       'id' => 'sidebar-1',  
       'description' => esc_html__( 'Add widgets here.', 'mes-voyages' ), 
       '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', 'mes_voyages_widgets_init' ); 

Cet emplacement est bien disponible dans l’administration, dans Apparence - Widgets :

images/C08-047N.png

2. Personnaliser la mise en forme

 Pour commencer...

Personnaliser le pied de page

C’est le fichier footer.php qui gère l’affichage du pied de page. Dans le pied de page, nous avons un lien vers le site de wordpress.org, le nom du thème utilisé et le nom de l’administrateur avec un lien vers le site d’automattic.com.

images/C08-049.png

Toutes ces informations sont bien sûr modifiables et personnalisables par vous, pour adapter au mieux ce design au projet de votre site web.