Les thèmes WordPress jouent un rôle crucial dans l’élaboration de l’apparence et des fonctionnalités de votre site web. Ils définissent la manière dont votre contenu est affiché et offrent diverses options de conception pour créer un site unique. Au fil des ans, les thèmes WordPress ont considérablement évolué, en commençant par ce que nous appelons aujourd’hui les « thèmes classiques »

Les thèmes classiques ont longtemps été la norme, s’appuyant sur des modèles PHP et nécessitant quelques connaissances en codage pour être personnalisés. Ces thèmes offraient une grande flexibilité, mais pouvaient représenter un défi pour les novices en matière de développement web. La version 5.9 de WordPress a marqué un tournant important avec l’introduction des « thèmes en blocs »

Thèmes classiques et thèmes en blocs

Les thèmes classiques sont le type traditionnel de thème WordPress. Ils définissent l’aspect général d’un site web en utilisant des fichiers modèles écrits en PHP, des feuilles de style CSS pour la mise en forme et du JavaScript pour les fonctionnalités supplémentaires. Ces thèmes hautement personnalisables constituent l’épine dorsale des sites WordPress depuis de nombreuses années.

Les thèmes en blocs, en revanche, sont un nouveau type de thème WordPress introduit pour prendre en charge les capacités d’édition complète du site (Full Site Editing ou FSE). Contrairement aux thèmes classiques, ils utilisent des blocs pour construire toutes les parties d’un site web, y compris les en-têtes, les pieds de page et les zones de contenu. Cela permet de concevoir et de personnaliser les sites web de manière plus visuelle et plus intuitive, directement dans l’éditeur WordPress.

Les principales différences entre les thèmes classiques et les thèmes en blocs sont les suivantes :

  1. Personnalisation – Les thèmes classiques nécessitent PHP et quelques connaissances en codage, tandis que les thèmes en bloc utilisent un éditeur visuel pour une personnalisation plus facile.
  2. Flexibilité – Les thèmes classiques offrent plus de flexibilité aux développeurs, tandis que les thèmes en blocs mettent l’accent sur la facilité d’utilisation et l’accessibilité.
  3. Édition – Les thèmes classiques sont édités par le biais des fichiers de thème et de la personnalisation de WordPress. Les thèmes en blocs peuvent être édités entièrement à l’aide de l’éditeur de bloc.

Choisir le type de thème à développer

Le choix entre les thèmes classiques et les thèmes en blocs dépend de vos besoins et de votre niveau de compétence. Si vous êtes un développeur à la recherche d’un maximum de flexibilité, les thèmes classiques peuvent être votre choix. En revanche, si vous préférez une approche plus conviviale et visuelle de la construction de votre site, les thèmes en blocs sont une excellente option.

Les deux types de thèmes présentent des avantages et conviennent à différents types d’utilisateurs et de projets. Comprendre les principales différences vous aidera à prendre une décision éclairée quant au thème qui répondra le mieux aux besoins de votre site web.

Cet article a pour but de vous aider à comprendre et à maîtriser les concepts fondamentaux des thèmes classiques et des thèmes en blocs, afin de vous permettre de créer et de personnaliser des thèmes WordPress de manière efficace.

Comprendre la structure d’un thème

Comprendre la structure d’un thème, qu’il soit classique ou en blocs, est essentiel pour personnaliser efficacement votre site WordPress.

Avant d’explorer la structure de chaque thème, vous devez savoir que tous les thèmes WordPress sont stockés dans le répertoire wp-content/themes de votre installation WordPress, et que chaque thème réside dans son propre dossier.

Structure d’un thème classique

Un thème classique comprend plusieurs fichiers et répertoires clés qui créent l’apparence et les fonctionnalités du site. Les deux principaux fichiers sont les suivants

  1. style.css – Il s’agit de la feuille de style principale qui définit le style visuel du thème. Elle comprend des métadonnées sur le thème (comme le nom, l’auteur et la version) en haut, suivies de règles CSS qui stylisent le thème.
  2. index.php – Il s’agit du fichier modèle principal utilisé pour afficher le contenu de la page d’accueil. Il sert de solution de repli pour les autres fichiers de modèle qui pourraient être manquants.

