Lorsque nous créons ou modifions un article dans WordPress, nous avons le choix entre deux éditeurs de contenu : l’éditeur visuel TinyMCE, et l’éditeur de texte WordPress qui se compose d’un élément de zone de texte amélioré par un ensemble de boutons fournissant un moyen rapide d’injecter du code HTML dans le contenu de l’article.

Les utilisateurs peuvent facilement passer du mode visuel au mode texte en cliquant simplement sur les labels en haut à droite. WordPress conservera le contenu de l’article, mais TinyMCE convertira les caractères spéciaux en entités HTML correspondantes. Pour cette raison, vous pouvez le préférer

Lectures recommandées :

Plonger dans Gutenberg, le nouvel éditeur WordPress (pour et contre)

Quoi de neuf dans WordPress 5.0 (Comment se préparer à Gutenberg)

L’éditeur de texte montre exactement la structure HTML du contenu de l’article, et il donne le contrôle total sur l’entrée de l’utilisateur, de sorte que cet article est tout sur l’éditeur de texte WordPress. Tout d’abord, nous allons nous plonger dans le sujet du point de vue du développeur : nous allons regarder l’API Quicktags JS, le filtre quicktags_settings et la fonction wp_editor().

La dernière section de cet article est dédiée aux non-développeurs. Je vais vous présenter une extension qui permet aux utilisateurs de configurer l’éditeur de texte rapidement et facilement à partir du panneau d’administration de WordPress.

Comparaison des éditeurs visuels et textuels
Comparaison des éditeurs visuels et textuels

Éditeur de texte WordPress

Si vous avez l’habitude d’ajouter beaucoup de code dans vos articles, ou si vous souhaitez simplement prévisualiser la structure HTML exacte de votre contenu, vous pouvez préférer l’éditeur de texte à la facilité d’utilisation de l’éditeur visuel avancé. Cependant, l’éditeur de texte n’est pas seulement un élément de formulaire. La barre d’outils de l’éditeur fournit un ensemble de boutons (appelés balises rapides ou Quicktags) qui permettent aux utilisateurs d’injecter rapidement un bon nombre de balises dans la structure HTML de l’article.

Par défaut, WordPress fournit les balises rapides suivantes :

  • a
  • strong
  • code
  • del
  • em
  • ol
  • ul
  • li
  • img
  • blockquote
  • ins
  • fullscreen
  • lookup
  • close
L'image montre les boutons par défaut de l'éditeur de texte WordPress
L’image montre les boutons par défaut de l’éditeur de texte WordPress

Les réglages par défaut peuvent être remplacés grâce à l’API Quicktags API. Il s’agit d’une API JavaScript qui permet d’ajouter facilement des boutons personnalisés et d’injecter du code ainsi que du contenu dans la zone texte de l’éditeur.
La méthode QTags.addButton ajoute un bouton à la barre d’outils et est définie comme suit :

QTags.addButton( 
	id, 
	display, 
	arg1, 
	arg2, 
	access_key, 
	title, 
	priority, 
	instance );

Cette méthode conserve les paramètres suivants :

  • id (chaîne) (obligatoire) est l’identifiant HTML du bouton ;
  • display (chaîne) (obligatoire) est la valeur HTML ;
  • arg1 (string) (obligatoire) est la balise d’ouverture à inclure ou une fonction de rappel personnalisée à exécuter lorsque le bouton est cliqué ;
  • arg2 (chaîne) (facultatif) est la balise de fermeture ;
  • access_key (chaîne) (facultatif) est un raccourci clavier pour le bouton ;
  • title (chaîne) (facultatif) est le titre HTML ;
  • priority (int) (facultatif) est un nombre représentant la position du bouton dans la barre d’outils ;
  • instance (chaîne) (facultatif) limite le bouton à une instance spécifique de Quicktags.

Supposons maintenant que nous voulions ajouter les balises requises par un surligneur syntaxique comme Prism, et nous aimerions fournir à la barre d’outils de l’éditeur des boutons qui affichent le balisage suivant :

<pre><code class="language-php"></code></pre>
<pre><code class="language-css"></code></pre>
<pre><code class="language-html"></code></pre>

Pour accomplir cette tâche, nous devons ajouter le code suivant au fichier principal d’une extension :

