# Eine Restaurant-Website mit WordPress erstellen URL: https://canvaswp.com/de/guides/build-a-restaurant-website-with-wordpress/ Updated: 2026-11-03 Leitfaden Eine Restaurant-Website erfüllt vier Aufgaben: Sie zeigt das Essen, belegt, dass sich der Besuch lohnt, nimmt Reservierungen entgegen und informiert darüber, wann geöffnet ist. Dieser Leitfaden behandelt alle vier, beginnt mit einer leeren WordPress-Installation und endet mit einer Website, die sich an einen Kunden übergeben lässt. Veröffentlicht am 5. September 2026 Zuletzt aktualisiert am 3. November 2026 Geschrieben vom Canvas-Team bei SemiColonWeb ## Schritt 1: WordPress vorbereiten Eine Restaurant-Website stützt sich stärker als die meisten auf drei WordPress-Einstellungen. Legen Sie diese daher fest, bevor Sie am Design arbeiten. - **Websitetitel und Untertitel.** Rufen Sie Einstellungen und danach Allgemein auf. Der Name des Restaurants gehört in den Titel, die Küche und das Viertel in den Untertitel. Der Browser-Tab, das Suchergebnis und die Karte, die ein Gast an Freunde weiterleitet, werden alle aus diesen beiden Zeilen erstellt. - **Permalinks.** Einstellungen, dann Permalinks, dann Beitragsname. Die Menüseite erhält eine Adresse, die kurz genug ist, um sie auf einer Tischkarte oder einem Flyer zu drucken. - **Zeitzone.** Wählen Sie auf der Seite Allgemein die Stadt des Restaurants. Reservierungsanfragen werden mit dieser Zeitzone versehen, und eine falsche Angabe ordnet die Buchung für heute Abend fälschlicherweise dem nächsten Tag zu. Alles Weitere zur Vorbereitung von WordPress gilt für jede Canvas-Website gleich: die WordPress- und PHP-Versionen, ein tatsächlich getestetes Backup und genügend PHP-Speicher für die Fotos, die ein Import herunterlädt. Der Import-Leitfaden behandelt dies einmal für alle Projekte. [Voraussetzungen und Backups vor dem Import](https://canvaswp.com/de/guides/import-a-wordpress-demo-website/#before) Eine Buchungsanfrage ist nur dann etwas wert, wenn die Küche sie vor dem Service sieht. WordPress übergibt seine E-Mails an Ihren Server, sofern Sie nichts anderes festlegen, und viele Hoster verwerfen diese E-Mails ohne Hinweis. Richten Sie jetzt einen E-Mail-Versanddienst oder ein SMTP-Plugin ein und senden Sie sich eine Testnachricht. ## Schritt 2: Installieren Sie Canvas und starten Sie den Einrichtungsassistenten Laden Sie die Theme-ZIP-Datei über Ihr Dashboard unter Darstellung, Designs, Installieren hoch und aktivieren Sie sie. Der Einrichtungsassistent öffnet sich von selbst, und für dieses Projekt ist er schnell erledigt. - **Zuerst die Lizenz.** Fügen Sie den Lizenzschlüssel aus Ihrem Dashboard ein. Mit ihm kann der Einrichtungsassistent im nächsten Schritt das Restaurant-Paket herunterladen. - **Suchen Sie nach Italian Restaurant** im Demo-Schritt. Die Karte listet die Seiten, Beiträge und Gerichte auf, die sie mitbringt, bevor Sie sich festlegen. - **Der Plugin-Schritt überspringt sich selbst.** Für das Restaurant-Design genügen Canvas und das Begleit-Plugin, das der Assistent für Sie installiert. Wenn Sie den Einrichtungsassistenten mittendrin schließen, wartet er unter dem Canvas-Menü, bis Sie zurückkehren. **Der Demo-Schritt.** Suchen Sie nach dem Namen und lesen Sie dann auf der Karte, was die Demo mitbringt. [Was jeder der 9 Schritte des Einrichtungsassistenten bewirkt](https://canvaswp.com/de/setup-wizard/) ## Schritt 3: Importieren Sie die Restaurant-Demo Sehen Sie sich [die Live-Vorschau](https://demos.canvaswp.com/restaurant/) der Demo Italian Restaurant an, bevor Sie sie importieren, und klicken Sie sich zur Speisekarte und zur Reservierungsseite durch. Die Vorschau läuft mit demselben Theme, das Sie installieren, sodass alles, was dort funktioniert, auch bei Ihnen funktioniert. ### Website-weit, auf einer neuen Website Bei einer leeren Installation importieren Sie die Einstellungen für die gesamte Website. Schriften, Farben, Theme-Optionen und Menüs des Restaurants werden zu Ihren eigenen, sodass die Seite für private Feiern, die Sie im kommenden Winter ergänzen, weiterhin dazugehörig wirkt. Die andere Möglichkeit ist der Import in eine Website, die bereits läuft. Der Import-Leitfaden erklärt, wann das passt. ### Was enthalten ist - 6 Seiten, von der Startseite über die Speisekarte und die Geschichte bis zur Kontaktseite - 6 Blogbeiträge mit ihren Kategorien, damit der Nachrichtenbereich am ersten Tag nicht leer ist - 50 Gerichte, jedes als eigener Datensatz vom Typ Menu Item - Ein Slider, ein funktionierendes Reservierungsformular und 2 Navigationsmenüs, die Menüpositionen zugewiesen sind - Designs für Header, Footer und Seitentitel, jedes als eigener, bearbeitbarer Datensatz - Die Food-Fotografie, in Ihre eigene Mediathek kopiert **Die Startseite nach dem Import.** Echte Inhalte, die Sie durch Ihre eigenen ersetzen können. Wenn der Speisesaal auf den Fotos gar nicht Ihrem entspricht, machen Sie den Import über Canvas, dann „Demo Import“ rückgängig und probieren Sie eine der anderen Restaurant-Demos aus. Ihre vorherigen Einstellungen werden dabei wiederhergestellt. [Geltungsbereiche, Importphasen und Rollback, einmal erklärt](https://canvaswp.com/de/guides/import-a-wordpress-demo-website/) ## Schritt 4: Ersetzen Sie die Demo-Texte und Bilder Öffnen Sie die Startseite über Seiten. Der Editor zeichnet Header, Slider, Seitentitelbereich und Footer so um Ihren Inhalt herum, wie ein Gast sie sehen wird, sodass Sie die Willkommenszeile mit der echten Seite drumherum schreiben. ### Klicken, eingeben, ersetzen Jede Überschrift, jeder Absatz und jedes Bild auf der Seite ist ein Block. Klicken Sie auf einen Block, um darüber Text einzugeben, oder wählen Sie bei einem Bild „Ersetzen“, um eines Ihrer eigenen Fotos auszuwählen. Die Seitenleiste auf der rechten Seite enthält alles Weitere, was dieser Block unterstützt, von den Farben bis zum Link. ### Seien Sie konkret Der Demo-Text ist bewusst allgemein gehalten, was ihn leicht erkennbar und leicht zu übertreffen macht. Ersetzen Sie „Authentic Italian cuisine“ durch das, was nur Sie sagen können: die Region, aus der die Rezepte stammen, den Namen der Person an der Ausgabe, das Holz im Ofen, die Uhrzeit, zu der das Brot aus dem Ofen kommt. Ein Gast, der zwischen zwei Restaurants wählt, achtet auf Details, nicht auf Adjektive. Wenn ein Abschnitt nicht zu Ihrem Restaurant passt, löschen Sie ihn und setzen Sie ein Muster an seine Stelle. Dafür stehen Ihnen 183 Muster zur Auswahl, die als normale Blöcke eingefügt werden und sich anschließend frei anordnen lassen. **Die Startseite bearbeiten.** Was Sie beim Tippen sehen, sehen Gäste später genauso. ## Schritt 5: Die Speisekarte erstellen Die Speisekarte ist die Seite, auf die Gäste kommen, deshalb verdient sie mehr als einen Absatz Text. Die Demo bringt einen Inhaltstyp Menu Items mit, mit einem Datensatz pro Gericht, der im Admin-Bereich wie Beiträge aufgelistet wird. ### Bearbeiten Sie die Gerichte, nicht die Seite Öffnen Sie die Menu Items und bearbeiten Sie einen Datensatz: den Gerichtnamen, die Beschreibung, ein Foto, den Preis und die Menükategorie. Nährwerte stehen als eigene Felder bereit, falls Sie diese veröffentlichen möchten. Speichern Sie den Eintrag, dann aktualisiert sich die Menüseite, denn sie enthält einen Block, der die Datensätze auflistet und bei jedem Aufruf frisch einliest. Diese Trennung macht die Speisekarte wartbar. Ändert sich der Preis eines Gerichts an einem Dienstag, ändern Sie einen Datensatz, und jede Seite, die dieses Gericht anzeigt, übernimmt die Änderung. ### Gliedern Sie die Speisekarte so, wie es auch die Küche tut Verwenden Sie Menükategorien für Vorspeisen, Pasta, Hauptgerichte, Desserts und Getränke. Der Block Menu Items kann diese Kategorien als Tab-Bereiche, als schlichte Kartenreihe oder als Karussell darstellen, sodass eine lange Liste auch auf dem Smartphone übersichtlich bleibt. Legen Sie fest, wie viele Einträge angezeigt werden, aus welcher Kategorie sie stammen und in welcher Reihenfolge sie erscheinen. Gehen Sie die Datensätze einmal durch, löschen Sie die Gerichte, die Sie nicht anbieten, und fügen Sie Ihre eigenen hinzu. Das geht schneller, als es klingt, und es ist das letzte Mal, dass Sie sich um das Layout kümmern müssen. Veröffentlichen Sie Preise als Zahlen, mit denen Ihre Küche eine Saison lang leben kann. Eine Speisekarte, die drei Monate veraltet ist, richtet mehr Schaden an als eine Speisekarte, die schlichter ausfällt, als Sie es sich gewünscht haben. ## Schritt 6: Reservierungen mit einem Formular annehmen Die Demo enthält ein funktionierendes Formular. Ein Formular in Canvas ist ein Datensatz aus Blöcken: Der Block Form enthält die Felder, der Block Form Field definiert jedes einzelne Feld, der Block Form Submit Button sendet es, und der Block Form Embed bettet das fertige Formular in jede beliebige Seite ein. ### Die Felder, die eine Reservierung benötigt - Felder für **Datum** und **Uhrzeit** mit einer frühesten und einer spätesten Uhrzeit. Stellen Sie die früheste Uhrzeit auf die Stunde Ihrer Öffnung und die späteste auf Ihren letzten Service ein, und stellen Sie das Intervall auf fünfzehn oder dreißig Minuten, damit Sie keine Buchung für 19:07 erhalten. - Ein **Zahlenfeld** für die Gruppengröße, mit einem Minimum und einem Maximum, die zu Ihrem größten Tisch passen. - Felder **Text** und **Telefon** für Name und Telefonnummer sowie ein Feld **E-Mail** für die Bestätigung. - Ein **Textfeld** für Allergien, Hochstühle und den Jahrestag, den Sie sonst vergessen würden. - Ein Kontrollkästchen **Einwilligung**, falls Sie Gäste später per E-Mail kontaktieren möchten, und ein Feld **Honeypot**, eine unsichtbare Falle, die still die meisten Spam-Einträge abfängt, ohne einen Menschen zu behelligen. ### Wohin die Anfragen gehen Das Reservierungsformular der Demo enthält Felder für Name, Telefonnummer und E-Mail-Adresse, einen Datumsauswähler, der vergangene Tage ausgraut, ein Auswahlmenü für die Uhrzeit und ein Menü für die Personenzahl. Jede Anfrage wird in einer Tabelle auf Ihrer eigenen Website gespeichert, die im WordPress-Admin unter Submissions aufgeführt ist. Es versendet allerdings noch keine E-Mails: Öffnen Sie das Formular, aktivieren Sie im Reiter Actions die Option Send Email Notification und tragen Sie eine Adresse ein, die während des Betriebs regelmäßig gelesen wird. Buchen Sie anschließend selbst einen Tisch und prüfen Sie, ob die Nachricht ankommt. Behandeln Sie jeden Eintrag als Anfrage, die Sie bestätigen. Das Formular nimmt die Reservierung nur entgegen; es zählt keine Gedecke und hält keine Tische frei. Wenn Sie Live-Verfügbarkeiten benötigen, ist dafür ein eigenes Reservierungssystem das richtige Werkzeug, und die Webhook-Aktion des Formulars kann jede Anfrage dorthin weiterleiten. Legen Sie außerdem im Formular eine Aufbewahrungsdauer fest, damit Telefonnummern von Gästen nach einem Zeitplan Ihrer Wahl gelöscht werden. In 83 von 88 Demos ist mindestens ein funktionierendes Formular enthalten, sodass Sie meistens ein Formular bearbeiten und die Verkabelung bereits erledigt ist. ## Schritt 7: Header, Öffnungszeiten und Kontaktdaten festlegen Der Header ist der Ort, an dem hungrige Gäste nach der Telefonnummer suchen, und der Footer der Ort, an dem sie die Adresse suchen. Beide sind in Canvas aus Blöcken aufgebaut und werden genauso bearbeitet wie eine Seite. ### Der Header Ein Header-Datensatz enthält Zonen, und eine Zone ist eine Zelle in der Header-Zeile. Platzieren Sie das Logo in der ersten Zone, die Navigation in der mittleren und in der letzten einen Header Icon Link mit Ihrer Telefonnummer neben einem Header Button mit der Beschriftung „Tisch reservieren“. Ein Header Info zeigt Adresse oder Öffnungszeiten an, wenn dafür Platz ist. Fügen Sie über dem Header eine Topbar für die heutigen Öffnungszeiten oder eine Feiertagsschließung hinzu. Die Topbar ist ein eigener Datensatz, sodass sich die Nachricht ändert, ohne den Header überhaupt zu öffnen. ### Öffnungszeiten im Footer Die Fußzeile nimmt einen Footer Contacts-Block für Adresse und Telefonnummer auf, daneben eine Spalte mit den Öffnungszeiten. Schreiben Sie die Öffnungszeiten als Text, den man gut lesen kann, und halten Sie sie aktuell, denn nichts verärgert Besucher mehr, als vor einer geschlossenen Tür zu stehen. Header und Footer haben jeweils eine websiteweite Standardeinstellung und eine seitenspezifische Überschreibung. So kann eine Landingpage für private Feiern einen transparenten Header über einem Foto zeigen, während die übrige Website ihren eigenen Header behält. [Der Header- und Footer-Builder im Detail](https://canvaswp.com/de/header-builder/) [Die vier Restaurant-Demos im Vergleich](https://canvaswp.com/de/wordpress-themes/restaurant/) ## Schritt 8: Prüfen Sie es, dann öffnen Sie Gehen Sie diese Liste durch, bevor Sie jemanden auf die Website verweisen. Sie ist kurz, und jeder Punkt darauf hat schon einmal jemanden in Verlegenheit gebracht. - **Senden Sie eine echte Test-Reservierung** von Ihrem Smartphone aus, während das WLAN des Restaurants ausgeschaltet ist, und prüfen Sie, ob die Benachrichtigung eintrifft. - **Lesen Sie jede Seite auf dem Smartphone.** Die meisten Menschen, die heute Abend etwas zum Essen suchen, sind gerade unterwegs. - **Prüfen Sie Adresse, Telefonnummer und Öffnungszeiten** auf jeder Seite, auf der sie wiederholt werden, einschließlich des Footers. - **Schreiben Sie Alt-Texte** für die Fotos. Sie helfen Menschen, die einen Screenreader nutzen, und eine Suchmaschine liest sie zusammen mit der Seite, um Ihren Gastraum zu verstehen. - **Sehen Sie sich den SEO-Bereich an.** Canvas leitet Titel, Beschreibungen, Vorschaukarten beim Teilen und strukturierte Daten aus Ihren veröffentlichten Inhalten ab. Die Arbeit besteht daher darin, die Inhalte präzise zu formulieren, nicht darin, einen zweiten Satz Felder auszufüllen. - **Aktivieren Sie die Performance-Schalter**, die Sie benötigen. Es gibt 35 Optimierungen, die sich jeweils rückgängig machen lassen, und jede davon lädt weniger von dem, was Ihre Seiten nie verwenden. Veröffentlichen Sie danach die Website, tragen Sie die Adresse dort ein, wo Gäste suchen, und kehren Sie zum Restaurantbetrieb zurück. Die Website ist jetzt eine Sammlung von Datensätzen, die Sie bei Menüänderungen aktualisieren, und kein Projekt mehr. ## Quellen Wenn dieser Leitfaden etwas außerhalb von Canvas selbst beschreibt, finden Sie hier die offiziellen Seiten, die es dokumentieren. - [Bildschirm „Allgemeine Einstellungen“](https://wordpress.org/documentation/article/settings-general-screen/) wordpress.org · Hier speichert WordPress den Website-Titel und den Slogan, zusammen mit der Zeitzone auf demselben Bildschirm - [Bildschirm „Permalinks“ unter Einstellungen](https://wordpress.org/documentation/article/settings-permalinks-screen/) wordpress.org · Die Struktur „Beitragsname“, die jeder Seite eine kurze, lesbare Adresse gibt - [wp_mail()](https://developer.wordpress.org/reference/functions/wp_mail/) developer.wordpress.org · WordPress übergibt E-Mails standardmäßig an die PHP-Funktion mail(), und ein erfolgreicher Versand ist kein Beleg für die Zustellung. - [Tutorial zu Bildern](https://www.w3.org/WAI/tutorials/images/) w3.org · Screenreader lesen die Textalternative eines Bildes laut vor - [Allgemeine Richtlinien für strukturierte Daten](https://developers.google.com/search/docs/appearance/structured-data/sd-policies) developers.google.com · Korrektes Markup macht ein Rich Result möglich, und Google entscheidet, ob eines angezeigt wird Nächste Schritte ## Wie es weitergeht Zwei Leitfäden für die Arbeiten nach dem Launch sowie die Demo, auf der dieser Leitfaden basiert. [Leitfaden **WooCommerce-Shop starten** Was sich ändert, wenn die Demo, die Sie importieren, ein funktionierender Shop ist.](https://canvaswp.com/de/guides/start-a-woocommerce-store-with-wordpress/) [Leitfaden **Website-Texte mit KI schreiben** Legen Sie die Unternehmensbeschreibung einmal fest und generieren Sie danach im gerade bearbeiteten Feld.](https://canvaswp.com/de/guides/write-website-copy-with-ai-in-wordpress/) [Produkt **Restaurant-Themes** Die Demo, von der dieser Leitfaden ausgeht, Seite für Seite als Vorschau.](https://canvaswp.com/de/wordpress-themes/restaurant/) Fragen ## Häufige Fragen Die [vollständige FAQ](https://canvaswp.com/de/faq/) beantwortet alle weiteren Fragen, und die [Dokumentation](https://docs.canvaswp.com/) beschreibt jede Einstellung im Detail. **Benötige ich ein Plugin, um Reservierungen anzunehmen?** Nein, auf einer Restaurantwebsite mit Canvas laufen Reservierungen über ein Formular aus Canvas-Blöcken. Die Einträge werden in einer Tabelle auf Ihrer eigenen Website gespeichert und im WordPress-Admin aufgelistet. Ein Plugin benötigen Sie nur, wenn Sie Buchungen an ein externes Buchungssystem übergeben möchten, das Tische und Gedecke verwaltet. **Kann ich eigene Fotos verwenden?** Ja, und Sie sollten jedes Foto, das die Restaurant-Demo mitbringt, durch Ihr eigenes ersetzen. Jedes Demobild landet als normaler Anhang in Ihrer Mediathek, daher ist das Ersetzen eines Bildes dieselbe Aufgabe wie das Ersetzen jedes anderen Bildes in WordPress. Wählen Sie möglichst eine ähnliche Form wie beim Original, damit sich das Layout nicht verschiebt, und schreiben Sie dabei gleich eine kurze Beschreibung in das Feld für den Alternativtext. **Was passiert, wenn Ihnen die Restaurant-Demo nicht gefällt?** Machen Sie den Import rückgängig und importieren Sie eine andere der 88 Canvas-Demos, denn jeder Tarif umfasst alle, und jeder Import wird separat erfasst. Eine zweite Demo kann auch nur für ihre Seiten importiert werden, wobei das vorhandene Design erhalten bleibt. **Werden die Menüpreise in Google angezeigt?** Canvas erstellt strukturierte Daten aus dem, was beim Rendern auf der Seite steht, über 16 Schema-Typen hinweg, darunter Öffnungszeiten, Angebote und Bewertungen. Was eine Suchmaschine anzeigt, bleibt ihr überlassen, aber das Markup ist ohne ein zweites SEO-Plugin vorhanden.