Introduction
Quand on arrive aux limites des fonctionnalités que WordPress offre en standard, on se demande alors comment certains sites web font pour effectuer certaines manipulations. La réponse est vite donnée, le code PHP. Si celui-ci peut s’écrire à l’aide d’un plugin, il ne fait rien d’autres que de stocker votre code dans des fichiers externes et de les exécuter dans un certain ordre chronologique, ce qui revient au même que de l’écrire directement dans le thème actif. Il est possible d’ajouter du code PHP à cet ordre chronologique en faisant appel à des actions plus connues sous le nom de crochets (hook).
Le thème principal et le thème enfant
Écrire du code PHP dans son thème principal est à bannir une bonne fois pour toute de ses habitudes. Chaque thème possède un fichier appelé “functions.php”, dans lequel on peut librement ajouter ses “hooks”. Coder une nouvelle fonctionnalité directement dans le fichier “functions.php” revient à passer la poussière. Si celle-ci s’en va le temps de quelques heures, elle reviendra au galop et le travail de nettoyage sera à refaire. Si c’est vrai pour la saleté, il en va de même pour le code PHP écrit dans le thème principal. Si ce dernier se met à jour, tout le travail effectué sera perdu. Mais à l’inverse des tâches ménagères, WordPress a prévu une parade adéquate, le thème enfant. Celui-ci s’installe en parallèle du thème principal et ne peut fonctionner sans lui. Avec Elementor, le thème recommandé est bien entendu celui fourni par la société elle-même. Il porte le nom de “Hello”. Son thème enfant porte le même nom.
Le thème enfant Hello est attaché à cette publication. Téléchargez-le en cliquant sur le lien pièce jointe en haut à droite de ce document Il est fourni sous forme de fichier ZIP et s’installe comme n’importe quel autre thème.
Une bonne pratique
Plutôt que d’écrire toutes les fonctions dans le fichiers “functions.php“, il est préférable de découper ses propres fonctions en plusieurs fichiers, ne serait-ce que pour une question de clarté. Ci-dessous, un extrait de “functions.php”. On ajoute deux lignes de code (et les commentaires) :
La première va servir à récupérer le dossier où est installé le thème enfant. La deuxième va indiquer que le fichier “init.php” se trouve à la racine du thème enfant, dans un dossier “php”.
<?php
/**
* Theme functions and definitions
*
* @package HelloElementorChild
*/
// Personnal include
$dir = get_stylesheet_directory();
// Init
include_once ($dir . '/php/init.php');Une fois ces deux lignes de codes ajoutées, il faudra créer le dossier “php”, puis le fichier “init.php” et le sauvegarder dans le dossier “php”.
Comme exemple de fonction, je vous donne une manière de supprimer la barre de WordPress dans votre site.
// Remove admin bar
function remove_admin_bar() {
if (!is_admin()) {
show_admin_bar(false);
}
}
add_action('after_setup_theme', 'remove_admin_bar');Les feuilles de styles
Les feuilles de styles ou plus communément appelées CSS pour Custom Style Sheet, permettent de paramétrer certains objets dans un style qui nous est propre. Pour créer une feuille de style, on commence par suivre la même procédure que pour le code PHP. On va ajouter un nouveau fichier PHP que l’on va nommer ici “enqueue_CSS_Styles.php”.
// Init
include_once ($dir . '/php/init.php');
include_once ($dir . '/php/enqueue_CSS_Styles.php');Mettre la feuille de style en queue
Une fois ce fichier ajouté, on va le créer et y ajouter ces lignes de code.
<?php
/**
* Plugin Name: Enqueue_CSS_Styles
* Description: Enqueue CSS Styles
* Author: Olivier Paudex
* Author Web Site: https://www.fuyens.ch
*/
// Enqueue CSS Styles
function Main_Styles() {
wp_enqueue_style('Main_Styles', get_stylesheet_directory_uri() . '/css/Main_Styles.css', false, '1.0.0');
}
add_action('wp_enqueue_scripts', 'Main_Styles');
add_action('admin_enqueue_scripts', 'Main_Styles');
?>Depuis sa version 3.0, Elementor a ajouté la possibilité de gérer globalement les polices directement dans le plugin. Vous me direz que c’est bien plus simple que d’utiliser un thème enfant et de créer une feuille de style et vous avez raison. Mais pour autant, les feuilles de styles vont bien plus loin que quelques paramétrages de polices. Le CSS est la base de toute transformation d’objets dans une page HTML.
Je vous laisse adapter l’entête.
Cette fonction va permettre à WordPress de mettre en queue un fichier CSS “Main_Styles.css”, qui va contenir tous nos paramètres globaux. Celui-ci va se mettre à disposition de votre site web quand la première page se chargera. C’est l’action “wp_enqueue_scripts” qui va s’en charger. Accessoirement, il est aussi possible de modifier les styles de la console d’administration de WordPress grâce à l’action “admin_enqueue_scripts”.
Créer un style H1
Il va falloir maintenant créer un dossier “css” à la racine du thème (au même endroit que le dossier “php”), puis de créer le fichier “Main_Styles.css”. L’exemple ci-dessous va modifier le style H1 pour les 3 formats d’écrans (Desktop, Tablet, Smartphone).
Les valeurs pour les tailles d’écrans dans Elementor sont :
- Pour un mobile, minimum : 481px, maximum : 1024px.
- Pour une tablette, minimum : 769px, maximum : 1439px.
- Pour un ordinateur de bureau : minimum : 1024px.
En 2019, avec les mobiles de dernière génération, les écrans sont devenus très grands et les tablettes sont déclinés en mode mini et maxi, ce qui peut être un peu confus.
Personnellement, voici les dimensions configurées pour ce site :
- Mobile : maximum : 619px.
- Tablette : minimum : 620px, maximum : 1365px.
- Ordinateur de bureau : minimum : 1366px.
Si vous avez copié le code à la lettre, tous vos titres de type H1 vont s’afficher avec la police “Open Sans”, une graisse de 800, un interlettrage négatif de 1.5px, une hauteur de ligne de 1.3em, centrer, et de couleur noir.
Ceci va s’appliquer à tous les titres H1 créé avec le widget “Titre” d’Elementor, ainsi que ceux créé avec le widget “Text-editor”.
/**
* CSS Name: Main_Styles
* Description: Feuille de styles personnalisée
* Author: Olivier Paudex
* Author Web Site: https://www.fuyens.ch
*/
/* Desktop */
@media only screen and (min-width: 1366px) {
:root {
--font_size_h1: 42px;
}
}
/* Tablet */
@media only screen and (min-width: 620px) and (max-width: 1365px) {
:root {
--font_size_h1: 38px;
}
}
/* Smartphone */
@media only screen and (max-width: 619px) {
:root {
--font_size_h1: 38px;
}
}
/* Title H1 */
h1.elementor-heading-title, .elementor-text-editor h1 {
font-family: "Open Sans", Sans-Serif;
font-size: var(--font_size_h1)!important;
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1.3em;
text-align: center;
color: #333333;
}Une bonne idée, la page de paramètres globaux
Si vous voulez poursuivre dans cette voie, je vous conseille vivement de créer une page regroupant tous vos paramètres globaux et d’y ajouter tous les widgets Elementor dont vous désirez modifier l’apparence globalement. Commencez par ajouter un paragraphe de chaque type de H1 à H6 et aussi de type p et de configurer votre feuille de style avec vos paramètres. Il faut bien entendu maîtriser un peu le CSS pour arriver à vos fins.
En exemple, je vais vous montrer comment styliser un bouton. J’ouvre ma page où j’ai déjà ajouté le titre H1, et j’y ajoute un bouton. Je ne touche à aucun réglage du bouton dans Elementor. J’obtiens alors ceci
Je vais ajouter les lignes ci-dessous à mon fichier “Main_Styles.css“, et mon bouton va devenir bleu, sans bord, avec des coins arrondis et le texte sera blanc.
/* Button style */
.elementor-widget-button a, button.elementor-button {
background-color: #2E8BC0;
color: #FCFCFC!important;
border-style: none!important;
border-radius: 5px!important;
padding: 10px 20px 10px 20px!important;
}Si je désire centrer le bouton, je peux ajouter ces quelques lignes.
/* button center */
.elementor-button-wrapper {
display: flex;
justify-content: center;
}Voici le résultat.
Si maintenant vous ajoutez des boutons sur cette page ou même sur une autre, ils auront tous la même forme. C’est la magie de la feuille de style globalisés.
Vous remarquerez très certainement dans mon exemple que la page contient le nom de domaine, ainsi que son slogan. C’est le thème “Hello” qui affiche ceci par défaut. Pour le supprimer, il faut créer une entête, sujet du prochain chapitre.