En plus de ces fichiers, plusieurs autres fichiers importants permettent une conception modulaire et garantissent que les différentes parties du site peuvent être facilement personnalisées et maintenues. Bien que facultatifs, ces fichiers sont considérés comme standard :

  • header.php – Ce fichier contient la section d’en-tête du thème, y compris le titre du site, le logo et le menu de navigation. Il est inclus en haut de chaque page, ce qui garantit un en-tête de page cohérent.
  • footer.php – Ce fichier contient la section du pied de page du thème, qui comprend souvent des informations sur les droits d’auteur et le menu de navigation du pied de page. Il est inclus au bas de chaque page, ce qui permet d’avoir un pied de page cohérent sur l’ensemble du site.
  • functions.php – Ce fichier est utilisé pour ajouter des fonctionnalités personnalisées au thème. Il permet d’enregistrer des menus, de mettre en file d’attente des styles et des scripts et d’ajouter des fonctions de support du thème telles que des miniatures d’articles et des arrière-plans personnalisés. Il s’agit essentiellement d’un centre de contrôle pour la personnalisation et l’amélioration du thème.
  • page.php single.php archive.php ces fichiers modèles définissent la structure de différents types de contenu, tels que les pages, les articles individuels et les archives.

Structure d’un thème en blocs

Un thème en blocs est composé de plusieurs fichiers et répertoires clés qui sont spécifiquement conçus pour fonctionner avec les blocs et les fonctionnalités FSE. Les principaux fichiers et répertoires sont les suivants

  1. theme.json – Ce fichier est essentiel pour configurer les réglages, les styles et les personnalisations du thème. Il définit des styles et des réglages globaux pour les blocs, offrant ainsi un moyen centralisé de gérer l’apparence et le comportement du thème. Il remplace un grand nombre de codes PHP personnalisés et permet de configurer facilement les couleurs, la typographie, l’espacement, etc.
  2. style.css – Bien que la plupart des styles soient gérés dans theme.json, comme pour les thèmes classiques, style.css est toujours utilisé pour déclarer les métadonnées du thème, telles que le nom du thème, l’auteur, la version et la description.
  3. templates/ – Ce répertoire contient des fichiers HTML qui définissent la présentation des différentes parties du site. Ces fichiers comprennent des modèles tels que index.html pour la page d’accueil, single.html pour les articles individuels, page.html pour les pages, etc. Chaque fichier est construit à l’aide de blocs.
  4. parts/ – Ce répertoire contient des sections réutilisables de modèles, telles que les en-têtes et les pieds de page. Ces parties peuvent être incluses dans plusieurs modèles, ce qui garantit la cohérence du site.

Bien qu’elles ne soient pas obligatoires, les compositions sont également importantes pour le développement de thèmes avancés. Les modèles sont des blocs prédéfinis qui peuvent être insérés dans les pages et les articles, ce qui permet de créer rapidement des designs complexes.

Avec les thèmes en blocs, vous pouvez décider de ne pas créer la structure du thème manuellement. Vous pouvez rationaliser le processus de configuration à l’aide de l’extension Create Block Theme, qui regroupe tous les fichiers et détails nécessaires.

Extension de création de thème en blocs.
Extension de création de thème en blocs.

Une fois que vous avez rempli les détails, un nouveau dossier de thème est créé dans le répertoire wp-content/themes, et le nouveau thème apparaîtra dans la zone d’administration de WordPress sous Apparence > Thèmes. Vous pouvez ajouter d’autres détails sur le thème dans le paramètre de méta-description style.css.

Hiérarchie des modèles de thèmes WordPress

La hiérarchie des modèles indique quels fichiers modèles WordPress utilise(nt) pour afficher les différents types de contenu. Les thèmes classiques et les thèmes en blocs suivent une hiérarchie similaire, mais diffèrent dans les types de fichiers qu’ils utilisent : les thèmes classiques utilisent des fichiers PHP, tandis que les thèmes en blocs utilisent des fichiers HTML.

