Trick # 629 | Dieser Beitrag beinhaltet 0 Wörter. – Geschätzte Lesezeit: ca. 0 Minuten.
Das Divi-Theme verfügt über ein interessantes Umschalter-Modul – in der englischen Version: Toggle. Damit lassen sich Texte und Informationen zunächst kaschieren; User klicken auf den Toggle und erfahren mehr. Wenn man diese Toggles jedoch mit einem Anker-Link direkt zu öffnen versucht, geben sie sich störisch. Wir haben einen Weg gefunden, wie es dennoch funktioniert.
Zunbächst vergeben Sie dem Umschalter-Modul eine eindeutige CSS-ID. In unserem Beispiel nennen wir diese showcase. Fügen Sie diesen (oder natürlich jeden anderen) ID-Namen im Toggle-Modul ein. Und zwar im bearbeiteten Modul unter «Erweitert», «CSS-ID und Klassen» in das Textfeld «CSS-ID».
Nun benötigen Sie noch einen JavaScript-Code. Den folgenden Block kopieren Sie in den -Bereich Ihrer Website. Das geht im WordPress-Backend ganz einfach unter Divi/Theme-Optionen/Integration:
<script>
document.addEventListener('DOMContentLoaded', function () {
const hash = window.location.hash; // Holt den Ankerlink (z. B. #toggle1)
if (hash) {
const toggleElement = document.querySelector(hash); // Sucht das Ziel-Element mit der ID
if (toggleElement && toggleElement.classList.contains('et_pb_toggle')) {
// Öffnet das Toggle-Modul, falls es geschlossen ist
if (!toggleElement.classList.contains('et_pb_toggle_open')) {
const title = toggleElement.querySelector('.et_pb_toggle_title');
if (title) {
title.click(); // Simuliert einen Klick, um das Modul zu öffnen
}
}
// Scrollt zum geöffneten Toggle-Modul
toggleElement.scrollIntoView({ behavior: 'smooth' });
}
}
});
</script>Das war's schon. Probieren wir es aus:
Rechts sehen Sie nun zwei Toggles. Eines, welches auf Anker reagieren wird und eins, das keine CSS-ID hat und sich darum nicht ansprechen lässt.
Normales Toggle-Modul
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Toggle-Modul mit ID
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Da unser Beispiel-Toggle die ID «showcase» hat, können wir es nun mit folgendem Link direkt ansteuern und öffnen: https://dr-code.ch/divi-toggles-oder-umschalter-mit-anker-link-direkt-ansteuern-und-oeffnen/#showcase.
Probieren Sie's aus. Praktisch. Oder?
Optional: Script nur punktuell einbinden
Einen Haken haben jedoch Scripts, die im <head>-Bereich geladen werden: Sie sind immer verfügbar. Ganz egal, ob sie auf einer Seite verwendet werden oder nicht. Wir haben darum begonnen, unsere Scripts nur noch bei Bedarf einzubinden.
Im vorliegenden Fall (mit den Toggle-Modulen) geht das ganz einfach mit folgendem PHP-Code, den Sie NICHT ZUSÄTZLICH zu obigem, sondern an dessen Stelle verwenden können.
Er landet in Ihrer Datei functions.php, welche Sie im Backend unter Design/Theme-Datei-Editor finden:
function custom_toggle_script() {
// Überprüfen, ob ein Divi-Toggle-Modul im Content vorhanden ist
if (has_divi_toggle()) {
// Das Inline-JavaScript hinzufügen
wp_register_script('custom-toggle-inline', '', [], '', true); // Leeres Handle für das Inline-Script
wp_enqueue_script('custom-toggle-inline'); // Script einreihen, ohne eine Datei zu laden
// Das Inline-JavaScript in den Footer einfügen
wp_add_inline_script('custom-toggle-inline', '
(function ($) {
$(document).ready(function () {
// Hier fügen wir ein Klick-Event auf alle Elemente mit einer Toggle-ID hinzu
$("a[href^=\"#\"]").on("click", function () {
var link = $(this).prop("hash");
// Überprüfen, ob das angeklickte Element tatsächlich ein Toggle ist
if ($(link).hasClass("et_pb_toggle_close") || $(link).hasClass("et_pb_toggle_open")) {
$(link).removeClass("et_pb_toggle_close").addClass("et_pb_toggle_open");
$(link + " .et_pb_toggle_content").css("display", "block");
}
});
});
})(jQuery);
');
}
}
add_action('wp_enqueue_scripts', 'custom_toggle_script');
// Funktion, die prüft, ob ein Divi-Toggle im Content vorhanden ist
function has_divi_toggle() {
global $post;
// Überprüfen, ob der Inhalt des Posts ein Divi-Toggle enthält
if (strpos($post->post_content, 'et_pb_toggle') !== false) {
return true;
}
return false;
}Zur Funktionsweise: Der Code prüft während des Ladens einer Seite, ob Toggle-Module enthalten sind. Ist dies der Fall, wird das Script zugeschaltet – in allen anderen Fällen ist es deaktiviert.
Werbung
Werbung
