Hvordan introducerer WordPress korrekt JavaScript?Brugerdefineret indlæsning af JS- og CSS-filer

At brugeWordPress hjemmesideprogrammører, udviklingWordPress pluginEller når du tilpasser et WordPress-tema, henvises der til nogle JavaScript- og CSS-scriptressourcer.

• Normalt bruger folk link, script-tags direkte til HTML.
• Faktisk har WordPress indbyggede sofistikerede funktioner og metoder til at referere til scripts.
• Så brugen af ​​WordPress' indbyggede metodereferencer er mere professionel og mere udvidelsesdygtig.

Den mangelfulde citeringsmetode

Der er to almindelige citeringsmetoder, det er fint, det er bare ikke perfekt eller rimeligt.

Type 1:link-tags henviser til CSS-filer

• Script-tags anvender JS-filer.Ikke detaljeret her.

Type 2:Brug funktionen wp_head

• Funktionen wp_head bruges til at udlæse noget brugerdefineret eller systemdefineret indhold.
• Vi bruger nogle gange følgende kode til at referere til denne fil:

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

• Kopier ovenstående kode ind i functions.php-filen for at referere til de tilsvarende filer.

WordPress Enqueue Scripts ressourcemekanisme

Som vi alle ved, har WordPress en masse plugins:

• Næsten hvert plugin refererer til en eller anden ressourcefil.
• Der vil uundgåeligt være konflikter mellem ressourcer, der refereres til af to plugins, som bliver ustabile og kan påvirke effektiviteten.

Brug funktionen wp_enqueue_script

• For at referere til en ressource i WordPress skal du brugewp_enqueue_scriptEn funktion, der har ordet kø i navnet på den i kø eller sorterede funktion.
• Med denne WordPress måde at sætte ressourcer i kø (Enqueue Scripts) er referencerne adskilt fra de tilsvarende filer og kernekode.
• Hvis brugeren ønsker at deaktivere ressourcen, kan han slette, ændre og kommentere den uden at ændre den fra kernekoden.

Også nogle almindeligt anvendte biblioteker som jQuery, jQuery UI osv. er indbygget i WordPress.

Vi kan bruge wp_enqueue_script-funktionen til at kalde det indbyggede bibliotek direkte, hvilket gemmer kode og en renere specifikation.

Hvis du bruger denne funktion til at referere til dine egne JS- og CSS-filer, skal du brugewp_register_scriptFunktionen registrerer en identifikator (håndtag) og bruger derefterwp_enqueue_scriptFunktionen kalder den ressource, der svarer til dette flag.

Hvordan importerer man JS- og CSS-filer korrekt i WordPress?

WordPress leverer fornuftige importmetoder til JS- og CSS-metoder.

Du kan bruge følgende kode til at importere filen plugin.css til pluginnet ▼

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

Ovenstående bruger wp_register_script-funktionen til at oprette en ressource med identifikatoren plugin_stylesheet.

Tilføj derefter dens anmodninger i kø tilwp_enqueue_scriptshandlinger er i gang.

Selvom funktionsnavnet er et script, har det intet at gøre med typen af ​​ressourcefil og er gyldigt for både CSS og JS.

Funktionen wp_register_script er virkelig ikke så enkel, den kan have fem parametre:

1) $handle:Ressource-id.

• 由wp_enqueue_scriptoverførsel.

2) $src:Placeringen af ​​ressourcen.

• Relative eller absolutte adresser bruger WordPress indbyggede funktioner til at få adresser osv.
• almindeligePositioneringfunktion harplugins_url,get_template_directory_uri等.

3) $deps:stole på.

• Hvis du henviser til jQuery-plugin'et og har brug for at stole på jQuery-builden, skal du udfylde jQuery.
• Bemærk, at det sendes som et array.

4) $ver:Ressourceversion, valgfri.

5) $in_footer:Sætter du den nederst?

• Normalt skal JS-filer placeres nederst på siden, du kan indstille denne parameter til True, lade den være tom eller False for at udskrive til toppen.

Lad os se på et mere komplet JavaScript-filreferenceeksempel ▼

<?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 bruger wp_enqueue_script til at importere ressourcer

Programmører i WordPress temaudvikling, brugwp_enqueue_scriptImporter ressourcer.

• Ovenstående eksempler er eksempler på refererede ressourcer til WordPress-plugin-udvikling.
• Metoden, der refereres til i emnet, er den samme.

Den største forskel er at bruge den tilsvarende funktion til at få temabiblioteket til at få ressourcefiladressen under temaet.

du kan brugeget_template_directory_urifunktion for at få den aktuelle temamappe.

Hvis du bruger et børnetema, skal du bruge detget_stylesheet_directory_uriFunktionen henter det overordnede temas bibliotek for at få de tilsvarende ressourcer.