La hiérarchie des modèles suit un ordre spécifique pour déterminer le fichier de modèle à utiliser. Si WordPress ne trouve pas un fichier de modèle spécifique, il passe au suivant dans la hiérarchie.

Par exemple, lorsque WordPress doit afficher un seul article de blog, il recherche d’abord un modèle spécifique au type d’article, comme single-{post-type}.php ou single-{post-type}.html. Si ce fichier n’existe pas, il recherche le modèle générique single.php ou single.html. Si aucun de ces fichiers n’est trouvé, WordPress se rabat sur le modèle le plus générique index.php ou index.html.

Le même processus s’applique aux autres types de contenu. Pour une page statique, WordPress vérifiera d’abord s’il existe des modèles personnalisés assignés à cette page. S’il n’en trouve pas, il recherche un modèle basé sur l’intitulé de la page (par exemple, page-about.php ou page-about.html) ou sur son identifiant (page-42.php ou page-42.html). Si ces modèles spécifiques ne sont pas disponibles, WordPress utilise le modèle général page.php ou page.html. Si ce dernier n’est pas disponible, il se rabat sur index.php ou index.html.

Création de modèles

La création de modèles dans WordPress vous permet de personnaliser l’affichage des différents types de contenu sur votre site web. Que vous travailliez avec des thèmes classiques ou des thèmes en blocs, le processus consiste à mettre en place les fichiers nécessaires et à les configurer en fonction de vos besoins.

Configurons un modèle de page pour les deux types de thèmes.

Modèle de page pour les thèmes classiques

Dans les thèmes classiques, vous créez un modèle de page à l’aide de PHP. Voici comment procéder :

  1. Créer le fichier de modèle – À l’aide d’un éditeur de texte, créez un nouveau fichier PHP dans le répertoire de votre thème et nommez-le page.php.
  2. Ajouter le code du modèle – Écrivez le code PHP nécessaire pour définir la structure et le contenu du modèle de page. Il s’agit généralement de balises WordPress pour afficher le contenu de la page.
  3. Inclure l’en-tête et le pied de page – Assurez-vous que votre modèle inclut l’en-tête et le pied de page en ajoutant les fonctions get_header() et get_footer(). Cela permet d’assurer la cohérence de la mise en page avec le reste de votre site.

Voici un exemple de ce à quoi page.php pourrait ressembler :

<?php
get_header(); ?>

<main>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
</main>

<?php get_footer(); ?>

Dans cet exemple, le modèle inclut l’en-tête, affiche le titre et le contenu de la page, puis inclut le pied de page.

Modèle de page pour les thèmes en blocs

Dans les thèmes en blocs, la création d’un modèle de page peut se faire via l’éditeur de site WordPress ou en créant un fichier page.html dans le répertoire templates.

Une fois ce fichier créé, vous pouvez concevoir une mise en page en naviguant vers l’éditeur de site (Apparence > Éditeur dans votre tableau de bord WordPress).

Utilisez l’éditeur de blocs pour ajouter et arranger des blocs afin de concevoir votre mise en page. Vous pouvez ajouter des blocs pour le titre de la page, l’image mise en avant et le contenu. Personnalisez chaque bloc en fonction de vos préférences en matière de conception.

Personnalisez le modèle de page à l'aide de l'éditeur de blocs.
Personnalisez le modèle de page à l’aide de l’éditeur de blocs.

Une fois que vous êtes satisfait de la mise en page, enregistrez le modèle. WordPress générera automatiquement le fichier HTML correspondant dans le répertoire de votre thème.

Styliser les thèmes

Le style de votre thème WordPress est une étape cruciale dans la définition de l’apparence visuelle de votre site web. Les thèmes classiques et les thèmes en blocs offrent tous deux de solides moyens de personnaliser les styles, mais ils abordent cela différemment.

Styliser les thèmes classiques

