Jetez un œil à votre éditeur visuel WordPress. Il existe des options standard pour la mise en forme et le style de votre contenu, mais pas beaucoup en termes de personnalisation pour rendre vos publications et vos pages un peu fantaisistes.
Maintenant, vous savez peut-être que vous avez la possibilité de basculer entre les éditeurs de texte et visuels dans WordPress pour ajouter du CSS pour créer des choses comme des boutons et des blocs de texte, mais c’est une douleur, et si vous n’avez pas beaucoup d’expérience dans l’édition de code, l’éditeur de texte semble un peu intimidant.
Ne serait-il pas plus simple de créer vos propres styles personnalisés, de les placer dans un menu déroulant de l’éditeur WordPress et de choisir de les utiliser chaque fois que vous en avez besoin ? Oui, c’est beaucoup plus facile, nous voulons donc expliquer comment le faire ici. Gardez à l’esprit que même si nous essayons de rendre ce processus aussi simple que possible, il est utile d’avoir un peu de connaissances CSS si vous souhaitez découvrir tous les avantages des styles personnalisés.
Voyons comment ajouter des styles personnalisés à l’éditeur visuel WordPress.
Ajouter des styles personnalisés à WordPress Visual Editor en ajoutant du code
Cette première option nécessite que vous sachiez un peu comment incorporer et modifier CSS, mais je vais vous donner un petit guide pour vous aider à apprendre les bases afin que vous puissiez utiliser ces connaissances à l’avenir. C’est une bonne option si vous ne voulez pas alourdir votre site avec un plugin.
Le but de ceci est d’ajouter un nouveau menu déroulant qui inclut des styles personnalisés dans votre éditeur visuel WordPress, ce qui vous donne la possibilité de sélectionner des éléments dans votre éditeur, puis de leur appliquer des styles personnalisés. Si vous développez un nouveau thème, localisez votre fonctions.php fichier et placez le code ci-dessous dans ce fichier ou si vous travaillez avec un thème déjà intégré, collez ce code dans le fichier functions.php d’un thème enfant.
function myprefix_mce_buttons_1( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );
Revenez à l’éditeur dans l’un de vos articles WordPress et vous devriez maintenant voir un nouveau bouton « Formats » dans la rangée supérieure de l’éditeur. Remarquez comment nous nous sommes accrochés au « mce_buttons_1 ? Cela place le bouton du menu des formats dans la première ligne de l’éditeur mce. Vous pouvez également utiliser le filtre « mce_buttons_2 » pour le placer dans la deuxième ligne ou « mce_buttons_3 » pour le placer dans la 3ème ligne.
Donc, maintenant que vous avez activé l’élément de menu, il est temps d’ajouter vos styles personnalisés à utiliser dans vos publications. Prenez le code ci-dessous et collez-le dans votre fonctions.php fichier qui ajoutera 2 nouveaux styles à la liste déroulante Formats – « Bouton de thème » et « Surligner ».
/**
* Add custom styles to the mce formats dropdown
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
*/
function myprefix_add_format_styles( $init_array ) {
$style_formats = array(
// Each array child is a format with it's own settings - add as many as you want
array(
'title' => __( 'Theme Button', 'text-domain' ), // Title for dropdown
'selector' => 'a', // Element to target in editor
'classes' => 'theme-button' // Class name used for CSS
),
array(
'title' => __( 'Highlight', 'text-domain' ), // Title for dropdown
'inline' => 'span', // Wrap a span around the selected content
'classes' => 'text-highlight' // Class name used for CSS
),
);
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );
Vous pouvez modifier les titres pour afficher différents noms dans votre menu déroulant, ajouter/supprimer des éléments du tableau, etc. Vous pouvez modifier à peu près n’importe quoi dans ce code pour révéler vos propres styles de format personnalisés, assurez-vous de consulter le Codex WordPress pour une explication plus approfondie des paramètres acceptés et des valeurs de retour.
Maintenant que vous avez de nouveaux styles, vous pouvez mettre en surbrillance le contenu dans votre éditeur et appliquer les styles. Remarquez, comment le format « Bouton de thème » a un paramètre de sélection ? Cela signifie que le style ne peut être appliqué qu’à ce sélecteur spécifique (dans ce cas, la balise « a » ou « link »). Le deuxième format que nous avons ajouté « Surligner » n’a pas de paramètre de sélection mais plutôt un paramètre « en ligne » qui lui dit d’appliquer le style au texte que vous avez mis en surbrillance dans votre éditeur et de l’envelopper dans une plage avec votre nom de classe unique. Vous pouvez voir un exemple de notre thème Total WordPress sur la façon dont nous avons utilisé les formats afin que les utilisateurs puissent facilement appliquer une liste de contrôle regardez les puces dans l’éditeur.
Vous pouvez donc maintenant utiliser vos formats personnalisés, mais ils ne seront pas différents tant que vous n’aurez pas ajouté du CSS personnalisé à votre site pour les styliser. Vous devez localiser la feuille de style de votre thème (si vous créez le vôtre) ou thème enfant et coller le code CSS suivant dans le fichier.
.theme-button {
display: inline-block;
padding: 10 15px;
color: #fff;
background: #1796c6;
text-decoration: none;
}
.theme-button:hover {
text-decoration: none;
opacity: 0.8;
}
.text-highlight {
background: #FFFF00;
}
Maintenant, cela va ajouter du style à vos nouveaux formats pour le front-end afin que, une fois appliqué, vous puissiez les voir en direct. Yay! Mais ne serait-il pas agréable de voir également vos styles dans l’éditeur réel lorsqu’ils sont appliqués ? Pour ce faire, vous devrez utiliser la fonction « éditeur de feuille de style » dans WordPress. Si vous créez votre propre thème, vous voudrez créer un nouveau fichier css dans votre thème appelé « editor-style.css » (vous pouvez le nommer comme vous le souhaitez, assurez-vous simplement de modifier l’extrait ci-dessous en conséquence) avec le CSS personnalisé ajouté pour vos formats, puis ajoutez la fonction ci-dessous pour le charger dans le backend.
function myprefix_theme_add_editor_styles() {
add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'myprefix_theme_add_editor_styles' );
Si vous travaillez avec le thème de quelqu’un d’autre, vous devrez l’ajouter dans votre thème enfant, assurez-vous simplement de lui donner un nom unique afin qu’il n’entre pas en conflit avec votre thème parent ou si votre thème parent a déjà un fichier CSS pour l’éditeur, vous pouvez le copier et le coller dans votre thème enfant (sans ajouter le code PHP ci-dessus), puis ajouter votre nouveau CSS car WordPress vérifiera d’abord le thème enfant avant de charger le fichier CSS de l’éditeur du thème parent et s’il le localise, il le fera chargez-le à partir du thème enfant à la place.
Ajouter des styles personnalisés à l’éditeur visuel WordPress avec un plugin Nice
Si vous n’avez pas le temps de jouer avec le code, ou si vous n’arrivez pas à comprendre vous-même, il y a de bonnes nouvelles. Il existe un plugin qui vous permet de terminer exactement ce que nous venons de faire ci-dessus sans avoir à vous soucier du code.
Recherchez, installez et activez simplement le Plugin de styles personnalisés TinyMCE et activez-le sur votre site WordPress.
Aller à Paramètres > TinyMCE prof.styles sur le côté gauche de votre tableau de bord WordPress. C’est ici que vous modifiez vos paramètres pour le plugin.
Le plugin vous permet de choisir où se trouvent vos feuilles de style ou où vous souhaitez les placer. Il est recommandé de créer un nouveau répertoire personnalisé. Sélectionnez la troisième option et donnez un nom à votre répertoire, puis descendez la page pour cliquer sur votre Enregistrer les paramètres option avant de passer à l’étape suivante.
Une fois les paramètres enregistrés, faites défiler vers le bas pour sélectionner le bouton Ajouter un nouveau style.
C’est ici que vous personnalisez ce à quoi vous voulez que vos styles personnalisés ressemblent. Il s’agit essentiellement d’un simple éditeur Web qui génère le code CSS pour vous. Tapez un titre pour tout ce que vous voulez afficher dans le menu déroulant. Choisissez si vous voulez un type de sélecteur, en ligne ou de bloc. N’hésitez pas à utiliser la capture d’écran ci-dessus pour remplir les classes et les styles CSS, ou créez les vôtres en fonction de ce que vous prévoyez d’utiliser le menu déroulant. Une fois terminé, cliquez sur Enregistrer les paramètres en bas de la page.
Il est maintenant temps de voir à quoi ressemble le nouveau style personnalisé dans votre éditeur. Ouvrez un nouveau message ou une nouvelle page et localisez le menu déroulant Formats sur le côté gauche de l’éditeur visuel. Il apparaît dans la deuxième ligne. Une fois que vous avez cliqué sur le menu déroulant, le nouveau style que vous venez de créer apparaîtra.
Cliquez sur l’option Big Blue Button, ou sur ce que vous avez créé, pour le voir apparaître dans votre éditeur. Pour l’utiliser, mettez simplement en surbrillance le texte que vous souhaitez formater, puis cliquez sur votre option et le tour est joué !
Conclusion
C’est tout pour le moment! Vous pouvez toujours en savoir plus sur l’utilisation de nouveaux styles en consultant le Page de codex WordPress consacré à ce sujet.
Faites-nous savoir dans la section commentaires si vous avez des questions sur la façon d’ajouter des styles personnalisés à l’éditeur visuel WordPress. Et n’hésitez pas à partager tous les styles inhabituels que vous avez créés pour rendre votre site un peu plus joli !