WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

es:Referencia de Funciones/wp enqueue script

Descripción

Una forma segura de añadir JavaScripts a una página generada por WordPress.

Uso

<?php wp_enqueue_script$handle$src$deps$ver$in_footer ); ?>

Parámetros

$handle
(string) (requerido) Nombre del script. Cadena en minúsculas.
Default: None
$src
(string) (opcional) URL del script. Ejemplo: "http://example.com/wp-includes/js/scriptaculous/scriptaculous.js". Este parámetro solo es necesario cuando WordPress no conoce, todavía, el script.
Default: None
$deps
(array) (opcional) Array de manejadores de cualquier script del que tenga dependencias este script; scripts que deban ser cargados previamente. False si no hay dependencias. Este parámetro solo se necesita cuando WordPress no conoce ya el script.
Default: array()
$ver
(string) (opcional) Cadena que especifica la versión del script, si tiene una. Por defecto; false. Este parámetro se usa para asegurarse de que se envía al cliente la versión correcta, independientemente de cachés, de esta forma podría incluirse si hay un número de versión disponible y tiene sentido para el script.
Default: false
$in_footer
(boolean) (opcional) Normalmente los scripts se colocan en la sección <head>. Si este parámetro se pone en true, el script se colocará en al final del <body>. Para ello, el tema tiene que disponer del gancho wp_footer() en el sitio apropiado. Note que usted tiene que poner en la cola a su script para que se ejecute antes que wp_head, incluso si éste se situa en el pie de página. (Nuevo en WordPress 2.8)
Default: false

Ejemplo

Carga de un script por defecto de Wordpress desde una ubicación diferente a la oficial

Suponiendo que usted quisiera utilizar la copia CDN de jQuery en vez de la de WordPress, usted añadiria este códifo a su archivo function.php.

<?php
function my_init_method() {
    
wp_deregister_script'jquery' );
    
wp_register_script'jquery''http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
}    
 
add_action('init''my_init_method');
?>

Carga del script de scriptaculous

<?php
function my_init_method() {
    
wp_enqueue_script('scriptaculous');            
}    
 
add_action('init''my_init_method');
?>

Carga de un script que depende de scriptaculous

Añadir y cargar un script nuevo que depende de scriptaculous (esto también hará que se cargue scriptaculous en la página): <?php
wp_enqueue_script
('newscript',
 
WP_PLUGIN_URL '/someplugin/js/newscript.js',
 array(
'scriptaculous'),
 
'1.0' );
?>

Carga de un script excluyendo el área de admin

Si usted necesita cargar un script personalizado para funcionar solamente en el front end de la bitácora es importante que sepa que utilizando wp_enqueue_script cargará sus scripts para el área de administración también. Esto puede provocar conflictos con otros scripts en éste área. Para evitarlo haga lo siguiente. <?php
if ( !is_admin() ) { // para que solo haga la carga si no es el área de admin
   // registra la ubicación, dependencias y versión de su script.
   
wp_register_script('custom_script',
       
get_bloginfo('template_directory') . '/js/custom_script.js',
       array(
'name_of_script_dependencies'),
       
'1.0' );
   
// pone en cola es script
   
wp_enqueue_script('custom_script');
}
?>

Carga scripts solo en páginas de plugin

<?php

    /*
     * Este ejemplo funcionará a partir de la versión 2.6.3, 
     * puede que en versiones anteriores también.
     */

    add_action('admin_init', 'my_plugin_admin_init');
    add_action('admin_menu', 'my_plugin_admin_menu');
    
    function my_plugin_admin_init()
    {
        /* Registro de nuestro script. */
        wp_register_script('myPluginScript', WP_PLUGIN_URL . '/myPlugin/script.js');
    }
    
    function my_plugin_admin_menu()
    {
        /* Registro de nuestra página de plugin */
        $page = add_submenu_page( 'edit.php', 
                                  __('My Plugin', 'myPlugin'), 
                                  __('My Plugin', 'myPlugin'), 9,  __FILE__, 
                                  'my_plugin_manage_menu');
   
        /* Utilizando el manejador registrado $page para "enganchar" la carga del script */
        add_action('admin_print_scripts-' . $page, 'my_plugin_admin_styles');
    }
    
    function my_plugin_admin_styles()
    {
        /*
         * Será llamado solo en la página de administración de su plugin, ponga en la cola a sus scritps aqui
         */
        wp_enqueue_script('myPluginScript');
    }
    
    function my_plugin_manage_menu()
    {
        /* Salida a su página de adminsitración */
    }
    
