Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Zurück-Button
smilies.4-user.de

Zurück-Button vorig Seite!
– sicher ganz praktikabel

Werbung

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


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


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.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


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


Classic Editor & Advanced Editor Tools
Erleben Sie es.


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.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


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





Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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.

Zurück-Button mit Start-Tag <button>

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.

<button>Button</button>

… soweit noch ohne Zuweisung einer Funktion.

Back-Link zsm. Start-Tag <button>

Zurück-Button mit JavaScript:

Einen einfachen Zurück-Button, der auf die vorherige Seite im Browser zurückführt, kann mit dem folgenden HTML-Code erreicht werden:

<input type="button" value="Zurück" onClick="javascript:history.back()">

Dieser Code verwendet den eingebauten JavaScript-Befehl history.back(), um die Zurück-Funktionalität im Browser auszulösen. Beachte, dass dies auf der nativen Fähigkeit des Browsers basiert und kein zusätzliches JavaScript-Framework erfordert.

Zurück-Button-Funktionalität mit jQuery:

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);

Merkhilfe 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 Klasse kennzeichnet. Es ist zu beachten, dass CSS-IDs auf einer Seite nur einmal verwendet werden dürfen, während CSS-Klassen beliebig oft wiederverwendet werden können.

… und im HTML:

Start-Tag button mit Attributname bzw. Selektor class:

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

Jetzt können wir die Seite TEST Zurück-Buttons öffnen und von dort den Button "Zurück Button" anklicken.

Abseits des Hauptthemas:
der Start-Tag <button> mit einem Link

Abseits des Hauptthemas, aber da es gerade passt: der Start-Tag <button> mit einem Link:

Zur Kennzeichnung im HTML, etwa für den Link mit dem Start-Tag <a href="">, sowie dem Start-Tag <button>.

<a href="https://wegerl.at/inhaltsverzeichnis-sitemap/"><button>Inhaltsverzeichnis in der Form von Sitemaps</button></a>

Klicke hier für den Test!

Den Button formatieren: genauso wie oben, mit dem Start-Tag <button> und dem Attribut style für die Deklarationen ("Eigenschaft-Wert"-Kombination).

<a href="https://wegerl.at/inhaltsverzeichnis-sitemap/"><button style="font-size: 16px; padding: 15px; width: 100%; background-color: #772930; color: #dadada;">Inhaltsverzeichnis in der Form von Sitemaps</button></a>

Back-Link mit Shortcode

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, kann man den Shortcode in Kombination mit CSS-Regeln verwenden, um das Aussehen des Links anzupassen.

functions.php

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

Beispiel und Kombination mit Start-Tag <button>:

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

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.

Jetzt können wir die Seite TEST Zurück-Buttons öffnen und von dort den Button "Zurück vorig Seite" anklicken.

Weitere Informationen zu Shortcodes findest du im Artikel Shortcodes – selbst erstellen.

Die Snippets zur functions.php ab in das Plug-in Code Snippets.
Mit Obhut von Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beispiel Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Merkhilfe, wie es nicht richtig ist! – Wie es hier oben im Code: <a href="javascript:history.back();">→ Zurück zur vorherigen Seite</a> direkt im Text-Modus eingegeben.

Zunächst ist es im Dashboard unter "Einstellungen" > "Schreiben" von Vorteil, die Option "WordPress soll falsch verschachteltes XHTML automatisch korrigieren" zu aktivieren. Dadurch würde der Code das Speichern im Text-Modus erfordern. Wenn du dann wieder auf den "Visuell"-Modus umschaltest, würde der Code teilweise gelöscht. Und weiter, dies ist problematisch, da er JavaScript enthält. Um dies zu vermeiden, müsste bei der Bearbeitung desselben Beitrags zuerst eine andere Seite im Text-Modus abgespeichert werden. Andernfalls geht der Code bereits beim Aufruf des Editors im "Visuell"-Modus verloren 😛 Abgesehen davon befindet sich dies außerhalb der Konformität und Richtigkeit in WordPress.


Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024 April