Feuille de style

Séparer la structure d’une page de son apparence visuelle a toujours été l’un des principes fondateurs du web moderne : un même document HTML peut ainsi changer complètement d’allure selon la feuille qui lui est associée, sans qu’une seule balise du contenu n’ait à bouger.

Un fichier obligatoire pour chaque thème WordPress

Tout thème WordPress doit obligatoirement fournir un fichier style.css à sa racine, dont l’en-tête en commentaire déclare le nom, la version et l’auteur du thème, des informations lues et affichées dans l’écran Apparence > Thèmes. Ce fichier n’est cependant pas forcément la feuille principale réellement chargée sur le site : de nombreux thèmes l’utilisent uniquement pour ces métadonnées et chargent leurs styles réels via d’autres fichiers, enregistrés proprement avec wp_enqueue_style() plutôt que par une balise <link> codée en dur.

Exemple

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'style-principal',
        get_stylesheet_directory_uri() . '/assets/style.css',
        array(),
        '1.2.0'
    );
} );

Bon à savoir

• Passer par wp_enqueue_style() plutôt qu’un lien direct permet de déclarer des dépendances entre feuilles et d’éviter les doublons de chargement entre plusieurs extensions.
• Un thème enfant possède son propre style.css, chargé en plus de celui du thème parent si la dépendance est correctement déclarée, ce qui permet de surcharger des règles sans jamais modifier les fichiers d’origine.
• Depuis l’arrivée des thèmes à blocs, une partie des styles ne provient plus d’un fichier CSS classique mais du fichier theme.json, converti en CSS généré automatiquement par WordPress.