La fonctionnalité existe depuis longtemps dans WordPress, mais était passées presque inaperçue, jusqu’à ce que Twenty Ten, le nouveau thème par défaut de la version 3.0, la mette en vedette. Il est donc possible et aisé d’adapter le rendu dans l’éditeur visuel de WordPress (TinyMCE) à celui de son thème.
L’intérêt de l’opération : éditer notre contenu dans une mise en forme au plus près de l’affichage final, ce qui évitera pas mal d’aller-retour entre l’éditeur et la prévisualisation… et permet de se préoccuper un peu moins de la mise en forme, et un peu plus du contenu.
1. Dans le fichier functions.php ajouter une fonction qui active pour TinyMCE une feuille de style personnalisée. Par exemple : :
- add_filter('mce_css', 'my_editor_style');
- function my_editor_style($url) {
- $url .= ',';
- // Change the path here if using sub-directory
- $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'editor-style.css';
- return $url;
- }
2. Créé la feuille de styles personnalisée (dans notre exemple editor-style.css). Celle-ci doit contenir juste une sélection raisonnée et raisonnable des éléments CSS qui gèrent l’affichage les articles et les pages (polices, blocs des images, etc.).
C’est fait !
A noter que, de la même façon, nous pouvons personnaliser dans la barre d’outils de l’éditeur le menu déroulant de mise en forme du texte.
Enfin, Andrew Ozz nous propose un kit de développement pour faciliter l’intégration de cette fonctionnalité à votre thème. Nous trouverons dans ce kit un exemple de feuille de styles et un exemple de fichier de fonctions.
Tout cela demande juste un minimum de connaissances pour manipuler les feuilles de styles et les fonctions PHP.
RSS 2.0