Dans les thèmes classiques, le style est généralement géré à l’aide de CSS. Voici comment styliser un thème classique :

La feuille de style principale d’un thème classique est le fichier style.css. Ce fichier contient toutes les règles CSS qui définissent l’apparence de votre thème. C’est également là que vous déclarez les métadonnées du thème, telles que le nom du thème, l’auteur, la version et la description.

Pour vous assurer que votre feuille de style CSS est correctement chargée, vous devez la mettre en file d’attente dans le fichier functions.php à l’aide de la fonction wp_enqueue_style().

function my_theme_enqueue_styles() {
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

Cette étape est cruciale pour le maintien des normes WordPress et pour garantir que les styles sont appliqués correctement.

En outre, vous pouvez ajouter des feuilles de style CSS personnalisées directement dans le fichier style.css ou créer des fichiers CSS distincts pour les différentes parties de votre thème. Les feuilles de style CSS personnalisées peuvent également être intégrées dans des fichiers modèles individuels à l’aide de la balise <style>, bien que cette pratique soit généralement moins courante et recommandée uniquement pour des styles spécifiques et isolés.

Pour un style plus avancé, vous pouvez utiliser des préprocesseurs CSS tels que SASS ou LESS. Ces outils vous permettent d’écrire des feuilles de style CSS plus faciles à maintenir et plus modulaires, ce qui facilite la gestion et l’extension des styles de votre thème.

Styliser les thèmes en blocs

Les styles de thèmes en blocs sont principalement gérés par le fichier theme.json et l’éditeur de blocs.

Le fichier theme.json est l’endroit central pour configurer les styles et les réglages globaux de votre thème. Ce fichier vous permet de définir les couleurs, la typographie, l’espacement et d’autres styles dans un format JSON structuré, offrant ainsi un moyen centralisé de gérer l’apparence et le comportement du thème. Les styles globaux définis dans theme.json s’appliquent à l’ensemble de votre site, ce qui garantit un aspect et une convivialité cohérents.

Outre theme.json, vous pouvez utiliser l’éditeur de blocs pour appliquer des styles personnalisés directement aux blocs. L’éditeur de blocs vous permet de voir les changements en temps réel et d’ajuster la conception visuellement sans avoir à écrire du code manuellement. Cela rend le processus plus accessible, en particulier pour ceux qui préfèrent une interface visuelle au codage.

Bien que le fichier theme.json gère la plupart des styles, vous pouvez toujours utiliser le CSS pour un contrôle plus granulaire. Les feuilles de style CSS personnalisées peuvent être ajoutées au fichier style.css ou directement dans les blocs individuels à l’aide de l’éditeur de blocs.

Un exemple de fichier theme.json peut inclure des paramètres pour les palettes de couleurs, la typographie et les styles de blocs, ce qui facilite la gestion et la personnalisation de la conception du thème.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#005177"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "12px"
        },
        {
          "name": "Normal",
          "slug": "normal",
          "size": "16px"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333"
    },
    "typography": {
      "fontFamily": "Arial, sans-serif"
    }
  }
}

Personnalisation des thèmes

La personnalisation des thèmes WordPress vous permet d’adapter l’apparence et les fonctionnalités de votre site web à vos besoins et préférences spécifiques. Les thèmes classiques et les thèmes en blocs offrent tous deux diverses méthodes de personnalisation, mais ils les abordent différemment.

Personnalisation des thèmes classiques

