Dans cet article, nous allons voir comment mettre en place un thème FSE, avec des extraits de code pour bien comprendre.

1. Créer la Structure de Base du Thème

Un thème WordPress FSE suit une structure différente d’un thème classique. Voici l’arborescence minimale :

mon-theme-fse/
│── style.css
│── theme.json
│── index.php
│── templates/
│   ├── index.html
│   ├── single.html
│── parts/
│   ├── header.html
│   ├── footer.html

• style.css : le fichier d’en-tête du thème
• theme.json : la configuration du thème
• index.php : fichier obligatoire, même si presque vide
• templates/ : contient les modèles de pages
• parts/ : contient les parties réutilisables comme le header et le footer

2. Ajouter un theme.json

Le fichier theme.json est au cœur d’un thème FSE. Il permet de gérer les couleurs, la typographie, la mise en page, et bien plus encore.

Exemple minimal :

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "Noir", "slug": "noir", "color": "#000000" },
        { "name": "Blanc", "slug": "blanc", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSize": [
        { "name": "Petit", "slug": "small", "size": "12px" },
        { "name": "Grand", "slug": "large", "size": "24px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#000000"
    }
  }
}

Ce fichier définit une palette de couleurs et des tailles de texte personnalisées accessibles depuis l’éditeur Gutenberg.

Pour en savoir plus sur l’ensemble des paramètres disponibles sur ce fichier JSON, rendez-vous sur le site de WordPress.

3. Construire les Templates avec des Blocs

Le FSE utilise des fichiers .html dans templates/ et parts/ au lieu des classiques header.php et footer.php.

Exemple de header.html :

<!-- wp:group {"tagName":"header","align":"full"} -->
<header class="site-header">
  <!-- wp:site-title /-->
  <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Exemple de index.html :

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:post-content /-->
<!-- wp:template-part {"slug":"footer"} /-->

Ici, on inclut un header, le contenu de la page et un footer. Le contenu de la page sera ensuite administré depuis Gutenberg (ou tout autre éditeur).
Ce template pourra aussi être customisé directement depuis l’interface de gestion de votre FSE, de manière visuelle. De même pour les template-part, qui sera accessible via la gestion des compositions du thème.

4. Activer le Thème

Ajoutez ce code minimal dans style.css pour que WordPress reconnaisse le thème :

/*
Theme Name: Mon super thème FSE
Author: Camille JG
Author URI: https://www.julesgaston.fr/
Version: 1.0
*/

Puis, allez dans Apparence > Thèmes, activez votre thème et testez-le dans l’éditeur de site.

5. Personnaliser avec des Blocs

Pour ajouter un design plus avancé, utilisez des blocs comme cover, columns, ou buttons. L’ensemble des blocs disponibles sont documentés sur le site WordPress.

Exemple d’un footer.html :

<!-- wp:group {"tagName":"footer","align":"full"} -->
<footer class="site-footer">
  <!-- wp:paragraph -->
  <p>© 2024 - Mon site</p>
  <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

Créer un thème FSE avec Gutenberg est devenu bien plus simple qu’avec les thèmes classiques. Tout passe par du HTML et un fichier JSON, ce qui facilite la personnalisation pour les non-développeurs une fois le thème mise en place.

Pour en savoir plus sur les possibilités du Full Site Editing avec Gutenberg, rendez-vous sur le site de l’agence WordPress WS Interactive.

Testez-le et explorez l’éditeur de site pour peaufiner votre design !

Mais comment convertir un image classique en image WebP me direz-vous ? Rien de plus simple, plusieurs solutions s’offrent à vous selon votre projet.

En PHP, lors du traitement d’une image

En PHP, vous avez la possibilité de convertir une image vers le format WebP grâce à la fonction « imagewebp« , qui va permettre d’afficher ou d’enregistrer dans un fichier une image passée en paramètre.

$file = 'image.jpg';

// Création de l'image
$image = imagecreatefromjpeg($file);

// Enregistrement au format WebP
imagewebp($image,'image.webp');

Cette fonction peut donc être utilisée pour la création d’images à la volée, ou en pré-traitement lors de l’upload par exemple.
Rien de plus simple ensuite pour l’afficher, utilisez la balise <picture> au lieu de la balise <img />. En savoir plus sur mon article « Prévoir une image alternative à une image WebP en HTML« .

A l’aide d’un convertisseur en ligne

Il existe de nombreux convertisseurs en ligne vous permettant de convertir en quelques clics toutes vos images JPG, PNG ou GIF en WebP. Mais comme on est jamais mieux servi que par soi-même (:D), je vous ai mis à disposition un convertisseur en ligne de WebP.

C’est gratuit et sans limite, donc n’hésitez pas à l’utiliser !

En utilisant un CDN (Content Delivery Network)

