¿Cómo introduce correctamente WordPress JavaScript?Carga personalizada de archivos JS y CSS

usositio web de wordpressprogramadores, desarrollandoComplemento de WordPressO al personalizar un tema de WordPress, se hace referencia a algunos recursos de secuencias de comandos de JavaScript y CSS.

• Por lo general, las personas usan enlaces, etiquetas de secuencias de comandos directamente para HTML.
• De hecho, WordPress tiene funciones y métodos sofisticados integrados para hacer referencia a los scripts.
• Por lo tanto, usar las referencias de métodos integradas de WordPress es más profesional y más extensible.

El método de cita defectuoso

Hay dos métodos de citas comunes, está bien, pero no es perfecto ni razonable.

Tipo 1:las etiquetas de enlace se refieren a archivos CSS

• Las etiquetas de script aplican archivos JS.No detallado aquí.

Tipo 2:Usa la función wp_head

• La función wp_head se utiliza para generar contenido personalizado o definido por el sistema.
• A veces usamos el siguiente código para hacer referencia a este archivo:

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

• Copie el código anterior en el archivo functions.php para hacer referencia a los archivos correspondientes.

Mecanismo de recursos de WordPress Enqueue Scripts

Como todos sabemos, WordPress tiene muchos complementos:

• Casi todos los complementos hacen referencia a algún archivo de recursos.
• Inevitablemente, habrá conflictos entre los recursos a los que hacen referencia dos complementos, lo que se volverá inestable y puede afectar la eficiencia.

Usa la función wp_enqueue_script

• Para hacer referencia a un recurso en WordPress debe utilizarwp_enqueue_scriptUna función que tiene la palabra poner en cola en el nombre de la función en cola u ordenada.
• Con la forma de WordPress de poner en cola los recursos (Enqueue Scripts), las referencias se separan de los archivos correspondientes y del código central.
• Si el usuario desea deshabilitar el recurso, puede eliminarlo, modificarlo y comentarlo sin modificarlo desde el código principal.

Además, algunas bibliotecas de uso común como jQuery, jQuery UI, etc. están integradas en WordPress.

Podemos usar la función wp_enqueue_script para llamar directamente a la biblioteca integrada, lo que ahorra código y una especificación más limpia.

Si usa esta función para hacer referencia a sus propios archivos JS y CSS, debe usarwp_register_scriptLa función registra un identificador (manejador) y luego usawp_enqueue_scriptLa función llama al recurso correspondiente a esta bandera.

¿Cómo importar correctamente archivos JS y CSS en WordPress?

WordPress proporciona métodos de importación sensibles para los métodos JS y CSS.

Puede usar el siguiente código para importar el archivo plugin.css al 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' ); 
?>

Lo anterior usa la función wp_register_script para crear un recurso con el identificador plugin_stylesheet.

Luego, agregue sus solicitudes en cola awp_enqueue_scriptslas acciones están en funcionamiento.

Aunque el nombre de la función es un script, no tiene nada que ver con el tipo de archivo de recursos y es válido tanto para CSS como para JS.

La función wp_register_script realmente no es tan simple, puede tener cinco parámetros:

1) $ manejar:Identificador de recursos.

• 由wp_enqueue_scripttransferir.

2) $origen:La ubicación del recurso.

• Las direcciones relativas o absolutas utilizan las funciones integradas de WordPress para obtener direcciones, etc.
• ComúnPosicionamientofunción tieneplugins_url,get_template_directory_uriEspera

3) $depósitos:confiar.

• Si se refiere al complemento jQuery y necesita confiar en la compilación jQuery, debe completar jQuery.
• Tenga en cuenta que se pasa como una matriz.

4) $ ver:Versión de recursos, opcional.

5) $en_pie de página:¿Lo pones en la parte inferior?

• Normalmente, los archivos JS deben colocarse en la parte inferior de la página, puede establecer este parámetro en Verdadero, déjelo en blanco o Falso para mostrar en la parte superior.

Veamos un ejemplo de referencia de archivo JavaScript más 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' ); 
?>

Los temas de WordPress usan wp_enqueue_script para importar recursos

Los programadores en el desarrollo de temas de WordPress, utilizanwp_enqueue_scriptImportar recursos.

• Los ejemplos anteriores son ejemplos de recursos a los que se hace referencia para el desarrollo de complementos de WordPress.
• El método al que se hace referencia en el tema es similar.

La principal diferencia es usar la función correspondiente para obtener el directorio del tema para obtener la dirección del archivo de recursos bajo el tema.

puedes usarget_template_directory_urifunción para obtener el directorio del tema actual.

Si está utilizando un tema secundario, deberá utilizarget_stylesheet_directory_uriLa función obtiene el directorio del tema principal para obtener los recursos correspondientes.