Personnaliser l'éditeur visuel de wordpress

Ajoutez vos propres formats à l'éditeur visuel de wordpress

WordPress : Ajouter des styles personnalisés à l’éditeur visuel

WordPress : Ajouter des styles personnalisés à l’éditeur visuel

Comment ajouter des styles personnalisés sur son site wordpress grâce à l’éditeur visuel de wordpress ? C’est ce que nous allons voir ici en utilisant un peu de php et de css pour créer de nouveaux formats disponibles lorsque vous rédigez un article ou une page sur wordpress.

 

Modifier l’éditeur visuel de wordpress

WordPress dispose d’un éditeur visuel performant qui permet de mettre en forme du texte de base de la même manière qu’on pourrait le faire sur Open Office ou sur Microsoft Word. Mais cependant il reste plutôt limité en terme de personnalisation graphique. Imaginons par exemple que vous souhaitiez rajouter un lien de ce genre :

Actuellement si le thème n’a pas prévu une fonction pour cela, vous êtes obligé de passer par un plugin qui génère des shortcodes que vous devez ensuite customiser à votre sauce. Votre éditeur visuel se trouve rapidement surchargé en shortcodes et ce n’est plus vraiment visuel…

Aujourd’hui je vous propose mon astuce pour créer votre propre feuille de style dans l’éditeur et pour y ajouter des formats personnalisés.

 

Installer le plugin TinyMCE Advanced ou ajouter votre code directement

Si ce n’est pas déjà fait, installez le plugin TinyMCE Advanced qui vous offrira de base plus de possibilités dans l’éditeur visuel. Il convient ensuite de modifier les réglages pour ajouter le bouton Formats dans la barre de l’éditeur afin d’y avoir accès plus facilement.

Pour cela dirigez vous dans Réglages > TinyMCE Advanced

Réglages du plugin TinyMCE Advanced
Réglages du plugin TinyMCE Advanced

Vous pouvez également ajouter d’autres fonctionnalités comme la famille de police, la taille de police, justifier le texte etc… Pour ceux qui ne souhaitent pas utiliser le plugin TinyMCE Advanced, vous pouvez simplement ajouter le code suivant dans functions.php qui ajoutera le bouton Formats

function mon_theme_mce_buttons_2($buttons) { 
array_unshift($buttons, 'styleselect');  
return $buttons;
}
add_filter('mce_buttons_2', 'mon_theme_mce_buttons_2');

 

Feuille de style de l’éditeur

Maintenant ajoutons une feuille de style personnalisé pour l’éditeur visuel de wordpress. Pour cela il suffit simplement d’ajouter ce morceau de code au fichier functions.php de votre thème.

function mon_theme_add_editor_styles() {   
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'mon_theme_add_editor_styles' );

Ensuite il faut créer le fichier custom-editor-style.css dans le dossier de votre thème, c’est ici que nous mettrons nos styles css personnalisés. Nous y reviendrons dans un moment.

 

Ajouter les styles dans functions.php

Le code suivant va nous permettre de déclarer les nouveaux styles que nous souhaitons ajouter, collez-le dans le fichier functions.php de votre thème.

function my_mce_before_init_insert_formats( $init_array ) {  
$style_formats = array(      
// Chaque array défini 1 style    
array(        
'title' => 'Bouton 1',        
'block' => 'div',        
'classes' => 'btn1',      
'wrapper' => true,			    
),array(        
'title' => 'Bouton 2',        
'inline' => 'span',        
'classes' => 'btn2',      
'wrapper' => false,    
),    
);    
// On ajoute nos style a ceux existant  
$init_array['style_formats'] = json_encode( $style_formats );    
return $init_array;  
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Pour chaque style que l’on souhaite créer il faut ajouter un array supplémentaire. Dans cet exemple j’ai ajouté 2 styles appelés Bouton 1 et Bouton 2 qui seront des balises html div & span et qui auront respectivement les sélecteurs css .btn1 et .btn2 . Le bouton 1 sera une div (type block) alors que le bouton 2 sera un span (type inline) comme précisé dans l’array. Vous pouvez retrouver plus d’informations sur les arguments possibles en allant sur cette page du codex de wordpress. Il ne nous reste plus qu’à créer le css associé dans le fichier style.css et à le dupliquer dans custom-editor-style.css . Exemple pour le bouton 1 :

.btn1 a{  
color: #ff7f0f;
font-style: normal;
font-size: 1.2em;
line-height: 1.2em;
background-color: #000000;
padding: 20px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
display:inline-block;
font-family:Montserrat;
}
.btn1 a:hover {  
color: black;  
background-color: #ff7f0f;
}

 

Comme vous pouvez le voir le sélecteur CSS est .btn1 a simplement car je souhaite que le style s’applique uniquement sur le lien du bouton.

Cela donne :

J’espère que cette astuce vous sera aussi utile qu’à moi. Grâce à cela je crée les styles nécessaires à mon thème pour gagner du temps et de la concentration sur la rédaction de contenu plutôt que sur la mise en forme. Cela me permet aussi de très facilement changer tout les styles de tous mes articles rapidement sans tout ré-éditer.

Il est également possible d’installer un plugin payant pour faire tout cela automatiquement : TinyMCE Advanced Professsional Formats and Styles.

Désolé, les commentaires sont fermés pour cet article.

Concepteur multimédia

Travailleur indépendant
rattaché à OXALIS SCOP
depuis le 01 juillet 2015

17 Rue des Arcades
74440 Taninges
France

Création de site internet - design - communication

Services print & numérique