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?

Eine der häufigsten Beschwerden, die wir im Food-Blogging sehen, ist, dass Leser lange Geschichten und Anzeigen durchscrollen müssen, bevor sie zum eigentlichen Rezept gelangen.

Während diese Geschichten bei SEO und Monetarisierung helfen und viele treue Leser die persönliche Note schätzen, hat nicht jeder die Zeit, alles durchzulesen.

Denken Sie darüber nach: Jemand ist vielleicht im Lebensmittelgeschäft und prüft Zutaten oder in seiner Küche, bereit zum Kochen. Er möchte einfach schnellen Zugriff auf die Rezeptanweisungen.

Hier ist eine Schaltfläche „Zum Rezept springen“ sehr nützlich. Sie bietet eiligen Besuchern eine schnelle Möglichkeit, zum Rezept zu springen, während Sie gleichzeitig den Erzählstil und die Monetarisierungsstrategie Ihres Blogs beibehalten können.

Auf diese Weise machen Sie beide Arten von Lesern glücklich – diejenigen, die Ihre Inhalte genießen, und diejenigen, die das Rezept schnell benötigen.

Das Hinzufügen dieser Schaltfläche kann die Benutzererfahrung auf Ihrer Website verbessern und Besucher potenziell länger binden, wodurch Ihre Seitenaufrufe erhöht und Absprungraten reduziert werden.

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: WP Tasty verwenden, um einen „Zum Rezept springen“-Button hinzuzufügen (empfohlen)
• Methode 2: Verwenden Sie benutzerdefinierten Code, um einen „Zum Rezept springen“-Button hinzuzufügen (kostenlos)
• Bonus-Tipps zur Verbesserung des Benutzererlebnisses Ihres Food-Blogs

Methode 1: WP Tasty verwenden, um einen „Zum Rezept springen“-Button hinzuzufügen (empfohlen)

Der einfachste Weg, einen Zum Rezept-Button in WordPress hinzuzufügen, ist die Verwendung von WP Tasty.

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 den „Jump to Recipe“-Button hinaus ermöglicht Ihnen WP Tasty, Ihre Rezepte druckbar zu machen und sie mühelos in die bevorzugte Maßeinheit des Lesers umzuwandeln.

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

Wenn Sie mehr über die Funktionen von WP Tasty erfahren möchten und wie es Ihrem Blog zugutekommen kann, lesen Sie unbedingt unseren umfassenden Test des Plugins.

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 WP Tasty zu nutzen, müssen Sie zuerst einen kostenpflichtigen Plan erwerben. Sie können entweder das WP Tasty All Access Bundle oder das eigenständige WP Tasty Tasty Recipes Plugin 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 WP Tasty 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 Erzielung dieses Effekts mit benutzerdefiniertem Code ist etwas komplizierter, insbesondere für Anfänger.

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 den „Zum Rezept springen“-Button automatisch in allen Rezeptbeiträgen einzufügen

Der erste Code-Schnipsel fügt automatisch die Schaltfläche „Zum Rezept springen“ zu allen Blogbeiträgen hinzu, die einen Rezeptbereich enthalten. Sie können 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, die Funktion namens has_recipe_anchor, prüft, ob in Ihrem Blogbeitrag eine Überschriften-Tag (H1 bis H6) vorhanden ist, die einen Anker mit dem Namen „recipe“ hat. Die Funktion preg_match durchsucht Ihren Text nach diesem spezifischen Muster.

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 die Funktion has_recipe_anchor aus dem vorherigen Schritt eine Überschrift mit dem Rezept-Anker gefunden hat, erstellt sie den HTML-Code für den Sprung-Button. Dann fügt sie diesen Code direkt vor dem Inhalt Ihres Blogbeitrags ein.

Die letzte Codezeile, add_filter('the_content', 'add_jump_to_recipe_button');, weist WordPress im Wesentlichen an, die Funktion add_jump_to_recipe_button auszuführen, wann immer der Inhalt eines Blogbeitrags abgerufen wird.

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 Code hinzu, um den „Zum Rezept springen“-Button 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 in background-color (für die Button-Farbe), color (für den Text) und background-color unter .jump-to-recipe-button:hover (für die Button-Farbe, wenn der Cursor über dem Button schwebt) ersetzen.

Nachdem Sie den Code eingefügt haben, scrollen Sie nach unten zum Abschnitt „Insertion“ und wählen Sie „Auto Insert“ als Einfügemethode. Wählen Sie dann „Site Wide Footer“ 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 Überschriftenblock Ihres Rezeptbereichs. Öffnen Sie dann im Seitenbereich der Blockeinstellungen das Menü „Erweitert“ und geben Sie „recipe“ in das Feld „HTML-Anker“ ein.

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

Abgesehen von einem „Jump to Recipe“-Button gibt es andere WordPress-Designelemente, die Sie verwenden können, um die Benutzererfahrung auf Ihrem Food-Blog zu verbessern.

Zum Beispiel kann das Hervorheben von Text in Ihren Beiträgen eine großartige Möglichkeit sein, wichtige Informationen oder Kochtipps hervorzuheben. Dies könnten spezifische Zutaten, Kochzeiten oder alternative Ersetzungen sein.

Fußnoten sind ein weiteres nützliches Werkzeug. Sie ermöglichen es Ihnen, einen bestimmten Rezeptionsschritt oder eine Zutat zu erläutern, ohne den Fluss Ihrer Hauptanweisungen zu unterbrechen.

Viele Benutzer werden Ihre Rezepte von ihren Handys oder Tablets aus aufrufen. Ein mobilfreundliches Design stellt sicher, dass Ihre Inhalte korrekt formatiert und auf verschiedenen Bildschirmgrößen gut lesbar sind.

Schließlich können Breadcrumb-Navigationslinks die Website-Navigation verbessern. Diese kleinen Links am oberen Rand der Seite zeigen den Benutzern ihren aktuellen Standort in der Hierarchie Ihrer Website an. Dies erleichtert es ihnen, frühere Abschnitte wiederzufinden oder verwandte Rezepte zu durchsuchen.

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.