function my_quicktags() {
	if ( wp_script_is( 'quicktags' ) ) {
	?>
	<script type="text/javascript">
	QTags.addButton( 'eg_php', 'PHP', '<pre><code class=\"language-php\">', '</code></pre>', 'p', 'PHP Code', 100 );
	QTags.addButton( 'eg_css', 'CSS', '<pre><code class=\"language-css\">', '</code></pre>', 'q', 'CSS Code', 100 );
	QTags.addButton( 'eg_html', 'HTML', '<pre><code class=\"language-html\">', '</code></pre>', 'r', 'HTML Code', 100 );
	</script>
	<?php
	}
}
add_action( 'admin_print_footer_scripts', 'my_quicktags' );

 

admin_print_footer_scripts est un hook d’action utilisé pour afficher des scripts dans le pied des page d’administration. La fonction de rappel vérifie si le script quicktags est utilisé, puis imprime le code JS.
Ce script ajoute trois boutons supplémentaires à n’importe quelle instance des Quicktags dans le panneau d’administration, comme le montre l’image ci-dessous.

L'image montre nos nouveaux boutons personnalisés
L’image montre nos nouveaux boutons personnalisés

Ajouter des boutons à la barre d’outils de l’éditeur est assez simple, mais nous pouvons faire beaucoup plus avec l’API Quicktags. A titre d’exemple, nous pouvons passer à la méthode QTags.addButton une fonction de rappel à exécuter lorsque l’utilisateur clique sur le bouton correspondant. Considérez le code suivant :

function custom_quicktags() {

	if ( wp_script_is( 'quicktags' ) ) {
	?>
	<script type="text/javascript">
	QTags.addButton( 'eg_callback', 'CSS div', css_callback );

	function css_callback(){
		var css_class = prompt( 'Class name:', '' );

		if ( css_class && css_class !== '' ) {
			QTags.insertContent('<div class="' + css_class +'"></div>');
		}
	}
	</script>
	<?php
	}
}
add_action( 'admin_print_footer_scripts', 'custom_quicktags' );

css_callback est une fonction JS personnalisée à exécuter lorsque l’utilisateur clique sur le bouton personnalisé. Dans notre exemple, la fonction affiche une zone de saisie pour permettre aux utilisateurs de définir un nom de classe pour un élément div.
La méthode QTags.insertContent affichera la chaîne spécifiée dans la zone de texte de l’éditeur.

La fonction de rappel de notre exemple invite une boîte de saisie qui permet aux utilisateurs de définir un nom de classe.
La fonction de rappel de notre exemple invite une boîte de saisie qui permet aux utilisateurs de définir un nom de classe.

 

Jusqu’à présent, nous avons ajouté des quicktags à l’éditeur WordPress dans les pages d’administration grâce à l’action admin_print_footer_scripts. Si vous avez des instances de l’éditeur dans l’interface publique du site, vous devriez plutôt hooker la fonction callback à l’action wp_print_footer_scripts.
Quoi qu’il en soit, en production, vous devriez envisager de mettre vos fichiers JavaScript en file d’attente pour les scripts WordPress enregistrés, comme expliqué dans Comment mettre vos biens en file d’attente dans WordPress. Un outil utile pour créer des balises rapides personnalisées est Quicktags Generator par GenerateWP.

Remplacer les réglages des balises rapides

L’API Quicktags fournit une méthode pour ajouter de nouveaux boutons à la barre d’outils. WordPress nous permet également de supprimer des boutons, grâce au filtre quicktags_settings.

