L'ajout d'éléments tels que les lettres d'initiales dans vos articles WordPress peut améliorer la lisibilité et donner à votre contenu un aspect professionnel et soigné.
Les lettres d'initiales sont de grandes lettres capitales décoratives utilisées au début d'un paragraphe. Elles attirent l'attention des lecteurs et ajoutent une touche d'élégance à votre texte.
Au fil des ans, nous avons utilisé des lettres d'initiales sur nos blogs personnels pour ajouter une touche esthétique. Bon nombre de nos lecteurs ont remarqué et commenté à quel point ils apprécient cette fonctionnalité, reconnaissant l'attrait visuel accru qu'elle apporte à la conception du site.
Dans cet article, nous vous montrerons comment ajouter facilement des lettres d'initiales dans les articles WordPress, étape par étape.
Qu'est-ce qu'une lettre d'initiale ?
Une lettre d'initiale est une technique de style couramment utilisée dans les livres imprimés et les magazines qui présentent de longues lectures. La première lettre du paragraphe de départ de chaque chapitre utilise une grande taille de police.
Normalement, la grande lettre capitale s'étend vers le bas pour descendre sous les premières lignes, c'est pourquoi on l'appelle une « lettre d'initiale ».
L'ajout de lettres d'initiales aide votre contenu à se démarquer et à capter l'attention de vos visiteurs. Elles ajoutent une touche plus formelle et traditionnelle à la conception de votre site.
Il existe plusieurs façons d'ajouter des lettres d'initiales à un site Web WordPress. Vous pouvez utiliser l'option intégrée dans l'éditeur de blocs WordPress ou utiliser un plugin.
Cela dit, voyons comment vous pouvez facilement ajouter des lettres d'initiales dans les articles WordPress en utilisant différentes méthodes.
N'hésitez pas à cliquer sur les liens ci-dessous pour accéder à votre méthode préférée :
- Méthode 1 : Ajouter des lettres d'initiales à l'aide de l'éditeur de blocs WordPress
- Méthode 2 : Ajouter des lettres d'initiales à l'aide de code CSS
- Méthode 3 : Ajouter des lettres d'initiales à l'aide d'un plugin
- Bonus : Changer les polices dans vos thèmes WordPress
Méthode 1 : Ajouter des lettres d'initiales à l'aide de l'éditeur de blocs WordPress
Si vous souhaitez ajouter des lettres capitales à l'aide de l'éditeur de blocs WordPress par défaut éditeur de blocs WordPress, alors cette méthode est pour vous. Gardez à l'esprit que bien que cette méthode fonctionne, vous devez ajouter manuellement des lettres capitales pour chaque publication.
Si vous recherchez une méthode automatique, passez simplement à la méthode 2.
Tout d'abord, rendez-vous sur la page Publications » Ajouter depuis le tableau de bord d'administration de WordPress. Maintenant, cliquez simplement sur le bouton « Ajouter un bloc » (+) dans le coin supérieur gauche de l'écran.
Après cela, localisez et cliquez sur le bloc Paragraphe pour l'ajouter à votre publication.
Ensuite, vous devez ouvrir le panneau des paramètres de bloc dans la colonne de droite.
Une fois que vous avez fait cela, faites défiler jusqu'à la section « Typographie » et cliquez sur l'icône à trois points à côté. Cela ouvrira une liste d'options supplémentaires, parmi lesquelles vous devez sélectionner « Lettre capitale » pour l'ajouter à votre panneau de bloc.
Une fois la fonctionnalité de lettre capitale ajoutée, basculez simplement le commutateur à côté de l'option « Lettre capitale » pour afficher une grande lettre initiale au début d'un paragraphe.
N'oubliez pas de cliquer sur le bouton « Enregistrer le brouillon » ou « Publier » en haut pour enregistrer vos modifications.
Vous avez maintenant ajouté avec succès une lettre capitale à votre publication.
Voici à quoi cela ressemblait sur notre site de démonstration.
Notez que l'option de lettres capitales intégrée dans l'éditeur de blocs utilisera le style de votre thème WordPress pour la couleur, la police et la taille de la première lettre.
Si vous souhaitez modifier le style de vos lettres capitales dans l'éditeur de blocs WordPress, vous devrez utiliser du code CSS personnalisé pour styliser vos lettres capitales.
Méthode 2 : Ajouter des lettres d'initiales à l'aide de code CSS
Pour cette méthode, nous utiliserons du code CSS personnalisé pour ajouter automatiquement des lettres capitales au premier paragraphe de chaque publication. Vous pouvez soit ajouter le code CSS aux feuilles de style de votre thème, soit utiliser un plugin d'extraits de code.
Nous recommandons d'utiliser WPCode car c'est le plugin d'extraits de code n°1 utilisé par plus de 2 000 000 de sites dans le monde. Il est très facile d'ajouter du code à votre site sans aucun problème.
Tout d'abord, vous devez installer et activer le plugin WPCode. Pour plus d'instructions, consultez notre guide pour débutants sur comment installer un plugin WordPress.
Note : WPCode propose également un plan gratuit que vous pouvez utiliser pour ce tutoriel. Cependant, la mise à niveau vers la version payante peut débloquer plus de fonctionnalités comme une bibliothèque cloud de snippets de code, une logique conditionnelle, et plus encore.
Après l'activation, visitez la page Extraits de code » +Ajouter un extrait depuis la barre latérale d'administration de WordPress.
À partir de là, placez votre souris sur l'option « Ajouter votre code personnalisé (Nouveau snippet) ». Cela révélera le bouton « Utiliser le snippet » sur lequel vous devez cliquer.
Maintenant que vous êtes sur la page « Créer un snippet personnalisé », vous pouvez commencer par entrer un titre pour votre snippet de code. Il peut s'agir de n'importe quoi qui vous aidera à identifier le snippet.
Après cela, sélectionnez « Snippet CSS » comme « Type de code » dans le menu déroulant à droite.
Ensuite, copiez et collez simplement le code suivant dans la boîte « Aperçu du code » :
<style type="text/css">
.entry-content p:first-child:first-of-type:first-letter {
font-size: 85px;
line-height: 1;
padding-top: 0px;
padding-right: 10px;
padding-left: 4px;
color: #000080;
float: left;
font-family: 'Tangerine', serif;
text-shadow: 4px 4px 4px #aaa;
</style>
}
Maintenant, vous devez faire défiler jusqu'à la section Insertion et sélectionner la méthode « Insertion automatique » si vous souhaitez exécuter le code sur l'ensemble de votre site.
Vous pouvez utiliser la méthode « Shortcode » si vous souhaitez ajouter des lettres capitales uniquement à des articles spécifiques.
Une fois que vous avez enregistré le snippet, un shortcode vous sera fourni que vous pourrez coller dans l'éditeur de blocs des articles où vous souhaitez ajouter des lettres capitales.
Après cela, retournez en haut de la page et basculez l'interrupteur sur « Actif ».
Enfin, cliquez sur le bouton « Enregistrer le snippet ».
Votre snippet de code CSS sera maintenant en ligne sur votre site.
Voici à quoi ressemblaient les lettres capitales sur notre site de démonstration en utilisant le snippet CSS ci-dessus.
Méthode 3 : Ajouter des lettres d'initiales à l'aide d'un plugin
Si vous hésitez à ajouter du CSS personnalisé, vous pouvez également ajouter des lettres capitales en utilisant le plugin Initial Letter.
Ce plugin vous permet également de modifier la taille, la couleur et la police des lettres capitales.
Note : Gardez à l'esprit que le plugin Initial Letter n'a pas été testé avec la dernière version de WordPress et n'est plus maintenu par le développeur.
Cependant, nous avons testé le plugin et il fonctionne bien. Si vous n'êtes toujours pas sûr, consultez notre article sur l'utilisation de plugins obsolètes.
Cela dit, vous devez d'abord installer et activer le plugin Initial Letter. Pour plus d'instructions, consultez notre guide sur comment installer un plugin WordPress.
Après activation, accédez à la page Paramètres » Initial Letter depuis la barre latérale d'administration. À partir de là, vous pouvez configurer les paramètres des lettres capitales.
Tout d'abord, vous devez sélectionner si vous souhaitez que les lettres capitales soient appliquées automatiquement aux nouveaux articles. Pour ce faire, choisissez l'option « Oui » dans le menu déroulant à côté de l'option « Défaut pour les articles ».
Ensuite, choisissez votre police, couleur, taille et espacement préférés pour les lettres capitales.
Remarque : Vous devrez peut-être revenir aux paramètres après avoir prévisualisé votre site Web pour ajuster ces options de style.
Après cela, cochez la case à côté de l'option « Activer pour les extraits » si vous souhaitez que les lettres capitales soient activées pour les extraits d'articles.
Vous pouvez également cocher la case à côté de l'option « Premier paragraphe uniquement » si vous souhaitez que les lettres capitales soient ajoutées uniquement au premier paragraphe de votre article.
Enfin, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.
Vous pouvez maintenant visiter n'importe quel article de votre site Web, et vous verrez les lettres capitales en action dans le premier paragraphe de votre article.
Si vous souhaitez supprimer les lettres capitales d'un article, vous pouvez également le faire en ouvrant l'article dans l'éditeur de blocs.
Une fois sur place, faites défiler vers le bas jusqu'à la section « Initial Letter » et sélectionnez l'option « Non » dans le menu déroulant. Cela désactivera les lettres capitales pour cet article.
Bonus : Changer les polices dans vos thèmes WordPress
En dehors des lettres d'initiales, vous pouvez également modifier la police de votre site WordPress pour rendre votre contenu plus lisible et esthétiquement agréable.
Pour ce faire, vous pouvez visiter la page Apparence » Personnaliser depuis le tableau de bord WordPress. Cela ouvrira le personnaliseur de thème, où vous devrez ouvrir l'onglet « Global ».
Remarque : Les paramètres du personnaliseur de thème peuvent différer en fonction du thème que vous utilisez. Pour ce tutoriel, nous utilisons Astra.
Vous verrez maintenant de nouvelles options dans la colonne de gauche, notamment la typographie, les couleurs, les conteneurs et les boutons. Ici, vous devez développer l'onglet « Typographie ».
Cela ouvrira une liste de différents préréglages proposés par le thème, et vous pourrez sélectionner la police de votre choix. Une fois que vous aurez terminé, n'oubliez pas de cliquer sur le bouton « Publier » en haut pour enregistrer vos paramètres.
Si vous utilisez un thème de blocs, le personnalisateur de thème ne sera pas disponible, et vous devrez changer la police en utilisant l'éditeur complet de site.
Pour plus de détails à ce sujet, consultez notre tutoriel sur comment changer les polices dans les thèmes WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter des lettres capitales dans les articles WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment changer les polices dans votre thème WordPress et notre liste de façons de créer un site WordPress adapté aux mobiles.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Jonas
Bonjour, existe-t-il un moyen ou un script pour que la classe .has-drop-cap soit automatiquement ajoutée uniquement au premier paragraphe lors de la création d'un nouvel article ? Je pense que ce serait mieux et beaucoup plus naturel pour Wordpress.
Support WPBeginner
Nous n'avons pas de méthode que nous recommandons pour cela pour le moment, nous recommandons d'utiliser notre méthode CSS pour quelque chose de proche.
Admin
Anna
Bonjour, j'ai des problèmes pour obtenir la lettre capitale dans mon texte. J'ai contacté la personne qui a conçu le thème et il dit que cela devrait fonctionner correctement. S'il vous plaît, aidez-moi, j'ai tout essayé, même en l'ajoutant manuellement. Cordialement, Anna
anamika
J'utilise ce plugin mais sur ma page de blog, il ne fonctionne pas [toutes les pages, même les pages uniques fonctionnent]
Mehmood Ul Hassan
Merci beaucoup de m'avoir aidé dans cette affaire. La plupart des sites célèbres utilisent des lettres capitales en début de texte et j'ai toujours voulu cela sur mon propre site WordPress. Je suis tellement content de ce plugin. Mes articles de blog ont maintenant l'air professionnels.
James Carter
Une convention typographique courante consiste à faire suivre la lettre capitale par le reste des lettres du premier mot en petites capitales. Cela rend mieux, aide l'œil à faire la transition entre la grande lettre capitale et le corps du texte.