Werbung

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

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.

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 Class

Im Folgenden ist eine Lösung, die sich leicht anpassen lässt und auf Classen basiert, um mehrfach auf der gleichen Seite verwendet zu werden. Den folgenden JavaScript-Code in die Datei scripts.js des Child Themes einfügen:

document.addEventListener("DOMContentLoaded", function() {
  const goBackButtons = document.querySelectorAll(".go-back");
  
  goBackButtons.forEach(button => {
    button.addEventListener("click", function(e) {
      e.preventDefault();
      window.history.back();
    });
  });
});

Hinweis zur Nutzung von Class und ID: Wenn du in JavaScript statt einer Classe (class ) eine ID (id) verwendest, kann es zu Problemen kommen, insbesondere wenn du den Zurück-Button mehrmals auf derselben Seite nutzt. Das liegt daran, dass IDs in HTML eindeutig sein müssen und nur einmal auf einer Seite vorkommen dürfen, während Classen beliebig oft wiederverwendet werden können. Die Raute (#go-back) vor dem Namen kennzeichnet eine ID, während der Punkt (.go-back) eine Class kennzeichnet. Verwende daher in diesem Fall lieber Classen für wiederverwendbare Elemente.

Button oder Link? – Das richtige HTML-Element

Die Verwendung eines <button>-Tags für den Zurück-Button ist praktisch, da die Formatierung oft automatisch durch das Theme vorgenommen wird. So wird beispielsweise die Akzentfarbe des Themes verwendet, was die Gestaltung der Seite konsistent hält.

Start-Tag button mit class und Selektor go-back:

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

Falls man den Button-Style nicht verwenden möchte, kann man stattdessen auch einen Link einsetzen:

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

Back-Link mit Shortcode

Möchte man einen Back-Link über einen Shortcode einfügen, kann dies mit dem folgenden PHP-Code zusätzlich zum obigen JavaScript in der functions.php umsetzt werden:

functions.php

/* Shortcode: Back-Link */
add_shortcode('backlink', function() {
    return '<a href="#" class="go-back">Zurück zur vorherigen Seite</a>';
});

Verwende dann einfach [backlink] im Editor, um den Button auf der Seite zu platzieren.

Shortcode im <button>-Style

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

<button>[backlink]<button> eingibt.

Wenn der Button-Stil generell angewendet wird, kann der folgende Code hilfreich sein, um die Formatierung korrekt einzufügen. Um den Back-Link mit Shortcode im Button-Stil zu verwenden, ist zusätzliches JavaScript erforderlich, damit der Button auch durch Drücken der Enter-Taste aktiviert werden kann.

JavaScript: Das click-Event ist wie gehabt, um die normale "Zurück"-Funktionalität bei Mausklicks zu ermöglichen.

• Zusätzlich wird ein keydown-Event hinzugefügt, damit der "Button" auch mit der Enter- oder Leertaste funktioniert, was wichtig für die Zugänglichkeit (Accessibility) ist.

/* Zurück Button: Back-link */
document.addEventListener("DOMContentLoaded", function() {
  const goBackButtons = document.querySelectorAll(".go-back");

  goBackButtons.forEach(button => {
    button.addEventListener("click", function(e) {
      e.preventDefault();
      window.history.back();
    });

    button.addEventListener("keydown", function(e) {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        window.history.back();
      }
    });
  });
});

Der Shortcode wird in der functions.php erstellt:

/* Shortcode: Back-Link im Button-Style */
add_shortcode('backlink', function() {
    return '<span class="go-back button" style="cursor: pointer;" role="button" tabindex="0" aria-label="Zurück zur vorherigen Seite">Zurück zur vorherigen Seite</span>';
});

Somit wird mittels [backlink] der Zurück-Button im Button-Stil visuell.

CSS: Fokusstil für den span-Tag: In vielen modernen Browsern wird der Fokus-Stil (:focus-visible) automatisch auf <button>-Elemente angewendet. Dies bedeutet, dass, wenn ein Benutzer die Tastatur verwendet, um durch die Seite zu navigieren, der Button visuelles Feedback erhält, um den aktuellen Fokus anzuzeigen. Dies ist für die Barrierefreiheit, da es Tastaturnutzern hilft, sich auf der Seite zu orientieren.

Bei anderen HTML-Elementen, wie <span>, wird dieser automatische Stil jedoch nicht angewendet. Daher sollte man für diese Elemente die Fokus-Stile selbst definieren, um sicherzustellen, dass sie die gleiche Zugänglichkeit bieten.

Beispiel für die manuelle Anwendung von :focus-visible:

/* Focus visible Stile für den Span-Tag */
span.go-back.button:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

Weiteres zur Tastaturnavigation ist im Beitrag Tastaturnavigation: Fokussierung und Interaktion mit JavaScript.

Back-Links im Admin-Frontend und das Plug-In reBusted! – Ein Hinweis

Beim Klicken auf "Zurück" im Admin-Bereich wird die ursprüngliche Scrollposition möglicherweise nicht wiederhergestellt. Dies ist nicht ausschließlich auf den Browser zurückzuführen, sondern hängt mit dem Plug-in reBusted! zusammen, welches den Cache des Browsers beim Seitenaufruf zurücksetzt. Obwohl reBusted! für den Workflow im Admin-Frontend optimal ist, führt es dazu, dass beim Zurücknavigieren die Scrollposition verloren geht. Dies erweckt den Eindruck, dass der "Zurück"-Button nicht korrekt funktioniert, während das Verhalten außerhalb des Admin-Bereichs einwandfrei ist.

Beachtung beim Zurücknavigieren mit Table of Contents Toc und reBusted!

Beim Anklicken des Inhaltsverzeichnisses (Toc) wird die URL mit einem Fragment ergänzt, z. B. https://wegerl.at/zurueck-button-vorig-seite/#Hinweis_Back-Links_im_Admin-Frontend_und_Plug-in_reBusted. Wenn danach nach oben gescrollt und zu einer Testseite navigiert wird, ruft das Zurücknavigieren erneut die URL mit dem Fragment auf. Interessanterweise führt das jedoch nicht zur Ankerposition oder an den Seitenanfang, sondern zurück an die Stelle, von der aus der Klick auf die Testseite erfolgte.

Das Verhalten bleibt auch bei aktiviertem reBusted! unverändert: Wenn eine Anker-URL (Fragment) nach einem Toc-Klick verwendet wurde und anschließend auf "Test 1" oder "Test 2" geklickt wird, führt das Zurücknavigieren wieder genau zu der Position, an der der Test-Link angeklickt wurde – weder darüber noch darunter.

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

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 September