So fügen Sie JavaScripts und Stile in WordPress richtig hinzu

In diesem Artikel werden wir sehen , wie man JavaScripts und Styles richtig in WordPress hinzufügt .

Es gibt viele neue WordPress-Entwickler, die gerne Code schreiben und Plugins ausschließlich für ihre eigenen Websites entwickeln oder auf verschiedenen Marktplätzen verkaufen und eine ansehnliche Rendite erzielen.

Es gibt verschiedene Möglichkeiten, einen Code zu schreiben, aber es gibt nur ausgewählte Möglichkeiten, Code effizient zu schreiben.

Wenn Sie einen Code in zwei statt in zehn Zeilen schreiben können, sparen Sie viel Rechenleistung und Speicherplatz.

Wenn es für eine kleine und leichte Website keine Rolle spielt, kann es für eine umfangreiche Website viel bedeuten.

Wenn Sie keinen sauberen Code schreiben und die verfügbaren Ressourcen nicht effizient nutzen, werden Sie viele Konflikte für andere Programme schaffen.

Beispielsweise gibt es verschiedene Möglichkeiten, externes vorgefertigtes Javascript in WordPress für Ihr Plugin zu laden.

Aber wenn Sie nicht den richtigen Standard befolgen, können alle aktivierten Plugins stark blockiert werden.

Dieser Artikel richtet sich hauptsächlich an neue WordPress-Entwickler, die bereit sind, WordPress-Themes und Plugins zu entwickeln.

Wenn Sie nicht richtig codieren, wird Ihr Code unprofessionell sein und jedes Produkt, das Sie erstellt haben, egal wie gut das Konzept ist, Sie werden niemals akzeptiert werden.

Daher ist es besser zu wissen, wie man JavaScripts und Styles in WordPress richtig hinzufügt .

Die Fehler beim Hinzufügen von JavaScript

Einige von Ihnen wissen vielleicht, dass WordPress eine Funktion namens wp_head hat, die Ihnen hilft, alles in den Header-Bereich der Website zu laden.

Alles, was Sie tun müssen, ist, die folgenden Codezeilen in Ihre Skriptdatei einzufügen, und alles und jedes wird in der Kopfzeile angezeigt.

add_action('wp_head', 'wpb_bad_script');
Funktion wpb_bad_script() {
echo 'jQuery geht hier hin';
}

Dies ist eine ziemliche Abkürzung, um Dinge hinzuzufügen, aber es ist nicht der beste Weg. Sie müssen dem richtigen Standard folgen, um die Abkürzungen aufzugeben, und das ist der springende Punkt dieser Illustration.

Beispielsweise laden Sie JQuery manuell in Ihr Plugin, und ein anderer Entwickler lädt dieselbe JQuery ebenfalls manuell oder über den richtigen Standard. Wenn eine Person beide Ihrer Plugins aktiviert hat, wird JQuery doppelt in den Speicher geladen, was eine Verschwendung ist.

Wenn außerdem JQuery geladen wird und sich die Version unterscheidet, dann würde es aufgrund von Konflikten viele Störungen in den Plugins geben. Sie müssen wissen, wie Sie JavaScripts und Stile in WordPress richtig hinzufügen, bevor Sie Code schreiben.

Wie vermeidet man solche Fehler – das Konzept der Enqueue-Funktion?

Wie Sie vielleicht wissen, ist die WordPress-Entwicklergemeinschaft groß und stark. Es gibt buchstäblich Tausende und Abertausende von Entwicklern, die jeden Tag neue Themen und Plugins entwickeln.

Aber was sie tun, um sicherzustellen, dass es nie zu Konflikten mit der Codierungsmethode des anderen kommt, ist die Enqueue-Skriptfunktion.

Dies ist die Funktion, die dafür verantwortlich ist, JavaScripts und Stile in WordPress richtig hinzuzufügen , sodass es niemals zu Konflikten und unnötiger Speicherblockierung kommt.

Es gewährleistet ein systematisches Laden von JavaScripts und Styles. Die Funktion qp_enquque_function teilt Wordless mit, wann diese JavaScripts und Styles geladen werden sollen, wo sie geladen werden sollen und vor allem unter welchen Bedingungen.

Mit deren Hilfe müssen Sie JQuery und ähnliches nicht manuell laden, und daher wird es nie zu einer Speicherblockierung durch das wiederholte Laden derselben Dateien kommen.

Der Grund dafür ist die Tatsache, dass Sie mit der Enqueue-Funktion die integrierten Bibliotheken verwenden können, die mit WordPress selbst geliefert werden. Es wird auch die Belastung durch langsame Seitenladezeiten verringern, da JavaScripts nicht manuell geladen werden müssen.

Schritte zum korrekten Hinzufügen von JavaScripts und Stilen in WordPress-

1. Skripte in WordPress einreihen

Die folgenden Codezeilen laden das integrierte JavaScript-Bundle, das mit WordPress geliefert wird. Sie müssen diese Zeilen in der Plugin-Datei platzieren, wenn Sie Plugins erstellen, oder Sie müssen sie in der functions.php platzieren, wenn Sie ein Design erstellen.

Funktion wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Erläuterung des Kodex

Das Skript wird über die Funktion wp_register_script() registriert, die fünf verschiedene Parameter hat.

1. $handle – Dies ist ein eindeutiger Name für das Skript. Hier ist es 'my_amazing_script'.

2. $src – Es definiert den Speicherort Ihres Skripts. Die Bibliotheksfunktion plugins_url ruft die richtige URL Ihres Plugin-Ordners ab. Sobald es abgerufen wurde, beginnt es, nach der darin enthaltenen Amazing_script.js-Datei zu suchen.

3. $deps – Es definiert die Abhängigkeit. Sie müssen es hinzufügen, wenn Sie WordPress auffordern, Bibliotheksskripte wie Jquery zu laden.

Wenn die Skripte bereits in den Speicher geladen sind, wird er nicht erneut geladen, und es findet ein neuer Ladevorgang statt. Dies stellt sicher, dass es keine Konflikte, keine Speicherblockaden und keine Zeitverschwendung gibt.

4. $ver – Definiert die Versionsnummer des Skripts. Es ist nicht zwingend erforderlich.

5. $in_footer – Wird verwendet, um das Skript in die Fußzeile zu laden. Wenn Sie das Skript im Header laden möchten, sollten Sie es auf false belassen.

Sobald alles definiert ist, rufst du das Skript einfach mit wp_enqueue_script() auf.

2. Stile in WordPress einreihen

Genau wie bei JavaScript müssen Sie Stylesheets in die Warteschlange einreihen. Verwenden Sie den folgenden Codeabschnitt in Ihrer Plugin-Datei oder der Datei functions.php für die Themenerstellung.

Funktion wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 

Die obigen Codes sind geeignet, während Sie ein Plugin erstellen. Wenn Sie ein Design erstellen, müssen Sie plugins_url() in get_template_directory_uri() ändern. Der Rest der Dinge bleibt genau gleich.

Funktion wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Wenn Sie ein untergeordnetes Design erstellen, müssen Sie get_stylesheet_direcroy_uri() anstelle von get_template_directory_uri() verwenden.

Dies ist die Standardmethode zum ordnungsgemäßen Hinzufügen von JavaScripts und Stilen in WordPress.

Wenn Ihr Plugin oder Thema irgendwelche Störungen aufweist, sollten Sie den Code davon mit den oben genannten Codezeilen ändern, und vielleicht werden die Störungen behoben.

Befolgen Sie immer die weltweit befolgten Programmierstandards, um mit anderen erfolgreichen Entwicklern auf der gleichen Seite zu sein.