Étendre theme.json aux types de publication personnalisés et aux sorties de plugins : un guide pratique

Résumé

De nombreux développeurs WordPress créent des types de publication personnalisés ou des plugins qui produisent du contenu (par exemple, témoignages, portfolios). Cependant, theme.json—la configuration centrale des styles globaux—ignore souvent ces éléments personnalisés par défaut, ce qui conduit à un design incohérent. Cet article vous guide dans l'enregistrement des types de publication personnalisés pour hériter des styles theme.json, la substitution des paramètres pour des blocs spécifiques, et la liaison de la sortie des plugins avec les tokens de design de base. Vous obtiendrez des instructions étape par étape, des exemples concrets comme le style d'un CPT « Membre de l'équipe », et des mises en garde concernant les performances et les conflits tiers. À la fin, vous pourrez garantir que tout contenu personnalisé correspond au système de design défini par l'éditeur de votre site.

Avez-vous déjà construit un type de publication personnalisé ou intégré un plugin tiers, pour découvrir que sa sortie ignore complètement le beau système de design que vous avez soigneusement configuré dans theme.json ? Vous n'êtes pas seul. Par défaut, theme.json s'applique uniquement aux blocs WordPress de base et aux styles de blocs enregistrés, laissant les types de publication personnalisés et le contenu généré par les plugins se débrouiller seuls. Cela se traduit généralement par du CSS en ligne, des piles de polices dupliquées ou une palette de couleurs discordante qui brise l'expérience utilisateur. Mais il existe une meilleure façon : vous pouvez étendre theme.json pour couvrir ces éléments personnalisés, garantissant ainsi un système de design cohérent et maintenable sur l'ensemble de votre site. Dans ce guide, nous aborderons quatre étapes pratiques pour y parvenir, avec des exemples de code et des mises en garde concrètes.

Comprendre la portée de theme.json

Avant de plonger, il est crucial de comprendre que theme.json est un concept de thème de blocs. Il définit les styles globaux, les paramètres (comme les palettes de couleurs et les tailles de police) et les styles spécifiques aux blocs pour l'éditeur de blocs et le front-end. Cependant, sa portée est limitée : il ne contrôle que les blocs qui déclarent explicitement le support des propriétés theme.json via register_block_type ou l'ancien add_theme_support. Les types de publication personnalisés créés avec register_post_type n'héritent pas automatiquement de ces styles, sauf s'ils sont construits avec des blocs ou explicitement stylisés.

Étape 1 : Enregistrer des types de publication personnalisés avec le support de l'éditeur de blocs

La première étape consiste à s'assurer que votre type de publication personnalisé utilise l'éditeur de blocs. Lors de l'appel à register_post_type, définissez 'show_in_rest' => true et incluez 'editor' dans le tableau supports. Cela active l'éditeur de blocs pour ce type de publication, permettant aux auteurs d'utiliser les styles au niveau des blocs de theme.json. Par exemple, voici un CPT « Membre de l'équipe » :

