Hin und wieder muss ich bei der Erstellung von Kunden-Websites etwas Javascript hinzufügen. Zum Beispiel, um ein Element beim Klicken auf eine Schaltfläche anzuzeigen, Berechnungen in einem Formular auszuführen, und so weiter.
Aber das Hinzufügen von einfachem Javascript-Code zu einer Seite ist nicht die beste Idee. Selbst wenn es hinzugefügt werden kann, ist es nicht der richtige Ort, um Skripte hinzuzufügen. Zweitens – jquery erfordert den Aufruf von jquery-Funktionalität in Ihrer Website, und nicht alle Themes rufen sie von Haus aus auf.
Hier finden Sie eine kleine Anleitung, wie Sie Javascript und Jquery-Skripte auf eine Weise ausführen können, die tatsächlich funktioniert.
Wie man jquery-Skripte zu WordPress hinzufügt
Es gibt viele Plugins, die man installieren könnte, um Jquery-Skripte zu WordPress hinzuzufügen. Aber da ich nicht gerne zusätzliche Plugins für eine so kleine Funktion hinzufüge, zeige ich Ihnen, wie Sie es ohne Plugins machen können.
Hier ist das Beispiel, das wir verwenden:
<script>
$(document).on("click", ".showit", function () {
$(".my-element").toggle('slow');
});
</script>Wenn Sie auf ein Element mit der Klasse showit klicken, wird das Element mit der Klasse my-element ein- oder ausgeblendet.
Wenn Sie diesen Code in einen HTML-Block oder in den Head-Bereich einer WordPress-Website einfügen, werden Sie wahrscheinlich enttäuscht sein, denn er wird nicht funktionieren. Es fehlt eine Sache – jquery muss zuerst geladen werden.
Nur für einen kurzen Test können wir jquery aus dem CDN aufrufen:
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<script>
<script>
$(document).on("click", ".showit", function () {
$(".my-element").toggle('slow');
});
</script>Wenn sich das Skript an der richtigen Stelle befindet und beide Klassen in der Seite definiert sind, sollte das Skript problemlos laufen. Aber wir sind noch nicht fertig.
Erstens – das Ausführen von Skripten von einem anderen Server (jquery CDN) wird einige Zeit in Anspruch nehmen, so dass es Ihre Website verlangsamen wird. Das ist nicht gut, und wir müssen das herausfinden. Zweitens – wir müssen diese Skripte an der richtigen Stelle platzieren – im <head>-Abschnitt Ihrer WordPress-Website. Drittens – wir müssen diese Skripte nicht auf jeder einzelnen Seite aufrufen. Ich zeige Ihnen, wie Sie das Skript nur dort aufrufen, wo es benötigt wird.
Jetzt geht’s los.
So rufen Sie jquery aus Ihrem WordPress-Theme-Ordner auf
Um jquery so schnell wie möglich zu laden, laden Sie die jquery-Datei auf Ihren Computer herunter. Sie können diesen Link von dem bereits erwähnten CDN verwenden – klicken Sie hier.
Sobald sich die Datei auf Ihrem Computer befindet, laden Sie sie auf den Server hoch, auf dem sich die Dateien Ihrer WordPress-Website befinden. Genauer gesagt – laden Sie diese Datei in das Verzeichnis Ihres Themes hoch (wp-content/themes/[Ihr Theme]/). Erstellen Sie das Verzeichnis js, falls es noch nicht existiert, und legen Sie die Datei dort ab.
Sie können die Filezilla-App zum Hochladen verwenden, oder Sie können zum Cpanel oder DirectAdmin gehen und die Datei mit dem Dateimanager im Panel hochladen.
Wie füge ich ein Jquery-Skript in den Head-Bereich eines WordPress-Themes ein?
Das ist ganz einfach. Um ein beliebiges Skript aus dem <head>-Abschnitt in WordPress aufzurufen, gehen Sie zu Erscheinungsbild >> Editor für Themendateien oder Tools >> Editor für Themendateien. Öffnen Sie die Datei functions.php auf der rechten Seite, und fügen Sie diesen Code am Ende der Datei ein:
function rocksolid_script() {
?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
$(".dont-show").toggle('slow');
});
</script>
<?php
}
add_action('wp_head', 'rocksolid_script');Wie Sie sehen, rufen wir eine Funktion namens rocksolid_script im WordPress-Head-Bereich auf. Sie tut zwei Dinge:
- Sie lädt jquery aus dem js/-Verzeichnis des aktuellen aktiven Themes, so dass wir keinen CDN-Link mehr benötigen. Sie können die Url des aktuellen aktiven Themes mit <?php echo get_template_directory_uri(); ?> erhalten.
- Damit wird das eigentliche Jquery-Skript ausgeführt, das wir ursprünglich benötigten.
Was aber, wenn wir es nur auf einer Seite laden müssen?
Wie lädt man ein benutzerdefiniertes Jquery-Skript nur auf einer bestimmten Seite?
Wenn Sie die Funktion nur auf der Homepage oder einer anderen bestimmten Seite in WordPress aufrufen möchten, müssen wir eine zusätzliche Prüfung im Skript hinzufügen.
Wenn Sie zum Beispiel das zuvor erwähnte Skript nur auf der Startseite laden wollen, müssen Sie if is_front_page() zur Funktion hinzufügen, wie hier:
function rocksolid_script() {
if (is_front_page()) { ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
$(".dont-show").toggle('slow');
});
</script>
<?php }
}
add_action('wp_head', 'rocksolid_script');Um das Skript nur auf einem bestimmten Beitrag zu laden, müssen Sie if (is_single(POST ID HERE)) verwenden.
Um das Skript nur auf einer bestimmten Seite zu laden, müssen Sie if (is_page(PAGE ID HERE)) verwenden.
Wenn Sie keine Ahnung haben, wo Sie die Post- oder Page-ID in WordPress finden, lesen Sie diesen Artikel.
