So fügen Sie einen „Zum Rezept springen“-Button in WordPress hinzu (2 einfache Wege)

Food-Blogger fragen uns oft nach Funktionen, die für ihre Leser den größten Unterschied machen.

Nach jahrelanger Beobachtung vieler Food-Blogs haben wir festgestellt, dass das Hinzufügen eines "Zum Rezept springen"-Buttons eine der effektivsten Verbesserungen ist, die Sie vornehmen können.

Es ist eine kleine Änderung, die viel dazu beiträgt, dass Besucher schnell finden, wonach sie suchen. Außerdem ist sie einfach auf jeder WordPress-Website einzurichten.

Wir haben verschiedene Lösungen getestet und zwei zuverlässige Methoden gefunden, die durchweg gut funktionieren. Beide Methoden sind anfängerfreundlich und sorgen dafür, dass Ihre Schaltfläche „Zum Rezept springen“ in wenigen Minuten funktioniert.

Warum eine Schaltfläche „Zum Rezept springen“ in Food-Blog-Posts hinzufügen?

Ein „Zum Rezept springen“-Button ist ein Navigationslink, der am Anfang eines Blogbeitrags platziert wird. Technisch gesehen fungiert er als HTML-Anker, der den Browser sofort nach unten zur Rezeptkarte scrollt und den Einführungstext überspringt.

Leser beschweren sich oft darüber, lange Geschichten und Anzeigen durchscrollen zu müssen, um die Zutaten zu finden. Während Langform-Inhalte bei der Monetarisierung helfen, benötigen viele Besucher sofortigen Zugriff auf die Anweisungen beim Kochen oder Einkaufen.

Das Hinzufügen dieses Buttons ermöglicht es Ihnen, beide Arten von Lesern zu bedienen. Sie können Ihre persönlichen Erzählungen für treue Fans beibehalten und gleichzeitig eine schnelle Abkürzung für Benutzer bereitstellen, die schnell Antworten benötigen.

Dies verbessert das gesamte Benutzererlebnis (UX) auf Ihrer Website. Wenn Benutzer leicht finden, was sie brauchen, ist es unwahrscheinlich, dass sie zu den Suchergebnissen zurückspringen.

In diesem Sinne zeigen wir Ihnen 2 einfache Möglichkeiten, einen Zum Rezept-Button zu Ihrem Food-Blog hinzuzufügen: mit einem WordPress-Rezept-Plugin und mit benutzerdefiniertem Code. Sie können die Schnelllinks unten verwenden, um zu Ihrer bevorzugten Methode zu springen:

Methode 1: Verwenden Sie WP Tasty Recipes, um eine Schaltfläche „Zum Rezept springen“ hinzuzufügen (empfohlen)

Der einfachste Weg, eine Schaltfläche „Zum Rezept springen“ in WordPress hinzuzufügen, ist die Verwendung von WP Tasty Recipes.

Dieses Rezeptkarten- und Erstellungs-Plugin wurde von uns ausgiebig getestet, und wir haben viele Funktionen entdeckt, die es zu einem Favoriten unter Food-Bloggern machen.

Über die Schaltfläche „Zum Rezept springen“ hinaus ermöglicht Ihnen Tasty Recipes, Ihre Rezepte druckbar zu machen und sie mühelos in die bevorzugte Maßeinheit des Lesers umzurechnen.

Zusätzlich können Sie problemlos Nährwertangaben, Kochzeit, Portionsgröße und Benutzerbewertungen übersichtlich und organisiert anzeigen.

Wenn Sie mehr über die Fähigkeiten des Plugins erfahren möchten und wie es Ihrem Blog zugutekommen kann, lesen Sie unbedingt unsere umfassende Bewertung von WP Tasty.

Ein Nachteil dieses Rezept-Plugins ist, dass es keine kostenlose Version gibt, aber es ist eine großartige Investition für ernsthafte Food-Blogger, die online Geld verdienen möchten.

Um das Plugin zu nutzen, müssen Sie zunächst einen kostenpflichtigen Plan erwerben. Sie können entweder das WP Tasty All Access Bundle oder das eigenständige Plugin Tasty Recipes wählen.

Nach dem Kauf können Sie das Plugin herunterladen und auf Ihrer WordPress-Website installieren. Weitere Informationen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Gehen Sie danach in Ihrem WordPress-Adminbereich zu WP Tasty » Dashboard und klicken Sie auf „Lizenz eingeben“.

