Accueil » Wordpress : comment personnaliser l'aperçu des articles

WordPress : comment personnaliser l’aperçu des articles

wordpress-tinymceQuand 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 !

8 commentaires pour « WordPress : comment personnaliser l’aperçu des articles »

  1. Benoît dit :

    Julien
    J’ai testé en local et sur mon site distant ton astuce. Elle fonctionne pour la visualisation des class dans l’éditeur; mais par contre après plusieurs vidage du cache. La liste déroulante n’apparaît toujours pas.
    As-tu une idée ?

    Répondre

  2. Julien Appert dit :

    C’est curieux. As-tu un autre plugin qui interagit avec l’éditeur ?

    Répondre

  3. Benoît dit :

    En plugin qui modifie la toolbar, j’ai « RB Internal link » et « Contact Form 7 ».

    Répondre

  4. Julien Appert dit :

    Ok, curieusement, le code ne fonctionne pas avec ‘mce_buttons_1’. Remplace le par ‘mce_buttons_2’, ça devrait régler le problème. Je vais corriger le billet.

    Répondre

  5. Benoît dit :

    Merci Julien.
    Ca fonctionne très bien. Je vais enfin pourvoir attribuer les class de ma feuille de style plus facilement et aussi plus rapidemment.

    Reste à trouver un moyen pour attribuer une div avec class à un bloc de texte, un peu à la même manière de ton astuce.

    Répondre

  6. Stéphane dit :

    Bonjour,
    Je viens de tombé sur cet article qui correspond exactement à ce que je cherche…
    Seulement après avoir suivi ton tuto, les styles que j’ai défini dans mce.css n’apparaissent pas dans le menu déroulant « Styles »… Je n’y trouve que aligncenter, alignleft, alignright,…

    Aurais-tu une idée de ce que j’ai manqué ?
    Merci d’avance et merci pour ce tuto très clair.

    Répondre

  7. Stéphane dit :

    Bon, il semblerait que ce soit du à Safari… Mes style apparaissent au premier lancement mais pas ensuite… Aucun problème sous Firefox… Merci beaucoup pour ce tuto !

    Répondre

  8. Bouterige Guillaume dit :

    Bonjour, bon tuto mais j’ai un probleme.

    Lorsque je veux mettre à jour mon article, il y a une beug, ecran blanc. Par contre tout a été pris en compte. A quoi cela est dût?

    Vu que je suis débutant, j’ai mis le code de cette façon dans un doc nommé functions.php

    Tout y est…
    Il n’y a pas de rajout de plugs ou d’appel de la page function à faire?

    Si quelqu’un pouvait m’aider, ce serait cool.

    Merci, cordialement, Guillaume

    Répondre

Laisser un commentaire pour : « WordPress : comment personnaliser l’aperçu des articles »

Votre email ne sera jamais communiqué.
Les champs précédés d'un astérisque sont obligatoires.