function my_quicktags( $qtInit, $editor_id = 'content' ) {
$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

La fonction de rappel conserve deux arguments : qtInit est un tableau de réglages et $editor_id est l’identifiant unique de l’éditeur. Dans notre exemple, $editor_id est par défaut ‘content’, qui est l’ID de la zone de texte de l’éditeur dans la modification des pages.

Notez que les noms de balises dans la liste Quicktag sont séparés par des virgules non suivies d’espaces.

Cette fonction remplace les réglages par défaut et peut également être utilisée pour supprimer tous les boutons de la barre d’outils :

function my_quicktags( $qtInit, $editor_id = 'content' ) {
	$qtInit['buttons'] = ',';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

Nous avons assigné une virgule comme valeur à l’élément ‘buttons’ du tableau $qtInit. Une chaîne vide ne fonctionnera pas comme prévu et les réglages par défaut ne seront pas remplacés.

Inclure l’éditeur WordPress dans les pages

Disponible à partir de la version 3.3, le La fonction wp_editor permet d’inclure facilement les éditeurs WordPress n’importe où dans le site.
La fonction est définie dans le fichier wp-includes/general-template.php comme suit :

wp_editor( $content, $editor_id, $settings = array() );
  • $content (chaîne) (obligatoire) définit le contenu initial de l’éditeur ;
  • $editor_id (chaîne) (obligatoire) définit l’attribut id pour la zone de texte et l’éditeur TinyMCE (ne peut contenir que des lettres minuscules et des underscores) ;
  • $settings (tableau)(facultatif) un tableau d’arguments.

Le tableau d’arguments permet de définir de nombreux paramètres de configuration pour les deux éditeurs, et un argument spécifique peut être utilisé pour passer les réglages directement à Quicktags (voir la liste complète des arguments dans le Codex).

Par exemple, vous pouvez inclure l’éditeur dans un modèle de page. Prenons l’exemple suivant :

$content = '';
	$editor_id = 'mycustomeditor';
	$settings = array( 
		'wpautop' => false, 
		'media_buttons' => false, 
		'quicktags' => array(
				'buttons' => 'strong,em,del,ul,ol,li,block,close'
			),
	);
wp_editor( $content, $editor_id, $settings );

Ces quelques lignes de code affichent un éditeur vide avec l’id de ‘myeditor’ et les boutons spécifiés dans la barre d’outils de l’éditeur de texte.

  • L’argument wpautop est défini sur false, de sorte que les éléments p seront utilisés pour envelopper les paragraphes dans l’éditeur,
  • l’argument media_buttons est défini sur false, de sorte que l’utilisateur ne pourra pas téléverser de fichiers multimédia,
  • le tableau des balises rapides détermine les boutons à afficher dans la barre d’outils de l’éditeur de texte.

En ce qui concerne l’éditeur de texte WordPress, la principale différence entre la fonction wp_editor() et le filtre quicktags_settings est que la fonction s’applique à une instance spécifique de l’éditeur, et peut être utilisée pour inclure de nouveaux éditeurs partout dans le site (comme les modèles de page), tandis que le hook quicktags_settings filtre toutes les instances existantes et ne peut être utilisé pour générer de nouvelles instances de l’éditeur.

Le code complet des exemples ci-dessus est disponible sur Gist.

Amélioration de l’éditeur de texte WordPress avec l’extension AddQuicktag

Si vous avez besoin d’un outil pour ajouter rapidement des boutons à l’éditeur de texte WordPress, AddQuicktag est l’extension faite pour vous.

AddQuicktag est une extension gratuite qui permet aux utilisateurs d'ajouter un bouton personnalisé à l'éditeur de texte WordPress.
AddQuicktag est une extension gratuite qui permet aux utilisateurs d’ajouter un bouton personnalisé à l’éditeur de texte WordPress.

L’extension fournit une page d’options accessible depuis le menu Réglages. Dans cette page, l’utilisateur administrateur peut ajouter des boutons personnalisés et supprimer des boutons existants.

AddQuicktag permet de configurer l’éditeur spécifiquement pour les articles, pages et autres zones de texte activées par l’éditeur, si disponibles (commentaires, widgets texte, etc.).
L’extension ajoute également des balises rapides à l’éditeur visuel. Il suffit de cocher l’option « Visuel », et l’éditeur visuel affichera un menu Quicktags avec vos boutons personnalisés.

La deuxième section de la page de l’option AddQuicktag est consacrée à la configuration des balises rapides intégrées. Dans cette section, il est possible de supprimer des boutons dans des zones de texte spécifiques.

Trois boutons ont été supprimés de l'éditeur de texte des pages
Trois boutons ont été supprimés de l’éditeur de texte des pages

La dernière section fournit des fonctionnalités supplémentaires à la barre d’outils de l’éditeur. La première rangée d’options améliore le bouton de code par défaut, fournissant un menu de sélection qui définit une classe CSS pour la balise de code en fonction de la langue sélectionnée.

La deuxième ligne fournit deux boutons qui encodent et décodent les caractères spéciaux (htmlentities).

Fonctions avancées d'AddQuicktag
Fonctions avancées d’AddQuicktag

Résumé

Si vous êtes un développeur, vous trouverez peut-être utile d’ajouter aux éditeurs WordPress un thème ou des fonctionnalités spécifiques aux extensions. L’API Quicktags et un bon nombre de filtres et de fonctions nous fournissent des outils utiles nous permettant d’ajouter de la valeur à nos produits. Et si vous n’êtes pas développeur, vous pouvez également configurer les éditeurs WordPress, grâce à plusieurs extensions disponibles gratuitement dans le dépôt des extensions WordPress, comme l’extension AddQuicktag présentée dans cet article.

Avez-vous d’autres idées de fonctionnalités utiles à ajouter à l’éditeur de texte WordPress ?

Carlo Daniele Kinsta

Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.