{"id":2149,"date":"2012-03-12T08:52:55","date_gmt":"2012-03-12T07:52:55","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2149"},"modified":"2016-09-08T16:01:41","modified_gmt":"2016-09-08T14:01:41","slug":"ajouter-styles-perso-editeur-tinymce","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/wordpress\/ajouter-styles-perso-editeur-tinymce","title":{"rendered":"WordPress – Ajouter des styles perso dans l’\u00e9diteur TinyMCE"},"content":{"rendered":"

L’\u00e9diteur visuel de WordPress s’est am\u00e9lior\u00e9 au fil du temps. Pour votre blog, vous avez probablement des styles particuliers pour le contenu de vos articles (liens, boutons, blocs de contenu, etc.) et peut-\u00eatre passez-vous encore par l’\u00e9diteur HTML ?
\nL’\u00e9diteur visuel propose pourtant un s\u00e9lecteur de styles bien pratique enti\u00e8rement personnalisable.<\/p>\n

Ces scripts ont \u00e9t\u00e9 initialement cr\u00e9\u00e9s pour WordPress 3.3.1.
\nIls sont toujours fonctionnels<\/strong> pour WordPress 4.6.1<\/strong> apr\u00e8s tests effectu\u00e9s.<\/p>\n

Br\u00e8ve pr\u00e9sentation<\/h2>\n

L’\u00e9diteur visuel TinyMCE propose \u00e0 la base deux s\u00e9lecteurs, un pour les styles, un pour les types de blocs.
\nSur WordPress, le s\u00e9lecteur de styles a \u00e9t\u00e9 retir\u00e9 pour ne laisser la place qu’au s\u00e9lecteur de blocs :<\/p>\n

\"S\u00e9lecteur<\/p>\n

Je dis \u00ab\u00a0type de bloc\u00a0\u00bb car il propose par d\u00e9faut uniquement des \u00e9l\u00e9ments de type blocs, dont le panel complet de titres.<\/p>\n

Il est possible de r\u00e9activer<\/strong> dans la barre d’outils l’autre s\u00e9lecteur proposant des styles<\/strong>.
\nNotez qu’il est \u00e9galement possible de personnaliser la feuille de style de l’\u00e9diteur<\/strong> afin d’y appliquer les styles visibles sur l’interface publique.
\nVoyons cela ensemble.<\/p>\n

Ajouter un s\u00e9lecteur de styles basique<\/h2>\n

Cette premi\u00e8re m\u00e9thode n’est pas ma pr\u00e9f\u00e9r\u00e9e, mais elle permet d’activer rapidement un s\u00e9lecteur fonctionnel.<\/p>\n

Tout se passe dans le fichier functions.php<\/code> de votre th\u00e8me WordPress (wp-content\/themes\/[votre-theme]\/<\/code>), pour le moment. En effet, comme les styles sont directement li\u00e9s \u00e0 votre th\u00e8me courant, il est normal d’y retrouver les codes dans ce fichier de th\u00e8me.<\/p>\n

Mise en place du code<\/h3>\n

Nous allons utiliser le hook tiny_mce_before_init<\/code> qui permet d’intervenir avant l’initialisation de l’\u00e9diteur.
\nNous allons r\u00e9cup\u00e9rer une variable (un tableau) et lui ins\u00e9rer des donn\u00e9es suppl\u00e9mentaires \u00e0 initialiser.<\/p>\n

<?php\r\n\/\/ on ex\u00e9cute la fonction avant initialisation de l'\u00e9diteur\r\nadd_filter( 'tiny_mce_before_init', 'juiz_custom_tinymce' );\r\n\u00a0\r\n\/\/ la fonction est d\u00e9clar\u00e9e si elle n'existe pas d\u00e9j\u00e0\r\nif ( !function_exists('juiz_custom_tinymce')) {\r\n\tfunction juiz_custom_tinymce( $tools ) {\r\n\t\t\/\/ on ajoute \"styleselect\" \u00e0 une liste d'outils s\u00e9par\u00e9s par une virgule\r\n\t\t\/\/ on compl\u00e8te ici la seconde ligne d'outils (buttons2)\r\n\t\t$tools['theme_advanced_buttons2'] = 'styleselect,'.$tools['theme_advanced_buttons2'];\r\n\u00a0\r\n\t\t\/\/ on ajoute des commandes en ligne ou en bloc (box) \u00e0 notre s\u00e9lecteur\r\n\t\t$tools['theme_advanced_styles'] = __('Bouton').'=button, '.__('T\u00e9l\u00e9charger').'=download, '.__('D\u00e9monstration').'=demo, '.__('Bo\u00eete de boutons').'=buttons-box, '.__('Exergue').'=highlight';\r\n\u00a0\r\n\t\t\/\/ on retourne notre liste d'outils compl\u00e9t\u00e9e\r\n\t\treturn $tools; \r\n\t}\r\n}\r\n?><\/code><\/pre>\n
\"\"
S\u00e9lecteur obtenu avec ce code<\/figcaption><\/figure>\n
Je vais d\u00e9tailler deux parties de ce code pour que ce soit plus clair.<\/p>\n
Ligne 10<\/strong> – La liste des outils d\u00e9j\u00e0 existants sur la deuxi\u00e8me ligne de boutons a cette forme\u00a0 formatselect,underline,justifyfull,forecolor,|<\/code>.
\nIl s’agit d’une liste des outils s\u00e9par\u00e9s par une virgule. Le | (\u00ab\u00a0trait vertical\u00a0\u00bb) repr\u00e9sente un s\u00e9parateur. Pour compl\u00e9ter cette liste, il nous suffit de la reprendre et d’y placer juste avant notre \u00ab\u00a0styleselect\u00a0\u00bb accompagn\u00e9 de sa virgule.
\nVous noterez la possibilit\u00e9 de remplacer \u00ab\u00a0buttons2\u00a0\u00bb par \u00ab\u00a0buttons1\u00a0\u00bb ou \u00ab\u00a0buttons3\u00a0\u00bb afin d’ins\u00e9rer le s\u00e9lecteur en 1\u00e8re ligne ou de cr\u00e9er une troisi\u00e8me ligne de commandes.<\/p>\n
Ligne 12<\/strong> – Chaque nouveau style s’applique soit \u00e0 un \u00e9l\u00e9ment en ligne soit \u00e0 un \u00e9l\u00e9ment de type bloc, sans distinction. Chaque style est pr\u00e9sent\u00e9 ainsi :
\nNom=classe_associee<\/code>. Ici le nom du bouton se trouve dans une fonction de traduction (au cas o\u00f9 ;))<\/p>\n
Les limites de cette technique<\/h3>\n
\u00c0 l’usage, vous vous rendrez compte que lorsque vous s\u00e9lectionnez un texte et cliquez sur un style un \u00e9l\u00e9ment span<\/code> porteur de la classe associ\u00e9e est cr\u00e9\u00e9. Si l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9 est d\u00e9j\u00e0 un \u00e9l\u00e9ment en ligne (exemple : un lien) alors la classe sera ajout\u00e9e au lien. Si l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9 est de type bloc la classe sera attribu\u00e9e \u00e0 l’\u00e9l\u00e9ment (souvent un p<\/code>) directement. (ce peut-\u00eatre un blockquote<\/code>, titre, paragraphe, etc.)<\/p>\n
La s\u00e9lection des blocs est assez d\u00e9sastreuse, cette technique s’applique donc plus facilement \u00e0 des styles en ligne<\/strong>.<\/p>\n
Ajouter un s\u00e9lecteur de styles avanc\u00e9<\/h2>\n
Comment faire pour ajouter un \u00e9l\u00e9ment div<\/code><\/strong> avec une classe \u00ab\u00a0poney\u00a0\u00bb \u00e0 mon ensemble de paragraphes ?
\nComment faire pour appliquer un style uniquement si l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9 est un lien<\/strong> ?
\nComment \u2026 ?<\/p>\n
C’est l\u00e0 que notre seconde technique peut vous int\u00e9resser : elle consiste en l’utilisation de tableau pour chaque style permettant de d\u00e9finir des param\u00e8tres pr\u00e9cis pr\u00e9vus par TinyMCE et WordPress.<\/p>\n
Mise en place du code<\/h3>\n
Comme pr\u00e9c\u00e9demment, ajoutons notre s\u00e9lecteur de styles en passant cette fois par le hook mce_buttons_2<\/code> qui permet de jouer avec un tableau PHP des diff\u00e9rents boutons de la deuxi\u00e8me ligne de commandes.<\/p>\n
<?php\r\nadd_filter( 'mce_buttons_2', 'juiz_mce_buttons_2' );\r\n\u00a0\r\nif ( !function_exists('juiz_mce_buttons_2')) {\r\n\tfunction juiz_mce_buttons_2( $buttons ) {\r\n\t\tarray_unshift( $buttons, 'styleselect' );\r\n\u00a0\r\n\t\treturn $buttons;\r\n\t}\r\n}\r\n?><\/code><\/pre>\n
Ce filtre est plus direct puisqu’il s’applique directement aux boutons.
\nLa fonction PHP array_unshift()<\/code><\/a> permet d’empiler un \u00e9l\u00e9ment au d\u00e9but d’un tableau PHP. Ici nous empilons \u00ab\u00a0styleselect\u00a0\u00bb aux boutons (aux entr\u00e9es de tableau donc) d\u00e9j\u00e0 existants.<\/p>\n
\"\"
S\u00e9lecteur de styles pr\u00e9d\u00e9finis<\/figcaption><\/figure>\n
Si on s’arr\u00eate l\u00e0, on obtient un s\u00e9lecteur des styles d\u00e9j\u00e0 d\u00e9clar\u00e9s par d\u00e9faut dans WordPress. Ces styles sont d\u00e9j\u00e0 applicables via les diff\u00e9rentes autres commandes de l’\u00e9diteur.
\nNous allons les remplacer par les n\u00f4tres en injectant 3 styles bien diff\u00e9rents pour que vous compreniez l’int\u00e9r\u00eat de cette technique.
\nAjoutez ce code \u00e0 la suite du pr\u00e9c\u00e9dent.<\/p>\n
<?php\r\n\/\/ le hook que nous avons vu en tout d\u00e9but d'article\u2026\r\nadd_filter( 'tiny_mce_before_init', 'juiz_mce_before_init' );\r\n\u00a0\r\nif ( !function_exists('juiz_mce_before_init')) {\r\n\tfunction juiz_mce_before_init( $styles ) {\r\n\t\t\/\/ on cr\u00e9\u00e9 un tableau contenant nos styles\r\n\t\t$style_formats = array (\r\n\t\t\t\/\/ chaque style est un nouveau tableau\r\n\u00a0\r\n\t\t\t\/\/ Style \"Italique et gras\"\r\n\t\t\tarray(\r\n\t\t\t\t'title' => __('Italique et gras'),\r\n\t\t\t\t'inline' => 'span',\r\n\t\t\t\t'styles' => array(\r\n\t\t\t\t\t'fontStyle' => 'italic',\r\n\t\t\t\t\t'fontWeight' => 'bold'\r\n\t\t\t\t)\r\n\t\t\t),\r\n\u00a0\r\n\t\t\t\/\/ Style \"bouton\"\r\n\t\t\tarray(\r\n\t\t\t\t'title' => __('Bouton'),\r\n\t\t\t\t'selector' => 'a',\r\n\t\t\t\t'classes' => 'button'\r\n\t\t\t),\r\n\u00a0\r\n\t\t\t\/\/ Style \"Exergue box\"\r\n\t\t\tarray(\r\n\t\t\t\t'title' => __('Exergue Box'),\r\n\t\t\t\t'block' => 'div',\r\n\t\t\t\t'classes' => 'highlight',\r\n\t\t\t\t'wrapper' => true\r\n\t\t\t)\r\n\t\t);\r\n\u00a0\r\n\t\t\/\/ on remplace les styles existants par les n\u00f4tres\r\n\t\t$styles['style_formats'] = json_encode( $style_formats );\r\n\u00a0\r\n\t\treturn $styles;\r\n\t}\r\n}\r\n?><\/code><\/pre>\n
Ce morceau de code est long, mais sur le principe il est simple \u00e0 comprendre. Il faut se concentrer sur les tableaux qui g\u00e9n\u00e8rent les styles.
\nPour \u00eatre fonctionnel un style a au moins besoin d’un nom (title<\/code>) et de son type. (inline<\/code>, block<\/code>, ou selector<\/code>, repr\u00e9sent\u00e9s par les trois exemples)<\/p>\n
\"\"
S\u00e9lecteur de styles personnalis\u00e9es<\/figcaption><\/figure>\n
Le type inline<\/code><\/h4>\n
Ligne 12 \u00e0 19<\/strong> – Ce type de style permet d’ajouter un \u00e9l\u00e9ment de type inline<\/em> (un span<\/code> dans notre exemple) autour de votre s\u00e9lection dans l’\u00e9diteur. Il est possible de proposer \u00e0 ce type de style d’y joindre une classe, ou des styles en ligne (via l’attribut style<\/code>, comme c’est le cas dans l’exemple). Les styles en ligne sont alors \u00e0 renseigner dans un tableau PHP (ligne 14 \u00e0 17) est sont \u00e0 \u00e9crire en CamelCase<\/a> pour ce qui est du nom de propri\u00e9t\u00e9s.<\/p>\n
Le type selector<\/code><\/h4>\n
Ligne 22 \u00e0 26<\/strong> – Ce type de style permet d’activer l’ajout d’une classe ou de styles en ligne uniquement lorsque l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9 dans l’\u00e9diteur correspond \u00e0 la valeur de selector<\/code>. Dans notre exemple, la classe button<\/code> ne sera ajout\u00e9e que si notre curseur dans l’\u00e9diteur se trouve sur un a<\/code> (un lien).<\/p>\n
Le type block<\/code><\/h4>\n
Ligne 29 \u00e0 34<\/strong> – Ce type de style permet de cr\u00e9er un \u00e9l\u00e9ment de type bloc autour de la s\u00e9lection lorsque la valeur de wrapper<\/code> est \u00e0 true<\/code>. Si la valeur de wrapper<\/code> est \u00e0 false<\/code>, la de la s\u00e9lection verra tous ses \u00e9l\u00e9ments de type bloc remplac\u00e9s par un div<\/code> de classe highlight<\/code> (si on reprend les informations de l’exemple).<\/p>\n
Voici un tableau r\u00e9capitulatif .<\/p>\n\n\n\n\n\n\n\n\n\n
Informations applicables pour vos styles perso<\/caption>\n
title<\/code> (requis)<\/em><\/th>\nLe nom du style visible dans le s\u00e9lecteur<\/td>\n<\/tr>\n
selector<\/code> ou block<\/code> ou inline<\/code> (requis)<\/th>\n\n
    \n
  • selector<\/code> – limite l’application du style \u00e0 un \u00e9l\u00e9ment HTML pr\u00e9cis et existant<\/u> (\u00e7a n’en cr\u00e9era pas de nouveau)<\/li>\n
  • block<\/code> – cr\u00e9e un nouvel \u00e9l\u00e9ment de type bloc avec les classes ou styles appliqu\u00e9s, il peut envelopper la s\u00e9lection ou remplacer les blocs existants en fonction de la valeur de wrapper<\/code><\/li>\n
  • inline<\/code> – Cr\u00e9e un nouvel \u00e9l\u00e9ment de type en-ligne en enveloppant la s\u00e9lection active dans l’\u00e9diteur. Il ne remplace aucune balise existante.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
classes<\/code> (optionnel)<\/em><\/em><\/th>\nune liste de classes s\u00e9par\u00e9es par un espace blanc, elles seront appliqu\u00e9es \u00e0 la s\u00e9lection.<\/td>\n<\/tr>\n
styles<\/code> (optionnel)<\/em><\/th>\ntableau PHP de styles appliqu\u00e9 en-ligne (attribut style<\/code>) (les propri\u00e9t\u00e9s CSS en deux mots doivent \u00eatre \u00e9crites en CamelCase. Ex: \u00ab\u00a0fontWeight\u00a0\u00bb)<\/td>\n<\/tr>\n
attributes<\/code> (optionnel)<\/em><\/th>\ntableau PHP des attributs appliqu\u00e9s (ex : array( 'title' => 'Le titre \u00e0 \u00e9crire', 'hreflang' => 'en' );<\/code> )<\/td>\n<\/tr>\n
wrapper<\/code>
\n(optionnel, vaut false<\/code> par d\u00e9faut)<\/em><\/th>\n		pass\u00e9 \u00e0 true<\/strong>, cr\u00e9e un nouvel \u00e9l\u00e9ment bloc autour de tous les \u00e9l\u00e9ments blocs (ou en-ligne) s\u00e9lectionn\u00e9s<\/td>\n<\/tr>\n
exact<\/code>
\n(optionnel,vaut false<\/code> par d\u00e9faut)<\/em><\/th>\n		d\u00e9sactive la fonction de fusion des styles similaires, n\u00e9cessaire dans certain cas pr\u00e9cis en CSS<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Vous remarquerez que styles<\/code> et classes<\/code> sont optionnels\u2026 c’est louche pour un s\u00e9lecteur de styles. M’enfin, passons.
\nL’entr\u00e9e permettant d’ajouter des attributs en fait bien plus qu’un simple s\u00e9lecteur de styles \ud83d\ude09<\/p>\n
Ajouter des styles CSS pour styler le contenu de l’\u00e9diteur<\/h2>\n
\"\" C’est bien beau d’ajouter des classes et attributs \u00e0 notre contenu dans l’\u00e9diteur, mais \u00e7a ne serait pas trop mal de voir les styles correspondants s’afficher, ne serait-ce que pour nous assurer que les classes ont bien \u00e9t\u00e9 appliqu\u00e9es.<\/p>\n
Pour effectuer cela il vous suffit d’ajouter un fichier CSS \u00e0 la racine de votre th\u00e8me, ce fichier doit se nommer editor-style.css<\/code>.
\nUne fois le fichier et les styles cr\u00e9\u00e9s, il faut appliquer ce fichier dans l’administration lorsque l’\u00e9diteur est charg\u00e9. Dans functions.php ajoutez ceci :<\/p>\n
<?php\r\nif ( !function_exists('juiz_init_editor_styles')) {\r\n   add_action( 'after_setup_theme', 'juiz_init_editor_styles' );\r\n   function juiz_init_editor_styles() {\r\n\tadd_editor_style();\r\n   }\r\n}\r\n?><\/code><\/pre>\n
Et le tour est jou\u00e9 !
\nN’h\u00e9sitez pas \u00e0 commenter si vous avez des questions, \u00e7a pourrait servir \u00e0 d’autres \u00e9galement.<\/p>\n
Pour ceux qui attendent des articles sur CSS, trois articles sont en cours de r\u00e9daction et vous ne serez pas d\u00e9\u00e7us. Patience \ud83d\ude09<\/p>\n
\n
Astuces TinyMCE<\/h2>\n