function create_team_member_cpt() {
    $args = array(
        'public' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'show_in_menu' => true,
        'labels' => array(
            'name' => 'Team Members',
            'singular_name' => 'Team Member',
        ),
        'rewrite' => array( 'slug' => 'team' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

Maintenant, lorsque vous modifiez un article de membre de l'équipe, vous verrez l'éditeur de blocs avec les styles globaux de votre thème appliqués aux blocs de base comme Paragraphe, Titre et Image. Cela résout souvent la plupart des problèmes de style. Si vous avez besoin d'un contrôle plus granulaire, passez à l'étape suivante. Pour approfondir la création de thèmes de blocs avec theme.json, consultez Comment créer un thème de blocs WordPress personnalisé avec theme.json.

Étape 2 : Ajouter des styles de blocs personnalisés via theme.json

Parfois, vous souhaitez appliquer des styles spécifiques à toutes les instances du contenu de votre type de publication personnalisé—par exemple, donner à l'ensemble de l'article une couleur de fond ou un padding spécial. Vous pouvez cibler core/post-content ou encapsuler votre contenu dans un bloc group personnalisé et le styliser via theme.json. Ajoutez ce qui suit à votre fichier theme.json sous l'objet styles :

{
  "styles": {
    "blocks": {
      "core/post-content": {
        "css": "background-color: var(--wp--preset--color--light); padding: 2rem;"
      }
    }
  }
}

Cela appliquera un fond clair et un padding à la zone de contenu de tous les articles, y compris votre CPT Membre de l'équipe. Vous pouvez également définir des variations spécifiques aux blocs dans settings.blocks pour fournir des options de style dans l'éditeur.

Étape 3 : Utiliser les propriétés personnalisées de theme.json pour la sortie des plugins

Les plugins produisent souvent du contenu via des shortcodes, des widgets ou des blocs personnalisés. Pour les styliser de manière cohérente, tirez parti des propriétés personnalisées CSS que theme.json génère. Par exemple, si votre thème définit une couleur primaire comme --wp--preset--color--primary, vous pouvez l'utiliser dans le CSS de votre plugin :

.my-plugin-button {
    background-color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

Cela garantit que lorsque l'administrateur du site modifie la palette de couleurs dans theme.json, le bouton de votre plugin se met à jour automatiquement. Pour rendre cela robuste, utilisez toujours les variables CSS prédéfinies au lieu de coder en dur les valeurs. De plus, si votre plugin enregistre ses propres blocs, vous pouvez hériter des paramètres de theme.json en utilisant useSetting en JavaScript ou en passant $attributes dans le rendu PHP, comme décrit dans Maîtriser les blocs dynamiques WordPress.

Étape 4 : Gérer les blocs dynamiques

Pour les blocs personnalisés qui produisent du contenu dynamique (par exemple, un slider de témoignages), vous devez enregistrer le bloc avec le support de l'éditeur de blocs et le lier explicitement à theme.json. En PHP, utilisez register_block_type avec $args qui incluent 'render_callback' et assurez-vous que le fichier block.json de votre bloc définit 'supports' => array( 'color' => true, 'typography' => true ). Ensuite, dans votre rappel de rendu, vous pouvez accéder aux styles globaux via wp_get_global_styles() et les appliquer. Par exemple :

function render_testimonial_block( $attributes, $content ) {
    $styles = wp_get_global_styles();
    $color = $styles['elements']['link']['color']['text'] ?? '#000';
    return '<div style="color: ' . esc_attr( $color ) . ';">' . $content . '</div>';
}

Cette approche garantit que votre bloc personnalisé respecte les tokens de design du thème. Pour en savoir plus sur l'enregistrement de blocs, consultez Créer des plugins WordPress robustes.

Mises en garde

Bien que l'extension de theme.json soit puissante, méfiez-vous de ces pièges :

1. Performance : Ajouter trop de styles personnalisés dans theme.json peut gonfler le fichier et augmenter le temps d'analyse CSS. Tenez-vous-en aux paramètres globaux et utilisez les styles spécifiques aux blocs avec parcimonie.
2. Conflits de plugins : Certains plugins réinitialisent ou remplacent les paramètres de theme.json. Testez toujours avec un ensemble minimal de plugins et envisagez de vous accrocher à after_setup_theme pour réappliquer vos personnalisations.
3. Thèmes classiques : Si votre thème n'utilise pas l'éditeur de blocs (c'est-à-dire qu'il s'agit d'un thème classique), theme.json a un effet limité. Envisagez de migrer vers un thème de blocs ou d'utiliser la fonction wp_enqueue_global_styles pour charger les styles.
4. Cache du navigateur : Les modifications apportées à theme.json peuvent ne pas apparaître immédiatement en raison du cache. Videz le cache du navigateur et utilisez le versioning pour votre feuille de style.

Conclusion

À présent, vous avez une feuille de route claire pour que les types de publication personnalisés et les sorties de plugins fonctionnent bien avec votre système de design theme.json. La clé est d'enregistrer votre CPT avec le support de l'éditeur de blocs, de définir des styles spécifiques pour le bloc de contenu de l'article, d'utiliser les propriétés personnalisées CSS dans la sortie des plugins et d'enregistrer vos blocs personnalisés avec une intégration appropriée de theme.json. Cette approche élimine les incohérences, réduit la maintenance et donne aux administrateurs de site le pouvoir de contrôler l'apparence à partir d'une source unique de vérité. Commencez à mettre en œuvre ces étapes dès aujourd'hui pour apporter de la cohésion à vos projets WordPress.