Ajout de Quicktags pour les commentaires

C’est une chose que j’aurais du faire depuis longtemps : permettre une mise en forme minimale lorsque l’on écrit un commentaire (insérer un lien, etc…).

Moi-même, lorsque je répondais à un commentaire, j’étais obligé d’aller le modifier ensuite via l’interface d’admin de WordPress…

Je suppose que j’étais réticent à ajouter un nouveau plugin, moins on en a, mieux c’est. J’ai fini par m’y intéresser à la suite d’un commentaire posant la question.

J’ai fini par ajouter une fonction utilisant wp_editor() pour intégrer Quicktags dans le formulaire de commentaire, tout en dévalidant TinyMCE suite à un bug.

Voyons voir cela…

J’ai donc commencé par chercher un plugin, et ce n’est pas ça qui manque, certains très jolis d’ailleurs comme wpDiscuz, mais lourds, d’autres s’appuyant sur des serveurs comme Discus, et d’autres encore connectés aux réseaux sociaux… C’est d’ailleurs frappant comme tous les articles intitulés du genre « X Best WordPress Comment Plugins 2021 » ne parlent que de ceux-là…

Ensuite j’en ai trouvé de tout simple comme Simple Comment Quicktags, qui était de fait un peu trop simple : seulemnt quatre boutons (bold, italic, link, quote).

J’ai fini par chercher le moyen de le faire sans plugin (j’aurais du commencer par là), et suis tombé sur cette page intitulée « Add TinyMCE Rich Text Editor to WordPress Comments without Plugin« . Exactement ce qu’il me fallait.

La première partie est assez simple, on ajoute une fonction dans la fichier functions.php du thème.

add_filter( 'comment_form_defaults', 'rich_text_comment_form' );
function rich_text_comment_form( $args ) {
	ob_start();
	wp_editor( '', 'comment', array(
		'media_buttons' => true, // show insert/upload button(s) to users with permission
		'textarea_rows' => '10', // re-size text area
		'dfw' => false, // replace the default full screen with DFW (WordPress 3.4+)
		'tinymce' => array(
        	'theme_advanced_buttons1' => 'bold,italic,underline,strikethrough,bullist,numlist,code,blockquote,link,unlink,outdent,indent,|,undo,redo,fullscreen',
	        'theme_advanced_buttons2' => '', // 2nd row, if needed
        	'theme_advanced_buttons3' => '', // 3rd row, if needed
        	'theme_advanced_buttons4' => '' // 4th row, if needed
  	  	),
		'quicktags' => array(
 	       'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close'
	    )
	) );
	$args['comment_field'] = ob_get_clean();
	return $args;
}

On peut même ajouter des boutons supplémentaire, et ce jusqu’à 4 lignes ! La liste des boutons possibles est ici (le lien sur la page n’est plus bon).

Cela fonctionne tel quel, mais il y a un problème : si vous répondez à un commentaire existant, le formulaire de réponse reste en bas de page au lieu de se placer juste sous le commentaire auquel vous répondez.

Il faut alors ajouter ce bout de code à la suite de la fonction précédemment ajoutée :

Le code a ajouter… j’ai retiré la dernière ligne qui génère ensuite une erreur.

Je n’ai pas pu le mettre en mode texte, à cause de la partie script qui est interprétée… 🙁 Mais vous pouvez le copier à partir de la page d’origine, en faisant tout de même attention : il y a une erreur avec un « ?> » qui s’est rajouté à la dernière ligne, et qui met la fonction en erreur. Il ne faut donc pas copier cette dernière ligne.

Avec cette modification, le formulaire pour ajouter un commentaire se déplace bien comme il faut, mais je fais face à un nouveau problème : l’onglet par défaut, celui de TinyMCE, et j’ai perdu le prompt dans le formulaire dans le cas où je réponds à un commentaire précédent.

En mode VISUEL, impossible de taper du texte dans la boite.
En mode TEXTE, le prompt est bien là, et je peux taper du texte.

À ce stade, cela dépasse mes compétences. Mais ai-je vraiment besoin de ce mode VISUEL ? Après tout, le mode TEXTE me suffit largement.

Reste à supprimer cet onglet. Pour cela, il suffira de mettre la partie 'tinymce' => false, comme ceci (à comparer avec la première version plus haut):

function rich_text_comment_form( $args ) {
	ob_start();
	wp_editor( '', 'comment', array(
		'media_buttons' => true, // show insert/upload button(s) to users with permission
		'textarea_rows' => '10', // re-size text area
		'dfw' => false, // replace the default full screen with DFW (WordPress 3.4+)
		'tinymce' => false,
		'quicktags' => array(
 	       'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close'
	    )
	) );
	$args['comment_field'] = ob_get_clean();
	return $args;
} 

Et voilà, je n’ai plus que l’éditeur « Quicktags » d’affiché :

Voilà, on peut désormais mettre en forme les commentaires avec les options de base, de façon simple et sans avoir ajouté un plugin somme toute inutile pour mes besoins.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *