Im folgenden Eintrag zeige ich euch, wie man die WordPressseite für einen Foodblog so erweitert, dass in jedem Beitrag an einer beliebigen Stelle ein Rezept eingefügt werden kann. Der Eintrag richtet sich an technisch versierte Leser mit PHP, HTML und CSS-Kenntnissen.
Wichtig dabei war mir, unabhängig von irgendwelchen Rezeptplugins zu sein, die irgendwann nicht mehr gewartet werden. Das ist mir nämlich dummerweise schonmal passiert.
Vorgehensweise:
- Vorüberlegungen
- Umsetzung der Struktur in ACF
- Gestaltung des Rezeptbereichs (und Einbindung als Shortcode)
Für das folgende Beispiel nutze ich nur die kostenfreie Variante von dem WordPress-Plugin ACF (kurz für Advanced Custom Fields). Prinzipiell wäre auch eine Lösung ohne ACF möglich, diese ist jedoch weniger benutzerfreundlich. Aber generell wäre das Thema vielleicht einen eigenen Beitrag wert.
Vorüberlegungen
Bevor es losgeht, müssen wir uns erstmal überlegen, wie unser Rezept aussehen soll, also welche Elemente es haben soll. Das können z. B. ein Rezeptname, eine Zutatenliste, eine Beschreibung und ein Bild sein. Theoretisch sind noch viele weitere Felder möglich, wie z. B. Menge, Schwierigkeitsgrad, Zubereitungszeit, …
Als Elemente wählen wir
- Rezeptname (einzeiliger Text, Pflichtfeld)
- Rezeptbild (Bild)
- Zutatenliste (mehrzeiliger Text, Pflichtfeld)
- Beschreibung (mehrzeiliger Text, Pflichtfeld)
- Menge (einzeiliger Text)
Rezeptname, Zutatenliste und Beschreibung sind für unser Rezept Pflichtfelder, die anderen Elemente sind optional.
Umsetzung der Struktur in ACF
Unter Individuelle Felder/ Feldgruppen/Erstellen können die Feldgruppen erstellt werden.
Für das Rezept wird jetzt über ACF eine Feldgruppe (namens „Rezept“) angelegt. Dort können direkt die gewünschten Felder mit den Feldtypen angelegt werden:
Dem Rezept fügen wir die vorher festgelegten Felder zu:
Dabei reicht es, nur Feldbeschriftung, -name und -typ und „Erforderlich?“ festzulegen. Alle anderen Felder sind optional und werden für unser Beispiel nicht benötigt. Für die beiden mehrzeiligen Elemente „Zutatenliste“ und „Beschreibung“ wählen wir zusätzlich noch bei „Neue Zeilen“ die Rendermethode „Automatisches hinzufügen von Absätzen“, damit wir später eine schöne Anzeige haben, in der jede Zutat bzw. jeder Arbeitsschritt eine neue Zeile erhält.
Somit ergibt sich folgende Feldgruppe:
Das war’s schon. Einfach oder?
Gestaltung des Rezeptbereichs und Einbindung als Shortcode
In unserem Childtheme legen wir einen Unterordner „recipe“ an. In diesem Ordner wandern die Dateien, die nur mit dem Rezeptbereich zu tun haben. In unserem Fall sind das „recipe.php“ und „recipe.css“.
Außerdem wird die functions.php ergänzt, damit wir den Rezeptbereich in unsere Beiträge als Shortcode an einer beliebigen Stelle integrieren können.
/***** Shortcodes ****************/
add_shortcode( 'my_recipe', 'show_recipe' );
function show_recipe() {
ob_start(); //Ausgabepufferung aktivieren
get_template_part('recipe/recipe'); //Template-Part laden
return ob_get_clean(); //Gibt Ausgabepuffer zurück und löscht aktuellen Ausgabepuffer
}
Wenn wir jetzt den Shortcode [my_recipe] in einen Beitrag einfügen, wird dort die Datei recipe.php geladen.
Im nächsten Schritt befüllen wir die recipe.php. Hierbei benötigen wir nur rudimentäre PHP-Kenntnisse, da wir zum Einbinden der Felder nur zwei Funktionen (siehe ACF Documentation) benötigen. Zusätzlich wird noch die recipe.css integriert, womit der Rezeptteil später gestylt wird.
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>recipe/recipe.css">
<section id="recipe">
<section id="recipe_header" class="hero">
<section id="recipe_image">
<?php if( get_field('rezeptbild') ): ?>
<?php $image = get_field('rezeptbild'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</section>
<section id="recipe_banner">
<?php if( get_field('rezepttitel') ): ?>
<h1><?php the_field('rezepttitel'); ?></h1>
<?php endif; ?>
</section>
</section>
<section id="recipe_info">
<?php if( get_field('menge') ): ?>
<h2><?php the_field('menge'); ?></h2>
<?php endif; ?>
<!-- ggf. weitere Punkte, wie Zubereitungszeit, Nährwerte, etc. integrieren -->
</section>
<section id="recipe_main">
<section id="recipe_ingredients">
<?php if( get_field('zutatenliste') ): ?>
<p><?php the_field('zutatenliste'); ?></p>
<?php endif; ?>
</section>
<section id="recipe_tasks">
<?php if( get_field('beschreibung') ): ?>
<p><?php the_field('beschreibung'); ?></p>
<?php endif; ?>
</section>
</section>
</section>
Prinzipiell relativ simple. Wenn wir den Shortcode in einen Beitrag einbauen, werden uns die Felder angezeigt, wenn diese ausgefüllt werden. Sieht noch nicht so schön aus, da kann man aber beliebig in der CSS-Datei nachhelfen. Fertig.
Fazit
Für mich habe ich die Feldgruppe ein bisschen angepasst.
Ich habe mir ein kleines halbtransparentes Banner erstellt, das über dem Rezeptbild liegt. Dort werden die wichtigsten Informationen dargestellt. Darunter folgt dann eingerahmt die Zutatenliste und daneben das Rezept selbst.
Als weitere Ergänzung könnte man Zutatenliste oder die Schritt-für-Schritt-Anleitung als einzelne „Felder“ integrieren. Diese Funktionalität bietet ACF Pro mit der „Repeater“-Funktion. Der Preis von ACF Pro beträgt inkl. lebenslanger Updates 25 $ für eine Seite bzw. 100 $ für beliebig viele Seiten. Find ich sehr fair – aber ist prinzipiell für dieses Beispiel nicht notwendig.