Dernière solution, facile à mettre en place, l’utilisation d’un service de CDN. Ceux-ci, au-delà de l’optimisation des images, auront l’avantage de vous apporter une approche globale afin de vous aider à améliorer vos performances de chargement.

Concernant les images, ils choisissent automatiquement, ou selon des critères que vous allez donner, l’ensemble des images de votre site Internet, les transforment en WebP lorsque cela permet d’optimiser leur taille, et les proposent directement dans ce format à vos visiteurs.

Quelques Content Delivery Network connus :

• StackPath (anciennement MaxCDN)
• CloudFlare
• Cache Fly
• CDN77

Pour ce faire, rien de plus simple que ce que je vous avais présenté lors de ce précédent article. L’installation de reCAPTCHA ne nécessite que deux étapes à la portée de tous. Une fois Contact Form 7 installé sur votre site :

Créez votre clé API reCAPTCHA version depuis votre compte Google : https://www.google.com/recaptcha/admin/create. Choisissez bien reCaptcha V3, la version 2 n’étant plus disponible sur Contact Form 7.

Une fois votre demande envoyée, vous obtenez instantanément votre du site et votre clé secrète. Rendez-vous désormais dans votre administration WordPress, allez dans « Contact », puis « Intégration ». Cliquez sur « Configuration de l’intégration » dans le cadre reCaptcha, puis saisissez vos clé.

Le tour est joué ! Vous pouvez dire adieu aux spams intempestifs sur votre site

Mais ce format est pour le moment indisponible pour Safari. Donc sur Mac, iPad et iPhone, soit un échantillon significatif d’internautes, vos images WebP ne seront pas affichées. Il est donc nécessaire de proposer une image au format initial (jpg, png ou gif) afin qu’elle puisse s’afficher sur ce navigateur et ces supports.

Rien de plus simple, grâce à la balise html <picture>, qui offre la possibilité de lister les formats disponibles pour une seule et même image. Cette balise va venir en remplacement de la classique <img />.

<!-- MON ANCIEN AFFICHAGE d'IMAGE -->
<img src="mon_image_source.png" alt="Coucou webp" title="Coucou webp">

<!-- AVEC UNE WEBP ET UNE ALTERNATIVE PNG -->
<picture>
  <source srcset="mon_image.webp" type="image/webp">
  <source srcset="mon_image_source.png" type="image/png">
  <img src="mon_image_source.png" alt="Coucou webp" title="Coucou webp">
</picture>

Et voilà, vos images sont désormais disponibles pour tous les navigateurs, et particulièrement optimisées pour un affichage sur Google Chrome, Firefox ou Edge grâce à l’image WebP !

Pour ceux qui souhaiteraient en savoir plus sur comment créer une image WebP en PHP, j’ai détaillé la méthode dans l’article « Convertir une image au format WebP« .

La solution donné ci-après fonctionne pour tous types de scripts et CMS, sans forcément passer par WordPress.

Les infos divergent suite aux différentes mises à jour de Google Analytics, il n’est donc pas aisé de trouver de l’infos à ce sujet. Mais finalement, rien de plus simple pour mettre cela en place.

Dans un premier temps, il est nécessaire de configurer le tracking des résultats de recherche dans votre compte Google Analytics.
Rendez-vous dans « Administration », puis « Paramètres de la vue » (troisième colonne », et enfin « Paramètres de recherche sur site » en bas de page.

Ici, mon paramètre de recherche est « q ». A savoir, ma recherche est appelée ainsi : « https://www.monsite.com/q=marecherche ».
Une fois configuré, rendez-vous sur votre script Javascript pour installer le code de suivi généré avec gtag.
Voici par exemple ci-dessous ma fonction qui réalise ma recherche (avec un peu de jQuery).

function launchSearch(){
    var $input = $("#s");
    var query = $input.val();
    if (myTimeOut != null) {
      clearTimeout(myTimeOut);
    }
    
    // Je temporise le lancement de la recherche pour éviter de lancer la recherche à chaque fois que l'on appuie sur une touche
    myTimeOut = setTimeout(function(){
      myTimeOut = null;
      $.ajax({
          type : 'post',
          url : ajaxSearchUrl,
          data : {
              action : 'load_search_results',
              query : query
          },
          success : function( response ) {
              // Une fois le résultat obtenu, j'envoi ma requête à Google Analytics
              gtag('config', 'UA-156267736-1',{
                  'page_title' : 'search',
                  'page_path': 'search/?q=' + query
              });
          }
      });
    },500);
}

Et voilà, ma recherche a bien été enregistrée exactement de la même manière qu’une recherche classique !

Pour ce faire, il est nécessaire de créer une textarea temporaire nous permettant de manipuler les données. Vous trouverez ci-dessous deux propositions de scripts. Avec et sans jQuery, pour encoder puis décoder du code HTML.

Décodage HTML

// Decode en JS
function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

// Decode avec jQuery
function decodeHTMLEntities(text) {
  return $("<textarea/>").html(text).text();
}

Encodage HTML

// Encode en JS
function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerText = text;
  return textArea.innerHTML;
}

