Es:Function Reference/wp enqueue script

来自WordPress中文文档
跳转至: 导航搜索

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

tt$handle/tt
(string) (requerido) Nombre del script. Cadena en minúsculas.
Default: Nonenoinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Notes

This template is for standardizing how parameters look in the Function Reference and in Template Tags. Here is an example of this template being called: prenowiki检查到模板循环:模板:Parameter/nowiki/pre 检查到模板循环:模板:Parameter

The usage of this template is below: prenowiki检查到模板循环:模板:Parameter/nowiki/pre Let's take a closer look at the parameters..

name
The name of the parameter.
datatype
The datatype that should be given for this parameter when called.
  • string
  • integer
  • boolean
  • mixed
description
A short description of the parameter.
importance
Set this parameter to optional if the parameter is optional. Otherwise, do not declare this parameter—it defaults to required.
  • required
  • optional
default
If this parameter is optional, ttdefault/tt is the value that will be used if the parameter is not declared.

wordpress.org.cn /div /noinclude

tt$src/tt
(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: Nonenoinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Notes

This template is for standardizing how parameters look in the Function Reference and in Template Tags. Here is an example of this template being called: prenowiki检查到模板循环:模板:Parameter/nowiki/pre 检查到模板循环:模板:Parameter

The usage of this template is below: prenowiki检查到模板循环:模板:Parameter/nowiki/pre Let's take a closer look at the parameters..

name
The name of the parameter.
datatype
The datatype that should be given for this parameter when called.
  • string
  • integer
  • boolean
  • mixed
description
A short description of the parameter.
importance
Set this parameter to optional if the parameter is optional. Otherwise, do not declare this parameter—it defaults to required.
  • required
  • optional
default
If this parameter is optional, ttdefault/tt is the value that will be used if the parameter is not declared.

wordpress.org.cn /div /noinclude

tt$deps/tt
(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()noinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Notes

This template is for standardizing how parameters look in the Function Reference and in Template Tags. Here is an example of this template being called: prenowiki检查到模板循环:模板:Parameter/nowiki/pre 检查到模板循环:模板:Parameter

The usage of this template is below: prenowiki检查到模板循环:模板:Parameter/nowiki/pre Let's take a closer look at the parameters..

name
The name of the parameter.
datatype
The datatype that should be given for this parameter when called.
  • string
  • integer
  • boolean
  • mixed
description
A short description of the parameter.
importance
Set this parameter to optional if the parameter is optional. Otherwise, do not declare this parameter—it defaults to required.
  • required
  • optional
default
If this parameter is optional, ttdefault/tt is the value that will be used if the parameter is not declared.

wordpress.org.cn /div /noinclude

tt$ver/tt
(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: falsenoinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Notes

This template is for standardizing how parameters look in the Function Reference and in Template Tags. Here is an example of this template being called: prenowiki检查到模板循环:模板:Parameter/nowiki/pre 检查到模板循环:模板:Parameter

The usage of this template is below: prenowiki检查到模板循环:模板:Parameter/nowiki/pre Let's take a closer look at the parameters..

name
The name of the parameter.
datatype
The datatype that should be given for this parameter when called.
  • string
  • integer
  • boolean
  • mixed
description
A short description of the parameter.
importance
Set this parameter to optional if the parameter is optional. Otherwise, do not declare this parameter—it defaults to required.
  • required
  • optional
default
If this parameter is optional, ttdefault/tt is the value that will be used if the parameter is not declared.

wordpress.org.cn /div /noinclude

tt$in_footer/tt
(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: falsenoinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Notes

This template is for standardizing how parameters look in the Function Reference and in Template Tags. Here is an example of this template being called: prenowiki检查到模板循环:模板:Parameter/nowiki/pre 检查到模板循环:模板:Parameter

The usage of this template is below: prenowiki检查到模板循环:模板:Parameter/nowiki/pre Let's take a closer look at the parameters..

name
The name of the parameter.
datatype
The datatype that should be given for this parameter when called.
  • string
  • integer
  • boolean
  • mixed
description
A short description of the parameter.
importance
Set this parameter to optional if the parameter is optional. Otherwise, do not declare this parameter—it defaults to required.
  • required
  • optional
default
If this parameter is optional, ttdefault/tt is the value that will be used if the parameter is not declared.

wordpress.org.cn /div /noinclude

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

includeonlydiv style=clear:both; background-color:#EEEEFF; border:1px solid #CCCCCC; color:#000000; padding:7px; margin:0.5em auto 0.5em auto; vertical-align:middle;This article is marked as in need of editing. You can help Codex by editing it./div/includeonlynoinclude

Description

This Template is used by Codex:Template Messages.

Usage

pre 检查到模板循环:模板:Message /pre

Result

检查到模板循环:模板:Message

/noinclude