web-dev-qa-db-fra.com

Comment modifier les options de la boîte de dialogue de l'éditeur d'image sur WordPress?

J'essaie de masquer les boutons radio Alignement pour les images téléchargées dans la zone de contenu du message, mais je ne vois pas comment ajouter un fichier CSS ou JS personnalisé à la boîte de dialogue Editeur d'images.

J'ai réussi à ajouter un filtre au crochet d'action tiny_mce_before_init pour supprimer les boutons d'alignement de l'éditeur de texte TinyMCE, mais je ne sais pas comment faire de même avec l'éditeur d'images.

enter image description here

J'ai essayé un hack jQuery, mais cela ne semble pas prendre:

$('.mceWrapper iframe').load( function() {
    $(this).contents().find('tr.align').hide();
});
8
handstand

En le regardant en détail, il semble que vous ne pouvez pas modifier l'éditeur d'images uniquement dans certains détails. La seule chose à faire est de remplacer l'éditeur d'images par une copie légèrement modifiée. J'expliquerai sous peu comment cela peut être fait.

Mais avant cela, un mot d'avertissement. L'éditeur d'images est actuellement (2/2014) travaillé, donc cette solution ne fonctionnera probablement pas à partir de la prochaine version de WordPress sans autre modification.

Une dernière remarque: il serait probablement préférable que vous mettiez cela dans un plugin et non dans votre thème. Quoi qu'il en soit, pour raccourcir cette réponse, j'explique comment mettre cela dans votre thème.

1. Supprimer l'éditeur d'image par défaut

add_filter( 'tiny_mce_plugins', 'remove_wpeditimage', 10, 2 );

function remove_wpeditimage($plugins){
    if(($key = array_search('wpeditimage', $plugins)) !== false) {
        unset($plugins[$key]);
    }
    if(($key = array_search('teeny_mce_plugins', $plugins)) !== false) {
        unset($plugins[$key]);
    }
    return $plugins;
}

2. Copier et changer l'éditeur d'images

Copiez wp-includes/js/tinymce/plugins/wpeditimage dans votre dossier de thèmes.

Modifiez-le comme vous le souhaitez. Le moyen le plus simple de supprimer les options d’alignement consiste à modifier la ligne 55 de

<tr class="align">

à

<tr class="align" style="display:none;">

3. Ajouter l'éditeur d'image modifié

add_filter('mce_external_plugins', 'add_customized_wpeditimage');

function add_customized_wpeditimage($plugins) {
    $plugins[ 'wpeditimage' ] = get_template_directory_uri() . '/wpeditimage/editor_plugin.js';
    return $plugins;
}
2
kraftner