Wie führt WordPress JavaScript richtig ein?Benutzerdefiniertes Laden von JS- und CSS-Dateien

用WordPress-WebsiteProgrammierer, entwickelnWordPress-PluginOder beim Anpassen eines WordPress-Designs wird auf einige JavaScript- und CSS-Skriptressourcen verwiesen.

• Normalerweise verwenden die Leute Link- und Skript-Tags direkt für HTML.
• Tatsächlich verfügt WordPress über integrierte ausgefeilte Funktionen und Methoden zum Referenzieren von Skripten.
• Daher ist die Verwendung der integrierten Methodenreferenzen von WordPress professioneller und erweiterbarer.

Die fehlerhafte Zitiermethode

Es gibt zwei gebräuchliche Zitiermethoden, es ist in Ordnung, es ist einfach nicht perfekt oder vernünftig.

Typ 1:Link-Tags beziehen sich auf CSS-Dateien

• Script-Tags wenden JS-Dateien an.Hier nicht detailliert.

Typ 2:Verwenden Sie die wp_head-Funktion

• Die Funktion wp_head wird verwendet, um einige benutzerdefinierte oder systemdefinierte Inhalte auszugeben.
• Wir verwenden manchmal den folgenden Code, um auf diese Datei zu verweisen:

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

• Kopieren Sie den obigen Code in die Datei functions.php, um auf die entsprechenden Dateien zu verweisen.

WordPress Enqueue Scripts-Ressourcenmechanismus

Wie wir alle wissen, hat WordPress viele Plugins:

• Fast jedes Plugin verweist auf eine Ressourcendatei.
• Unvermeidlich kommt es zu Konflikten zwischen Ressourcen, auf die von zwei Plugins verwiesen wird, was instabil wird und die Effizienz beeinträchtigen kann.

Verwenden Sie die Funktion wp_enqueue_script

• Um auf eine Ressource in WordPress zu verweisen, sollten Sie verwendenwp_enqueue_scriptEine Funktion, die das Wort enqueue im Namen der in die Warteschlange eingereihten oder sortierten Funktion enthält.
• Mit der Methode von WordPress, Ressourcen einzureihen (Enqueue Scripts), werden die Referenzen von den entsprechenden Dateien und dem Kerncode getrennt.
• Wenn der Benutzer die Ressource deaktivieren möchte, kann er sie löschen, ändern und kommentieren, ohne sie aus dem Kerncode zu ändern.

Außerdem sind einige häufig verwendete Bibliotheken wie jQuery, jQuery UI usw. in WordPress integriert.

Wir können die Funktion wp_enqueue_script verwenden, um die eingebaute Bibliothek direkt aufzurufen, was Code und eine sauberere Spezifikation spart.

Wenn Sie diese Funktion verwenden, um auf Ihre eigenen JS- und CSS-Dateien zu verweisen, müssen Sie verwendenwp_register_scriptDie Funktion registriert einen Bezeichner (Handle) und verwendet dannwp_enqueue_scriptDie Funktion ruft die diesem Flag entsprechende Ressource auf.

Wie importiere ich JS- und CSS-Dateien richtig in WordPress?

WordPress bietet sinnvolle Importmethoden für JS- und CSS-Methoden.

Sie können den folgenden Code verwenden, um die plugin.css-Datei in das Plugin ▼ zu importieren

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

Oben wird die Funktion wp_register_script verwendet, um eine Ressource mit dem Bezeichner plugin_stylesheet zu erstellen.

Fügen Sie dann die in der Warteschlange befindlichen Anforderungen hinzuwp_enqueue_scriptsAktionen laufen.

Obwohl der Funktionsname ein Skript ist, hat er nichts mit dem Typ der Ressourcendatei zu tun und gilt sowohl für CSS als auch für JS.

Die Funktion wp_register_script ist wirklich nicht so einfach, sie kann fünf Parameter haben:

1) $griff:Ressourcenkennung.

• 由wp_enqueue_scriptTransfer.

2) $src:Der Standort der Ressource.

• Relative oder absolute Adressen verwenden integrierte WordPress-Funktionen, um Adressen usw. zu erhalten.
• VerbreitetPositionierungFunktion hatplugins_url,get_template_directory_uri等.

3) $deps:Vertrauen.

• Wenn Sie sich auf das jQuery-Plugin beziehen und sich auf den jQuery-Build verlassen müssen, müssen Sie jQuery ausfüllen.
• Beachten Sie, dass es als Array übergeben wird.

4) $vers:Ressourcenversion, optional.

5) $in_footer:Legst du es ganz unten hin?

• Normalerweise sollten JS-Dateien am unteren Rand der Seite platziert werden, Sie können diesen Parameter auf True setzen, ihn leer lassen oder auf False setzen, um ihn nach oben auszugeben.

Sehen wir uns ein vollständigeres Referenzbeispiel für eine JavaScript-Datei an ▼

<?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-Designs verwenden wp_enqueue_script, um Ressourcen zu importieren

Programmierer in der WordPress-Theme-Entwicklung verwendenwp_enqueue_scriptRessourcen importieren.

• Die obigen Beispiele sind Beispiele für referenzierte Ressourcen für die Entwicklung von WordPress-Plugins.
• Die Methode, auf die im Thema verwiesen wird, ist ähnlich.

Der Hauptunterschied besteht darin, die entsprechende Funktion zum Abrufen des Themenverzeichnisses zu verwenden, um die Ressourcendateiadresse unter dem Thema abzurufen.

Sie können verwendenget_template_directory_uriFunktion, um das aktuelle Themenverzeichnis abzurufen.

Wenn Sie ein untergeordnetes Thema verwenden, müssen Sie verwendenget_stylesheet_directory_uriDie Funktion ruft das Verzeichnis des übergeordneten Designs ab, um die entsprechenden Ressourcen abzurufen.