Hoe introduceert WordPress JavaScript op de juiste manier?Aangepast laden van JS- en CSS-bestanden

用WordPress websiteprogrammeurs, ontwikkelenWordPress-plug-inOf bij het aanpassen van een WordPress-thema wordt verwezen naar sommige JavaScript- en CSS-scriptbronnen.

• Gewoonlijk gebruiken mensen link, script-tags rechtstreeks voor HTML.
• In feite heeft WordPress ingebouwde geavanceerde functies en methoden om naar scripts te verwijzen.
• Het gebruik van de ingebouwde methodereferenties van WordPress is dus professioneler en uitbreidbaarder.

De gebrekkige citatiemethode

Er zijn twee veelvoorkomende citatiemethoden: het is prima, het is gewoon niet perfect of redelijk.

Type 1:link-tags verwijzen naar CSS-bestanden

• Scripttags passen JS-bestanden toe.Hier niet gedetailleerd.

Type 2:Gebruik de wp_head functie

• De functie wp_head wordt gebruikt om aangepaste of door het systeem gedefinieerde inhoud uit te voeren.
• We gebruiken soms de volgende code om naar dit bestand te verwijzen:

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

• Kopieer de bovenstaande code naar het bestand Functions.php om naar de bijbehorende bestanden te verwijzen.

Bronmechanisme voor WordPress Enqueue Scripts

Zoals we allemaal weten, heeft WordPress veel plug-ins:

• Bijna elke plug-in verwijst naar een bronbestand.
• Het is onvermijdelijk dat er conflicten zijn tussen bronnen waarnaar wordt verwezen door twee plug-ins, die onstabiel worden en de efficiëntie beïnvloeden.

Gebruik de wp_enqueue_script functie

• Om te verwijzen naar een bron in WordPress die u moet gebruikenwp_enqueue_scriptEen functie met het woord wachtrij in de naam van de in de wachtrij geplaatste of gesorteerde functie.
• Met deze WordPress-manier van het in de wachtrij plaatsen van bronnen (Enqueue Scripts), worden de verwijzingen gescheiden van de bijbehorende bestanden en kerncode.
• Als de gebruiker de bron wil uitschakelen, kan hij deze verwijderen, wijzigen en becommentariëren zonder deze vanuit de kerncode te wijzigen.

Ook zijn enkele veelgebruikte bibliotheken zoals jQuery, jQuery UI, enz. ingebouwd in WordPress.

We kunnen de functie wp_enqueue_script gebruiken om de ingebouwde bibliotheek rechtstreeks aan te roepen, wat code en een duidelijkere specificatie opslaat.

Als u deze functie gebruikt om naar uw eigen JS- en CSS-bestanden te verwijzen, moet u gebruik maken vanwp_register_scriptDe functie registreert een identifier (handle) en gebruikt danwp_enqueue_scriptDe functie roept de resource aan die overeenkomt met deze vlag.

Hoe JS- en CSS-bestanden correct te importeren in WordPress?

WordPress biedt verstandige importmethoden voor JS- en CSS-methoden.

U kunt de volgende code gebruiken om het bestand plugin.css in de plug-in te importeren ▼

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

Het bovenstaande gebruikt de functie wp_register_script om een ​​bron te maken met de identifier plugin_stylesheet.

Voeg vervolgens de verzoeken in de wachtrij toe aanwp_enqueue_scriptsacties in werking zijn.

Hoewel de functienaam een ​​script is, heeft het niets te maken met het type bronbestand en is het geldig voor zowel CSS als JS.

De functie wp_register_script is echt niet zo eenvoudig, het kan vijf parameters hebben:

1) $handvat:Bron-ID.

• 由wp_enqueue_scriptoverdracht.

2) $src:De locatie van de bron.

• Relatieve of absolute adressen gebruiken ingebouwde WordPress-functies om adressen te krijgen, enz.
• GemeenschappelijkPositioneringfunctie heeftplugins_url,get_template_directory_uri等.

3) $deps:bouwen op.

• Als u verwijst naar de jQuery-plug-in en moet vertrouwen op de jQuery-build, moet u jQuery invullen.
• Merk op dat het wordt doorgegeven als een array.

4) $ver:Bronversie, optioneel.

5) $in_footer:Zet je die eronder?

• Normaal gesproken moeten JS-bestanden onderaan de pagina worden geplaatst, u kunt deze parameter instellen op True, leeg laten of False om naar de top te gaan.

Laten we eens kijken naar een vollediger voorbeeld van een JavaScript-bestandsreferentie ▼

<?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-thema's gebruiken wp_enqueue_script om bronnen te importeren

Programmeurs in WordPress thema-ontwikkeling, gebruikwp_enqueue_scriptBronnen importeren.

• De bovenstaande voorbeelden zijn voorbeelden van bronnen waarnaar wordt verwezen voor de ontwikkeling van WordPress-plug-ins.
• De methode waarnaar in het onderwerp wordt verwezen, is vergelijkbaar.

Het belangrijkste verschil is om de bijbehorende functie te gebruiken om de themamap te krijgen om het bronbestandsadres onder het thema te krijgen.

je kunt gebruikenget_template_directory_urifunctie om de huidige themamap te krijgen.

Als je een child-thema gebruikt, moet jeget_stylesheet_directory_uriDe functie haalt de map van het bovenliggende thema op om de bijbehorende bronnen te krijgen.