Coding and Programming

Gestion des polices dans les thèmes de blocs WordPress | Astuces CSS

Written by smirow

Les polices sont une caractéristique déterminante de la conception de tout site. Cela inclut les thèmes WordPress, pour lesquels il est courant que les développeurs de thèmes intègrent un service tel que Google Fonts dans les paramètres de WordPress Customizer pour un thème « classique » basé sur PHP. Cela n’a pas vraiment été le cas pour les thèmes de blocs WordPress. Bien que l'intégration de Google Fonts dans les thèmes classiques soit bien documentée, il n'y a actuellement rien de disponible pour les thèmes en bloc dans le manuel des thèmes WordPress.

C'est ce que nous allons examiner dans cet article. Les thèmes de bloc peuvent en effet utiliser Google Fonts, mais le processus pour les enregistrer est bien différent de ce que vous auriez pu faire auparavant dans les thèmes classiques.

Ce que nous savons déjà

Comme je l'ai dit, nous n'avons pas grand-chose à faire pour commencer. Le thème Twenty Twenty-Two est le premier thème WordPress par défaut basé sur des blocs, et il montre comment nous pouvons utiliser les fichiers de polices téléchargés comme éléments dans le thème. Mais c'est assez compliqué car cela implique quelques étapes : (1) enregistrer les fichiers dans le functions.php fichier et (2) définir les polices regroupées dans le theme.json déposer.

Depuis la sortie de Twenty Twenty-Two, le processus est devenu plus simple. Les polices groupées peuvent désormais être définies sans les enregistrer, comme le montre le thème Twenty Twenty-Three. Cependant, le processus nous oblige toujours à télécharger manuellement les fichiers de polices et à les regrouper dans les thèmes. C’est un obstacle qui va en quelque sorte à l’encontre de l’objectif des polices hébergées simples, accessibles sur un CDN rapide.

Quoi de neuf

Si vous ne le saviez pas déjà, le projet Gutenberg est un plugin expérimental dans lequel les fonctionnalités développées pour le bloc WordPress et l'éditeur de site sont disponibles pour une utilisation et des tests précoces. Dans un récent article de Theme Shaper, l'architecte principal du projet Gutenberg, Matias Ventura, explique comment les polices Google – ou toute autre police téléchargée, d'ailleurs – peuvent être ajoutées aux thèmes de blocage à l'aide du plugin Create Block Theme.

Cette courte vidéo sur Learn WordPress fournit un bon aperçu du plugin Create Block Theme et de son fonctionnement. Mais l’essentiel est qu’il fait ce qui est écrit sur la boîte : il crée des thèmes de blocs. Mais il le fait en fournissant des contrôles dans l'interface utilisateur de WordPress qui vous permettent de créer un thème entier, un thème enfant ou une variation de style de thème sans écrire de code ni avoir à toucher aux fichiers de modèle.

J'ai essayé ! Et comme Create Block Theme est créé et maintenu par l'équipe WordPress.org, je dirais que c'est la meilleure direction que nous ayons pour intégrer Google Fonts dans un thème. Cela dit, il convient de noter que le plugin est en développement actif. Cela signifie que les choses pourraient changer assez rapidement.

Avant d’aborder comment tout cela fonctionne, rappelons-nous brièvement le processus « traditionnel » d’ajout de Google Fonts aux thèmes WordPress classiques.

Comment cela se faisait

Cet article ThemeShaper de 2014 fournit un excellent exemple de la façon dont nous procédions cela dans les thèmes PHP classiques, tout comme ce nouvel article Cloudways d'Ibad Ur Rehman.

Pour nous rafraîchir la mémoire, voici un exemple du thème par défaut Twenty Seventeen montrant comment les polices Google sont mises en file d'attente dans le functions.php déposer.