// Encode avec jQuery
function encodeHTMLEntities(text) {
  return $("<textarea/>").text(text).html();
}

Source : https://medium.com/@tertiumnon/js-how-to-decode-html-entities-8ea807a140e5

Pour ce faire, et lorsque vous souhaitez passer certains paramètres dans vos URL, il est indispensable de suivre certaines règles éditées par le CMS. Ces déclarations sont à faire soit dans votre plugin, soit dans le fichier functions.php de votre thème.
Premièrement, la déclaration des variables, qui autorise leur utilisation des les URL chargées.

// Installation de la variable
function wpd_add_query_vars( $qvars ) {
  $qvars[] = 'ma_variable';
  return $qvars;
}
add_filter( 'query_vars', 'wpd_add_query_vars' );

Deuxième étape, la définition de ma règle de réécriture. Pour l’exemple ci-dessous, je souhaites que toutes les pages appelées « /mon_url/ », et suivies de n’importe quoi d’autre, appeleront ma page « mon_url » définie dans mes pages WordPress. J’y ajoutes la récupération de ma variable, qui va ici aller chercher le premier paramètre situé après « mon_url/ ».

// Initialisation de la règle de réécriture
function wpd_page_rewrite(){
    add_rewrite_rule(
        '^mon_url/([^/]*)?',
        'index.php?pagename=mon_url&ma_variable=$matches[1]',
        'top'
    );
}
add_action( 'init', 'wpd_page_rewrite' );

Votre réécriture est prête. Reste plus qu’à la déclarer à WordPress afin qu’elle soit bien prise en compte. Attention, sans cette réinitialisation des règles de réécriture, votre rewriting personnalisé ne sera jamais pris en compte.
Dans cette fonction, j’ai ajouté un test sur les règles existantes afin que la réinitialisation ne soit prise en compte que dans le cas où « mon_url » n’a jamais été prise en compte.

// Installation de la réécriture dans les règles de rewriting de WordPress
function my_flush_rules()
{
    $rules = get_option( 'rewrite_rules' );
    if ( ! isset( $rules['(mon_url)/(\d*)$'] ) ) {
        global $wp_rewrite; $wp_rewrite->flush_rules();
    }
}
add_action( 'wp_loaded','my_flush_rules' );

Et c’est gagné ! A vous les belles URL réécrites

Récapitulatif du code à créer :

// Installation de la variable
function wpd_add_query_vars( $qvars ) {
  $qvars[] = 'ma_variable';
  return $qvars;
}
add_filter( 'query_vars', 'wpd_add_query_vars' );

// Initialisation de la règle de réécriture
function wpd_page_rewrite(){
    add_rewrite_rule(
        '^mon_url/([^/]*)?',
        'index.php?pagename=mon_url&ma_variable=$matches[1]',
        'top'
    );
}
add_action( 'init', 'wpd_page_rewrite' );

// Installation de la réécriture dans les règles de rewriting de WordPress
function my_flush_rules()
{
    $rules = get_option( 'rewrite_rules' );
    if ( ! isset( $rules['(mon_url)/(\d*)$'] ) ) {
        global $wp_rewrite; $wp_rewrite->flush_rules();
    }
}
add_action( 'wp_loaded','my_flush_rules' );

La présentation par défaut de ces éléments est définie par WordPress, et il est souvent nécessaire de jouer avec les possibilités de WP afin de les customiser et obtenir le rendu que vous souhaitez.

Pour ce faire, il est nécessaire d’insérer le code suivant dans le fichier functions.php de votre thème, et personnaliser votre formulaire.

 // A inclure dans votre functions.php
function your_search_form( $form ) {
      $form = '<form role="search" method="get" id="search-form" action="' . home_url( '/' ) . '" >
     <input type="search" value="' . get_search_query() . '" name="s" id="s" placeholder="Rechercher" />
     <input type="submit" id="searchsubmit" value="Ok" />
     </form>';
      return $form;
 }

add_filter( 'get_search_form', 'your_search_form' );

Afin de procéder à cette modification, et ouvrir la possibilité d’envoyer des emails au format html, un simple initialisation est nécessaire. Vous pouvez l’ajouter dans votre fichier functions.php, ou directement dans un plugin.

// A inclure dans votre functions.php ou dans votre plugin
function wp_set_mail_to_html(){
    return "text/html";
}
add_filter( 'wp_mail_content_type','wp_set_mail_to_html' );

Rien de plus simple !

Et pour réaliser l’envoi de vos mails, je vous conseille l’utilisation d’un SMTP de type Brevo afin de sécuriser vos envois et obtenir une analyse détaillée de vos taux de réception et d’ouverture.