So fügen Sie mit cPanel ordnungsgemäß eine JavaScript-Datei zum WordPress-Theme hinzu

Unabhängig davon, ob Sie ein WordPress-Theme von Grund auf entwickeln oder ein vorhandenes Theme ändern, müssen Sie möglicherweise wissen, wie Sie eine JavaScript-Datei richtig hinzufügen.

Wenn Sie darüber nachdenken, die Old-School-Methode von Web 1.0 zu verwenden, indem Sie JavaScript mit dem Kopf verknüpfen, dann ist das eine schlechte Idee, denn heutzutage leben wir in einer Ära von Web 2.0, in der die Leute dynamische Websites haben.

Sie sollten das Konzept des WordPress Theme Codex verstehen und wissen, wie Sie eine JavaScript- und eine CSS-Datei in die Warteschlange stellen. Wir haben bereits das Hinzufügen einer CSS-Datei besprochen.

In diesem Tutorial erfahren Sie, wie Sie eine JavaScript-Datei dynamisch zu einem WordPress-Theme hinzufügen.

Um dem neuesten Codierungsstandard zu entsprechen, sollten Sie immer den WordPress-Codex befolgen, der von Zeit zu Zeit aktualisiert wird. Sie fragen sich vielleicht, ob Sie Programmierkenntnisse benötigen oder nicht.

Wenn Sie nach diesem Artikel gesucht haben, gehe ich davon aus, dass Sie die Grundlagen der WordPress-Theme-Entwicklung bereits kennen.

Lernen Sie den JavaScript-Enqueuing-Codex kennen

Bei der Entwicklung eines WordPress-Themes stoßen Sie möglicherweise auf viele ähnliche Funktionen. Wie Sie sehen, können Sie zum Hinzufügen einer JavaScript-Datei dieselbe Funktion verwenden wie zum Hinzufügen einer CSS-Datei.

Obwohl es einen kleinen Unterschied gibt, weil JavaScript viele Kategorien hat, ist alles mühelos. Lass es mich dir zeigen.

Klartext
In die Zwischenablage kopieren
Code in neuem Fenster öffnen
EnlighterJS 3 Syntax-Highlighter
wp_enqueue_script ( $handle, $src, $deps, $ver, $in_footer ) ;
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Lassen Sie mich alle Parameter erklären.

  1. $handle: –  Dies ist der Name der JavaScript-Datei.
  2. $src:-  Die Adresse der Datei.
  3. $ deps:-  Wenn Sie ein Array erstellen möchten, können Sie dies tun.
  4. $ver:-  Sie können die JavaScript-Version erwähnen.
  5. $in_footer: –  Standardmäßig ist der Wert „false“, was bedeutet, dass die JavaScript-Datei zum Kopf hinzugefügt wird.

Schauen Sie sich nun dieses Beispiel an.

Klartext
In die Zwischenablage kopieren
Code in neuem Fenster öffnen
EnlighterJS 3 Syntax-Highlighter
wp_enqueue_script ( ‘new-script’ , get_template_directory_uri () . ‘/js/new-script.js/’ , array () ) ;
wp_enqueue_script( ‘new-script’, get_template_directory_uri() . ‘/js/new-script.js/’, array() );
wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/new-script.js/', array() );

Der Dateiname lautet „my-script“  und befindet sich in einem „js“  -Ordner.

Hinweis: Wenn Sie es aus dem Fußzeilenbereich laden möchten, um die Leistung der Website zu verbessern, können Sie den Wert von $in_footer  auf „true“ setzen.

Der Code wird wie folgt transformiert.

Klartext
In die Zwischenablage kopieren
Code in neuem Fenster öffnen
EnlighterJS 3 Syntax-Highlighter
wp_enqueue_script ( ‘new-script’ , get_template_directory_uri () . ‘/js/new-script.js/’ , array () , true ) ;
wp_enqueue_script( ‘new-script’, get_template_directory_uri() . ‘/js/new-script.js/’, array(), true );
wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/new-script.js/', array(), true );

Die Aufgabe ist noch nicht beendet. Damit es funktioniert, müssen Sie eine Funktion erstellen und eine Aktion verwenden. Wenn Sie bereits eine CSS-Datei hinzugefügt haben, können Sie dieselbe Funktion verwenden.

Lassen Sie mich Ihnen den vollständigen Code zeigen.

