Comment changer la police d'une seule phrase dans WordPress

Dans l’un de mes articles précédents sur Comment télécharger des polices Google sans pluginJ’ai reçu une demande dans la section commentaires demandant la meilleure façon d’avoir différentes polices dans le même article WordPress. Peut-être qu’une seule phrase ou un seul paragraphe devrait avoir une police différente! L’auteur a pensé que ce serait une excellente idée pour l’optimisation de la page de destination.

Voici un tutoriel rapide sur la façon dont cela peut être réalisé.

Étape 1: assurez-vous que la police est disponible

Tout d’abord, assurez-vous que la police que vous recherchez est disponible sur votre site Web. Pour plus d’informations sur la façon de procéder, veuillez consulter mon lien Google Fonts ci-dessus. Si vous souhaitez utiliser des polices locales, qui sont déjà disponibles par défaut, vous pouvez ignorer cette étape.

Juste un petit mot. Avec Core Web Vitals de Google agissant comme un signal de classement, vous devez accélérer les choses dès que possible. Ça signifie:

  1. Fabrication Polices qui ne seront pas rendues
  2. Charger les polices localement

J’ai utilisé les polices google tout le temps jusqu’à ce que je décide de n’utiliser que des polices standard lorsque cela est possible. Moins de maintenance pour mon site et je n’ai pas à me soucier de charger des ressources supplémentaires.

Étape 2: attribuez une nouvelle classe au texte que vous souhaitez mettre en forme

Le nouvel éditeur Gutenberg fait un travail incroyable. Vous pouvez attribuer des classes CSS distinctes à des blocs individuels. C’est parfait pour le style personnalisé – quelque chose comme ça aurait été très compliqué dans l’éditeur WordPress classique. Pour attribuer une classe CSS à votre nouveau texte, sélectionnez le bloc dans l’éditeur et développez la section « Avancé » dans le volet de droite comme indiqué ici:

Attribuer une classe à un bloc dans WordPress Gutenberg
Attribuer une classe à un bloc dans WordPress Gutenberg

Dans cet exemple, j’utiliserai ma police Google préférée, Roboto, pour formater un seul paragraphe. J’ai donc utilisé une classe appelée « Style Roboto » dans la zone de texte « Classe (s) CSS supplémentaire (s) ».

Le champ « Ancre HTML » est également idéal pour créer des liens. Une autre fonctionnalité bien pensée sur Gutenberg!

Étape 3: utilisez un bloc HTML personnalisé pour coller le CSS

Gutenberg est livré avec un excellent bloc flexible appelé « HTML personnalisé » que j’utilise tout le temps. Des extraits de code JSON aux extraits de code JavaScript en passant par la conception personnalisée, c’est une boîte à outils aux fonctionnalités illimitées. Nous allons l’utiliser ici pour insérer nos styles de paragraphe.

Je choisis donc le bloc HTML personnalisé et je colle le code suivant:

<style>
.roboto-style {
    font-family: 'Roboto Slab', serif;
}
</style>

Comme ça:

Collez le CSS pour la nouvelle police
Collez le CSS pour la nouvelle police

Vous avez terminé! Maintenant, prévisualisez simplement le message et vous devriez voir que le paragraphe avec la classe Roboto Style est maintenant une police différente de celle du paragraphe suivant en dessous:

Police distincte pour une seule phrase dans WordPress

Si vous souhaitez utiliser la même police pour plusieurs paragraphes, attribuez simplement la même classe CSS là où vous souhaitez l’afficher. C’est facile!

Changer la police dans le message

Si vous souhaitez changer la police dans un seul article WordPress ou une seule page WordPress au lieu de quelques paragraphes, procédez comme décrit ci-dessus, mais utilisez la classe CSS et spécifiez l’élément « p » à la place. Comme ça:

<style>
p {
    font-family: 'Roboto Slab', serif;
}
</style>

C’est aussi simple que cela. Désormais, tous les paragraphes de l’article ont la même police. J’utilise cette technique pour faire beaucoup plus que des talons de style. J’ai eu beaucoup de succès en l’utilisant pour le style de tableau (les styles de tableau par défaut dans WordPress sont plutôt mauvais). Mais comme vous pouvez le voir, cela fonctionne parfaitement pour quelque chose d’aussi simple que de changer le style de police!





Source link

Recent Posts