Les thèmes classiques offrent plusieurs façons de personnaliser l’aspect et la convivialité de votre site :

  1. Personnalisation de thème – La personnalisation de thème de WordPress est une interface facile à utiliser qui vous permet de modifier l’apparence de votre thème sans toucher au code. Vous pouvez y accéder via Apparence > Personnaliser. Il offre des options pour modifier l’identité du site, les couleurs, les menus, les widgets, etc. Les modifications peuvent être visualisées en temps réel avant d’être enregistrées.
  2. CSS personnalisé – Pour des modifications de style plus spécifiques, vous pouvez ajouter un CSS personnalisé directement dans la personnalisation du thème, dans la section CSS supplémentaire. Cette méthode est idéale pour apporter des modifications mineures sans modifier les fichiers du thème.
  3. Thèmes enfants – Si vous devez apporter des modifications importantes, il est recommandé de créer un thème enfant. Un thème enfant hérite des fonctionnalités du thème parent et vous permet de remplacer ou d’ajouter de nouveaux styles et fonctionnalités. Cela garantit que vos personnalisations sont préservées lorsque le thème parent est mis à jour.
  4. Fichiers de thème – Les utilisateurs avancés peuvent modifier directement les fichiers de thème, tels que header.php, footer.php, et functions.php, afin d’apporter des changements plus importants. Toutefois, cette méthode nécessite une bonne compréhension du PHP et de la hiérarchie des modèles WordPress.
  5. Extensions – Il existe de nombreuses extensions qui étendent les possibilités de personnalisation de votre thème. Par exemple, les extensions de construction de pages comme Elementor vous permettent de créer des mises en page complexes sans codage.

Personnalisation des thèmes en blocs

En mettant l’accent sur le FSE, les thèmes en blocs offrent une approche plus visuelle et plus conviviale de la personnalisation :

  1. Éditeur de site – L’éditeur de site WordPress (Apparence > Éditeur) est le principal outil de personnalisation des thèmes en bloc. Il vous permet de modifier tous les aspects de votre site, y compris les en-têtes, les pieds de page, les modèles et les blocs individuels, à l’aide d’une interface visuelle. Les modifications sont appliquées instantanément, ce qui permet de voir facilement comment vos ajustements affectent la conception du site.
  2. Styles globaux – Les thèmes en blocs utilisent le fichier theme.json pour définir des styles globaux. Vous pouvez personnaliser les couleurs, la typographie, l’espacement, etc. de manière globale, afin d’assurer la cohérence de votre site. L’éditeur de site vous permet également de modifier visuellement ces réglages.
  3. Blocs et modèles réutilisables – Vous pouvez créer des blocs et des modèles réutilisables pour maintenir la cohérence et rationaliser le processus de conception. Les blocs réutilisables peuvent être enregistrés et insérés dans n’importe quel article ou page, tandis que les modèles de blocs fournissent des mises en page prédéfinies qui peuvent être personnalisées pour répondre à vos besoins.
  4. Modèles personnalisés – Avec les thèmes en blocs, vous pouvez créer des modèles personnalisés pour différents types de contenu directement dans l’éditeur de site. Cela vous permet d’adapter la mise en page et la conception de pages ou de types d’articles spécifiques sans avoir à écrire de code.
  5. Extensions – Comme les thèmes classiques, les thèmes en blocs peuvent également être étendus à l’aide d’extensions. De nombreuses extensions sont conçues pour améliorer les capacités de l’éditeur de blocs, en proposant des blocs, des compositions et des options de personnalisation supplémentaires.

Résumé

La personnalisation des thèmes WordPress vous permet de rendre votre site unique et fonctionnel. Les thèmes classiques s’appuient sur la personnalisation de thème, les feuilles de style CSS personnalisées, les thèmes enfants et les modifications directes de fichiers pour plus de flexibilité. Les thèmes en blocs utilisent l’éditeur de site et theme.json pour une approche plus visuelle et intuitive.

Les deux méthodes offrent des outils puissants pour adapter votre site à vos besoins, que vous préfériez le code ou la personnalisation visuelle.

Après avoir créé un thème qui vous convient, qu’il s’agisse d’un thème classique ou d’un thème en blocs, il est important d’héberger votre site sur un hébergement robuste afin d’éviter les problèmes tels que les temps d’arrêt, les attaques DDoS et bien d’autres. C’est là que les fournisseurs d’hébergement haut de gamme comme Kinsta brillent.

Kinsta offre un hébergement WordPress infogéré puissant avec une architecture entièrement conteneurisée, alimenté exclusivement par Google Cloud Platform sur le réseau Premium Tier de Google.

Joel Olawanle Kinsta

Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.