Como introduce WordPress correctamente JavaScript?Carga personalizada de ficheiros JS e CSS

Para usarSitio web de WordPressprogramadores, desenvolvementoComplemento de WordPressOu ao personalizar un tema de WordPress, fai referencia a algúns recursos de scripts de JavaScript e CSS.

• Normalmente, a xente usa enlaces, etiquetas de script directamente para HTML.
• De feito, WordPress incorpora funcións e métodos sofisticados para facer referencia a scripts.
• Polo tanto, usar as referencias de métodos incorporados de WordPress é máis profesional e máis extensible.

O método de cita defectuoso

Hai dous métodos de citas comúns, está ben, simplemente non é perfecto nin razoable.

Tipo 1:as etiquetas de ligazón refírense a ficheiros CSS

• As etiquetas de script aplican ficheiros JS.Non se detalla aquí.

Tipo 2:Use a función wp_head

• A función wp_head úsase para producir contido personalizado ou definido polo sistema.
• Ás veces usamos o seguinte código para facer referencia a este ficheiro:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Copia o código anterior no ficheiro functions.php para facer referencia aos ficheiros correspondentes.

Mecanismo de recursos de WordPress Enqueue Scripts

Como todos sabemos, WordPress ten moitos complementos:

• Case todos os complementos fan referencia a algún ficheiro de recursos.
• Inevitablemente, haberá conflitos entre os recursos referenciados por dous complementos, que se volverán inestables e poden afectar á eficiencia.

Use a función wp_enqueue_script

• Para facer referencia a un recurso en WordPress debes usarwp_enqueue_scriptUnha función que ten a palabra enqueue no nome da función en cola ou ordenada.
• Coa forma de poñer en cola de recursos de WordPress (Enqueue Scripts), as referencias sepáranse dos ficheiros e do código principal correspondentes.
• Se o usuario quere desactivar o recurso, pode borralo, modificalo e comentalo sen modificalo desde o código principal.

Ademais, algunhas bibliotecas de uso común como jQuery, jQuery UI, etc. están integradas en WordPress.

Podemos usar a función wp_enqueue_script para chamar directamente á biblioteca integrada, que garda código e unha especificación máis clara.

Se usa esta función para facer referencia aos seus propios ficheiros JS e CSS, cómpre usalawp_register_scriptA función rexistra un identificador (handle) e despois usawp_enqueue_scriptA función chama ao recurso correspondente a esta marca.

Como importar correctamente ficheiros JS e CSS en WordPress?

WordPress ofrece métodos de importación sensatos para métodos JS e CSS.

Podes usar o seguinte código para importar o ficheiro plugin.css ao complemento ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

O anterior usa a función wp_register_script para crear un recurso co identificador plugin_stylesheet.

A continuación, engade as súas solicitudes en cola awp_enqueue_scriptsaccións están en funcionamento.

Aínda que o nome da función é un script, non ten nada que ver co tipo de ficheiro de recursos e é válido tanto para CSS como para JS.

A función wp_register_script non é tan sinxela, pode ter cinco parámetros:

1) $handle:Identificador de recurso.

• 由wp_enqueue_scripttransferencia.

2) $src:A localización do recurso.

• Os enderezos relativos ou absolutos usan funcións integradas de WordPress para obter enderezos, etc.
• ComúnPosicionamentofunción tenplugins_url,get_template_directory_uriAgarda.

3) $deps:confiar.

• Se te refires ao complemento jQuery e necesitas confiar en jQuery para construír, debes encher jQuery.
• Teña en conta que se pasa como unha matriz.

4) $ver:Versión do recurso, opcional.

5) $in_footer:Póñase na parte inferior?

• Normalmente, os ficheiros JS deberían colocarse na parte inferior da páxina, pode establecer este parámetro como True, deixalo en branco ou False para saír na parte superior.

Vexamos un exemplo de referencia de ficheiros JavaScript máis completo ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

Os temas de WordPress usan wp_enqueue_script para importar recursos

Programadores no desenvolvemento de temas WordPress, usowp_enqueue_scriptImportar recursos.

• Os exemplos anteriores son exemplos de recursos referenciados para o desenvolvemento de complementos de WordPress.
• O método referido no tema é semellante.

A principal diferenza é usar a función correspondente para obter o directorio do tema para obter o enderezo do ficheiro de recursos baixo o tema.

podes usarget_template_directory_urifunción para obter o directorio do tema actual.

Se estás a usar un tema infantil, terás que utilizaloget_stylesheet_directory_uriA función obtén o directorio do tema principal para obter os recursos correspondentes.