Com introdueix WordPress correctament JavaScript?Càrrega personalitzada de fitxers JS i CSS

UtilitzeuLloc web de WordPressprogramadors, desenvolupamentConnector de WordPressO quan es personalitza un tema de WordPress, es fa referència a alguns recursos de scripts de JavaScript i CSS.

• En general, la gent utilitza etiquetes d'enllaços, scripts directament per a HTML.
• De fet, WordPress té funcions i mètodes sofisticats integrats per fer referència als scripts.
• Per tant, utilitzar les referències de mètodes integrats de WordPress és més professional i més extensible.

El mètode de citació defectuós

Hi ha dos mètodes de citació comuns, està bé, simplement no és perfecte ni raonable.

Tipus 1:les etiquetes d'enllaç fan referència a fitxers CSS

• Les etiquetes d'script apliquen fitxers JS.No es detalla aquí.

Tipus 2:Utilitzeu la funció wp_head

• La funció wp_head s'utilitza per produir contingut personalitzat o definit pel sistema.
• De vegades fem servir el codi següent per fer referència a aquest fitxer:

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

• Copieu el codi anterior al fitxer functions.php per fer referència als fitxers corresponents.

Mecanisme de recursos dels scripts de cua de WordPress

Com tots sabem, WordPress té molts complements:

• Gairebé tots els connectors fan referència a algun fitxer de recursos.
• Inevitablement, hi haurà conflictes entre els recursos referenciats per dos connectors, que es tornaran inestables i poden afectar l'eficiència.

Utilitzeu la funció wp_enqueue_script

• Per fer referència a un recurs a WordPress, hauríeu d'utilitzarwp_enqueue_scriptUna funció que té la paraula enqueue al nom de la funció a la cua o ordenada.
• Amb aquesta manera de posar en cua els recursos de WordPress (Enqueue Scripts), les referències es separen dels fitxers i del codi bàsic corresponents.
• Si l'usuari vol desactivar el recurs, pot esborrar-lo, modificar-lo i comentar-lo sense modificar-lo des del codi central.

A més, algunes biblioteques d'ús habitual com jQuery, jQuery UI, etc. estan integrades a WordPress.

Podem utilitzar la funció wp_enqueue_script per trucar directament a la biblioteca integrada, que desa codi i una especificació més neta.

Si utilitzeu aquesta funció per fer referència als vostres propis fitxers JS i CSS, haureu de fer-ho servirwp_register_scriptLa funció registra un identificador (handle) i després utilitzawp_enqueue_scriptLa funció crida al recurs corresponent a aquesta bandera.

Com importar correctament fitxers JS i CSS a WordPress?

WordPress proporciona mètodes d'importació raonables per als mètodes JS i CSS.

Podeu utilitzar el codi següent per importar el fitxer plugin.css al connector ▼

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

L'anterior utilitza la funció wp_register_script per crear un recurs amb l'identificador plugin_stylesheet.

A continuació, afegiu les seves sol·licituds a la cuawp_enqueue_scriptsles accions estan en funcionament.

Tot i que el nom de la funció és un script, no té res a veure amb el tipus de fitxer de recursos i és vàlid tant per a CSS com per a JS.

La funció wp_register_script no és tan senzilla, pot tenir cinc paràmetres:

1) $handle:Identificador del recurs.

• 由wp_enqueue_scripttransferència.

2) $src:La ubicació del recurs.

• Les adreces relatives o absolutes utilitzen funcions integrades de WordPress per obtenir adreces, etc.
• ComúPosicionamentfunció téplugins_url,get_template_directory_uriEspera.

3) $deps:confiar.

• Si us referiu al connector jQuery i necessiteu confiar en jQuery per construir, heu d'omplir jQuery.
• Tingueu en compte que es passa com a matriu.

4) $ver:Versió del recurs, opcional.

5) $in_footer:Ho poses a baix?

• Normalment, els fitxers JS s'han de col·locar a la part inferior de la pàgina, podeu establir aquest paràmetre com a Vertader, deixar-lo en blanc o Fals per sortir a la part superior.

Vegem un exemple de referència de fitxers JavaScript més complet ▼

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

Els temes de WordPress utilitzen wp_enqueue_script per importar recursos

Programadors en desenvolupament de temes de WordPress, úswp_enqueue_scriptImporta recursos.

• Els exemples anteriors són exemples de recursos referenciats per al desenvolupament de complements de WordPress.
• El mètode a què es fa referència al tema és similar.

La principal diferència és utilitzar la funció corresponent per obtenir el directori del tema per obtenir l'adreça del fitxer de recursos sota el tema.

pots fer servirget_template_directory_urifunció per obtenir el directori de temes actual.

Si utilitzeu un tema infantil, haureu d'utilitzar-loget_stylesheet_directory_uriLa funció obté el directori del tema principal per obtenir els recursos corresponents.