Fügen Sie als Nächstes Ihren Plugin-Lizenzschlüssel ein, den WP Tasty Ihnen nach dem Kauf per E-Mail gesendet haben sollte.

Wählen Sie dann entweder „Alle Plugins“ oder „Tasty Recipes“ im Dropdown-Menü „Plugins“ aus. Klicken Sie auf „Lizenz speichern“.

Wenn Sie damit fertig sind, gehen Sie in Ihrem WordPress-Dashboard zu WP Tasty » Tasty Recipes und wechseln Sie zum Tab „Einstellungen“.

Standardmäßig sind die Optionen für die Buttons „Zum Rezept springen“ und „Rezept drucken“ aktiviert, sodass Sie sie so belassen können.

Eine Sache, die Sie an den Buttons ändern können, ist der „Quick Links Style“.

WP Tasty kann die Option „Zum Rezept springen“ auch als normalen Textlink anstelle von Buttons anzeigen. Wenn Sie möchten, können Sie „Links“ auswählen.

Aber natürlich können Sie auch einfach die Option Schaltflächen wählen, wenn Sie das bevorzugen.

Die Option „Buttons“ sieht auch auffälliger aus und ist für die Leser leicht zu erkennen.

Es gibt tatsächlich noch viel mehr Einstellungen, mit denen Sie hier experimentieren können, wie z. B. das Aktivieren von Kontrollkästchen für die Zutatenliste und die Rezeptskalierung. Stellen Sie sicher, dass Sie die Optionen auswählen, die am besten zu Ihrem Blog passen.

Wenn Sie fertig sind, scrollen Sie einfach nach unten auf der Seite und klicken Sie auf „Änderungen speichern“.

Wenn Sie nun die Rezeptkarte von WP Tasty verwenden, werden die Schaltflächen „Zum Rezept springen“ und „Rezept drucken“ oben angezeigt.

Um die Rezeptkarte zu verwenden, können Sie einen neuen Rezeptbeitrag erstellen oder einen vorhandenen mit dem Gutenberg-Blockeditor bearbeiten. Anschließend können Sie dieser Schritt-für-Schritt-Anleitung auf anleitung zum Hinzufügen eines Rezeptkartenblocks in WordPress für weitere Informationen folgen.

Ein Vorteil der Verwendung von Tasty Recipes zum Hinzufügen des Sprunglinks ist der sanfte Scroll-Effekt. Auf diese Weise können Leser direkt zu den Rezeptanweisungen navigieren, ohne ruckartige Sprünge auf der Seite.

Die Verwendung von benutzerdefiniertem Code, um diesen Effekt zu erzielen, ist kompliziert, da er normalerweise JavaScript oder die Bearbeitung von Theme-Dateien erfordert. Deshalb empfehlen wir die Plugin-Methode für die meisten Benutzer.

Wenn Sie jedoch kostenlos eine Schaltfläche „Zum Rezept springen“ hinzufügen möchten, können Sie die nächste Methode ausprobieren.

Methode 2: Verwenden Sie benutzerdefinierten Code, um einen „Zum Rezept springen“-Button hinzuzufügen (kostenlos)

Das manuelle Hinzufügen eines „Zum Rezept springen“-Buttons mag für absolute Anfänger einschüchternd klingen, aber keine Sorge, wir führen Sie Schritt für Schritt durch den Prozess.

Wenn Sie zum ersten Mal benutzerdefinierten Code zu WordPress hinzufügen, empfehlen wir die Verwendung eines Code-Snippet-Plugins wie WPCode.

Wir haben das Plugin ausgiebig getestet und es bietet eine sichere und unkomplizierte Möglichkeit, Code-Snippets einzufügen, ohne Theme-Dateien bearbeiten zu müssen. Dies minimiert das Risiko, das Layout oder die Funktionalität Ihrer Website versehentlich zu beschädigen.

Neugierig, was WPCode noch kann? Schauen Sie sich unseren leicht verständlichen Testbericht an, in dem wir die Funktionen aufschlüsseln und erklären, warum es ein großartiges Werkzeug für WordPress-Benutzer ist.

Um WPCode zu verwenden, installieren Sie das Plugin in Ihrem WordPress-Admin-Dashboard. Sie können unseren Schritt-für-Schritt-Leitfaden unter so installieren Sie ein WordPress-Plugin für weitere Details lesen.

