Aggiungere una funzione jQuery alle pagine di amministrazione

Question

Aggiungere una funzione jQuery alle pagine di amministrazione

27 lug 2011, 20:17:46

Visualizzazioni: 13.5K

Voti: 3

Devo aggiungere una funzione jQuery document ready agli editor di post/pagine nell'area di amministrazione. Sto modificando un vecchio plugin che aggiunge una casella di testo alla pagina dell'editor e gestisce l'inserimento di quel testo in un file template, ma l'input di testo accetta solo html; questa funzione document ready aggiunge la classe mceEditor alla casella di testo. La funzione funziona quando la includo manualmente in admin-header.php, ma ovviamente non posso farlo.

Non credo di doverla enqueue, dato che non è una libreria. O forse sì? E, se applicabile: quali sono i pro/contro dei diversi modi per aggiungerla?

Quindi come posso agganciare questo codice o comunque caricarlo negli editor di post/pagine in admin? Deve andare nel file del plugin, non in functions.php del tema.

<script type="text/javascript">

jQuery(document).ready( function () { 
    jQuery("#dt-additional-info").addClass("mceEditor"); 
    if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
        jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
        tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
    }
});

</script>

markratledge

8.74K

sviluppo plugin wp admin jquery

Tutte le risposte alla domanda

Qualche tempo fa avevo bisogno di qualcosa del genere, ecco cosa ho usato:

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

        jQuery(document).ready( function () { 
           jQuery("#dt-additional-info").addClass("mceEditor"); 
           if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
               jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
               tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
        });

    </script>
<?php }
add_action('admin_head', 'admin_js');

A quel tempo, l'ho semplicemente agganciato all'azione admin_head, ora so che esistono molte altre azioni. Forse in questo caso sarebbe meglio agganciarlo all'azione admin_print_scripts:

add_action('admin_print_scripts', 'admin_js');

Nota: Questo stamperà lo script nella pagina, se vuoi mantenerlo in un file esterno dovrai metterlo in coda:

function admin_js() {
    wp_register_script('admin_js', plugins_url( .'/yourplugin/admin-js.js' . ),  array('jquery'));
    wp_enqueue_script('admin_js');
}
add_action('admin_enqueue_scripts', 'admin_js');

E nel tuo file admin-js.js, il javascript:

    jQuery(document).ready( function () { 
       jQuery("#dt-additional-info").addClass("mceEditor"); 
       if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
           jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
           tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
    });

Sto usando entrambi questi metodi nelle pagine di opzioni e funzionano entrambi senza problemi.

Mario

413

27 lug 2011 20:31:51

Commenti

L'hook appropriato per l'output degli script è admin_print_scripts per ovunque o admin_print_scripts-$hook_suffix dinamico per una pagina specifica.

Rarst

27 lug 2011 20:52:10

@Rarst, per jQuery preferisco effettivamente admin_footer, perché in admin_print_scripts jQuery non funziona sempre.

Ewout

26 ago 2015 12:08:00

Commenti

Ottimi punti, lo farò. E stai modificando qualcun altro di nome Mark Duncan, o un account diverso per te stesso? :)

markratledge

4 ago 2011 01:48:50

Ho un account secondario che uso quando utilizzo un PC non mio, mi fa sentire un po' più al sicuro quando sono sul sistema di qualcun altro. :)

t31os

4 ago 2011 23:22:48

t31os 18.7K · Accepted Answer · 2011-07-27T21:09:48Z

Sarei propenso a fare semplicemente un enqueue una tantum e basta...

Significa che devi gestire un file aggiuntivo (il file JS), ma quando scrivi codice è generalmente una buona idea creare una qualche forma di organizzazione con i tuoi file (o almeno abituarti a farlo), ad esempio. javascript/jquery in una cartella, css in un'altra, mantenendo PHP e HTML nei tuoi file PHP principali del plugin.

Quindi il mio suggerimento sarebbe spostare jQuery in un file js, quindi eseguire un enqueue impostando jQuery come dipendenza, ma senza bisogno di registrarlo per una chiamata una tantum.

Diverse scelte riguardo agli hook, ma personalmente opterei per...

function yournamespace_enqueue_scripts( $hook ) {

    if( !in_array( $hook, array( 'post.php', 'post-new.php' ) )
        return;

    wp_enqueue_script( 
        'your_script_handle',                         // Handle
        plugins_url( '/yourfilename.js', __FILE__ ),  // Percorso al file
        array( 'jquery' )                             // Dipendenze
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

Basta semplicemente adattare le pagine su cui vuoi che l'enqueue venga eseguito - nella chiamata in_array().