Come modificare le opzioni della finestra di dialogo dell'editor di immagini su WordPress?

Sto cercando di nascondere i pulsanti di opzione Allineamento per le immagini caricate nell'area del contenuto del post, ma non riesco a capire come aggiungere un file CSS o JS personalizzato alla finestra di dialogo Editor di immagini.

Ho aggiunto con successo un filtro al gancio di azione tiny_mce_before_init per rimuovere i pulsanti di allineamento dall'editor di testo TinyMCE, ma non sono sicuro di come fare lo stesso con l'editor di immagini.

Ho provato un hack jQuery, ma non sembra prendere:

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

Guardandolo in dettaglio sembra che non sia possibile modificare l'editor di immagini solo in alcuni dettagli. L'unica cosa che puoi fare è sostituire l'editor di immagini con una copia leggermente modificata. Spiegherò tra poco come si può fare.

Ma prima una parola di avvertimento. L'Editor di immagini è attualmente al lavoro (2/2014), quindi questa soluzione probabilmente non funzionerà dalla prossima versione di WordPress senza ulteriori modifiche.

Un'ultima nota: sarebbe decisamente meglio se lo inserissi in un plugin e non nel tuo tema. Comunque, per abbreviare questa risposta spiego come inserirla nel tuo tema.

1. Rimuovere l'editor di immagini predefinito

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. Copia e modifica l'editor di immagini

Copia wp-Includes / js / tinymce / plugins / wpeditimage nella cartella del tuo tema.

Modificalo come preferisci. Il modo più semplice per sbarazzarsi delle opzioni di allineamento sarebbe cambiare la linea 55 da

<tr class="align">

per

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

3. Aggiungi l'editor di immagini modificato

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;
}

La funzione che stai cercando per aggiungere CSS all'editor MCE si chiama add_editor_style . Ho provato a farlo funzionare, ma un veloce hack di cinque minuti non ha funzionato per me. Secondo il codice questo è il modo giusto di farlo.

Puoi semplicemente nasconderlo con il tuo CSS. Se il tuo tema ha un file css per il tuo pannello di amministrazione (per moduli personalizzati, ecc.), Aggiungi semplicemente questo file;

#img-edit tr.align { display:none; }

Se il tuo tema non ha un file CSS per la dashboard di amministrazione, puoi invece inserirlo nel functions.phpfile dei temi ;

add_action( 'admin_head', 'so4513579_hide-img-alignment' );

function so4513579_hide-img-alignment() {
    echo "<style> #img-edit tr.align { display:none; } </style>";
}

Nota che il valore di allineamento verrà comunque salvato come qualunque fosse prima della modifica.