?>


Nota: Esta función no funcionará si se la llama desde una acción wp_head, dado que la etiqueta <script> se imprimer antes de que se ejecute wp_head. En su lugar, llame a wp_enqueue_script desde una función de acción init (para cargarla en todas las páginas), template_redirect (para cargarla solo en las páginas públicas), o admin_print_scripts (solo para páginas de administración). No utilice wp_print_scripts (consulte aquí para explicacines).

Contenedores noConflict jQuery

Nota: La librería jQuery incluida en WordPress se carga en modo de "no conflicto". Esto se hace para prevenir problemas de compatibilidad con otras librerías JavaScript que usa WordPress.

Para utilizar el atajo habitual de jQuery $, usted puede utilizar el siguente contenedor al rededor de su código:

jQuery(document).ready(function($) {
    // dentro de esta función $() funcionará como un álias de jQuery()
});

El contenedor hará que el código se ejecuta una vez la página termine de cargarse, y el símbolo $ funcionará llamando a jQuery. Si, por alguna razón, ysted quiere que su código se ejecute inmediatamente (en vez de esperar al evento DOM ready), entonces usted puede utilizar este otro contenedor:

(function($) {
    // dentro de esta función $() funcionará como un álias de jQuery() 
})(jQuery);

Scripts incluidos en WordPress por defecto

Script Name Handle
Scriptaculous Root scriptaculous-root
Scriptaculous Builder scriptaculous-builder
Scriptaculous Drag & Drop scriptaculous-dragdrop
Scriptaculous Effects scriptaculous-effects
Scriptaculous Slider scriptaculous-slider
Scriptaculous Sound scriptaculous-sound
Scriptaculous Controls scriptaculous-controls
Scriptaculous scriptaculous
Image Cropper cropper
SWFObject swfobject
SWFUpload swfupload
SWFUpload Degarade swfupload-degrade
SWFUpload Queue swfupload-queue
SWFUpload Handlers swfupload-handlers
jQuery jquery
jQuery Form jquery-form
jQuery Color jquery-color
jQuery UI Core jquery-ui-core
jQuery UI Tabs jquery-ui-tabs
jQuery UI Sortable jquery-ui-sortable
jQuery UI Draggable jquery-ui-draggable
jQuery UI Droppable jquery-ui-droppable
jQuery UI Selectable jquery-ui-selectable
jQuery UI Resizable jquery-ui-resizable
jQuery UI Dialog jquery-ui-dialog
jQuery Interface interface
jQuery Schedule schedule
jQuery Suggest suggest
ThickBox thickbox
jQuery Hotkeys jquery-hotkeys
Simple AJAX Code-Kit sack
QuickTags quicktags
ColorPicker colorpicker
Tiny MCE tiny_mce
Prototype Framework prototype
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editor
WP Editor Functions editor-functions
AJAX Cat ajaxcat
Admin Categories admin-categories
Admin Tags admin-tags
Admin custom fields admin-custom-fields
Password Strength Meter password-strength-meter
Admin Comments admin-comments
Admin Users admin-users
Admin Forms admin-forms
XFN xfn
Upload upload
PostBox postbox
Slug slug
Post post
Page page
Link link
Comment comment
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
WP Gears wp-gears
Theme Preview theme-preview

Recursos

This article is marked as in need of editing. You can help Codex by editing it.