Wéi féiert WordPress richteg JavaScript vir?Benotzerdefinéiert Luede vu JS an CSS Dateien

firWordPress WebsäitProgramméierer, EntwécklungslännerWordPress PluginOder wann Dir e WordPress Thema personaliséiert, ginn e puer JavaScript an CSS Skriptressourcen referenzéiert.

WordPress HTML stellt JavaScript (JS) an CSS Dateien vir

  • Normalerweis benotzen d'Leit Link, Skript Tags direkt fir HTML.
  • Tatsächlech huet WordPress agebaute raffinéiert Funktiounen a Methoden fir Scripte ze referenzéieren.
  • Also, d'Benotzung vu WordPress 'gebauter Method Referenzen ass méi professionell a méi erweiterbar.

Déi falsch Zitatiounsmethod

Et ginn zwou allgemeng Zitatiounsmethoden, et ass gutt, et ass just net perfekt oder raisonnabel.

Typ 1:Link Tags bezéie sech op CSS Dateien

  • Skript Tags gëllen JS Dateien.Net detailléiert hei.

Typ 2:Benotzt d'wp_head Funktioun

  • D'wp_head Funktioun gëtt benotzt fir e personaliséierten oder systemdefinéierten Inhalt auszeginn.
  • Mir benotzen heiansdo de folgende Code fir dës Datei ze referenzéieren:
<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>
  • Kopéiert den uewe genannte Code an d'functions.php Datei fir déi entspriechend Dateien ze referenzéieren.

WordPress Enqueue Scripts Ressource Mechanismus

Wéi mir all wëssen, huet WordPress vill Plugins:

  • Bal all Plugin bezitt sech op eng Ressourcedatei.
  • Onweigerlech ginn et Konflikter tëscht Ressourcen, déi vun zwee Plugins referenzéiert sinn, déi onbestänneg ginn an d'Effizienz beaflosse kënnen.

Benotzt d'wp_enqueue_script Funktioun

  • Fir eng Ressource an WordPress ze referenzéieren sollt Dir benotzenwp_enqueue_scriptEng Funktioun déi d'Wuert enqueue am Numm vun der ofgeschlosser oder zortéierter Funktioun huet.
  • Mat WordPress 'Manéier fir Ressourcen z'enqueueéieren (Enqueue Scripts), ginn d'Referenze vun den entspriechende Dateien a Kärcode getrennt.
  • Wann de Benotzer d'Ressource auszeschalten wëllt, kann hien se läschen, änneren a kommentéieren ouni et vum Kärcode z'änneren.

Och e puer allgemeng benotzt Bibliothéike wéi jQuery, jQuery UI, etc. sinn a WordPress agebaut.

Mir kënnen d'wp_enqueue_script Funktioun benotzen fir déi agebaute Bibliothéik direkt ze ruffen, wat de Code an eng méi propper Spezifizéierung spuert.

Eng Lëscht vun agebaute Definitiounsbibliothéiken an Identifizéierer (Handle) gëtt hei zur Verfügung gestallt

Wann Dir dës Funktioun benotzt fir Är eege JS- an CSS-Dateien ze referenzéieren, musst Dir benotzenwp_register_scriptD'Funktioun registréiert en Identifizéierer (Handle) a benotzt dannwp_enqueue_scriptD'Funktioun rifft d'Ressource entsprécht dësem Fändel.

Wéi korrekt JS an CSS Dateien op WordPress importéieren?

WordPress bitt sënnvoll Importmethoden fir JS an CSS Methoden.

Dir kënnt de folgende Code benotze fir d'plugin.css Datei an de Plugin z'importéieren ▼

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

Déi uewe benotzt d'wp_register_script Funktioun fir eng Ressource mat dem Identifizéierer plugin_stylesheet ze kreéieren.

Füügt dann seng Ufroen an der Schlaang unwp_enqueue_scriptsAktiounen sinn a Betrib.

Och wann de Funktiounsnumm e Skript ass, huet et näischt mat der Aart vun der Ressourcedatei ze dinn an ass valabel fir béid CSS an JS.

D'wp_register_script Funktioun ass wierklech net sou einfach, et kann fënnef Parameteren hunn:

1) $handle:Ressource Identifizéierer.

  • vumwp_enqueue_scripttransferéieren.

2) $src:D'Location vun der Ressource.

  • Relativ oder absolut Adresse benotze WordPress agebaute Funktiounen fir Adressen ze kréien, etc.
  • GemeinsamPositionéierungFunktioun huetplugins_url,get_template_directory_uriWaart.

3) $deps:vertrauen.

  • Wann Dir op de jQuery Plugin schwätzt a musst op jQuery vertrauen fir ze bauen, musst Dir jQuery ausfëllen.
  • Notéiert datt et als Array weidergeleet gëtt.

4) $ver:Ressource Versioun, fakultativ.

5) $in_footer:Hues du se ënnen gesat?

  • Normalerweis sollten JS Dateien um Enn vun der Säit plazéiert ginn, Dir kënnt dëse Parameter op True setzen, loosst et eidel oder falsch fir op d'Spëtzt auszeginn.

Loosst eis e méi komplette JavaScript Datei Referenz Beispill kucken ▼

<?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 Themen benotzen wp_enqueue_script fir Ressourcen z'importéieren

Programméierer an WordPress Thema Entwécklung, benotzenwp_enqueue_scriptImport Ressourcen.

  • Déi uewe genannte Beispiller si Beispiller vu referenzéierte Ressourcen fir WordPress Plugin Entwécklung.
  • D'Method, déi am Thema referenzéiert ass, ass ähnlech.

Den Haaptunterschied ass déi entspriechend Funktioun ze benotzen fir den Thema Verzeechnes ze kréien fir d'Ressource Datei Adress ënner dem Thema ze kréien.

Dir kënnt benotzenget_template_directory_uriFunktioun fir den aktuellen Thema Verzeechnes ze kréien.

Wann Dir e Kand Thema benotzt, musst Dir benotzenget_stylesheet_directory_uriD'Funktioun kritt de Verzeechnes vum Elterenthema fir déi entspriechend Ressourcen ze kréien.

Comments

Är Email Adress gëtt net publizéiert ginn. Néideg Felder gi benotzt * Etikett

Minière zu Top