function twentyseventeen_fonts_url() {
  $fonts_url="";
  /**
   * Translators: If there are characters in your language that are not
   * supported by Libre Franklin, translate this to 'off'. Do not translate
   * into your own language.
   */
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

Ensuite Google Fonts est pré-connecté au thème comme ceci :

function twentyseventeen_resource_hints( $urls, $relation_type ) {
  if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
    $urls[] = array(
      'href' => 'https://fonts.gstatic.com',
      'crossorigin',
    );
  }
  return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

Quel est le problème avec la méthode traditionnelle

Super, non ? Il y a cependant un problème. En janvier 2022, un tribunal régional allemand a infligé une amende à un propriétaire de site Web pour violation des exigences européennes du RGPD. Le problème? La mise en file d'attente des polices Google sur le site exposait l'adresse IP d'un visiteur, mettant ainsi en danger la confidentialité de l'utilisateur. CSS-Tricks en a parlé il y a quelque temps.

Le plugin Create Block Theme répond aux exigences de confidentialité du RGPD, car il exploite l'API Google Fonts pour servir uniquement de proxy pour le fournisseur local. Les polices sont proposées à l'utilisateur sur le même site Web plutôt que sur les serveurs de Google, protégeant ainsi la confidentialité. WP Tavern discute de la décision du tribunal allemand et inclut des liens vers des guides d'auto-hébergement des polices Google.

Comment utiliser Google Fonts avec des thèmes de bloc

Cela nous amène à la manière « moderne » actuelle d’utiliser les polices Google avec les thèmes de blocs WordPress. Commençons par créer un site de test local. J'utilise l'application Local de Flywheel pour le développement local. Vous pouvez l'utiliser ou ce que vous préférez, puis utiliser le plugin Theme Test Data de l'équipe des thèmes WordPress pour travailler avec du contenu factice. Et, bien sûr, vous aurez également besoin du plugin Create Block Theme.

Avez-vous installé et activé ces plugins ? Si c'est le cas, accédez à ApparenceGérer les polices de thème depuis le menu d'administration de WordPress.

Écran Gérer les polices de thème avec des exemples de caractères pour Space Mono.
Source : Répertoire de thèmes WordPress

L'écran « Gérer les polices du thème » affiche une liste de toutes les polices déjà définies dans la fenêtre du thème. theme.json déposer. Il existe également deux options en haut de l'écran :

  • Ajoutez des polices Google. Cette option ajoute Google Fonts directement au thème à partir de l'API des polices Google.
  • Ajoutez des polices locales. Cette option ajoute les fichiers de polices téléchargés au thème.

J'utilise un thème WordPress complètement vierge appelé Emptytheme. Vous pouvez utiliser votre propre thème, mais je voulais souligner que j'ai renommé Emptytheme en « EMPTY-BLANK » et que je l'ai modifié, il n'y a donc aucune police ni style prédéfinis.

Écran Thèmes affichant Thème vide comme sélection active sans aperçu de capture d'écran.

J'ai pensé partager une capture d'écran de la structure des fichiers de mon thème et theme.json fichier pour montrer qu'il n'y a littéralement aucun style ou configuration en cours.

Explorateur de fichiers VS Code à gauche et un fichier theme.json ouvert à droite.
Structure de fichier de Emptytheme (à gauche) et theme.json fichier (à droite)

Cliquons sur le bouton « Ajouter des polices Google ». Cela nous amène à une nouvelle page avec des options permettant de choisir n'importe quelle police disponible dans l'API Google Fonts actuelle.

Ajoutez Google Fonts à votre écran de thème avec le menu de sélection des polices ouvert affichant une liste des polices disponibles.

Pour cette démo, j'ai sélectionné Inter dans le menu des options et sélectionnez les poids 300, Regular et 900 dans l'écran d'aperçu :

Ajoutez Google Fonts à votre écran de thème avec Inter sélectionné et tapez des échantillons en dessous des différentes variations de poids.

Une fois mes sélections enregistrées, les styles de police Inter que j'ai sélectionnés sont automatiquement téléchargés et stockés dans le dossier du thème. assets/fonts dossier:

Explorateur de fichiers VS Code sur la gauche affichant les fichiers de polices Inter ;  theme.json à droite montrant les références Inter.

Notez également comment ces sélections ont été automatiquement écrites dans le theme.json fichier dans cette capture d'écran. Le plugin Create Block Theme ajoute même le chemin d’accès aux fichiers de polices.

Voir l'intégralité theme.json code

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "840px",
      "wideSize": "1100px"
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter",
          "slug": "inter",
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "300",
              "src": [
                "file:./assets/fonts/inter_300.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "900",
              "src": [
                "file:./assets/fonts/inter_900.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": [
                "file:./assets/fonts/inter_regular.ttf"
              ]
            }
          ]
        }
      ]
    }
  }
}

Si nous allons à l'écran principal de Créer un thème de bloc et cliquons sur le bouton Gérer les polices de thème à nouveau, nous verrons les variantes de poids 300, 400 (régulier) et 900 de l'Inter affichées dans le panneau de prévisualisation.

Écran Gérer les polices de thème avec un bouton pour ajouter une police Google surligné en rouge.

Une zone d'aperçu du texte de démonstration en haut vous permet même de prévisualiser les polices sélectionnées dans la phrase, l'en-tête et le paragraphe avec le curseur de sélection de la taille de police. Vous pouvez découvrir cette nouvelle fonctionnalité en action dans cette vidéo GitHub.

La ou les polices sélectionnées sont également disponibles dans l'éditeur de site. Styles globaux (ApparenceÉditeur), en particulier dans le panneau Conception.

