Adăugarea unei funcții jQuery în paginile de administrare WordPress

Question

Adăugarea unei funcții jQuery în paginile de administrare WordPress

27 iul. 2011, 20:17:46

Vizualizări: 13.5K

Voturi: 3

Am nevoie să adaug un cod jQuery document ready în editorul de pagini/articole din administrarea WordPress. Modific un plugin vechi care adaugă o casetă de text în pagina editorului și gestionează inserarea acelui text într-un fișier template, dar input-ul de text acceptă doar HTML; această funcție document ready adaugă clasa mceEditor la caseta de text. Funcția funcționează când o includ manual în admin-header.php, dar nu pot face asta, evident.

Nu cred că trebuie să-l încarc prin enqueue, deoarece nu este o bibliotecă. Sau poate trebuie? Și, dacă e cazul: care sunt avantajele/dezavantajele diferitelor metode de a-l adăuga?

Cum pot să conectez acest cod sau să-l încarc în editorul de pagini/articole din admin? Trebuie să fie inclus în fișierul plugin-ului, nu în functions.php din 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

dezvoltare de plugin wp admin jquery

Toate răspunsurile la întrebare

Acum ceva timp aveam nevoie de ceva similar și iată ce am folosit:

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');

La momentul respectiv, am conectat funcția la acțiunea admin_head, însă acum știu că există o multitudine de acțiuni. Probabil în acest caz ar fi mai bine să o conectăm la acțiunea admin_print_scripts:

add_action('admin_print_scripts', 'admin_js');

Notă: Acest lucru va afișa scriptul direct în pagină. Dacă doriți să-l păstrați într-un fișier extern, va trebui să-l înregistrați și să-l încărcați:

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');

Iar în fișierul admin-js.js, codul 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");
         }
    });

Folosesc ambele metode pe paginile de setări și ambele funcționează fără probleme.

Mario

413

27 iul. 2011 20:31:51

Comentarii

Hook-ul adecvat pentru afișarea scripturilor este admin_print_scripts pentru orice pagină sau admin_print_scripts-$hook_suffix dinamic pentru o pagină specifică.

Rarst

27 iul. 2011 20:52:10

@Rarst, pentru jQuery eu prefer admin_footer, deoarece în admin_print_scripts jQuery nu funcționează întotdeauna.

Ewout

26 aug. 2015 12:08:00

Comentarii

Puncte bune, voi face asta. Și editezi pe cineva numit Mark Duncan, sau e un alt cont al tău? :)

markratledge

4 aug. 2011 01:48:50

Am un cont secundar pe care îl folosesc când utilizez un PC care nu este al meu, mă simt puțin mai în siguranță când sunt pe sistemul altcuiva. :)

t31os

4 aug. 2011 23:22:48

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

Aș fi înclinat să fac o încărcare unică (one off enqueue) și să termin cu asta.

Înseamnă că trebuie să gestionezi un fișier suplimentar (fișierul JS), dar atunci când scrii cod, de obicei este o idee bună să creezi o formă de organizare cu fișierele tale (sau cel să te obișnuiești să faci asta), de ex. JavaScript/jQuery într-un folder, CSS în altul, păstrând PHP și HTML în fișierele tale principale de plugin PHP.

Deci sugestia mea ar fi să muti jQuery într-un fișier js, apoi să rulezi o încărcare (enqueue) setând jQuery ca dependință, dar fără a fi nevoie să-l înregistrezi pentru un apel unic.

Există destul de multe opțiuni în ceea ce privește hook-urile, dar personal aș alege...

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__ ),  // Calea către fișier
        array( 'jquery' )                             // Dependințe
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

Pur și simplu ajustează paginile pe care ai nevoie să ruleze încărcarea - în apelul in_array().