Wordpress : comment personnaliser l’aperçu des articles

Quand vous écrivez un nouvel article ou une nouvelle page, l’éditeur de WordPress vous laisse le choix entre deux interfaces : visuelle et HTML. Si vous maîtrisez le HTML et si vous tapotez du clavier à la vitesse de la lumière, ce dernier choix est un bon choix. Néanmoins, si vous préférez avoir un aperçu plus visuel de l’article en cours de rédaction, l’intérêt de l’interface du même nom est évident.

Grâce à cette interface visuelle, vous pouvez modifier le contenu de votre article en voyant immédiatement le rendu final. Malheureusement, ce rendu n’est pas parfait, car il ne correspond pas vraiment au style de votre site web. Sachez cependant que ce rendu est personnalisable, et si cette personnalisation n’est pas proposée de base dans WordPress, nous pouvons la réaliser simplement avec quelques lignes de code.

TinyMCE, l’éditeur riche universel

L’interface visuelle utilise un éditeur riche très puissant nommé TinyMCE. Il est très personnalisable et permet la création de plugins : c’est grâce à cette extensibilité que l’on peut ajouter des boutons dans la barre d’outils aussi facilement, comme c’est le cas pour le plugin Link To Post. Cette grande malléabilité en a fait le candidat idéal pour être introduit dans bien des projets web, comme WordPress ou Joomla.

Appliquer une feuille de style

Entre autres fonctionnalités proposées par TinyMCE, celle qui nous intéresse est l’application d’une feuille de style. En effet grâce à un paramètre renseigné à l’initialisation de l’éditeur, il est possible de le forcer à utiliser une feuille de style externe de notre choix.

1. Créer la feuille de styles

Vous pouvez toujours demander à TinyMCE d’importer directement la feuille de styles de votre site, mais le résultat risque d’être… intéressant. Ou en tout cas, probablement pas celui que vous escomptez. Non le mieux est de réaliser une feuille de styles indépendante qui contiendra uniquement les styles élémentaires, à savoir couleur de fond, choix de la police, taille et couleur de chaque élément HTML. Appelez ce fichier, disons, mce.css, et chargez le dans le dossier de votre thème.

2. Expliquer à l’éditeur où la trouver

Votre thème possède très probablement un fichier nommé functions.php. Si ce n’est pas le cas, créez-en un. Editez le, et ajoutez les lignes de code suivantes :

function tinymce_perso_css($wp) {

return $wp .= ',' . get_bloginfo('template_url') . '/mce.css';
}
add_filter( 'mce_css', 'tinymce_perso_css' );

Voilà, c’est aussi simple que ça. Votre interface visuelle d’édition utilisera les styles présents dans mce.css et le rendu sera désormais plus proche de vrai rendu final.

Sélectionner manuellement les styles à appliquer

Il est possible d’aller un peu plus loin. Imaginons que vous désiriez appliquer différents styles css à vos paragraphes : par exemple, encadrer une ligne de texte. Par défaut, le TinyMCE personnalisé par WordPress affiche une liste déroulante vous permettant de sélectionner un format : paragraphe, adresse, titre 1, titre 2, etc. Mais vous pouvez également lui demander d’afficher une liste similaire qui vous proposera différents styles à appliquer. Cette manipulation est très simple :

1. Demander l’affichage de la liste déroulante des styles

Editez à nouveau votre fichier functions.php et ajoutez le code suivant :

function tinymce_buttons($buttons){
$style = array('styleselect');
$buttons = array_merge($style,$buttons);
return $buttons;
}
add_filter('mce_buttons_2', 'tinymce_buttons');

La liste s’affichera au tout début de la seconde ligne de la barre d’outils de l’éditeur. Curieusement, la liste n’apparaitra pas si vous choisissez ‘mce_buttons_1’.

2. Créer les styles personnalisés

La liste déroulante possède déjà quelques styles par défaut. Mais vous pouvez en ajouter en éditant le fichier mce.css précédemment créé et en ajoutant des classes css. Par exemple :

.cadre{ border:1px dashed #000; }

Il ne vous reste plus qu’à sélectionner le texte et à choisir le style « cadre » dans la liste déroulante.

Grâce à ces quelques modifications très simples, vous avez à présent un rendu visuel proche de votre rendu final et pourrez facilement appliquer des styles css à votre prose.

Si vous êtes sages, je parlerais à nouveau des possibilités offertes par TinyMCE dans de prochains articles. C’est une zone stratégique de WordPress qui mérite d’être éclaircie !