Écran de l'éditeur de site WordPress avec panneau de navigation ouvert et mise en surbrillance du bouton Modifier.

De là, accédez à ModèlesIndice et cliquez sur le bleu Modifier bouton pour modifier le index.html modèle. Nous voulons ouvrir le Styles globaux paramètres, qui sont représentés par une icône de contraste située en haut à droite de l’écran. Quand on clique sur le Texte paramètres et ouvrez le Police de caractère menu dans le Typographie section… on voit l'Inter !

Ouvrez le fichier modèle dans l'éditeur de site avec une flèche pointant vers le bouton Paramètres des styles globaux.

Même chose, mais avec des polices locales

Nous pouvons aussi bien envisager d’ajouter des polices locales à un thème puisque le plugin Create Block Theme propose cette option. L'avantage est que vous pouvez utiliser n'importe quel fichier de police de votre choix, quel que soit le service de polices que vous préférez.

Sans le plugin, nous devrions récupérer nos fichiers de polices, les déposer quelque part dans le dossier du thème, puis recourir à la méthode PHP traditionnelle consistant à les mettre en file d'attente dans le dossier du thème. functions.php déposer. Mais nous pouvons laisser WordPress porter ce fardeau à notre place en téléchargeant le fichier de police sur le site Web. Ajouter des polices locales écran à l’aide de l’interface Créer un thème de bloc. Une fois qu'un fichier est sélectionné à télécharger, les zones de définition des polices sont remplies automatiquement.

Ajoutez des polices locales à l'écran de votre thème avec des options permettant de télécharger un fichier de police et de définir son nom, son style et son poids.

Même si nous pouvons utiliser n'importe quel .ttf, .woffou .woff2 fichier, j'ai simplement téléchargé les fichiers de polices Open Sans depuis Google Fonts pour cet exercice. J'ai récupéré deux variantes de poids, régulier et 800.

La même gestion de fichiers auto-magique et theme.json la mise à jour que nous avons vue avec l'option Google Fonts se produit à nouveau lorsque nous téléchargeons les fichiers de polices (qui sont effectués un par un). Découvrez où les polices ont atterri dans mon dossier de thème et comment elles y sont ajoutées. theme.json:

VS Code affichant les fichiers de police et les références du fichier theme.json à la police.

Suppression de polices

Le plugin nous permet également de supprimer les fichiers de polices d'un thème de bloc depuis l'administrateur WordPress. Supprimons l'une des variantes d'Open Sans que nous avons installées dans la dernière section pour voir comment cela fonctionne.

L'interface pour supprimer une police du thème.

En cliquant sur le Retirer les liens déclenchent un avertissement vous demandant de confirmer la suppression. Nous cliquerons D'ACCORD continuer.

Modal confirmant la suppression de la police.

Ouvrons notre dossier de thèmes et vérifions le theme.json déposer. Effectivement, le fichier Open Sans 800 que nous avons supprimé sur l'écran du plugin a supprimé le fichier de police du dossier du thème, et la référence à celui-ci a disparu depuis longtemps. theme.json.

Le fichier theme.json mis à jour montrant les références de polices a été supprimé.

Des travaux sont en cours

Il est question d'ajouter cette fonctionnalité « Font Manager » à WordPress Core plutôt que d'avoir besoin d'un plugin séparé.

Une première itération de la fonctionnalité est disponible dans le dépôt et utilise exactement la même approche que celle utilisée dans cet article. Il doit également être conforme au RGPD. La fonctionnalité devrait arriver avec la version WordPress 6.3 plus tard cette année.

Emballer

Le plugin Create Block Theme améliore considérablement l’expérience utilisateur en ce qui concerne la gestion des polices dans les thèmes de bloc WordPress. Le plugin nous permet d'ajouter ou de supprimer n'importe quelle police tout en respectant les exigences du RGPD.

Nous avons vu comment la sélection d'une police Google ou le téléchargement d'un fichier de police local place automatiquement la police dans le dossier du thème et l'enregistre dans le dossier. theme.json déposer. Nous avons également vu comment la police est une option disponible dans les paramètres de styles globaux de l'éditeur de site. Et si nous devons supprimer une police ? Le plugin s’en charge également – ​​sans toucher aux fichiers de thème ou au code.

Merci d'avoir lu! Si vous avez des commentaires ou des suggestions, partagez-les dans les commentaires. J'aimerais savoir ce que vous pensez de cette orientation possible pour la gestion des polices dans WordPress.

Ressources additionnelles

Je me suis appuyé sur de nombreuses recherches pour rédiger cet article et j'ai pensé partager les articles et les ressources que j'ai utilisés pour vous fournir un contexte supplémentaire.

Gestion des polices WordPress

Problèmes GitHub

Exigences européennes du RGPD

About the author

smirow

Leave a Comment