Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Der Zurück-Button des Browsers ist sicherlich eine der einfachsten Methoden, um zur vorherigen Seite zurückzukehren. Es ist jedoch auch möglich, dass Websites eine Schaltfläche im Content bereitstellen, um dem Besucher einen direkten Link zur vorherigen Seite zu ermöglichen. Es kann sich eben so ergeben, dass das dort und da ganz komfortabel sein kann.

Back-Link mit JavaScript

Für zusätzliche Anpassungsmöglichkeiten oder der Einfachheit von einer Class kannst du jQuery zu verwenden. Füge dazu den folgenden Code im Child Theme in die Datei scrips.js hinzu:

/* Zurück-Button */
(function($) {
	$(function() {
		$(".go-back").on("click", function(e) {
			e.preventDefault();
			window.history.back();
		});
	});
})(jQuery);

Hinzulernen zum Code: Wenn man in JavaScript statt der 'Class' die 'ID' verwendet, kommt es zu Fehlern, wenn man den Zurück-Button mehrmals pro Seite verwendet. Dies liegt daran, dass die Verwendung von $('.go-back') auf eine Class und $('#go-back') auf eine ID verweist. – Die Raute (#) vor dem Namen kennzeichnet eine ID, während der Punkt (.) eine Class kennzeichnet. Es ist zu beachten, dass CSS-IDs auf einer Seite nur einmal verwendet werden dürfen, während CSS-Classen beliebig oft wiederverwendet werden können.

Die Verwendung des Start-Tags <button> ist sehr praktisch, da die Formatierung meistens durch das Theme vorgegeben wird. So wird beispielsweise die Akzentfarbe des Themes für den <button> verwendet, was eine konsistente Gestaltung der Website ermöglicht.

Start-Tag button mit Attributname bzw. Selektor class:

<button class="go-back">Zurück Button</button>

Dasselbe ohne Button-Style:

<a class="go-back" href="#">Zurück zur vorherigen Seite</a>

<button class="go-back" style="font-size: 14px; padding: 7px 5px 5px 0px; width: 162px;"><i class="genericon genericon-reply"></i>   vorig Seite</button>

Back-Link mit Shortcode-Code

In diesem Beispiel wird der Back-Link mit einem Shortcode ohne den Start-Tag <button> erstellt, daher wird keine automatische Formatierung angewendet. Wenn jedoch eine bestimmte Formatierung gewünscht ist, könnte man den Shortcode in Kombination mit CSS-Regeln verwenden, um das Aussehen des Links anzupassen.

Um den Back-Link mit einem Shortcode zu erstellen, kann man einfach [backlink] in den HTML- oder visuellen Editor eingeben, mithin folgendem PHP:

functions.php

/* Shortcode: backlink */
add_shortcode( 'backlink', function() {
return '<a href="javascript:history.back();">Zurück vorig Seite</a>';
});

Shortcode-Code in Kombination mit <button>

Möchte man jedoch den Start-Tag <button> verwenden, kann man den Shortcode innerhalb des Tags platzieren, indem man im Editor den Text:

<button>[backlink]</button> eingibt.

Dazu braucht es zur konformen Darstellung separaten Code, da die Formatierung nicht passen wird, also in etwa:

functions.php

/* Shortcode: backlink mit Button-Style */
add_shortcode('backlink', function() {
    return '<a href="javascript:history.back();" style="color: #fff; text-decoration: none; font-weight: bold;">Zurück vorige Seite</a>';
});

• Der Test ist nicht verfügbar, da wir dies auf unserer Website nicht implementiert haben.

Ende

Hinweis zur Nutzung von Backlinks und Ankern

Wir haben versucht, beim Zurücknavigieren auf einen bestimmten Anker zu setzen. Dies hat sich jedoch als nicht besonders funktional erwiesen. Es waren etliche und vergebliche Versuche notwendig, um dies mittels JavaScript in den Griff zu bekommen. 😀

Es ist auch zu beachten, wenn man das Inhaltsverzeichnis Table of Contents (Toc) anklickt, so folgt die URL mit Fragment, bspw: https://wegerl.at/zurueck-button-vorig-seite/#Was_meint_die_Fachwelt_dazu. Wenn man anschließend nach oben scrollt und zur Testseite klickt und dann zurücknavigiert, wird erneut diese URL aufgerufen. Interessanterweise führt das Zurücknavigieren zur Stelle, von der aus man geklickt hat, und nicht zur URL des Ankers selbst oder ganz oben auf der Seite, – sondern an der Stelle, von der man ursprünglich geklickt hat.

Wenn man also zuvor das Inhaltsverzeichnis (Toc) angeklickt hat und eine Anker-URL (Fragment) angezeigt wird, und danach zum 'Test 1' oder 'Test 2' anklickt und mittels 'Zurück' zurücknavigiert, landet man an der Stelle, wo man 'Test' geklickt hat, und nicht weiter unter- oder oberhalb.

Deshalb sollte das folgende JavaScript der URL automatisch den Anker oder das Fragment #anker hinzufügen und dann automatisch an die Stelle navigieren, von der aus geklickt wurde, ähnlich wie beim Toc:

/* Zurück-Button mit automatischer Anker-Einfügung */
(function($) {
    $(function() {
        $(".go-back").on("click", function(e) {
            e.preventDefault();
            
            // Überprüfen, ob die vorhergehende Seite im Verlauf existiert
            if (document.referrer) {
                var previousUrl = document.referrer;
                
                // Überprüfen, ob die vorhergehende URL bereits einen Anker hat
                if (previousUrl.indexOf('#') === -1) {
                    // Kein Anker vorhanden, Anker hinzufügen
                    previousUrl += '#anker';
                } else {
                    // Anker bereits vorhanden
                    // Überprüfen, ob der Anker mit '#anker' beginnt
                    if (!previousUrl.endsWith('#anker')) {
                        // Anker ist nicht richtig formatiert, korrigieren oder hinzufügen
                        previousUrl = previousUrl.replace(/#(.*)$/, '#anker$1');
                    }
                }
                
                // Zur aktualisierten URL navigieren
                window.location.href = previousUrl;
            } else {
                // Wenn keine vorhergehende Seite im Verlauf vorhanden ist, einfach zurücknavigieren
                window.history.back();
            }
        });
    });
})(jQuery);

Es wäre schön, wenn das funktionieren würde. Das ist jedoch nicht praktikabel, weil es dann direkt den Anker ansteuert und nicht so, wie es beim Fragment vom Table of Contents (Toc) der Fall ist. Beim Fragment von Toc wird man an die Stelle der Seite navigiert, von der aus man geklickt hat. Dies liegt daran, dass das Fragment im Toc bereits in der URL enthalten ist, während der Anker im Code nachträglich eingefügt wird. So arbeiten Browser.

  Es ist nicht direkt möglich, mit JavaScript allein die vorhergehende URL mit einem bestimmten Anker zu manipulieren, insbesondere wenn die Navigation bereits stattgefunden hat. Der Grund dafür ist, dass der Browser aus Sicherheitsgründen den direkten Zugriff auf den Browserverlauf und die vorhergehenden URLs beschränkt.

Wenn man beispielsweise die URL https://wegerl.at/zurueck-button-vorig-seite/#anker anklickt und von dort zur Testseite klickt, landet man beim Zurück-Klicken auf den Anker. Dies geschieht, weil der Anker (<a id="anker"></a>) manuell eingefügt wurde.

• Zu guter Letzt möchte ich noch erwähnen, dass es manchmal – aus Gründen, die nur der Browser kennt – vorkommt, dass beim Klicken auf 'Zurück' auch die vorherige Scrollposition wiederhergestellt wird.

Zurück zum Spaß von gestern –
denn manchmal ist alt einfach besser!

Was meint die Fachwelt dazu?

Die Steuerung der Browserhistorie kann in JavaScript komplex sein, speziell, wenn es um das Zurückkehren zur vorherigen Scrollposition geht.

• Browserverhalten: Verschiedene Browser handhaben die Wiederherstellung der Scrollposition unterschiedlich. Manche speichern die Scrollposition automatisch, andere nicht.
• JavaScript und Scroll-Events: Das Verhalten von window.history.back() kann durch Anker-Elemente beeinflusst werden. Dies kann dazu führen, dass der Zurück-Button nicht zur richtigen Position zurückkehrt.

Fazit: JavaScript und die Steuerung der Browserhistorie sind mächtige Werkzeuge, aber sie haben auch ihre Grenzen und Eigenheiten. Es ist manchmal erforderlich, verschiedene Ansätze auszuprobieren oder sogar zu akzeptieren, dass bestimmte Browserverhaltensweisen außerhalb unserer direkten Kontrolle liegen. Die Steuerung der Browserhistorie mit JavaScript ist nicht immer zuverlässig aufgrund unterschiedlicher Browserverhaltensweisen.

Anhang

Von wegen JavaScript und CSS direkt im Editor 'Text'.

JavaScript im WordPress-Editor

Im Zusammenhang mit direktem Einbetten von JavaScript-Code, wie zum Beispiel:

<a href="javascript:history.back();">→ Zurück vorig Seite</a>

wird der JavaScript-Code beim Umschalten in den visuellen Modus gelöscht. Ähnlich in folgender Form:

<script><a href="javascript:history.back();">→ Zurück vorig Seite</a></script>

Obwohl der Code im Editor stehen bleibt, wird er im Frontend nicht visuell angezeigt oder funktionell.

Zusatzinfo: Folgendes mit windows:history.back(); ist auch nicht funktionell:

<a href="windows:history.back();">→ Zurück vorig Seite</a>

Obwohl das im Editor so verbleibt, ist es im Frontend unbrauchbar.

Der Code <a href="windows:history.back();">→ Zurück vorig Seite</a> funktioniert nicht aus folgenden Gründen:

1. Ungültiges URL-Schema: Das windows: URL-Schema ist nicht gültig oder bekannt. Browser erkennen nur bestimmte URL-Schemata wie http:, https:, mailto:, tel:, usw. windows: gehört nicht dazu und wird daher nicht erkannt oder ausgeführt.
2. JavaScript in href: Das href Attribut erwartet eine gültige URL oder ein URL-Schema. Das Einfügen von JavaScript-Code direkt in href ist nicht erlaubt und wird von modernen Browsern nicht unterstützt. Stattdessen sollte JavaScript-Code innerhalb eines onclick-Events platziert werden.
3. Veraltete oder unsichere Praxis: Das direkte Einbetten von JavaScript in href ist eine veraltete und unsichere Praxis. Moderne Webentwicklung empfiehlt die Trennung von HTML und JavaScript.

Merke: JS-Code direkt im Editor 'Text' anstatt in separater Datei, das funktioniert nicht. Sicherheit: WordPress filtert JavaScript aus Beiträgen und Seiten, um Cross-Site Scripting (XSS) Angriffe zu verhindern. Dies ist eine Sicherheitsmaßnahme, um die Integrität der Website zu schützen.

JavaScript für den gezielten Einsatz

• Für den gezielten Einsatz von Code empfiehlt sich das Plug-in Header Footer Code Manager. Header Footer Code Manager.
• Oder zum gezielten Einsatz das JS im Child-Theme.

Um das JS nur für eine bestimmte Seite oder einen bestimmten Beitrag anzuwenden, sind spezifische Classen oder IDs zu verwenden, die WordPress für diese Seiten generiert.

Angenommen, die ID des Beitrags oder der Seite ist post-123. Du kannst diese ID im JS einbinden, um die Stile nur für diesen Beitrag oder diese Seite anzuwenden. Hier ist ein Beispiel:

functions.php

function mein_custom_script() {
    if (is_page('post-123')) { // ersetze 'post-123' mit der ID oder dem Slug deiner Seite
        ?>
        <script>
            // Dein JavaScript-Code hier
            console.log("JavaScript funktioniert!");
        </script>
        <?php
    }
}
add_action('wp_footer', 'mein_custom_script');

Beziehungsweise und bspw. der scripts.js im Child-Theme:

// Überprüfe, ob die Seite die spezifische Classe hat (Ersetze 123 mit der tatsächlichen Seiten-ID)
if (document.body.classList.contains('page-id-123')) {
    // Dein JavaScript-Code hier
    console.log("JavaScript funktioniert nur auf der spezifischen Seite!");
}

1. WordPress-spezifische Classen:
   • WordPress fügt jeder Seite oder jedem Beitrag spezifische Classen hinzu, wie postid-123. Die genaue Classe ist in der Adresszeile des Editors zu finden oder durch Überprüfung des Quellcodes der Seite. Im Admin-Frontend ist der Slug ebenfalls sichtbar, wenn die Maus über "Beitrag bearbeiten" gefahren wird; er wird dann links unten angezeigt.
2. Post-ID verwenden:
   • Dies stellt sicher, dass das JS nur auf den Beitrag mit der ID 123 angewendet wird.

Falls eine Seite anstelle eines Beitrags definiert werden sollte, so kann man die ID der Seite verwenden, beispielsweise .page-id-123 anstelle von .postid-123. Aufgepasst, es gibt auch noch andere Selektoren von IDs, welches sehr spezifisch sein könnte.

CSS im WordPress-Editor?

Da das Thema bereits angeschnitten ist, sollte der Abschnitt passend sein.

CSS kann im 'Text'-Editor von WordPress funktionieren und ist möglicherweise praktikabel, wenn man es nur für eine Seite verwenden möchte:

<style>
.ausnahme-beispiel {
    font-size: 24px; 
    color: #333;
    background-color: #f9f9f9;
    padding: 5px;
    margin: 20px 0;
    border: 2px solid #0073aa;
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    line-height: 2; 
    transition: all 0.3s ease;
}
</style>

Nach dem Umschalten auf visuell folgt die Form von oben:

<style>
.ausnahme-beispiel {<br />
    font-size: 24px;<br />
    color: #333;<br />
    background-color: #f9f9f9;<br />
    padding: 5px;<br />
    margin: 20px 0;<br />
    border: 2px solid #0073aa;<br />
    border-radius: 10px;<br />
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);<br />
    font-family: 'Arial', sans-serif;<br />
    line-height: 2;<br />
    transition: all 0.3s ease;<br />
}<br />
</style>

Das macht das CSS unbrauchbar. Folglich sollte die Eingabe in dieser Form erfolgen:

<style>.ausnahme-beispiel {font-size: 24px;color: #333;background-color: #f9f9f9;padding: 5px;margin: 20px 0;border: 2px solid #0073aa;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);font-family: 'Arial', sans-serif;line-height: 2;}</style>

Nur als Beispiel, statt zu stylen, könnte man dies auch im HTML auszeichnen.

Beispiel Styling:

Allerdings ist zu beachten, dass man vor dem Umschalten in den visuellen Modus den Cursor außerhalb des Style-Tags setzt. Andernfalls kann es zu einer Umformatierung kommen, die das CSS unbrauchbar macht:

<style>.ausnahme-beispiel {font-size<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>: 24px;</style>

• Siehe Sonderbares Verhalten des Codes.

Um das CSS nur für eine bestimmte Seite oder einen bestimmten Beitrag anzuwenden, sind ebensolche Classen oder IDs zu verwenden, die WordPress für diese Seiten generiert. Hier ist ein Beispiel, wie das CSS angepasst werden kann:

.postid-123 .selektor {…

• Anderes mit <button> Style im Titel Browserneuladung (Reload page). 🙂

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Juli