Gehen Sie dann zu Code Snippets » + Snippet hinzufügen. Wählen Sie hier „Eigene Codes hinzufügen (Neues Snippet)“ und klicken Sie auf „Snippet verwenden“.

Es gibt zwei Code-Schnipsel, die Sie separat in WPCode einfügen müssen. Gehen wir sie einzeln durch:

Fügen Sie einen Code hinzu, um die Schaltfläche „Zum Rezept springen“ automatisch einzufügen

Der erste Code-Schnipsel fügt automatisch die Schaltfläche „Zum Rezept springen“ in allen Blogbeiträgen hinzu, die einen Rezeptbereich enthalten. Dazu können Sie Ihren Schnipsel „Automatisch Schaltfläche „Zum Rezept springen“ hinzufügen“ nennen.

Wählen Sie dann im Dropdown-Menü „Code Type“ die Option „PHP Snippet“ aus.

Fügen Sie im Feld „Code-Vorschau“ die folgenden Codezeilen ein:

/**
 * Check if the post content contains a heading with the #recipe anchor
 */
function has_recipe_anchor($content) {
  $pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
  return preg_match($pattern, $content) === 1;
}

/**
 * Add "Jump to Recipe" button to posts
 */
function add_jump_to_recipe_button($content) {
  if (has_recipe_anchor($content)) {
    $jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
    $content = $jump_button . $content;
  }
  return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');

Lassen Sie uns durchgehen, wie dieser Code funktioniert.

Der erste Teil des Codes überprüft den Inhalt Ihres Blogbeitrags. Er sucht speziell nach einer Überschriften-Tag (H1 bis H6), die eine Anker-ID mit dem Wert „recipe“ hat.

Der zweite Teil, die Funktion namens add_jump_to_recipe_button, ist für das Hinzufügen der eigentlichen Schaltfläche zu Ihrem Beitrag verantwortlich.

Wenn der Code die Anker-ID „recipe“ findet, erstellt er den HTML-Code für die Sprungschaltfläche. Dann fügt er diesen Code direkt vor dem Inhalt Ihres Blogbeitrags ein.

Auf diese Weise kann der Code automatisch nach der Rezeptüberschrift suchen und den Button bei Bedarf hinzufügen.

Das bedeutet, Sie müssen einen #recipe-Anker zum Rezeptteil Ihres Blogbeitrags hinzufügen. Keine Sorge, wir zeigen Ihnen später, wie das geht.

Scrollen Sie nun nach unten zum Abschnitt „Einfügen“ und stellen Sie sicher, dass die Methode „Automatisch einfügen“ ausgewählt ist. Was den Speicherort betrifft, können Sie „Nur Frontend“ wählen, damit der Code nur im sichtbaren Teil Ihrer WordPress-Website ausgeführt wird.

Schalten Sie dann den Schalter in der oberen rechten Ecke um, um den Code auf „Active“ zu setzen, und klicken Sie auf „Save Snippet.“

Fügen Sie einen Code-Schnipsel hinzu, um die Schaltfläche „Zum Rezept springen“ zu gestalten

Wir fügen nun benutzerdefinierten CSS-Code hinzu, um Ihren Call-to-Action-Button zu gestalten. Wiederholen Sie die Schritte, um einen neuen benutzerdefinierten Code-Schnipsel in WPCode zu erstellen und ihm einen einfachen Namen zu geben, z. B. 'Style Jump to Recipe Button'.

Wählen Sie als Code-Typ „CSS-Snippet“.

Nun haben wir einen CSS-Code erstellt, der unseren Button grün und den Text darin weiß macht. Wie folgt:

.jump-to-recipe-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
}

.jump-to-recipe-button:hover {
    background-color: #45a049;
}

Wenn Sie andere Farben verwenden möchten, können Sie einfach die Hex-Codes im obigen Code ersetzen.

Sobald Sie den Code eingefügt haben, scrollen Sie nach unten zum Abschnitt „Einfügen“ und wählen Sie „Automatisch einfügen“ als Einfügemethode. Wählen Sie dann „Website-weiter Header“ als Speicherort.

Alles, was Sie als Nächstes tun müssen, ist, den Code-Schnipsel zu aktivieren und auf „Schnipsel speichern“ zu klicken.

Fügen Sie den #recipe-Anker zu Ihren Rezept-Blogbeiträgen hinzu

