Hvordan introduserer WordPress JavaScript riktig?Tilpasset lasting av JS- og CSS-filer

Programmerere som bruker WordPress til å bygge nettsteder vil referere til noen JavaScript- og CSS-skriptressurser når de utvikler WordPress-plugins eller tilpasser WordPress-temaer.

• Vanligvis bruker folk link, script-tagger direkte for HTML.
• Faktisk har WordPress innebygde sofistikerte funksjoner og metoder for å referere til skript.
• Så å bruke WordPress' innebygde metodereferanser er mer profesjonelt og mer utvidbart.

Den mangelfulle siteringsmetoden

Det er to vanlige siteringsmetoder, det er greit, det er bare ikke perfekt eller rimelig.

Metode 1: Bruke lenketaggen til å referere til en CSS-fil

• Skript-tagger bruker JS-filer.Ikke detaljert her.

Metode 2: Bruk wp_head-funksjonen

• wp_head-funksjonen brukes til å sende ut noe tilpasset eller systemdefinert innhold.
• Noen ganger bruker vi følgende kode for å referere til denne filen:

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

• Kopier koden ovenfor inn i functions.php-filen for å referere til de tilsvarende filene.

WordPress Enqueue Scripts ressursmekanisme

Som vi alle vet, har WordPress mange plugins:

• Nesten hver plugin refererer til en eller annen ressursfil.
• Uunngåelig vil det være konflikter mellom ressurser referert av to plugins, som vil bli ustabile og kan påvirke effektiviteten.

Bruk funksjonen wp_enqueue_script

• For å referere til en ressurs i WordPress bør du brukewp_enqueue_scriptEn funksjon som har ordet kø i navnet på funksjonen i kø eller sortert.
• Med denne WordPress-måten å sette ressurser i kø (Enqueue Scripts), skilles referansene fra de tilsvarende filene og kjernekoden.
• Hvis brukeren ønsker å deaktivere ressursen, kan han slette, endre og kommentere den uten å endre den fra kjernekoden.

Noen ofte brukte biblioteker som jQuery, jQuery UI, etc. er også innebygd i WordPress.

Vi kan bruke funksjonen wp_enqueue_script til å ringe det innebygde biblioteket direkte, noe som sparer kode og en klarere spesifikasjon.

Hvis du bruker denne funksjonen til å referere til dine egne JS- og CSS-filer, må du brukewp_register_scriptFunksjonen registrerer en identifikator (håndtak) og bruker deretterwp_enqueue_scriptFunksjonen kaller opp ressursen som tilsvarer dette flagget.

Hvordan importere JS- og CSS-filer riktig i WordPress?

WordPress tilbyr fornuftige importmetoder for JS- og CSS-metoder.

Du kan bruke følgende kode for å importere plugin.css-filen til plugin-modulen ▼

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

Ovennevnte bruker funksjonen wp_register_script for å lage en ressurs med identifikatoren plugin_stylesheet.

Deretter legger du til forespørslene i køwp_enqueue_scriptshandlinger er i gang.

Selv om funksjonsnavnet er et skript, har det ingenting å gjøre med typen ressursfil og er gyldig for både CSS og JS.

Funksjonen wp_register_script er egentlig ikke så enkel, den kan ha fem parametere:

1) $handle: Ressursidentifikator.

• 由wp_enqueue_scriptoverføre.

2) $src: Plasseringen av ressursen.

• Relative eller absolutte adresser bruker WordPress innebygde funksjoner for å få adresser osv.
• FellesPosisjoneringfunksjonen harplugins_url,get_template_directory_uri等.

3) $deps: Avhengighet.

• Hvis du refererer til jQuery-pluginen og trenger å stole på jQuery for å bygge, må du fylle ut jQuery.
• Merk at det sendes som en matrise.

4) $ver: Ressursversjon, valgfri.

5) $in_footer: Skal den plasseres nederst?

• Normalt skal JS-filer plasseres nederst på siden, du kan sette denne parameteren til True, la den stå tom eller False for å skrive ut til toppen.

La oss se på et mer fullstendig JavaScript-filreferanseeksempel ▼

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

WordPress-temaer bruker wp_enqueue_script for å importere ressurser

Programmerere i WordPress temautvikling, brukwp_enqueue_scriptImporter ressurser.

• Eksemplene ovenfor er eksempler på refererte ressurser for WordPress-pluginutvikling.
• Metoden det refereres til i emnet er lik.

Hovedforskjellen er å bruke den tilsvarende funksjonen for å få temakatalogen til å få ressursfiladressen under temaet.

du kan brukeget_template_directory_urifunksjon for å få gjeldende temakatalog.

Hvis du bruker et undertema, må du brukeget_stylesheet_directory_uriFunksjonen henter overordnet temas katalog for å få de tilsvarende ressursene.