WordPress 5.9 a introduit une nouvelle façon de construire des sites web : L’édition complète du site (FSE). Ce fut un tournant pour les utilisateurs de WordPress car il a complètement changé la façon dont les thèmes WordPress sont construits et fonctionnent.
L’introduction du FSE a également introduit une distinction entre les thèmes qui prennent entièrement en charge les nouvelles fonctionnalités de construction de sites, également connus sous le nom de thèmes basés sur des blocs, et les thèmes traditionnels basés sur PHP, que nous appelons maintenant thèmes classiques.
Au fil du temps, de nombreuses fonctions conçues pour les thèmes de blocs ont été étendues aux thèmes classiques. Cela a donné naissance à une troisième catégorie de thèmes, les thèmes hybrides, qui sont toujours construits selon la logique et la structure des thèmes classiques, mais qui prennent en charge diverses fonctions conçues pour les thèmes de blocs.
Cet article explore les thèmes hybrides, leurs principales caractéristiques, la façon dont les développeurs peuvent les améliorer et quand les choisir plutôt que les thèmes basés sur des blocs.
Plongeons dans l’aventure !
Thèmes classiques ou hybrides ?
Avant l’introduction des thèmes de blocs avec Twenty Twenty-Two et WordPress 5.9, les thèmes classiques n’existaient pas. Le terme est apparu pour les distinguer des thèmes de blocs. Les thèmes classiques sont tous les thèmes WordPress qui ne prennent pas en charge les fonctions de bloc.
Aujourd’hui, il n’est pas facile de trouver des thèmes classiques purs car, depuis la version 5.9, ces thèmes ont été enrichis de nombreuses fonctionnalités construites pour les thèmes de blocs, ce qui rend les expériences d’édition et de conception des deux catégories de thèmes de plus en plus proches au fil du temps.
Ceci étant dit, la façon dont tu travailles avec les thèmes hybrides est toujours différente de celle des thèmes de blocs.
Caractéristiques de base des thèmes hybrides
Avec les thèmes hybrides, votre site peut profiter des capacités d’édition de l’éditeur de blocs de WordPress tout en restant compatible avec les extensions et fonctionnalités traditionnels de WordPress tels que les widgets, les menus et les modèles de page.
La personnalisation de WordPress
Les thèmes hybrides prennent généralement en charge la personnalisation WordPress, un environnement de configuration visuelle qui vous permet d’affiner l’apparence de votre site WordPress et de prévisualiser vos modifications en temps réel.
Le thème par défaut Twenty Twenty-One est un bon exemple de thème hybride proposant les réglages les plus courants de la personnalisation, notamment l’identité du site, les couleurs et le mode sombre, l’image d’arrière-plan, les menus, les widgets, les réglages de la page d’accueil, et bien plus encore.
Les thèmes peuvent enregistrer des contrôles spécifiques de la personnalisation, de sorte que les fonctionnalités varient selon le thème. L’image suivante montre la personnalisation pour Neve, un thème hybride léger de ThemeIsle.
Les thèmes peuvent également enregistrer des fonctionnalités avancées pour donner aux utilisateurs un contrôle granulaire sur des aspects spécifiques de la conception du site. Neve, par exemple, propose un puissant constructeur pour créer les en-têtes et les pieds de page du site.
Blocs de widgets
Les thèmes hybrides vous permettent de personnaliser les zones de widgets à l’aide de blocs, grâce à l’éditeur de widgets par blocs. Il a été introduit pour la première fois avec WordPress 5.8, et vous pouvez l’essayer avec n’importe quel thème classique utilisant des widgets.
L’interface de l’éditeur de widgets est similaire à celle de l’éditeur de posts. L’image suivante montre un bloc Image dans la zone de widgets du pied de page du thème Twenty Twenty-One.
Les widgets classiques tels que les catégories, les archives, les articles récents ou les commentaires récents sont toujours pris en charge dans les thèmes hybrides. L’éditeur de widgets complète les widgets classiques de WordPress en permettant aux utilisateurs de créer les leurs grâce à son interface basée sur des blocs.
Livre de style et modèles de blocs
Avec les récents changements introduits avec WordPress 6.8, les thèmes hybrides qui prennent en charge les styles de l’éditeur peuvent utiliser le livre de style, une interface visuelle qui permet aux utilisateurs de prévisualiser tout bloc pouvant être utilisé sur leurs sites web sans avoir à utiliser ces blocs dans leur contenu.
Vous pouvez accéder au carnet de style dans les thèmes hybrides à partir de Apparence > Design > Styles.
L’image suivante montre le cahier de style du thème hybride Kadence.
Dans la même interface, vous pouvez parcourir et gérer les compositions.
Pour les thèmes hybrides qui les prennent en charge, les compositions sont disponibles pour être utilisés dans l’éditeur d’articles, qui est activé par défaut sur toutes les installations de WordPress depuis la version 5.0, à moins que vous ne l’ayez désactivé avec l’extension Classic Editor.
Structure du thème : Vue d’ensemble du développeur
Les thèmes classique et de blocs ne sont pas seulement différents en termes de fonctionnalité pour l’utilisateur final. Ils sont également différents d’un point de vue structurel.
Thèmes classiques
Les thèmes classiques reposent sur quelques fichiers clés, dont le plus important est le fichier style.css. Il fournit les métadonnées du thème et détermine l’apparence du site sur l’interface publique.
En plus de la feuille de style du thème, les thèmes classiques ont généralement un fichier functions.php utilisé pour construire les fonctionnalités et l’assistance du thème.
Les thèmes classiques s’appuient également sur des modèles PHP qui définissent la structure d’une page et ses principales zones : l’en-tête, le corps, les colonnes latérales et le pied de page. Lorsqu’un utilisateur visite un article ou une page, WordPress détermine quel modèle utiliser pour restituer le contenu à l’écran selon un système strict de règles connu sous le nom de hiérarchie des modèles. Les modèles les plus couramment utilisés sont index.php, page.php, single.php, et bien d’autres.
Les thèmes classiques peuvent utiliser des fonctions PHP spécifiques (crochets d’action et de filtre), qui sont exécutées à des moments précis de la vie de WordPress, ce qui permet aux développeurs d’étendre les fonctionnalités d’un thème à l’aide d’un code PHP dans le fichier functions.php d’un thème enfant.
Vous devinez sans doute que la personnalisation d’un thème classique est particulièrement difficile pour les utilisateurs qui n’ont pas de compétences en codage.
Thèmes en blocs
Les thèmes de blocs ont également besoin d’un style.css pour fournir à WordPress les métadonnées du thème, mais ils s’appuient fortement sur un fichier theme.json, un fichier de configuration qui définit les styles et les réglages globaux d’un thème. Il contient un objet JSON dont les propriétés définissent les réglages initiaux nécessaires pour créer la mise en page et définir l’apparence des pages du site.
Les thèmes de blocs utilisent également des modèles et des parties de modèles, mais ceux-ci sont structurellement différents des modèles PHP de thèmes classiques. Dans les thèmes de blocs, les modèles et les parties de modèles sont des fichiers HTML contenant des balises spécifiques et des objets JSON. Prenons par exemple le modèle home.html du thème par défaut Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Ce modèle se compose d’éléments structurés sous forme de balises HTML et de commentaires. Les commentaires peuvent faire référence à d’autres éléments typiques d’un thème par blocs, tels que les parties de modèles et les modèles, qui sont composés de blocs ou d’autres éléments imbriqués.
Ajout de fonctions de blocs aux thèmes hybrides
Comme nous l’avons mentionné plus haut, avec les thèmes classiques, vous devez ajouter un code personnalisé pour modifier la mise en page ou les fonctionnalités d’un site, ce qui implique souvent des fichiers de modèles ou functions.php. En revanche, les thèmes de blocs permettent aux non-développeurs de mieux contrôler la mise en page et l’apparence d’un site.
Les thèmes hybrides offrent moins de fonctions de blocs que les thèmes classiques, mais peuvent néanmoins offrir un meilleur contrôle de la mise en page et du style grâce à des modèles et des styles globaux.
Explorons quelques puissantes fonctions de blocs que tu peux intégrer à votre thème classique et apprenons à les mettre en œuvre de manière efficace.
Styles globaux
WordPress 5.8 a introduit les styles globaux, une interface visuelle qui permet aux utilisateurs de contrôler l’apparence de leur site web à partir d’une interface centralisée, et aux développeurs de contrôler les styles de leurs sites WordPress par le biais d’un fichier theme.json.
Pour activer cette fonction dans votre thème hybride, il suffit d’ajouter un fichier theme.json au dossier racine du thème. Voyons quelques-unes des principales fonctionnalités que vous pouvez ajouter à votre thème hybride avec theme.json.
Typographie
Disons que vous voulez ajouter la prise en charge de trois familles de polices à votre thème classique. Dans cet exemple, nous utiliserons Twenty Twenty-One.
Tout d’abord, créez un dossier fonts sous assets et téléversez quelques polices de votre choix. Nous ajoutons trois polices : Manrope, Fira Code et Beiruti. Vous pouvez obtenir ces polices à partir du thème Twenty Twenty-Five.
Ouvrez votre éditeur de texte et créez le fichier suivant theme.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
},
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "200 800",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
{
"name": "Beiruti",
"slug": "beiruti",
"fontFamily": "Beiruti, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/beiruti/Beiruti-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "Beiruti"
}
]
}
]
}
}
}La propriété settings.typography.fontFamilies vous permet d’enregistrer un nombre quelconque de familles de polices personnalisées. Pour chaque police, vous devrez déclarer les propriétés suivantes :
name: Un titre obligatoire lisible par l’homme pour la famille de polices.slug: Une balise obligatoire pour la famille de polices. Il sera ajouté à une propriété CSS personnalisée générée :--wp--preset--font-family--{slug}.fontFamily: Une valeur obligatoire qui correspondra à la valeur CSS font-family.fontFace: Un tableau facultatif de polices de caractères qui sont associées à la règle CSS at-rule@font-face. Vous n’en avez besoin que pour les polices web personnalisées.
Sauvegardez votre site theme.json et rendez-vous sur votre tableau de bord WordPress. Créez un nouvel article ou une nouvelle page, ajoutez un paragraphe avec un exemple de texte et ouvrez la colonne latérale du bloc. Cliquez sur le bouton Options de typographie et sélectionnez Police. Vous devriez trouver des options pour les familles de polices que vous venez d’ajouter à votre thème.
Les images suivantes montrent à quoi ressemble la colonne latérale du bloc Paragraphe avant et après l’ajout du site theme.json présenté ci-dessus.
Les propriétés de style globales varient selon le thème. En dehors de typography, les propriétés couramment prises en charge vous permettent de contrôler la palette de couleurs, la mise en page et les styles personnalisés. Les exemples suivants ont été testés sur Twenty Twenty-One.
Palette de couleurs, dégradés et filtres duotone
Vous pouvez ajouter la prise en charge des couleurs personnalisées à l’aide de la propriété settings.color au niveau du thème ou d’un bloc individuel. Par exemple, le code suivant ajoute deux couleurs à la palette par défaut :
settings: {
"color": {
"palette": [
{
"name": "Dark blue",
"slug": "dark-blue",
"color": "#1e73be"
},
{
"name": "Bright green",
"slug": "bright-green",
"color": "#81d742"
}
]
},
}Vous pouvez utiliser la propriété settings.color.palette pour enregistrer autant de couleurs que vous le souhaitez.
Vous pouvez également ajouter la prise en charge des dégradés et des filtres duotone :
settings: {
"color": {
"gradients": [
{
"gradient": "linear-gradient(135deg, #0073e6, #8fceff)",
"name": "Clear Sky",
"slug": "clear-sky"
},
{
"gradient": "linear-gradient(to right top, #ff8c00, #ff0080)",
"name": "Vivid Sunset",
"slug": "vivid-sunset"
}
]
}
}
settings: {
"color": {
"duotone": [
{
"colors": [ "#0A2F51", "#F5D04E" ],
"name": "Deep Sea Gold",
"slug": "deep-sea-gold"
},
{
"colors": [ "#3A0CA3", "#FFB703" ],
"name": "Purple Amber",
"slug": "purple-amber"
},
{
"colors": [ "#1B4332", "#BAE6C4" ],
"name": "Forest Mist",
"slug": "forest-mist"
},
{
"colors": [ "#000000", "#FFFFFF" ],
"name": "Black and White",
"slug": "black-and-white"
}
]
}
}
Mise en page
Vous pouvez également personnaliser les réglages de mise en page par défaut. La propriété settings.layout vous permet de définir la largeur du contenu et la largeur de l’alignement large par défaut. Voici un exemple :
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
}
}Pour un aperçu plus approfondi de theme.json, consultez notre tutoriel complet sur theme.json et la documentation officielle de WordPress.
Variations de style de bloc
Introduites pour la première fois avec WordPress 5.3, les variations de style de bloc permettent aux développeurs de créer des styles alternatifs pour des blocs spécifiques.
En bref, les styles de bloc sont des classes CSS ajoutées à l’élément enveloppant d’un bloc sous la forme .is-style-{name}.
Les variations de style de bloc apparaissent dans le panneau Styles de la colonne latérale des blocs et vous permettent de sélectionner un style pour le bloc en un seul clic.
Vous pouvez enregistrer vos variations de style de bloc de plusieurs façons.
Tout d’abord, vous pouvez enregistrer les styles de blocs à l’aide de la fonction PHP register_block_style(). Par exemple, vous pouvez enregistrer la variation de style suivante dans le fichier de fonctions de votre thème :
if ( function_exists( 'register_custom_block_style' ) ) {
register_block_style(
'core/image',
array(
'name' => 'custom',
'label' => __( 'Custom', 'text-domain' ),
'inline_style' => '.wp-block-image.is-style-custom img { border-radius: 12px; }',
)
);
}
add_action( 'init', 'register_custom_block_style' ); register_block_style() accepte deux arguments :
$block_name: Le nom d’un type de bloc ou un tableau de types de blocs.$style_properties: Un tableau contenant les propriétés du style. Dans cet exemple, nous avons utiliséname,label, etinline_style.
Le code ci-dessus génère une variation de style de bloc avec une seule propriété CSS. Une fois ce code ajouté au fichier functions.php de votre thème ou de votre thème enfant, un bouton s’affiche dans le panneau des styles de blocs pour permettre à l’utilisateur de définir le style en un seul clic.
L’image suivante montre la variation de style du bloc dans l’interface publique. Le thème est toujours Twenty Twenty-One.
Vous pouvez ajouter vos styles inline dans votre code PHP, comme dans l’exemple ci-dessus, mais votre code peut rapidement devenir difficile à maintenir à mesure que les styles deviennent plus complexes et élaborés. Dans ces cas-là, vous pouvez enregistrer la variation de style comme nous l’avons vu précédemment mais définir les styles dans votre fichier theme.json.
Dans l’exemple suivant, nous créons une variation de style bleu foncé pour le bloc Titre.
Tout d’abord, enregistrez la variation de style dans le fichier de fonctions du thème :
add_action('init', 'register_block_style_labels');
function register_block_style_labels() {
$block_types = ['core/heading'];
if (function_exists('register_block_style')) {
foreach ($block_types as $block_type) {
register_block_style(
$block_type,
array(
'name' => 'dark-blue-bg',
'label' => __('Dark Blue', 'twentytwentyone')
)
);
}
}
}Ensuite, définissez les styles de variation dans votre fichier theme.json :
"settings": {
"styles": {
"blocks": {
"core/heading": {
"variations": {
"dark-blue-bg": {
"color": {
"background": "#2860a6",
"text": "#ffffff"
},
"spacing": {
"padding": {
"top": "0.3em",
"right": "0.4em",
"bottom": "0.3em",
"left": "0.4em"
}
}
}
}
}
}
}
}Maintenant, les utilisateurs de votre thème peuvent choisir entre deux variations de style pour le bloc Titre, comme le montre l’image suivante.
Variations de blocs
Les variations de bloc sont des versions alternatives de n’importe quel bloc enregistré. Alors que les variations de style de bloc (ou styles de bloc) sont des versions personnalisées d’un style de bloc que les utilisateurs peuvent ajouter au contenu en un seul clic, les variations de bloc sont des versions alternatives des réglages d’un bloc. Elles permettent aux utilisateurs d’insérer rapidement un bloc avec des réglages préconfigurés sans avoir à définir les mêmes configurations pour chaque instance de bloc.
L’API des variations de bloc permet aux thèmes hybrides d’enregistrer des variations de bloc via JavaScript. Dans les cas les plus simples, créer un script et le mettre en file d’attente peut faire l’affaire, mais si vous travaillez beaucoup avec JavaScript et les blocs Gutenberg, vous voudrez peut-être incorporer des outils de construction dans votre flux de travail. (Lecture conseillée.)
Supposons que vous vouliez créer une variation de bloc avec un ensemble d’options préconfigurées afin que votre variation puisse être insérée rapidement dans vos articles ou vos pages avec un minimum de configuration supplémentaire nécessaire.
La première étape consiste à créer un fichier JavaScript vide et à le charger dans l’éditeur. Vous devrez le mettre en file d’attente dans le fichier functions.php de votre thème à l’aide de wp_enqueue_script() et du crochet d’action enqueue_block_editor_assets.
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'my-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ) . '?cache_bust=' . time(),
array(
'wp-blocks',
'wp-dom-ready',
'wp-i18n',
'wp-edit-post'
),
wp_get_theme()->get( 'Version' ),
true
);
} );Dans le code ci-dessus, nous avons utilisé ?cache_bust=' . time() pour ajouter un horodatage unique à l’URL de block-variations.js (par exemple, block-variations.js?cache_bust=1698765432). Cette méthode est particulièrement utile pendant le développement, car elle permet de s’assurer que le navigateur, le serveur ou le CDN charge toujours la dernière version du script, ce qui évite qu’une version périmée mise en cache ne bloque l’affichage des modifications.
Ensuite, vous devez enregistrer votre variation de bloc dans ton script à l’aide de la fonction registerBlockVariation fournie par l’API des variations de bloc.
Voici la signature de la fonction :
const registerBlockVariation = ( blockName, variation )blockName: Le nom du bloc (c’est-à-direcore/query.)variation: Un objet décrivant une variation pour le type de bloc.
L’objet variation peut inclure l’un des paramètres suivants :
name: (chaîne) Un identifiant unique de la variation.title: (chaîne) Un titre de variation lisible par l’homme.description: (chaîne) Une description détaillée.category: (chaîne) Une catégorie utilisée dans les interfaces de recherche.keywords: (tableau) Un tableau de termes qui aide les utilisateurs à découvrir la variation.icon: (WPIcon) Une icône à afficher dans l’insertion de blocs.isDefault: (booléen) Indique si la variante actuelle est la variante par défaut. La valeur par défaut est false.isActive: (Function/Array) Une fonction ou un tableau d’attributs de bloc utilisés pour déterminer si la variation est active lorsque le bloc est sélectionné. SansisActive, WordPress ne saurait pas comment distinguer ta variation d’un bloc standard ou d’autres variations, ce qui entraînerait un comportement incohérent dans l’éditeur.attributes: (Objet) Valeurs d’attributs qui remplacent les valeurs par défaut du bloc.innerBlocks: (Array[]) Configuration initiale du bloc imbriqué.example: (Objet) Données structurées pour l’aperçu du bloc. Défini à undefined pour désactiver la prévisualisation.scope: (WPBlockVariationScope[]) La liste des portées où la variation est applicable. Si elle n’est pas fournie, elle suppose tous les scopes disponibles. Les options disponibles sontblock,inserter, ettransform. Les valeurs par défaut sontblocketinserter.
Vous pouvez maintenant ajouter le JavaScript au fichier block-variations.js :
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'custom-centered-text',
title: 'Custom Centered Text',
description: 'This is a block variation with custom attributes.',
attributes: {
level: 2,
textAlign: 'center',
placeholder: 'Add your text here',
style: {
color: {
text: '#1e73be',
background: '#81d742'
}
}
},
isActive: ( blockAttributes ) => {
return (
blockAttributes.level === 2 &&
blockAttributes.textAlign === 'center' &&
blockAttributes.style?.color?.text === '#1e73be' &&
blockAttributes.style?.color?.background === '#81d742'
);
},
icon: 'airplane',
scope: [ 'inserter' ]
} );Ce code ajoute un nouveau type de bloc avec une icône d’avion à l’insertion de blocs. Lorsque vous cliquez sur l’avion, une nouvelle variante du bloc Titre est ajoutée à la page avec vos réglages personnalisés. Nous avons défini le niveau de l’en-tête (H2), centré le texte, défini un espace réservé et défini les couleurs du texte et de l’arrière-plan de l’en-tête.
Remarque : Pour que ce code fonctionne comme prévu, assurez-vous que votre thème hybride ajoute la prise en charge des fonctionnalités de l’éditeur telles que 'editor-color-palette', editor-styles, et d’autres. Pour une liste plus complète des prises en charge, consultez l’API des variations de blocs.
Modèles de blocs
Les modèles de blocs sont des groupes de blocs pré-construits que vous pouvez ajouter à votre contenu et personnaliser à l’aide de l’interface de l’éditeur de blocs.
Les thèmes de blocs fournissent généralement un nombre variable de modèles de blocs que vous pouvez ajouter à votre contenu directement à partir de l’insertion de blocs. Les thèmes hybrides peuvent ajouter la prise en charge des modèles afin que les utilisateurs de thèmes classiques puissent bénéficier de cette puissante fonctionnalité.
Vous pouvez créer un dossier patterns à la racine de votre thème et y inclure vos blocs de compositions, ou vous pouvez les enregistrer dans les fichiers functions.php ou autres .php de votre thème.
Pour garder les choses en ordre, vous pouvez créer un fichier inc/block-patterns.php et l’inclure dans le function.php de votre thème avec le code suivant :
require get_template_directory() . '/inc/block-patterns.php';Une fois cela fait, vous pouvez créer votre composition dans l’éditeur, copier le code et enregistrer votre composition et sa catégorie dans inc/block-patterns.php à l’aide des fonctions register_block_pattern_category et register_block_pattern() :
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_hybrid_theme_register_block_pattern_category() {
register_block_pattern_category(
'myhybridtheme',
array( 'label' => esc_html__( 'My Hybrid Theme', 'myhybridtheme' ) )
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern_category' );
}
if ( function_exists( 'register_block_pattern' ) ) {
function my_hybrid_theme_register_block_pattern() {
// My pattern
register_block_pattern(
'myhybridtheme/huge-heading',
array(
'title' => esc_html__( 'Huge heading', 'myhybridtheme' ),
'categories' => array( 'myhybridtheme' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/heading' ),
'content' => '<!-- wp:heading {"textAlign":"center","align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.2"}}} --><h2 class="alignwide has-text-align-center has-gigantic-font-size" style="line-height:1.2">' . esc_html__( 'A simple Heading in a pattern', 'myhybridtheme' ) . '</h2><!-- /wp:heading -->',
)
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern' );
}Vous pouvez prévisualiser votre composition dans votre tableau de bord WordPress sous Apparence > Design > Motifs > Mon thème hybride et l’utiliser dans votre contenu.
Tu peux aussi dupliquer et exporter ton motif et l’importer dans d’autres sites WordPress.
Parties du modèle
Bien que les thèmes hybrides utilisent les modèles PHP classiques et les parties de modèle, vous pouvez ajouter la prise en charge des parties de modèle en bloc dans le fichier functions.php de votre thème :
function my_hybrid_theme_setup() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'my_hybrid_theme_setup' );Une fois que vous avez ajouté la prise en charge des parties de modèle, vous pouvez inclure n’importe quelle partie de modèle dans n’importe quel fichier de modèle de votre thème hybride à l’aide de la fonction block_template_part.
Voyons un exemple pratique. Commencez par créer un dossier /parts à la racine de votre thème et téléversez un fichier footer.html dans ce dossier. Pour cet exemple, nous avons copié le pied de page du thème Twenty Twenty-Five :
<!-- wp:group {"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-large"} /-->
<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"Social media"} -->
<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->
<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->
<!-- wp:navigation-link {"label":"X","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->Vous pouvez maintenant inclure cette partie de modèle dans un modèle classique avec la fonction block_template_part :
<?php block_template_part( 'footer' ); ?> Vous pouvez, par exemple, l’inclure dans le fichier footer.php de Twenty Twenty-One. L’image suivante montre le résultat à l’écran.
Vous pouvez également inclure des parties de modèle dans un modèle de bloc en utilisant le code suivant :
<!-- wp:template-part {"slug":"footer"} /-->
Vous pouvez, par exemple, copier le code du modèle page.html de Twenty Twenty-Five :
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Enregistrez ce modèle dans ton dossier /templates et appellez-le page.html. WordPress le chargera automatiquement en fonction de la hiérarchie des modèles. Ce modèle inclura automatiquement les parties des modèles header.html et footer.html du dossier /parts de votre thème hybride.
Quand choisir un thème hybride plutôt qu’un thème de blocs
Un thème hybride peut être la meilleure option dans les scénarios suivants :
- Lorsque vous voulez utiliser certaines fonctionnalités modernes des thèmes de blocs sans restructurer complètement un site existant.
Les thèmes hybrides vous permettent de profiter des fonctionnalités des blocs telles que l’éditeur de blocs, les styles globaux et les modèles de blocs. Les thèmes hybrides prennent également en charge les API de l’éditeur de blocs telles que l’API de liaisons de blocs, l’API d’interactivité et l’API HTML. Cela signifie que vous pouvez créer des sites web modernes sans avoir à passer par une migration complexe. - Lorsque vous voulez maintenir la compatibilité avec des extensions ou des widgets classiques mais que vous ne voulez pas renoncer à certaines fonctionnalités puissantes des thèmes de blocs.
Les anciennes versions de certaines extensions peuvent avoir des problèmes de compatibilité avec les thèmes de blocs, comme les anciennes versions de Contact Form 7, NextGEN Gallery, Custom Post Type UI, et d’autres extensions. Bien qu’il soit recommandé de mettre à jour les extensions vers les dernières versions pour éviter les failles de sécurité, certains sites WordPress peuvent avoir des versions plus anciennes d’une extension installée. Si vous n’êtes pas encore prêt à mettre à jour toutes vos extensions, vous pouvez envisager d’installer un thème hybride. - Lorsque vous essayez de trouver le meilleur compromis entre design et performance.
Certains thèmes hybrides populaires sont optimisés pour la vitesse et peuvent offrir des performances nettement supérieures à celles des thèmes de blocs. Pourtant, ils prennent en charge l’approche sans code/à faible code des thèmes de blocs et offrent une meilleure expérience de conception que les thèmes classiques. Les thèmes hybrides optimisés pour les performances, tels que Neve ou Kadence, vous permettent de créer des sites web d’apparence moderne sans compromettre les performances. - Quand vous voulez une transition en douceur vers FSE.
Parfois, le passage de l’ancienne à la nouvelle logique de conception peut prendre du temps, surtout lorsqu’on travaille en équipe sur de grands sites, et la courbe d’apprentissage est une source d’inquiétude. Un thème hybride permet à votre équipe d’expérimenter les fonctionnalités des blocs tout en conservant les outils de conception familiers tels que la personnalisation et les modèles PHP classiques.
Cependant, il y a aussi des scénarios où les thèmes hybrides ne sont pas la meilleure option. Par exemple :
- Lorsque les outils de conception du site priment sur les performances globales.
Lorsque vous voulez utiliser certaines fonctionnalités spécifiques à l’édition complète du site, comme l’éditeur de site, l’édition complète des modèles via les blocs et l’interface des styles globaux, un thème hybride n’est pas une option car ces fonctionnalités ne sont pas prises en charge ou ne sont que partiellement prises en charge dans les thèmes hybrides. - Avec les sites WordPress headless basés sur l’API REST de WordPress.
Dans ce scénario, les thèmes de blocs sont à privilégier car les données de blocs sont facilement exposées via l’API REST (voir, par exemple, le point de terminaison/wp/v2/blocks) ou WPGraphQL, là où les thèmes hybrides pourraient ajouter une plus grande complexité. - Lorsqu’une approche sans code de la construction du site est préférée.
Les thèmes hybrides ne prennent pas en charge la création ou la modification de modèles via l’éditeur de site. Bien que la prise en charge des parties de modèles puisse être ajoutée, cette prise en charge est actuellement limitée, et la gestion des modèles est principalement basée sur PHP.
En fin de compte, il n’y a pas de règle absolue pour choisir entre les thèmes hybrides et les thèmes de blocs. Cela dépend de nombreux facteurs, tels que les compétences disponibles dans votre équipe, le type de site construit, les exigences en matière de performances, la rétrocompatibilité, et bien plus encore.
Résumé
L’édition intégrale du site et les thèmes en bloc ont radicalement changé la façon dont nous construisons les sites WordPress. La philosophie des blocs donne aux utilisateurs plus de pouvoir pour créer des mises en page complexes et peaufiner chaque aspect d’un site web.
Mais si vous n’êtes pas encore prêt à franchir le pas parce que votre site n’est peut-être pas entièrement compatible avec les thèmes de blocs ou parce qu’il nécessite des fonctionnalités spécifiques d’un thème classique, les thèmes hybrides sont une option qui vous permet d’avoir le meilleur des deux mondes en vous permettant d’utiliser certaines fonctionnalités puissantes des thèmes de blocs tout en conservant la compatibilité avec les fonctionnalités des extensions et des thèmes classiques.
Sans parler des performances. Les thèmes de blocs peuvent être gourmands en ressources en raison du rendu important des blocs et de l’utilisation de JavaScript. Les thèmes hybrides optimisés pour les performances peuvent rendre votre site plus léger et plus performant en réduisant la charge de JavaScript nécessaire.
Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.
