Hur introducerar WordPress JavaScript korrekt?Anpassad laddning av JS- och CSS-filer

användningWordPress webbplatsprogrammerare, utvecklaWordPress pluginEller när du anpassar ett WordPress-tema, hänvisas till vissa JavaScript- och CSS-skriptresurser.

• Vanligtvis använder folk länk-, skripttaggar direkt för HTML.
• Faktum är att WordPress har inbyggda sofistikerade funktioner och metoder för att referera till skript.
• Så att använda WordPresss inbyggda metodreferenser är mer professionellt och mer utbyggbart.

Den felaktiga citeringsmetoden

Det finns två vanliga citeringsmetoder, det är bra, det är bara inte perfekt eller rimligt.

Typ 1:länktaggar hänvisar till CSS-filer

• Skripttaggar tillämpar JS-filer.Inte detaljerat här.

Typ 2:Använd funktionen wp_head

• Funktionen wp_head används för att mata ut visst anpassat eller systemdefinierat innehåll.
• Vi använder ibland följande kod för att referera till den här filen:

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

• Kopiera ovanstående kod till functions.php-filen för att referera till motsvarande filer.

WordPress Enqueue Scripts resursmekanism

Som vi alla vet har WordPress många plugins:

• Nästan varje plugin refererar till någon resursfil.
• Oundvikligen kommer det att uppstå konflikter mellan resurser som refereras av två plugins, vilket kommer att bli instabilt och kan påverka effektiviteten.

Använd funktionen wp_enqueue_script

• För att referera till en resurs i WordPress bör du användawp_enqueue_scriptEn funktion som har ordet enqueue i namnet på den köade eller sorterade funktionen.
• Med detta WordPress-sätt att köa resurser (Enqueue Scripts) separeras referenserna från motsvarande filer och kärnkod.
• Om användaren vill inaktivera resursen kan han radera, ändra och kommentera den utan att modifiera den från kärnkoden.

Dessutom är några vanligt använda bibliotek som jQuery, jQuery UI, etc. inbyggda i WordPress.

Vi kan använda funktionen wp_enqueue_script för att anropa det inbyggda biblioteket direkt, vilket sparar kod och en renare specifikation.

Om du använder den här funktionen för att referera till dina egna JS- och CSS-filer måste du användawp_register_scriptFunktionen registrerar en identifierare (handtag) och använder sedanwp_enqueue_scriptFunktionen anropar resursen som motsvarar denna flagga.

Hur importerar jag JS- och CSS-filer korrekt i WordPress?

WordPress tillhandahåller vettiga importmetoder för JS- och CSS-metoder.

Du kan använda följande kod för att importera filen plugin.css till plugin-programmet ▼

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

Ovanstående använder funktionen wp_register_script för att skapa en resurs med identifieraren plugin_stylesheet.

Lägg sedan till dess köade förfrågningar tillwp_enqueue_scriptsåtgärder är i drift.

Även om funktionsnamnet är ett skript, har det ingenting att göra med typen av resursfil och är giltigt för både CSS och JS.

Funktionen wp_register_script är verkligen inte så enkel, den kan ha fem parametrar:

1) $handle:Resursidentifierare.

• 由wp_enqueue_scriptöverföra.

2) $src:Resursens plats.

• Relativa eller absoluta adresser använder WordPress inbyggda funktioner för att få adresser osv.
• AllmänningPositioneringfunktion harplugins_url,get_template_directory_uri等.

3) $deps:bero.

• Om du hänvisar till jQuery-pluginet och behöver förlita dig på jQuery för att bygga, måste du fylla i jQuery.
• Observera att den skickas som en array.

4) $ver:Resursversion, valfritt.

5) $in_footer:Lägger du den längst ner?

• Normalt ska JS-filer placeras längst ner på sidan, du kan ställa in den här parametern till True, lämna den tom eller False för att mata ut till toppen.

Låt oss titta på ett mer komplett JavaScript-filreferensexempel ▼

<?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-teman använder wp_enqueue_script för att importera resurser

Programmerare i WordPress temautveckling, användwp_enqueue_scriptImportera resurser.

• Ovanstående exempel är exempel på refererade resurser för WordPress-pluginutveckling.
• Metoden som refereras till i ämnet är liknande.

Den största skillnaden är att använda motsvarande funktion för att få temakatalogen att få resursfiladressen under temat.

du kan användaget_template_directory_urifunktion för att hämta den aktuella temakatalogen.

Om du använder ett barntema måste du användaget_stylesheet_directory_uriFunktionen hämtar det överordnade temats katalog för att få motsvarande resurser.