Selbst wenn Sie die beiden Code-Snippets aktiviert haben, wird der Sprung-Button nicht angezeigt, es sei denn, Sie fügen einen #recipe-Anker zum Rezeptbereich Ihrer WordPress-Blogbeiträge hinzu. Das werden wir jetzt tun.

Erstellen Sie zuerst einen neuen Rezept-Blogbeitrag oder öffnen Sie einen vorhandenen im Block-Editor.

In unserem Beispiel verwenden wir einen Überschriften-Tag (H2), um den Rezeptbereich unseres Blogbeitrags zu kennzeichnen. Wir empfehlen Ihnen, dasselbe zu tun, damit es für die Leser einfacher ist, ihn zu finden, wenn sie Ihren Beitrag lesen. Suchmaschinen schätzen es auch, wenn Ihre Blog-Inhalte eine organisierte Struktur haben.

Klicken Sie auf den Überschriften-Block Ihres Rezeptbereichs. Öffnen Sie dann in der Seitenleiste der Blockeinstellungen das Menü „Erweitert“. Geben Sie dann „recipe“ in das Feld „HTML-Anker“ ein. Achten Sie darauf, nur Kleinbuchstaben zu verwenden.

Dies dient als Ankerlink für den Sprungbutton.

Wenn das erledigt ist, klicken Sie auf „Veröffentlichen“ oder „Aktualisieren“.

Wenn Sie Ihre Website auf Mobilgeräten oder dem Desktop in der Vorschau anzeigen, sollten Sie nun oben in Ihren Blog-Inhalten nach dem Beitragstitel eine Schaltfläche „Zum Rezept springen“ sehen.

Bonustipps zur Verbesserung der Benutzererfahrung Ihres Food-Blogs

Über den „Zum Rezept“-Button hinaus gibt es weitere Designelemente, mit denen Sie Ihren Food-Blog benutzerfreundlicher gestalten können. Hier sind einige wirkungsvolle Verbesserungen:

Häufig gestellte Fragen zu WordPress-Schaltflächen

Hier sind einige Fragen, die unsere Leser häufig zum Hinzufügen von Schaltflächen in WordPress gestellt haben:

Wie füge ich Links zu Schaltflächen in WordPress hinzu?

Um einen Link hinzuzufügen, wählen Sie den Schaltflächenblock im WordPress-Editor aus. Klicken Sie auf das Link-Symbol in der Symbolleiste, die über der Schaltfläche erscheint, und fügen Sie dann Ihre Ziel-URL in das Feld ein.

Wie füge ich in WordPress eine „Nach oben“-Schaltfläche hinzu?

Die einfachste Methode ist die Installation eines Plugins wie WPFront Scroll Top. Nach der Aktivierung fügt es automatisch eine Schaltfläche hinzu, die erscheint, wenn ein Benutzer nach unten scrollt, und es ihm ermöglicht, schnell zum Seitenanfang zurückzukehren.

Um loszulegen, sehen Sie sich unser Tutorial zum Hinzufügen eines Scroll-to-Top-Effekts in WordPress an.

Wie füge ich einen Folgen-Button auf einem WordPress-Blog hinzu?

Sie können Folgen-Buttons mit dem integrierten Social Icons-Block im Block-Editor hinzufügen. Suchen Sie einfach nach „Social Icons“, fügen Sie den Block hinzu und klicken Sie auf das „Plus“-Symbol, um auszuwählen, mit welchen Social-Media-Plattformen Sie sich verknüpfen möchten.

Für weitere Informationen werfen Sie einen Blick auf unseren Leitfaden zum Hinzufügen eines Facebook-Follow-Buttons für Autoren in WordPress unter Hinzufügen eines Facebook-Follow-Buttons für Autoren in WordPress.

Wie füge ich ein Popup in WordPress ein?

Wir empfehlen die Verwendung von OptinMonster zum Hinzufügen von Popups. Es ermöglicht Ihnen, benutzerdefinierte Popups mit einem Drag-and-Drop-Builder zu gestalten und genau zu steuern, wann sie erscheinen, z. B. wenn ein Benutzer Ihre Website verlassen möchte.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie eine Schaltfläche „Zum Rezept springen“ in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zu wichtigen Designelementen für eine effektive WordPress-Website und wie Sie Online-Essensbestellungen in WordPress einrichten lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.