Comment ajouter des boutons supplémentaires a l’éditeur HTML de WordPress

Dans se mini tuto nous allons voir comment ajouter des boutons supplémentaires dans l’éditeur texte (HTML)  de WordPress, cette astuce vous permettra  d’ajouter rapidement des balises html ou un shortcode par exemple.

Le quicktags API de WordPress est assez simple à utiliser. Ouvrez votre fichier funtion.php de votre thème puis ajoutez le code suivant :

// Ajouter des boutons à l'éditeur html
function html_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_paragraph', 'p', '<p class="style">', '</p>', 'p', 'Paragraphe style 1', 1 );
    QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Ligne horizontale', 201 );
    QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Balise php', 111 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'html_add_quicktags' );

Un autre exemple pour un shortcode :

// Ajouter des boutons à l'éditeur html
function shortcode_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_shortcode', 'shortcode', '[shortcode]', '[/shortcode]', 'shortcode', 'Mon Shortcode', 1 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'shortcode_add_quicktags' );