Klartext
In die Zwischenablage kopieren
Code in neuem Fenster öffnen
EnlighterJS 3 Syntax-Highlighter
functionmy_new_scripts {
wp_enqueue_script ( ‘new-script’ , get_template_directory_uri () . ‘/js/new-script.js/’ , array () , true ) ;
}
add_action ( ‘wp_enqueue_scripts’ , ‘my_new_scripts’ ) ;
functionmy_new_scripts{ wp_enqueue_script( ‘new-script’, get_template_directory_uri() . ‘/js/new-script.js/’, array(), true ); } add_action( ‘wp_enqueue_scripts’, ‘my_new_scripts’ );
functionmy_new_scripts{
wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/new-script.js/', array(), true );
}
add_action( 'wp_enqueue_scripts', 'my_new_scripts' );

Nun stellt sich die Frage: Wo muss ein solcher Code hinzugefügt werden?

Nun, wie Sie bereits wissen, ist die Datei „functions.php“ Ihres WordPress-Themes für alle Funktionen einer WordPress-Website verantwortlich. Fügen Sie den Code zur Datei hinzu und speichern Sie ihn.

Wenn Sie Ihr bestehendes Theme ändern, hoffe ich, dass Sie mit cPanel problemlos auf die Datei „functions.php“ zugreifen können. Heutzutage bietet fast jedes WordPress-Hosting  -Unternehmen Zugriff auf cPanel an.

Gehen Sie einfach zu Dateimanager>>wp-content>>themes>>theme name>>functions.php . Klicken Sie mit der rechten Maustaste, um „Bearbeiten“ auszuwählen, und schon kann es losgehen.

So fügen Sie eine JavaScript-Datei ordnungsgemäß zu einem WordPress-Theme hinzu

Das Bearbeiten von Code kann eine beängstigende Sache sein, wenn Sie mit WordPress-Funktionen und PHP nicht vertraut sind.

Für einen WordPress-Theme-Entwickler kann das Hinzufügen einer neuen JavaScript-Datei die Website dynamischer machen als zuvor; Sie benötigen sie möglicherweise für die mobile Version des Navigationsmenüs.

Je nach Bedarf können Sie eine JavaScript-Datei verwenden.

Ich hoffe, es ist schwierig, eine JavaScript-Datei zu einem WordPress-Theme hinzuzufügen

Mit der Zeit beginnen sich die Leute zu ärgern, wenn sie etwas über WordPress-Codierung lesen. Für einen normalen WordPress-Benutzer ist es jedoch nicht notwendig, sich mit Codes auseinanderzusetzen.

WordPress ist eine benutzerfreundliche Plattform, die für Nicht-Techniker entwickelt wurde. Sie können ein WordPress-Theme auf dem Markt kaufen.

Es gibt Millionen von Themen im Internet.

Abschluss

Das Tutorial richtet sich an fortgeschrittene Benutzer oder Personen, die mehr über die Entwicklung von WordPress-Themes erfahren möchten. Es ist immer eine gute Idee, Ihre Programmierkenntnisse zu verbessern.

Ich hoffe, dass das Hinzufügen einer JavaScript-Datei nicht so schwierig ist, wie die Leute sagen.

Schauen Sie sich diese Top 3 WordPress-Hosting-Dienste an:

A2-Hosting
4.7

1.886 Nutzerbewertungen

2,99 $ /Monat
Startpreis

Besuchen Sie A2 Hosting

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.5
  • Unterstützung
    4,0
  • Merkmale
    4.5
  • Zuverlässigkeit
    4.8
  • Preisgestaltung
    4,0
Hostinger
4.6

2.435 Nutzerbewertungen

2,99 $ /Monat
Startpreis

Besuchen Sie Hostinger

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.7
  • Unterstützung
    4.7
  • Merkmale
    4.8
  • Zuverlässigkeit
    4.8
  • Preisgestaltung
    4.7
HostArmada
5,0

716 Benutzerbewertungen

2,49 $ /Monat
Startpreis

Besuchen Sie HostArmada

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.5
  • Unterstützung
    4.5
  • Merkmale
    4.5
  • Zuverlässigkeit
    4.5
  • Preisgestaltung
    4,0
  • Benötigen Sie das beste WordPress-Hosting ? Schauen Sie sich unsere Empfehlungen an, indem Sie hier klicken.