Sommaire
L’éditeur visuel de WordPress est souvent la vue par défaut d’un rédacteur lors de la création de contenu. C’est là que vous disposez de boutons et de fonctions pour donner à votre texte un certain attrait visuel. Bien que l’outil TinyMCE par défaut soit utile, vous pouvez ajouter d’autres options à l’éditeur de WordPress.
Dans ce tutoriel, nous allons examiner quelques plugins de style différents de l’éditeur personnalisé de WordPress. Chacun d’entre eux offre d’excellents moyens d’améliorer le contenu que vous créez sur votre site web.
C’est un excellent moyen d’ajouter de l’attrait visuel sans utiliser d’éléments comme les shortcodes de WordPress. Par exemple, vous pouvez ajouter un bouton attrayant à votre site en n’utilisant rien de plus que le codage CSS et en plaçant quelques options.
Pour ce tutoriel, vous devrez savoir comment installer les plugins WordPress.
Utilisation des styles personnalisés de TinyMCE
Le plugin TinyMCE Custom Styles ajoute une fonction pour vous permettre d’éditer vos propres classes et styles CSS. Il utilise une interface élégante qui supprime une grande partie du travail de code pour créer des choses comme des boutons.
Si vous connaissez un peu les bases du CSS, cet outil est un bon outil à essayer.
Installez et activez le plugin TinyMCE Custom Styles dans WordPress.
Allez dans Paramètres et cliquez sur “TinyMCE Custom Styles”.
Avant de pouvoir utiliser TinyMCE Custom Styles, vous devez définir un emplacement pour les fichiers CSS que l’éditeur utilisera. Choisissez un des boutons radio pour sélectionner un emplacement. Pour ce tutoriel, je vais spécifier un répertoire personnalisé. Vous devez créer le répertoire avant d’utiliser l’option.
Cliquez sur le bouton “Enregistrer tous les paramètres”.
Faites défiler vers le bas et cliquez sur le bouton “Ajouter un nouveau style”.
C’est ici que vous entrez les valeurs pour le style que vous voulez dans l’éditeur TinyMCE. Ces valeurs sont toutes pour le CSS, et vous devez savoir quels éléments vous allez utiliser.
Une fois que vous avez terminé, cliquez sur le bouton “Enregistrer tous les paramètres” pour sauvegarder votre style.
Accéder au nouveau style
Après avoir enregistré votre style, vous devez y accéder. Allez à n’importe quel type de message, page ou message personnalisé qui utilise l’éditeur visuel de WordPress. Vous pouvez en créer un nouveau si vous le souhaitez.
Cliquez sur l’icône “Toolbar Toggle” dans l’éditeur. Il se peut qu’elle soit déjà activée par défaut.
Sélectionnez le texte que vous souhaitez mettre en valeur avec un style.
Utilisez le menu déroulant “Formats” et sélectionnez un style.
Le texte utilisera alors le style que vous avez créé.
Utilisation des styles personnalisés de TinyMCE
Le plugin Just TinyMCE Custom Styles est un autre outil utile pour créer du contenu CSS amélioré sur votre site web. Il est livré avec des options pour éditer votre texte d’une manière similaire au plugin ci-dessus. Il est un peu plus difficile à gérer, mais fonctionne bien.
Si vous êtes nouveau dans le CSS, je vous suggère d’utiliser plutôt les TinyMCE Custom Styles.
Installez et activez “Just TinyMCE Custom Styles”.
Allez dans Paramètres et cliquez sur “TinyMCE Custom Styles”.
Lors de la première utilisation, vous devrez modifier les paramètres du plugin. Vous pouvez soit aller à l’onglet, soit cliquer sur le lien “Ouvrir les paramètres”.
Faites les ajustements que vous voulez gérer dans ce plugin. Ce sont les éléments CSS que vous voulez contrôler à partir de l’outil.
Lorsque vous avez terminé vos sélections, cliquez sur le bouton “Enregistrer tous les paramètres”.
Après avoir sauvegardé, cliquez sur l’onglet “Formats TinyMCE” en haut.
Saisissez le nouveau format CSS que vous souhaitez utiliser dans les espaces prévus à cet effet.
Une fois que vous avez saisi les données CSS, cliquez sur le bouton “enregistrer tous les paramètres” pour les sauvegarder.
Accès au style
Allez dans un ancien poste ou créez-en un nouveau. Pour cet exemple, je vais ajouter un nouvel en-tête rouge à un message existant.
Mettez en évidence un morceau de texte que vous souhaitez modifier avec le CSS en le sélectionnant.
Cliquez sur le menu déroulant “Formats” et choisissez votre style CSS.
Ce plugin de styles personnalisés TinyMCE est plus difficile à gérer que le premier exemple ci-dessus. Il nécessite un peu plus de connaissances sur le fonctionnement du CSS et n’a pas les fonctions automatiques comme l’ajout d’arrière-plans et autres.
Vous devrez entrer ces bribes de code manuellement lorsque vous créerez le nouveau style.
Si vous connaissez votre CSS, c’est un outil formidable pour ajouter des éléments aux messages et aux pages. Il est juste un peu plus avancé que beaucoup d’autres plugins.
Obtenir plus du contenu
L’ajout de feuilles de style CSS personnalisées à un site web WordPress permet une plus grande souplesse d’utilisation et la mise en forme du texte peut faire toute la différence lorsqu’il s’agit d’intéresser votre public. Une simple mise en gras au bon endroit peut avoir un impact sur la lisibilité. L’ajout de styles personnalisés améliore l’expérience tout en vous permettant d’effectuer plus facilement certaines tâches.
Quel type d’outils utilisez-vous pour améliorer la lisibilité de votre contenu ? À quelle fréquence utilisez-vous des plugins visuels pour accroître l’engagement de votre site WordPress ?
