Ajouter des quicktags dans l’éditeur de texte WordPress

Pour ajouter des éléments dans l’éditeur de texte de votre backoffice WordPress, vous devez utiliser l’API « quicktags » fournie par WP (ou utiliser un plugin).
Si vous souhaitez le faire par vous-même, partons à l’assaut de la doc’.

Ajouter des quicktags à l’éditeur de texte WordPress

D’après la doc’, voici l’usage :

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

Et les paramètres:

id
(string) (requis) L’id html du bouton.

Par défaut: None

display
(string) (requis) La valeur à l’affichage du bouton.

Par défaut: None

arg1
(string) (requis) Soit une balise de début pour être inséré comme « <span> » ou un rappel qui est exécuté lorsque le bouton est cliqué.

Par défaut: None

arg2
(string) (optionnel) Tag de fin comme « </ span> ». Laisser vide si le tag n’a pas besoin d’être fermé (comme « <hr /> »).

Par défaut: None

access_key
(string) (optionnel) Raccourci clavier pour le bouton.

Par défaut: None

title
(string) (optionnel) La valeur du title html pour le bouton.

Par défaut: None

priority
(int) (optionnel) Un nombre représentant la position souhaitée de la touche dans la barre d’outils. 1 – 9 = premier, 11-19 = second, de 21 à 29 = troisième, etc

Par défaut: None

instance
(string) (optionnel) Limiter le bouton pour une instance spécifique de Quicktags, ajouter dans toutes les instances s’il n’est pas présent.

Par défaut: None

Exemples d’utilisation

Par exemple, si vous souhaitez ajouter <pre lang= »php »> comme choix dans votre éditeur au clic sur « balise php », vous pouvez faire comme ceci:

function ajouter_mes_quicktags()
{ 
?>
	<script type="text/javascript">

	QTags.addButton( 'balise_php', 'balise php', '<pre lang="php">', '</ pre>' );

	</script>
<?php 
}
add_action('admin_print_footer_scripts',  'ajouter_mes_quicktags');

Au second clic sur « balise php », vous refermerez avec </pre>.

En plus complet, vous pouvez faire ceci pour ajouter une balise paragraphe « <p> »:

function ajouter_mes_quicktags()
{ 
?>
	<script type="text/javascript">

	QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1 );

	</script>
<?php 
}
add_action('admin_print_footer_scripts',  'ajouter_mes_quicktags');

N’oubliez pas que seuls l’id, le display et l’arg1 sont obligatoires. Pour un <hr>, vous pouvez donc faire:

QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201 );

ou bien :

QTags.addButton( 'eg_hr', 'balise hr', '<hr />');

Vous savez désormais ajouter des éléments (quicktags) dans votre éditeur de texte WP.

Si vous avez apprécié cet article, n’hésitez pas à le partager sur les réseaux sociaux et/ou de laisser un commentaire ci dessous.

Bon dev à vous 😉