Allez plus loin avec WordPress

Nous allons commencer à personnaliser notre thème WordPress, et donner un aspect plus présentable à notre page d’accueil.

Ajoutez votre propre CSS

D’abord, ajoutons du CSS sur notre projet. Au moment de la création de notre thème enfant, nous avions déjà ajouté un fichier style.css  qui est chargé dans le fichier functions.php  . Nous pourrions donc ajouter notre CSS directement dans ce fichier.

Cependant, pour mieux séparer notre code, nous allons apprendre à créer notre propre fichier CSS et à le charger.

Pour cela, créons un dossier css  dans notre dossier thème bricotips  . Dans ce dossier, ajoutons le fichier theme.css  .

Puis nous ajouterons dans ce fichier le code suivant. Vous trouverez des détails sur le code en commentaires.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* Import de la font Roboto depuis Google Fonts et on l'applique sur tous les éléments de la page */
body * {
   font-family: 'Roboto', sans-serif;
}
/* On applique un gris plus clair sur les paragraphes */
p {
   color: #313332;
}
/* La classe 'hover-effect' permettra de créer un effet de zoom quand l'on passera la souris par dessus les elements images enfants  */
.hover-effect img {
   transition: all 0.33s ease-in-out;
   transform: scale(1) translateY(0px);
}
.hover-effect img:hover {
   transition: all 0.33s ease-in-out;
   transform: scale(1.05) translateY(-10px);
}

Maintenant que notre CSS est créé, il nous faut le charger sur nos pages. Pour cela, nous utilisons la fonction wp_enqueue_style  , déjà vue lors de la création de notre thème enfant.

Nous avons pour le moment dans le fichier functions.php  le code suivant :

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

Nous allons compléter ce code avec le code suivant :

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('theme-style', get_stylesheet_directory_uri() . '/css/theme.css', array(), filemtime(get_stylesheet_directory() . '/css/theme.css'));
}

Analysons en détail les paramètres de la fonction wp_enqueue_style  que nous venons d’ajouter :

Premier paramètre : theme-style

Ceci est un identifiant unique que l’on donne au chargement de notre fichier CSS. Il permet de différencier les différentes injections de CSS.

Deuxième paramètre :  get_stylesheet_directory_uri() . '/css/theme.css'

Ce deuxième paramètre est l’URL publique vers le fichier CSS à charger. Ici nous utilisons  la fonction get_stylesheet_directory_uri()  , qui retourne l’URL publique vers le dossier du thème actuellement activé. Il nous reste juste à ajouter la fin de la route,  ‘/css/theme.css’  .

Troisième paramètre (facultatif) :  array()

On ajoute ici un tableau de textes pour chaque script CSS dont le fichier CSS que nous importons dépend. La valeur est la clé unique définie en premier paramètre de wp_enqueue_style  . L'intérêt est de s’assurer que les fichiers dont notre fichier dépend soient bien chargés en amont.

Quatrième paramètre (facultatif) :  filemtime(get_stylesheet_directory() . '/css/theme.css') 

Ce paramètre permet de gérer la version du fichier, et donc d’éviter tout problème de cache. Il faut donc y mettre une valeur unique liée à la version. Pour cela, nous utilisons la fonction filemtime  , qui permet de récupérer le timestamp de la dernière mise à jour d’un fichier. Le fichier ici est notre fichier theme.css  . En complément, nous utilisons la fonction get_stylesheet_directory()  , qui retourne le chemin local vers le dossier de thème activé. Concrètement, à chaque fois qu’on sauvegarde le fichier, la fonction ‘filemtime’ retourne une nouvelle valeur, ce qui donne une nouvelle URL de fichier qui ne sera pas soumise au cache.

Maintenant que nous avons activé le fichier theme.css  , vous pouvez constater que la police d’écriture a changé sur la page d’accueil.

Testez le CSS dans Gutenberg

Dans notre fichier theme.css  , nous avons ajouté la classe hover-effect  , mais elle n’est pour l’instant jamais utilisée. Elle peut être utilisée sur un composant galerie de notre page d’accueil pour avoir un effet de zoom quand on passe par-dessus une image.

Pour cela, il suffit de se rendre dans l’éditeur Gutenberg de la page d’accueil et d’ajouter la classe  hover-effect  dans les options d’une image de galerie, comme présenté dans l’image suivante :

Maintenant que la classe est ajoutée, vous pourrez constater sur la page d’accueil que les images de galerie font un zoom au survol de la souris.

Personnalisez le header

Découvrons comment nous pouvons changer le header de notre thème !

Il est possible de le modifier. Mais en cas de mise à jour du thème parent, nos modifications peuvent être perdues.

Nous allons modifier ce fichier depuis notre thème enfant grâce à l’écrasement de template (override, en anglais) : pour modifier un fichier template, vous le copiez depuis le thème parent dans votre thème enfant. Si WordPress trouve le même fichier dans les 2 thèmes, il privilégiera celui de votre thème enfant.

Voyons ensemble comment mettre cela en place :

En complément, voici le code que nous avons ajouté dans le fichier theme.css  :

/* HEADER */

#site-header.sticky-top {
   position: sticky;
   z-index: 10;
   top: 0;
   background-color: #C8D6CF;
}

li.menu-item a {
   color: #313332 !important;
   display: inline-block;
   padding: 10px 25px;
   background-color: #F4CA52;
   border-radius: 10px;
   text-align: center;
}

li.menu-item a:hover,
li.menu-item.current-menu-item a {
   color: #F4CA52 !important;
   background-color: #313332;
   text-decoration: none !important;
}

Notre header est maintenant personnalisé, et vous devriez avoir un header qui ressemble à cela :

Personnalisez le footer avec un widget

Maintenant que nous avons modifié le header, nous allons faire de même avec le footer. Pour cela, commençons à copier le fichier footer.php du thème parent dans le thème enfant.

En observant le contenu de footer.php  , on y trouve beaucoup d’éléments qui ne nous intéressent pas. Du coup, nous allons remplacer l’intégralité du contenu par le code suivant :

        <footer id="site-footer" class="header-footer-group">
              ©BricoTips depuis 2022
        </footer><!-- #site-footer -->

      <?php wp_footer(); ?>

   </body>
</html>

Ainsi nous aurons une simple bande avec le crédit de notre site. Ajoutons aussi dans le fichier theme.css  de quoi mettre un peu en forme cette bande :

#site-footer {
   padding: 20px;
   text-align: center;
   color: #6d6d6d;
   background-color: #C8D6CF !important;
}

Dans le cours précédent, vous avez vu ce qu’étaient les widgets et comment les utiliser. Le thème TwentyTwenty dispose de 2 zones de widgets en bas de page au-dessus du footer. Voyons ensemble comment remplir ces widgets et créer notre propre widget :

Ajoutez des éléments personnalisés dans Gutenberg

Nous avons vu comment créer un widget personnalisé pour le mettre dans une zone de widgets. Malheureusement, nous ne pouvons pas l’utiliser dans une page avec Gutenberg dans les versions actuelles de WordPress.

Il y a plusieurs choix possibles :

• créer un bloc Gutenberg (mais cela ne sera pas abordé, car la mise en œuvre est assez complexe et dépasse nos connaissances dans ce cours) ;

• utiliser un autre éditeur comme Elementor qui est capable d’injecter les widgets personnalisés ;

• télécharger des extensions qui ajoutent des blocs Gutenberg répondant à vos besoins (sans garantie qu’ils existent) ;

• créer un shortcode que l’on peut injecter dans Gutenberg.

Nous allons aborder ici ce dernier point, en apprenant à créer un shortcode et à l’ajouter dans notre page d’accueil !

Le shortcode que nous allons créer remplacera le titre “Nos différentes sections” que nous avons mis sur la page d’accueil. L’idée est de permettre d’avoir un titre en bannière avec une image de fond. Un shortcode est un code qui s’écrit entre crochets, mais qui aura un affichage personnalisé. Un shortcode peut s’écrire sous 2 formes :

•  [monshortcode variable1=”valeur"]   ;

•  [monshortcode]contenu[/monshortcode]  .

L’utilisateur du shortcode n’aura qu’à renseigner le titre et l’URL de l’image qu’il veut mettre en fond. Voici le résultat attendu :

Vous êtes prêt ? Découvrons ensemble comment créer et utiliser ce shortcode :

Vous trouverez le code ajouté dans cette vidéo sur la branche GitHub de cette section :

À vous de jouer !

Nous avons créé un widget personnalisé que nous avons mis en bas de page avec un effet au survol de la souris. Cependant, ce n’est pas un bon choix pour notre site. On a plutôt envie de mettre en avant les sites partenaires sous forme de liens images.

Voici un exemple de ce qu’il serait intéressant de mettre en place :

On a donc 2 blocs, WorkTips et DecoTips, qui devront avoir les caractéristiques suivantes : 

• des liens avec une image en background assombri ; 

• un titre blanc centré ; 

• une largeur de 100 % ; 

• et une hauteur de 50 px.

Consignes :

• Enlever les widgets actuels de la zone de widgets de bas de page de droite.

• Ajouter un titre de niveau 4 avec le texte “Nos partenaires”.

• Créer un widget 'Bloc Lien Image Widget' qui demande en paramètres : 

  • le titre du lien ;

  • l’URL de l’image du lien ; 

  • et l’URL du lien (qu’on mettra à ‘#’ pour l’exemple).

• Mettre le tout en forme avec un CSS dédié à ce widget.

Corrigé

C’est OK ? Suivez le corrigé de cet exercice ci-dessous :

En résumé

• On ajoute les fichiers CSS dans functions.php  pour qu’ils soient directement chargés en header par le thème.

• On peut modifier les fichiers d’un thème parent en les copiant dans le thème enfant. L'écrasement de template privilégiera un même fichier dans un thème enfant. On peut ensuite le modifier.

• Les widgets peuvent être créés et ajoutés dans les zones dédiées aux widgets, mais pas dans l’éditeur de page de Gutenberg. 

• Les shortcodes permettent de créer des éléments personnalisés sous forme de code court. 

Maintenant que nous avons vu comment personnaliser la page d’accueil, le header et le footer, nous allons découvrir comment créer un template de page.