L'anatomie d'un thème WordPress en 2022


Cet article est une traduction a posteriori d'un billet d'abord publié en anglais, parfois des mois en arrière, mais que je tiens à traduire.

Les thèmes WordPress permettent de modifier l’apparence du site. Il y en a des milliers à télécharger, gratuitement ou à l’achat, pour personnaliser son site.

Vous pouvez aussi créer votre thème perso depuis zéro. Les thèmes classiques vont généralement consister en une série de fichiers PHP contenant des fonctions WordPress et du HTML, ainsi que des assets tels que du CSS, des scripts js, des vecteurs SVG, ou encore des images.

Le prochain thème “twenty-twenty” (bundle officiel) aura cependant une anatomie bien différente de ses ancêtres.

Permalien pour la section Ce qui ne change pas Ce qui ne change pas

Comme depuis le début, un thème WordPress requiert au minimum un fichier style.css à la racine avec des entêtes spécifiques (~ commentaires CSS) et un fichier index.php pour pouvoir l’activer depuis le back-office.

La hiérarchie des templates s’applique toujours et vous pouvez ajouter des fonctions spécifiques au thèmes dans le fichier functions.php.

Il y a toujours besoin de hooks pour enregistrer les scripts (et les styles) et activer certaines fonctionnalités (ex: add_theme_support).

Par exemple:

add_action( 'after_setup_theme', function() {
    // remove default core patterns
    remove_theme_support( 'core-block-patterns' );

    // support alingments
    add_theme_support( 'align-wide' );

    // make the Block Editor look like the front
    add_theme_support( 'editor-styles' );
    add_editor_style( get_theme_file_uri( 'css/admin/editor-styles.css' ) );// the /css/ folder is a relative path in theme folder
} );

Source: theme supports - block editor

Permalien pour la section De nouvelles configurations globales pour les thèmes De nouvelles configurations globales pour les thèmes

Le nouvel éditeur (Gutenberg) a introduit les blocs, les patterns, et les templates à composer directement depuis l’écran de modification des posts.

Les équipes de WordPress ont mis un coup d’accélérateur en étendant cet éditeur enrichi à pratiquement tout le site, achevant ainsi le fameux full-site editing (FSE).

Vraiment sympa car cet éditeur a nettement plus de capacités de personnalisation que son ancêtre (tinymce) mais, en même temps, c’est plus complexe parfois à manier.

Cela pouvait vite tourner vinaigre lorsqu’on voulait écraser les styles fournis avec chaque blocs en fonction du thème activé.

Avec WordPress 5.8, les dévs ont justement introduit les styles et les réglages globaux, permettant de créer un fichier theme.json à la racine du thème pour piloter l’éditeur.

Par exemple, dans twenty-twentytwo:

"spacing": {
    "units": [
        "%",
        "px",
        "em",
        "rem",
        "vh",
        "vw"
    ]
},
"typography": {
    "dropCap": false,
    "fontFamilies": [
        {
            "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
            "name": "System Font",
            "slug": "system-font"
        },
        {
            "fontFamily": "\"Source Serif Pro\", serif",
            "name": "Source Serif Pro",
            "slug": "source-serif-pro"
        }
    ],
    "fontSizes": [
        {
            "size": "1rem",
            "slug": "small"
        },
        {
            "size": "1.125rem",
            "slug": "medium"
        },
        {
            "size": "1.75rem",
            "slug": "large"
        },
        {
            "size": "clamp(1.75rem, 3vw, 2.25rem)",
            "slug": "x-large"
        }
    ]
}

On remarque que le fichier permet de définir des réglages à la fois globaux et contextuels, ce qui permet notamment de désactiver certains réglages sensibles comme la couleur dans certains blocs, évitant ainsi à l’utilisateur de faire n’importe quoi en violant la charte graphique.

Le fichier du thème twenty-twentytwo fait plus de 350 lignes donc il y a de quoi faire en termes de personnalisation.

Source: Introduction to WordPress’s Global Styles and Global Settings

Permalien pour la section LA grosse fonctionnalité intéressante : les patterns LA grosse fonctionnalité intéressante : les patterns

WordPress offre maintenant des patterns. Rapidement, il s’agit de blocs et groupes de blocs prédéfinis, ce qui fait gagner un temps fou dans l’admin.

On peut les personnaliser et les combiner à souhait. Il y en a même à télécharger directement depuis le répertoire des patterns, mais vous pouvez tout à fait créer vos propres modèles:

add_action( 'init', function() {
    register_block_pattern(
        'twentytwentytwo/footer-logo',
        [
            'title'      => __( 'Footer with logo and citation', 'twentytwentytwo' ),
            'categories' => ['footer' ],
            'blockTypes' => [ 'core/template-part/footer' ],
            'content'    => 
                '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
                <div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
                <div class="wp-block-group alignwide" style="padding-top:4rem;padding-bottom:4rem"><!-- wp:site-logo {"width":60} /-->

                <!-- wp:paragraph {"align":"right"} -->
                <p class="has-text-align-right">' .
                sprintf(
                    esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
                    '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a>'
                ) . '</p>
                <!-- /wp:paragraph --></div>
                <!-- /wp:group --></div>
                <!-- /wp:group -->
            ',
        ]
    );
} );

La fonction register_block_pattern accepte en argument un tableau de paramètres qui peuvent contenir des définitions de blocs.

Source: twenty-twentytwo - inc

Permalien pour la section Une nouvelle syntaxe pour les templates Une nouvelle syntaxe pour les templates

Un peu bizarre de prime abord, pour qui a déjà joué avec les thèmes classiques, de trouver des fichiers HTML dans le dossier du thème.

Cela dit, à y réfléchir, ça a déjà plus de sens que ce mix d’instructions PHP et d’HTML qu’on a du écrire pendant des années. J’ai, pour ma part, beaucoup utilisé des surcouches comme Timber pour essayer d’avoir des templates plus “propres”.

Si on regarde dans twenty-twentytwo, on trouve un dossier templates contenant des fichiers HTML. Chaque fichier contient des instructions qui permettent de définir et organiser les blocs:

// templates/404.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-404"} /-->
</div>
<!-- /wp:group --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Source: twenty-twentytwo - templates

WordPress reconnaît ces blocs et les définit automatiquement grâce à la syntaxe ci-dessus.

Au final, le dossier peut ressembler à ça :

templates/
├── 404.html
├── home.html
├── single.html
├── page.html

Permalien pour la section Conclusion Conclusion

Le FSE (full site editing) me laisse toujours un peu perplexe, notamment ce mélange de commentaires HTML et d’un format similaire au JSON qui se retrouve aussi stocké en base de données.

Cependant, je suis très agréablement surpris par le résultat final dans l’éditeur. Je trouve cela réussi et on peut réutiliser les compositions quasiment partout tout en centralisant les modifications.

La complexité augmente côté dév mais côté utilisateur, ça devrait apporter un gain notable, AMHA.

Attention twenty-twentytwo requiert WordPress 5.9 au minimum pour ceux qui veulent tester.

Cette page est aussi disponible dans d'autres langues :