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 !

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

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.

Il y a de multiples manières de mettre en place le rewriting sur des url personnalisées, celle-ci fonctionne très bien. La partager me permet aussi de m’en faire un mémo et ne pas avoir à rechercher dans les développements d’anciens sites Internet afin de remettre en place ce bout de code sur de nouveaux sites ;).

Pour cela, quelques lignes suffisent. A inclure dans le fichier functions.php de votre thème, ou directement dans le plugin que vous êtes en train de développer.

/* Initialisation de la variable que je souhaites récupérer */
function wpd_add_query_vars( $qvars ) {
    $qvars[] = 'mavariable';
    return $qvars;
}
add_filter( 'query_vars', 'wpd_add_query_vars' );

/* Initialisation du rewriting de l'URL */
function wpd_page_rewrite(){
    add_rewrite_rule( '^mapage/([^/]*)?', 'index.php?pagename=mapage&mavariable=$matches[1]', 'top' );
}
add_action( 'init', 'wpd_page_rewrite' );

Une fois le code en place dans mon functions.php, rendez-vous sur les réglages, puis Permaliens, et cliquez sur « Enregistrer les modifications » afin que votre bout de code soit bien pris en compte.

Enfin, pour récupérer la valeur de votre variable « mavariable », utilisez la fonction get_query_var :

$variable = get_query_var('mavariable');

Il existe sur WordPress une fonction assez simple permettant de gérer l’affichage. Ce bout de code est à insérer dans votre plugin en développement, ou directement dans le fichier functions.php de votre thème.

add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
    if (!current_user_can('administrator') && !is_admin()) {
        show_admin_bar(false);
    }
}

Ce code va donc cacher la barre d’outil d’administration pour tous les utilisateurs n’ayant pas le rôle Admin.