Añadir una función jQuery a las páginas de administración

Question

Añadir una función jQuery a las páginas de administración

27 jul 2011, 20:17:46

Vistas: 13.5K

Votos: 3

Necesito añadir un código jQuery con document ready a los editores de entradas/páginas en el administrador. Estoy modificando un plugin antiguo que añade un cuadro de texto a la página del editor y maneja la inserción de ese texto en un archivo de plantilla, pero el input de texto solo acepta HTML; esta función document ready añade la clase mceEditor al cuadro de texto. La función funciona cuando la incluyo manualmente en admin-header.php, pero no puedo hacer eso, obviamente.

No creo que necesite encolarla, ya que no es una librería. ¿O sí? Y, si es aplicable: ¿cuáles son los pros/contras de las diferentes formas de añadirla?

Entonces, ¿cómo puedo enganchar esto o cargarlo en los editores de entradas/páginas en el administrador? Necesita ir en el archivo del plugin, no en 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

desarrollo de plugins wp admin jquery

Todas las respuestas a la pregunta

Hace algún tiempo necesitaba algo como esto, esto es lo que usé:

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

En ese momento, simplemente lo enganché a la acción admin_head, ahora sé que hay un montón de acciones. Quizás en este caso sería mejor engancharlo a la acción admin_print_scripts:

add_action('admin_print_scripts', 'admin_js');

Nota: Esto imprimirá el script en la página, si quieres mantenerlo en un archivo externo tendrás que encolarlo:

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

Y en tu archivo admin-js.js, el 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");
         }
    });

Estoy usando ambos métodos en páginas de opciones y ambos funcionan sin problemas.

Mario

413

27 jul 2011 20:31:51

Comentarios

El hook de salida de script apropiado es admin_print_scripts para todas partes o admin_print_scripts-$hook_suffix dinámico para una página específica.

Rarst

27 jul 2011 20:52:10

@Rarst, para jQuery en realidad prefiero admin_footer, porque en admin_print_scripts jQuery no siempre funciona.

Ewout

26 ago 2015 12:08:00

Comentarios

Buenos puntos, haré esto. ¿Estás editando a alguien más llamado Mark Duncan, o una cuenta diferente para ti? :)

markratledge

4 ago 2011 01:48:50

Tengo una cuenta secundaria que uso cuando estoy en una PC que no es la mía, me hace sentir un poco más seguro cuando estoy en el sistema de otra persona. :)

t31os

4 ago 2011 23:22:48

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

Sería más inclinado a simplemente hacer un enqueue único y listo...

Significa que tienes que gestionar un archivo adicional (el archivo JS), pero cuando estás escribiendo código, usualmente es una buena idea crear alguna forma de organización con tus archivos (o al menos adquirir el hábito de hacerlo), es decir, javascript/jquery en una carpeta, css en otra, manteniendo PHP y HTML en tus archivos PHP principales del plugin.

Así que mi sugerencia sería mover el jQuery a un archivo js, luego ejecutar un enqueue configurando jQuery como dependencia, pero sin necesidad de registrarlo para una llamada única.

Hay bastantes opciones con respecto a los hooks, pero personalmente usaría...

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__ ),  // Ruta al archivo
        array( 'jquery' )                             // Dependencias
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

Simplemente ajusta las páginas donde necesitas que se ejecute el enqueue - en la llamada in_array().