Gestion des polices dans les thèmes de blocs WordPress

La conception du site Web repose sur la typographie. Les thèmes WordPress intègrent souvent des services comme Google Fonts, facilement gérés au sein du personnalisateur pour les thèmes PHP classiques. Cependant, ce n'est pas aussi simple pour les thèmes de bloc. Bien que l'intégration de thème classique soit bien documentée, la gestion des polices de thème de bloc manque de conseils similaires. Cet article comble cet écart. Bloquer les thèmes peut utiliser des polices Google, mais le processus d'enregistrement diffère considérablement des méthodes traditionnelles.

Connaissances existantes

Les ressources pour intégrer les polices dans les thèmes de bloc étaient initialement rares. Vingt-vingt-deux, le premier thème basé sur des blocs par défaut, ont démontré à l'aide de fichiers de police téléchargés comme actifs de thème. Cela impliquait d'enregistrer des fichiers dans functions.php et de définir des polices groupées dans theme.json - un processus de deux étapes lourd.

Les thèmes ultérieurs, comme vingt-trois, ont simplifié cela en définissant des polices groupées sans enregistrement explicite. Cependant, les téléchargements et le regroupement manuels demeurent, annulant la commodité des polices hébergées servies via un CDN.

Développements récents

Le projet Gutenberg, un plugin pour tester les fonctionnalités à venir des éditeurs de blocs et d'éditeurs de site, propose une solution. Matias Benedetto, l'architecte principal de Gutenberg, mis en évidence à l'aide de polices Google (ou de toute police téléchargée) dans des thèmes de bloc via le plugin de thème de création.

Learn WordPress fournit un aperçu vidéo de ce plugin, qui simplifie la création de thème en offrant des contrôles d'interface utilisateur WordPress. Vous pouvez créer des thèmes entiers, des thèmes enfants ou des variations de style sans coder ou modifier des fichiers de modèle. Étant écrit et entretenu par l'équipe WordPress.org, c'est actuellement la meilleure approche pour l'intégration de la police Google dans les thèmes de bloc. Notez, cependant, qu'il est en cours de développement actif, alors attendez-vous à des changements.

Avant d'explorer cette nouvelle méthode, passons en revue l'approche traditionnelle des thèmes classiques.

La méthode traditionnelle

Des articles comme ceux de TheHeshaper (2014) et Cloudways illustrent la méthode classique. Le thème des vingt-sept illustre les polices Google en functions.php:

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $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 );
}

Pré-connexion des polices Google:

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 );

Inconvénients de la méthode traditionnelle

Cette méthode présente un inconvénient significatif. Une décision du tribunal allemand en 2022 a mis en évidence les violations du RGPD en raison de l'exposition des adresses IP des visiteurs lors de la mise en place des polices Google. Ce problème est résolu par le plugin de thème de création de blocs.

en utilisant des polices Google avec des thèmes de bloc (la manière moderne)

L'approche moderne utilise le plugin de thème Create Block. Configurez un environnement de développement local (par exemple, à l'aide de Flywheel local) et installez les données de test de thème et créez des plugins de thème de bloc.

Naviguez vers Apparence → Gérer les polices de thème . Cet écran répertorie les polices définies et offre des options à:

• Ajouter des polices Google: ajoute des polices directement à partir de l'API Google Fonts.
• Ajouter des polices locales: ajoute des fichiers de police téléchargés.

en utilisant un thème vierge (par exemple, videTheme, renommé pour plus de clarté), ajoutant une police Google (comme inter) télécharge automatiquement et stocke dans le dossier assets/fonts du thème, mise à jour theme.json:

Voir le thème.json code

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $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 );
}

La police est ensuite disponible dans les styles mondiaux de l'éditeur du site.

L'ajout de polices locales fonctionne de manière similaire, simplifiant le processus par rapport aux modifications manuelles functions.php. Le retrait de la police est également géré dans l'interface du plugin.

Développements futurs

La fonction "Font Manager" est prévue pour WordPress Core, offrant des fonctionnalités similaires.

Conclusion

Le plugin de thème de création de blocs rationalise la gestion des polices dans les thèmes de blocs WordPress, fournissant une solution conviviale et conforme au RGPD. Il simplifie l'ajout, la suppression et la gestion des polices sans interaction de code direct.

lecture plus approfondie

(la liste des ressources reste la même, reformatée pour une meilleure lisibilité)

Gestion des polices WordPress:

• Comment ajouter des polices typographiques aux thèmes de blocs WordPress (thème Shaper)
• Comment ajouter des polices Google aux thèmes WordPress (thème Shaper)
• Comment utiliser Google Fonts avec WordPress? (Cloudways)
• Gérer vos polices de thème de bloc avec le thème Create Block (apprendre WordPress)
• Utilisation du thème de création de blocs (wordpress.tv)

Problèmes de github:

• Styles globaux / typographie: gestion des ensembles de polices (# 45271)
• Font Manager (# 46332)

Exigences européennes du RGPD:

• Le propriétaire du site Web des amendes allemands pour avoir violé le RGPD en utilisant des polices hébergées par Google (WPTAVERN)
• se conformer au RGPD lors de l'utilisation des polices Google (faites des thèmes WordPress)
• Récompense allemand Awards Utilisateur € 100 € en dommages-intérêts contre l'opérateur de site Web pour utiliser Google Fonts (Eprivacy Blog)
• Fontes de lapin (CSS-Tricks)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!