web-dev-qa-db-fra.com

Ajouter une fonction jQuery aux pages d'administration

J'ai besoin d'ajouter un peu de document prêt jQuery pour publier/éditer des pages dans admin. Je pirate un ancien plug-in qui ajoute une zone de texte à la page de l'éditeur et gère l'insertion de ce texte dans un fichier de modèle, mais la saisie de texte n'est que html; Cette fonction de préparation de document ajoute la classe de mceEditor à la zone de texte. Cette fonction fonctionne lorsque je l'inclue manuellement dans admin-header.php, mais je ne peux pas le faire, bien sûr.

Je ne pense pas avoir besoin de le mettre en file d'attente, car ce n'est pas une bibliothèque. Ou je Et, le cas échéant: quels sont les avantages/inconvénients des différentes manières de l'ajouter?

Alors, comment puis-je accrocher ceci ou le charger de toute autre manière dans les éditeurs de post/page dans admin? Il doit aller dans le fichier plugin, pas dans functions.php dans le thème.

<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>
plugin-developmentwp-adminjquery
3
markratledge

Je serais enclin à faire une mise en file d'attente unique et à en finir avec ça.

Cela signifie que vous devez gérer un fichier supplémentaire (le fichier JS), mais lorsque vous écrivez du code, il est généralement conseillé de créer une forme d'organisation avec vos fichiers (ou au moins de prendre l'habitude de le faire), c'est-à-dire . javascript/jquery dans un dossier, css en est un autre, conservant PHP et HTML dans les fichiers de votre plugin principal PHP.

Donc, ma suggestion serait de déplacer le jQuery dans un fichier js, puis d'exécuter un paramètre de mise en file d'attente jQuery en tant que dépendance, mais il n'est pas nécessaire de l'enregistrer pour un appel unique.

Assez peu de choix en ce qui concerne les crochets, mais personnellement, je choisirais ..

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__ ),  // Path to file
        array( 'jquery' )                             // Dependancies
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

Ajustez simplement les pages sur lesquelles vous avez besoin de la mise en file d'attente - dans l'appel in_array().

5
Mark Duncan

Il y a quelque temps, j'avais besoin de quelque chose comme ça, voici ce que j'ai utilisé:

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

À ce moment-là, je l'avais simplement relié à l'action admin_head, maintenant je sais qu'il y a de nombreuses actions . Dans ce cas, il serait peut-être préférable de l’accrocher à l’action admin_print_scripts:

add_action('admin_print_scripts', 'admin_js');

Remarque: Ceci imprimera le script dans la page. Si vous souhaitez le conserver dans un fichier externe, vous devrez le mettre en file d'attente:

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

Et dans votre fichier admin-js.js, le 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");
         }
    });

J'utilise ces deux méthodes sur les pages d'option et les deux fonctionnent sans problèmes.

5
Mario