Richte Deine WordPress-Seite im Netzwerk ein und erfahre, wie das am schnellsten und effektivsten funktioniert.

Die nachfolgenden Schritte und Empfehlungen gelten auch für die Einrichtung von WordPress-Webseiten ausserhalb des onic-Netzwerks. Wir überspringen lediglich die Installation und Konfiguration von WordPress auf einem Server, denn dies haben wir bereits vorab für Dich eingrichtet. 😉

Das FAQ wird derzeit noch erarbeitet und wenn Du mitmachen möchtest, kannst Du Deine Ideen und Beiträge in das Dokument auf der folgenden Seite einarbeiten.

https://cloud.onic.eu/apps/onlyoffice/s/BE6WzRsfmYoMWYg

Weitere Themen: Allgemeines | Erste Schritte | Werkstatt | Sicherheit | Themes & Plugins | Materialien | Suchmaschinenoptimierung | Bildbearbeitung | Shop einrichten | Gutenberg-Editor | Barrierefreie Webseiten | Netzwerk verlassen



WordPress eignet sich hervoragend, um eine Webseite relativ schnell einzurichten und dies auch mit sehr wenigen Kenntnissen alleine zu bewerkstelligen. Der Teufel steckt bekanntlich im Detail und selbstverständlich wirst Du im Verlauf der Arbeit mit WordPress merken, dass es Dinge gibt, die dann doch nicht mit ein paar Mausklicks zu erreichen sind. Dies soll aber in dieser kleinen Anleitung nicht berücksichtigt werden und wir möchten Dir hier insbesondere zeigen, wie Du:

  • an das Projekt herangehen solltest,
  • Schrittweise zu einer fertigen Webseite kommst und
  • unabhängig vom Design, eine Webseite erstellst, die Dir auch noch in fünf Jahren Freude bereiten kann.

Wir werden Dir zeigen, wie Du die folgende Webseite Schritt für Schritt erstellen kannst und wünschen Dir dabei viel Erfolg.

https://ansel.onic.eu

Ein Vorteil unseres Netzwerks ist, dass Du WordPress, die zur Verfügung stehenden Themes und Plugins nicht erst installieren musst, sondern sofort mit der Gestaltung Deiner Webseite beginnen kannst. Wir kümmern uns um die Funktionalität des Systems und halten es aktuell, sodass Du Dich auf die Arbeit mit Deiner Webseite konzentrieren kannst. Leg also sofort los...

Videoverzeichnis

  1. Dashboard einrichten
  2. Startseite umbenennen
  3. Standardseiten und Menüs einrichten
  4. Theme wechseln
  5. Startseite einrichten Teil I - Front Page Foto mit Text
  6. Seiten umbenennen & Reihenfolge ändern
  7. Standardkategorie umbenennen
  8. Kontaktformular & -Seite einrichten
    1. Contact Form 7 Plugin aktivieren, Shortcode kopieren & in Kontaktseite einfügen (0)
    2. Kontaktformuar einrichten (1)
    3. Kontaktformular und -Seite einrichten Teil (2)

Allgemeiner Überblick zum Einrichten einer Internetseite mit WordPress

Damit Dein Online-Projekt gelingt und Du möglichst zügig zum Ziel kommst, solltest Du Dir vorher möglichst genau überlegen, wie Deine Webseite aufgebaut und strukturiert sein soll, damit Deine Besucher*innen die Inhalte einfach und schnell erreichen können. Eine Internetseite ist ähnlich wie ein Buch. Es gibt Kapitel, Unterkapitel und Abschnitte. Hinzu kommen Verweise (Links) und andere Bereiche und Funktionen, die in einem herkömmlichen Buch nicht zu finden sind.

Auch wenn die Nutzer*innen Deiner Webseite es nicht direkt wahrnehmen, sollten die Inhalte innerhalb Deiner Webseite einem roten Faden folgen, der vor allem Dich dazu befähigt, Deine Besucher*innen zu den Inhalten zu führen, die diese lesen sollen oder
wollen. Da Du aber nicht weißt, für was sich Deinen Besucher besonders interessieren, solltest Du folgende Grundregel beherzigen: Gehe von einem allgemeinen bzw. groben Thema/Inhalt immer zu spezielleren Inhalten. Zur Orientierung könntest Du Dir den Aufbau einer komplexeren Wikipedia-Seite, wie z.B. von Wolfgang Amadeus Mozart anschauen. Dort findest nach der Hauptüberschrift (Seitentitel) einen kleinen beschreibenden Text und ein Inhaltsverzeichnis mit Überschriften (Kapitel/Abschnitte).

Auf Deiner Webseite wird man ein solches Verzeichnis bzw. eine solche Struktur nicht finden und wir können Dir nur empfehlen, dass Du Dir vorab ein solches Verzeichnis zu erstellen. Für den Anfang ist dabei ein sog. MindMap besonders gut geeignet, da Du und auch andere sofort visualisieren können, wo die Inhalte zu finden sein sollen.

Für unser kleines Projekt haben wir ein kleines MindMap mit dem freien Programm Freeplane vorbereitet und Du kannst Dir diese Start-MindMap herunterladen und für Dein eigenes Projekt weiterverwenden.

Darstellung einer Webseite in Form eines MindMaps
Bild 1: Darstellung einer Webseite in Form eines MindMaps

Wenn man diese MindMap in Form eines Textdokumentes öffnet, würde es folgendermaßen aussehen:

Startseite
Portfolio/Leistungen
About

Galerie
Blog/Aktuelles

Impressum
- Datenschutzerklärung
- Kontakt

Später sollen diese Inhalte auch über ein Menü oder auch Buttons/Bilder erreichbar sein. Wobei das Impressum mit der Datenschutzerklärung und der Kontaktseite im unteren Bereich verlinkt werden sollen, sodass sich das Bild wie im MindMap (Bild 1) dargestellt, ergeben kann. Als kleine Hilfestellung kannst Du Dir unsere kleine Projektvorlage "Allgemeiner Aufbau eines Online-Projektes" herunterladen und für Deine Zwecke nutzen.

Das Dashboard

nach der Anmeldung wirst Du auf dem WordPress-Dashboard begrüsst. Du siehst dort ein horizontales (Meine Websites, , 0, + Neu, Wilkommen) und vertikales Menü (Dashboard...) sowie in der grauen Fläche den Inhalt des Dashboardbereiches, der mit verschiedenen sog. Widgets (Auf einen Blick, Aktivität, Schneller Entwurf...) ausgestattet ist. Diese Widgets können auf der Arbeitsfläche frei bewegt, auf- oder zugeklappt und auch verborgen werden. Um die Arbeitsoberfläche nach Deinen Bedürfnissen und übersichtlich zu gestalten, kannst Du über Ansicht anpassen, die nicht benötigten Widgets ausblenden (s. Video Dashboard einrichten).

Die Adminoberfläche

Der Zugang zu den Funktionen von WordPress finden sich in der oberen horizontalen und in der rechten vertikalen Menüleiste, die auch alle Funktionen des Programms beherbergt. Das besondere an WordPress ist, dass es oftmals mehrere Wege zum Ziel gibt und im Verlauf dieser Beschreibung werden wir Dir diese Wege zeigen.

Oberes horizontales Menü

  1. Meine Website - hier sind alle Deine Webseiten erreichbar, die innerhalb des Netzwerk für Dich eingerichtet wurden.
  2. Häuschen mit Webseitentitel - mit einem Klick gelangst Du in die Außenansicht Deiner Webseite.
  3. Kommentare - WordPress zeigt Dir nach dem Häuschen an, wenn neue Kommentare eingegangen sind
  4. + Neu - An dieser Stelle kannst Du einen neuen Beitrag (+ Neu/Beitrag), Medien, Seite, Benutzer hinzufügen.
  5. Willkommen, Benutzername - In diesem Bereich findet sich Dein Benutzerprofil, wo Du Einstellungen zur Gestalt der Benutzeroberfläche sowie Deinen öffentlichen Namen/Info bearbeiten und auch Dein Passwort ändern kannst.

Vertikales Menü

Auf der linken Seite befindet sich das eigentliche WordPress-Menü mit allen Funktionen, die das Programm zur Verfügung stellt.

  1. Dashboard - dies ist der Ort nach der Anmeldung und die Eintiegsoberfläche von WordPress.
  2. Beiträge - in diesem Bereich wird der Blog verwaltet. Dazu gehören die regelmäßig erstellten Beiträge ebenso wie Kategorien und Schlagworte.
  3. Medien - in der Medienverwaltung können Bilder, Musikdateien, Filme, PDFs sowie andere Dateiformate abgelegt werden.
  4. Seiten - mit Seiten kannst Du sog. statische Inhalte auf Deiner Seite darstellen. Dazu gehören u.a. das Impressum, die Datenschutzerklärung, eine Kontaktseite und die About- bzw. Über mich/Über uns-Seite.
  5. Kommentare - eine Verwaltungsebene für eingehende Kommentare - sofern Du diese Funktion nutzt oder nutzen möchtest.
  6. Design - die Gestalt oder das Aussehen Deiner Webseite wird über die Verwaltungsebene Design gesteuert. Eine besondere Rolle spielt dabei der Customizer, da Dir dort die Gestaltungsmöglichkeiten gebündelt und übersichtlich zur Verfügung gestellt werden.
  7. Plugins - WordPress ist Modular aufgebaut und kann durch Zusatzprogramme (Plugins) erweitert werden. Du findest in diesem Abschnitte alle im Netzwerk vorinstallierten Plugins.
  8. Benutzer - WordPress verfügt über eine Benutzerverwaltung und bietet die Möglichkeit, Deine Webseite/n mit mehreren Personen/Benutzer*innen zu bearbeiten.
  9. Werkzeuge - in den Werkzeugen befindet sich die Möglichkeit, eine bestehende WordPress-Webseite zu import- oder zu exportieren. Ferner kann hier die Webseite gelöscht oder auf eine andere Domain gemappt werden.
  10. Einstellungen - in diesem Bereich finden sich die Grundfunktionen für die Einrichtung Deiner WordPress-Instanz.
  11. Menü ein-/ausklappen - ändert das Menü in eine schmale Symbolleiste und klappt sie wieder aus.
  12. Weitere Menüpunkte - kommen hinzu, wenn Du Dein System mit Plugins erweiterst.

Die Startseite in der Außenansicht (Frontend)

Während Du über die Adminoberfläche im sog. Backend die Inhalte und das Design erstellst und gestaltest, kannst Du Dir die Webseite parallel in der Außenansicht (Frontend) anzeigen lassen. Wir empfehlen Dir die Innen- und Außenansicht in zwei separaten Fenstern (Tabs) zu öffnen, um möglichst schnell die im Backend vorgenommenen Änderungen sehen zu können. Dazu klicke einfach auf das Häuschen in der oberen horizontalen Menüleiste mit der rechten Maustaste und wähle Link in neuem Tab öffnen. Etwas schneller geht dieser Vorgang, wenn du das Röllchen auf Deiner Maus verwendest. Drückst (klickst) Du das Mausrädchen auf einen Link, so öffnet sich ein neuer Tab bzw. ein neues Fenster.

In der Außenansicht bleibt Dir die horizontale Menüleiste erhalten und Du kannst darüber wieder in das Dashboard gelangen, den Customizer ansteuern oder auch einen Beitrag (+ Neu) oder Seite erstellen. Dabei wirst Du dann an die entsprechende Stelle zurück in das Backend geführt.

Beim Start Deines Projektes solltest Du prüfen, ob Deine Webseite auch verschlüsselt mit https:// bzw. ein grünes Schloss aufgerufen wird. Sollte dies nicht der Fall sein, sag uns bitte Bescheid, dann ändern wir dies umgehend (E-Mail an: support@onic.eu).

Vielleicht wunderst Du Dich, dass Deine Startseite eigentlich gar keine Seite zeigt, sondern einen sog. Blogbeitrag. Dies liegt daran, dass WordPress ursprünglich primär ein Blogsystem gewesen ist und die Funktion auch statische Seiten einrichten zu können, erst später hinzugekommen ist. Wir zeigen Dir im nächsten Abschnitt, wie Du selbst festlegen kannst, was auf Deiner Startseite zu sehen sein soll.

Nach der Registrierung Deiner WordPress-Webseite im onic.eu-Netzwerk wird Dir die Webseite in einem Standardlayout mit Beipielseite, Beispielbeitrag und -Kommentar gezeigt. Dabei wird Dir immer das aktuelle Design (Theme) von WordPress, derzeit Twenty Nineteen, gezeigt. Jede Designvorlage (Theme) hat verschiedene Funktionen und es gibt sogar ganz unterschiedliche Konzepte bei der Gestaltung des Layouts einer WordPress-Webseite. Da dies so ist, können wir Dir nur empfehlen, die jeweiligen Themedokumentationen zu lesen, die wir für Dich auf unserer Themes&Plugins-Seite zusammengestellt haben.

Standardseiten bearbeiten und erstellen

In diesem Abschnitt lernst Du, wie Du sehr effektiv Deine Standardseiten (Startseite/Start/Home | Portfolio | About | Galerie | Impressum | Datenschutzerklärung | Kontakt) und den Blogbereich (Blog/Aktuelles/News/Nachrichten) einrichtest und in zwei Menüs auf Deiner Webseite zur Verfügung stellst.

Beispiel-Seite in Startseite umbenennen

Da es nach der Installation von WordPress bereits eine Beispielseite gibt, werden wir diese vorab umbenennen. Gehe dabei wie folgt vor (s. Video Startseite umbenennen):

  1. Klicke in der linke vertikalen Menüleiste auf Seiten.
  2. Bewege die Maus über Beispiel-Seite und klicke auf Quick-Edit.
  3. Ändere Beispiel-Seite in Startseite um.
  4. Ändere die Titelform ebenfalls in startseite um.
  5. Klicke auf Aktualisieren.

Standardseiten erstellen und Menüs festlegen

Um die Standardseiten einzurichten, kannst Du die folgenden Wege einschlagen:

  1. über das horizontale Menü + Neu -> Seite
  2. über das vertikale Menü Seiten -> Erstellen
  3. über Design -> Customizer -> Menüs

Der Vorteil der dritten Variante liegt darin, dass Du Dich gunmittelbar im Herzstück von WordPress befindest und dort im gleichen Zug noch weitere gestalterische Änderungen vornehmen kannst, wie z.B. die Startseite, das Headerbild/Slideshow festlegen und die Menüs erstellen und auf der Webseite platzieren. Um diesen Bereich zu erreichen, begib Dich über die linke vertikale Menüleiste in den Bereich Design -> Customizer und klicke dort auf den Abschnitt Menüs. Gehe dann wie folgt vor (s. Video Standardseiten und Menüs einrichten). :

Das Hauptmenü (oberes Menü)

  1. klicke auf Neues Menü erstellen
  2. gebe dem Menü den Namen Hauptmenü.
  3. wähle als Menü-Positionen Primär aus und klicke auf + Einträge hinzufügen.
  4. klicke auf + Startseite Seite.
  5. Gebe in das Feld Neue Seite erstellen Portfolio ein und klicke + OK
  6. Wiederhole Punkt 5 für die Seiten About und Galerie.
  7. Klicke auf Kategorien und füge die Kategorie Allgemein mit + OK dem Menü hinzu.
  8. Kehre über <- Hauptmenü zur Übersicht Deine Anpassungen für Menüs zurück.

Das Impressum-Menü (unteres Menü)

  1. klicke auf Neues Menü erstellen
  2. gebe dem Menü den Namen Impressum.
  3. wähle als Menü-Positionen Footer-Menü aus und klicke auf + Einträge hinzufügen.
  4. Klicke auf Seiten.
  5. Gebe in das Feld Neue Seite erstellen Impressum ein und klicke + OK.
  6. Wiederhole Punkt 4 für die Seiten Datenschutzerklärung und Kontakt.
  7. Kehre über <- Hauptmenü <- Deine Anpassungen für Menüs zur Hauptebene des Costumizers zurück.

Du solltest nun im oberen Bereich das Hauptmenü sehen und am unteren Rand der Seite sollte das Menü Impressum dargestellt werden. Solltest Du Interesse daran haben, diese Desingvorlage zu verwenden, schaue Dir hierzu die Dokumentation des WordPress-Themes Twenty Nineteen an. Wir werden bereits im nächsten Abschnitt das Theme wechseln.

Eine wunderbare Eigenschaft von WordPress bzw. von sog. Content Management Systemen (CMS) ist die Trennung von Inhalt und Design. Dadurch ist es möglich, die Inhalte und Struktur der Webseite zu erstellen, ohne dabei darauf achten zu müssen, wie das Layout einmal aussehen wird. Es ist dadurch jederzeit möglich, die Gestalt der Webseite zu verändern. Reguliert wird das Aussehen der Webseite durch Designvorlagen (Themes), die das Layout der Webseite bestimmen und gleichzeitig über den Customizer die Möglichkeit bieten, manuelle Veränderungen vorzunehmen. Da Themes mit sehr unterschiedlichen Funktionen ausgestattet sein können und es auch verschiedene Designkonzepte gibt, empfiehlt es sich immer, die jeweiligen Dokumentationen bzw. Gebrauchsanweisungen der Hersteller zu lesen. Die im onic.eu-Netzwerk zur Verfügung gestellten Designvorlagen und die dazugehörigen Anleitungen findest Du auf der Themes&Plugins-Seite.

Theme wechseln und einrichten

Um das Design Deiner Webseite zu verändern
begib Dich in die Hauptebene des Customizers (Design -> Customizer), klicke auf Aktives Theme Twenty Nineteen Child Wechseln. Du befindest Dich dann in der Themeübersicht und siehst alle Themes, die Dir im Netzwerk zur Verfügung stehen. Gebe im Suchfenster Suche Themes ... Ansel ein und klicke dann auf Live-Vorschau (s. Video Theme wechseln). Es verwundert vielleicht etwas, dass die Ansicht nicht sofort das gewünschte Ergebnis des Vorschaubildes zeigt. Um dieses Ziel zu erreichen, sind einige kleine Handgriffe notwendig.

Startseite festlegen

  1. Begib Dich in den Abschnitt Startseiten-Einstellungen und klicke den Punkt Eine statische Seite an.
  2. Wähle in dem hiernach zur Verfügung stehenden Pulldownmenü "Startseite" aus.

Front Page 1 Text-Widget hinzufügen

  1. Wechsel in die Hauptebene des Customizers (<).
  2. Klicke auf Widgets und begib Dich in den Bereich Front Page 1.
  3. Klicke auf den Button Widget hinzufügen und wähle aus der Liste das Text-Widget aus. Die Bildfläche wird sich verändern und es wird sich ein Front Page Bild zeigen. Wundere Dich nicht, dass die Inhalte deiner vorher ausgewählten Startseite nun nicht mehr zu sehen sind - diese werden durch die eingesetzten Widgets ersetzt.
  4. Schreibe in das Titelfeld Willkommen! oder etwas anderes.
  5. Beschrifte das darunterliegende Textfeld.
  6. Wechsel wieder zur Hauptebene des Customizers (<) und begib Dich in den Bereich Front Page Imagery.
  7. Klicke auf Bild wechseln und lade ein Bild von Deinem Rechner hoch. Du kannst auch die Ansel-Theme-Bilder herunterladen (3 MB) und diese verwenden.
  8. Klicke auf Veröffentlichen.

Schaue Dir die Schritte in dem Video Startseite einrichten Teil I - Front Page Foto mit Text
an.

Front Page 1 als Slideshow

Das Ansel-Theme ermöglicht es, drei weitere Bilder auf der Startseite als Slideshow zu zeigen. Wenn Du die Slideshow nutzen möchtest, lade zwei weitere Bilder im Bereich Front Page Imagery hoch. Klicke auf Veröffentlichen, verlasse den Customizer (x) und begebe Dich zurück zum Dashboard.

Wir haben in den letzten Abschnitten für die Erstellung von Seiten, Menüs den Layout den Customizer verwendet und kamen dadurch recht schnell zu einem zufriedenstellenden Ergebnis. Auch wenn die Webseite jetzt schon ansehnlich aussieht, gibt es doch den ein oder anderen Schönheitsfehler.

  • Der Menüeintrag Startseite und Allgemein (Blog) sollen umbenannt werden.
  • WordPress sortiert die Einträge im Menü nach unseren Vorstellungen, in der Seitenverwaltung sieht es aber ganz anders aus.

Auch in diesem Fall gibt es mehrere Möglichkeiten. Menüeinträge/-labels können über Design -> Customizer -> Menüs umbenannt und in der Reihenfolge verändert werden. Meist hat man aber den Wunsch, auch die Seitentitel/Seitenüberschriften umzubenennen und dies ist an dieser Stelle leider nicht möglich.

Seitentitel & -reihenfolge ändern

Darüber hinaus werden die angelegten Seiten in der Seitenverwaltung alphabetisch sortiert und so kann es bei größeren Webprojekten leicht zum Chaos führen. Empfehlenswert wäre es, wenn die innere Struktur der Webseite auch der äußeren Struktur folgt. Wenn Du Dir dies einmal anschauen möchtest, begebe Dich in die Seitenverwaltung. Du kannst im Dashboard -> Auf einen Blick auf Seiten klicken oder Du klickst auf Seiten in der linken Menüleiste.

In der Seitenverwaltung kannst Du Seiten nach Titel, Datum und Autor sortieren. Möchtest du die Reihenfolge selbst bestimmen, musst Du sie manuell festlegen. Dabei kannst Du auch gleich Änderungen an den Seitentiteln vornehmen, die dann auch automatisch in den Menüeinträgen verändert werden (s. Video Seiten umbenennen & Reihenfolge ändern). Beginne mit der Startseite.

  1. Bewege die Maus über Startseite und klicke auf Quick-Edit.
  2. Ersetze den Titel Startseite durch Start oder Home.
  3. Aktualisiere.
  4. Öffne die Seite Portfolio im Quick-Editmodus. Schreibe in das Fenster Reihenfolge eine 1 ein und aktualisiere.
  5. Wiederhole dies für die Seite About (Reihenfolge -> 2), Galerie (Reihenfolge -> 3) und Impressum (Reihenfolge -> 10 oder höher).
  6. Begebe Dich in den Quick-Editmodus der Seite Kontakt und wähle bei Eltern -> Hauptseite (keine übergeordnete) -> Impressum aus und aktualisiere.
  7. Wiederhole diesen Vorgang für die Seite Datenschutzerklärung und verkürze im Feld Titelform (Linkadresse zu dieser Seite) das Wort datenschutzerklaerung zu datenschutz und aktualisiere.
  8. Aktualisiere Deine Seite mit F5.

Blogkategorie ändern

Auch die Blogkategorie Allgemein, die wir in das Menü gelegt haben, um die neuesten Beiträge zu zeigen, solltest Du umbenennen. Dazu gehe zu Beiträge -> Kategorien. Hier kannst Du im Quick-Editmodus den Namen der Kategorie und die Titelform (Linkadresse zu dieser Kategorie) verändern. Nenne Deine Standardkategorie Blog/News/Aktuelles/Nachrichten oder vergib einen eigenen Titel dafür. Aktualisiere die Kategorie (unten), wechsel in das Frontend (Außenansicht) Deiner Webseite und schaue Dir das Ergebnis an (s. Video Standardkategorie umbenennen).

WordPress ist zwar mit einer Kommentarfunktion ausgestattet, die Du z.B. auch für die Einrichtung eines Gästebuchs verwenden könntest, aber über die Funktion, ein Formular mit beliebigen Feldern zu erstellen, verfügt WordPress nicht. Um WordPress um eine solche Option zu ergänzen, benötigst Du ein Zusatzwerkzeug. Diese Werkzeuge/Apps werden Dir über den Menüpunkt Plugins zur Verfügung gestellt.

1 Kontaktformular auf der Kontaktseite einfügen

Klicke in der linken vertikalen Menüleiste auf Plugins und suche nach Contact Form 7 und klicke auch aktivieren. Wir empfehlen Dir dieses Plugin, da es sehr verbreitet, anpassungsfähig und später noch durch weitere Funktionen erweiterbar ist.

Nach dem Aktivieren des Plugins findest Du in der linken vertikalen Menüleiste den zusätzlichen Eintrag Formulare. Klicke auf den Menüeintrag Formulare. Auf der dargestellten Seite werden Dir im oberen Bereich Informationen zu dem Plugin angezeigt, die Du oben rechts Verwerfen kannst. Jetzt kopiere den Text im Fenster Shortcode in die Zwischenablage (markieren & Strg+c).

Dieser Shortode wird verwendet, um das Beispiel-Kontaktformula des Plugins an einer beliebigen Stelle auf Deiner Webseite einzufügen. Wir werden es in die Kontaktseite einbauen. Da wir das Kontaktformular aber noch nachträglich bearbeiten müssen, solltest du die Kontaktseite in einem neuen parallelen Tab öffnen, sodass Du ohne Umwege in beiden Seitenbereichen arbeiten kannst. Gehe wie folgt vor:

  1. Drücke mit der rechten Maustaste auf Seiten (linke vertikale Menüleiste) und wähle Link in neuem Tab öffnen oder klicke auf Seiten mit dem Röllchen Deiner Maus.
  2. Suche in der Liste die Seite Kontakt und öffne sie im Bearbeitungsmodus (bearbeiten/Titel anklicken).
  3. Füge den Shortcode aus der Zwischenablage in den Block Schreib etwas oder tippe / zur Blockauswahl ein (Strg+v).
  4. Klicke auf Aktualisieren.
  5. Begebe Dich in das Frontend (äußerer rechter Tab) und schaue dir das Ergebnis auf der Kontaktseite an.
  6. Teste das Formular.

Als Video anschauen: Kontaktformular und -Seite einrichten Teil I

2 Kontaktformular bearbeiten

Du hast nun auf der Kontaktseite das Formular eingefügt und Du siehst, dass bereits etliche Felder und auch ein Sendebutton vorhanden sind. Mehrere Dinge sind allerdings noch nicht perfekt:

  1. Es fehlen evt. einige Felder (wie z.B. Anrede, die Datenschutzzustimmung und weitere Abfragen, die Du gerne hinzufügen möchtest)
  2. Das Formular breitet sich über die gesamte Breite aus.
  3. Du weißt noch nicht, wohin die Daten gesendet werden.

Um das Formular zu bearbeiten, musst Du Dich wieder in die Formularverwaltung (Formulare) begeben und das Kontaktformular 1 im Bearbeitungsmodus öffnen. Danach sollte sich Dir folgendes Bild zeigen.

  1. Titel des Formulars -
    Der Titel kann geändert werden, er hat nur den Zweck, unterschiedliche Formulare in der Übersicht wiederzufinden.
  2. Shortcode des Formulars - Dieser Code kann überall in Deiner Webseite eingesetzt werden, wo Du das Formular verwenden möchtest.
  3. Menü-Registerkarten - Formular | E-Mail | Meldungen | Zusätzliche Einstellungen
  4. Formularfelder - alle zur Verfügung stehenden Felder, die für ein Formular einsetzbar sind.
    Text | E-Mail | url | Tel. | Zahl | Datum | Textfeld | Dropdown-Menü | Kontrollkästchen | Zustimmung | Quiz | Datei | Senden
  5. Formularaufbau bzw. -Inhalt - Die Formularfelder werden in Form von Shortcodes eingefügt, die über die Formularfelder-Buttons entworfen werden.
  6. Status - Hier kann das Formular gespeichert bzw. kopiert werden.

Die Formularfelder sind in [ ]-Klammern eingefasst. Diese sog. Shortcodes enthalten neben der Anweisung für die Feldart auch den (Variablen-) Namen. Der * bedeutet, dass es sich um ein Pflichtfeld handelt, dass eine Eingabe bzw. Angabe erforderlich macht.

Ersetze den Inhalt in (5) durch den folgenden Text und Du erhältst ein Formular mit Anrede, Vorname, Nachname, Betreff und dem Zusatz zur Datenschutzerklärung. Darüber hinaus sind die Variablennamen übersetzt und nur das Feld E-Mail und die Datenschutzzustimmung sind Pflichtfelder.

* erforderliches Feld

<label> Anrede
[select Anrede include_blank "Frau" "Herr"] </label>

<label> Dein Vorname
[text Vorname] </label>

<label> Dein Nachname
[text Nachname] </label>

<label> Deine E-Mail-Adresse*
[email* E-Mail] </label>

<label> Betreff
[text Betreff] </label>

<label> Deine Nachricht
[textarea Nachricht] </label>

* [checkbox* Datenschutz "Ja,"] <ich habe die <a href="/impressum/datenschutz/" target="_blank" rel="noopener">Datenschutzerklärung</a> zur Kenntnis genommen und bin damit einverstanden, dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden. Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung und Beantwortung meiner Anfrage genutzt.

[submit "Senden"]

Klicke danach auf speichern. Du wirst eine Markierung an der Registerkarte E-Mail (3) sehen. Da wir die Variablen geändert haben, handelt es sich hierbei um einen Hinweis auf einen Konfigurationsfehler.

Öffne deshalb die Registerkarte E-Mail (3) und fülle die Felder mit den zur Verfügung stehenden und vordefinierten Shortcodes wie folgt aus:

An -> Gib hier die E-Mailadresse ein, an die die Formulardaten gesendet werden sollen.
Von -> [Vorname] [Nachname] <name@deinedomainadresse.tld> (WICHTIG! Du musst eine Adresse Deiner genutzten Domain verwenden. Weitere Informationen zu dieser Problematik findest du hier.)
Betreff > "[Betreff]"
Zusätzliche Header
> [E-Mail]
Nachrichtenkörper ->

Von: [Anrede] [Vorname] [Nachname]

E-Mail: <[E-Mail]>

Betreff: [Betreff]

[Nachricht]

Das Feld Datenschutz musst Du nicht hinzufügen, da die Formulardaten nur abgesendet werden, wenn das Kontrollkästchen tatsächlich aktiviert und den Bedingungen somit zugestimmt wurde. Klicke auf speichern und schaue Dir das Ergebnis auf der Kontaktseite an.

Als Video anschauen: Kontaktformular und -Seite einrichten Teil II

3 Zweispaltiges Formular erstellen

Es gibt mehrere Möglichkeiten, damit das Formular nicht über die gesamte Breite der Designvorlage ausgedehnt wird.

  1. Du verwendest die Option der Spalten innerhalb des Gutenberg-Editors
  2. Du verwendest die Anweisungen der Spalten, um Die Formularfelder auf zwei oder mehr Spalten zu verteilen.

3.1 Formular & Bild in zwei Spalten

Wenn Du diese Option nutzen möchtest (s. Bild rechts) gehe wie folgt vor.

  1. Begib Dich zu Deiner Kontaktseite
  2. Füge nach Deinem Seitentitel (Kontakt) einen neuen Contentblock hinzu
  3. Suche nach dem Block Spalten.
  4. Füge in die rechte oder linke Spalte den Shortcode Deines Formulars.
  5. Füge in die rechte oder linke Spalte ein Bild (+ Bild) ein.
  6. Lösche den unteren Contenblock
  7. Aktualisiere die Seite.

Als Video anschauen: Zweispaltiges Kontaktformular einrichten Teil I

3.2 Formularfelder in zwei Spalten aufteilen

Um die Formularfelder auf zwei Spalten aufzuteilen (s. Bild rechts), füge den folgenden Code in den Inhaltsbereich des Formulareditors:

* erforderliches Feld

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->

<label> Anrede
[select Anrede include_blank "Frau" "Herr"] </label>

<label> Dein Vorname
[text Vorname] </label>

<label> Dein Nachname
[text Nachname] </label>

<label> Deine E-Mail-Adresse*
[email* E-Mail] </label>

<!-- /wp:paragraph --><!-- /wp:paragraph --></div><!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><label> Betreff
[text Betreff] </label>

<label> Deine Nachricht
[textarea Nachricht] </label>

<!-- /wp:paragraph --></div><!-- /wp:column --></div><!-- /wp:columns -->

* [checkbox* Datenschutz "Ja,"] <span style="font-size: 10pt;">ich habe die <a href="/impressum/datenschutz/" target="_blank" rel="noopener">Datenschutzerklärung</a> zur Kenntnis genommen und bin damit einverstanden, dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden. Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung und Beantwortung meiner Anfrage genutzt.</span>

[submit "Senden"]
 

Als Video anschauen: Zweispaltiges Kontaktformular einrichten Teil II

4 Eigene Formularfelder hinzufügen

Wenn Du eigene Felder einfügen möchtest, verwende die Formualrfelder-Buttons (4) s.o. Das Prinzip ist einfach. Klicke einfach auf einen Button und fülle die Formularfeldoptionen aus. In das Feld Name gib einen eindeutigen Variablennamen ein, den Du für jedes einzelne Feld wiedererkennen kannst. Wenn Du fertig bist, füge das Feld ein und schaue Dir die Vorlage an:

<label> Deine Nachricht
[textarea Nachricht] </label>

Jedes Feld wird durch eine Überschrift beschrieben. Diese Beschreibung wird mit <label> Beschreibung </label> eingefasst und Du kannst später auf das Label per CSS zugreifen und es auch im Aussehen verändern. Lässt du die Einfassung
Label weg, wird der normale Standardtext (Absatzvorlage) eingefügt.

5 Automatische Antwort an Absender senden (Autoresponder)

Wenn Du mit Contact Form 7 dem Absender eine automatische Antwort senden möchtest, die auch den Inhalt des Formulars enthält, gehe wie folgt vor.

  1. Richte Dir eine E-Mailadresse, die bei Eingang einer Mail eine automatische Antwort sendet ein (s. Abwesenheitsnotiz für Roundcube einrichten)
  2. Wechsel in Deinem Kontaktformular in den Reiter E-Mail (3) und begebe dich ganz nach unten zum Punkt E-Mail (2).
  3. Wähle das Auswahlkästchen Verwende E-Mail (2) - E-Mail (2) ist ein zusätzliches E-Mail-Template, das häufig als Autoresponder verwendet wird.
  4. Übertrage die Feldeingaben wie bei der ersten E-Mail und ersetze die E-Mail "Von" durch die E-Mail mit der automatischen Antwort.
  5. Teste das Formular und den Autorsponder.

5 Formulardaten innerhalb von WordPress speichern

Wenn Du das Formular richtig eingerichtet hast, wirst du per E-Mail die Eingaben des Absenders per E-Mail an die hinterlegte Adresse erhalten. Wenn Du die Daten innerhalb der WordPress-Oberfläche verwalten möchtest bieten sich die beiden Plugins Flamingo
und Advanced Contact form 7 DB an. Beide Plugins speichern die Eingaben intern ab und Du kannst sie jederzeit auch unter der WordPress-Oberfläche abrufen. Das Flamingo-Plugin macht das im klassischen WordPress-Stil und verwaltet die Sendungen ähnlich wie Beiträge oder Seiten. Advanced Contact form 7 DB kann noch etwas mehr und bietet Dir die Möglichkeit, die Daten zu exportieren und auch mit einem Tabellenkalkulationsprogramm, wie z.B. LibreOffice Calc oder einer OnlyOffice Tabelle in der Nextcloud zu öffnen, zu bearbeiten und auszuwerten.

6 Ergänzende Plugins zum Contact Form 7

  • CF7 Smart Grid Design Extension -Enabled responsive grid layout designs for Contact Form 7 forms.
  • Contact Form 7 Conditional Fields - Adds support for conditional fields to Contact Form 7.
  • Contact Form 7 Multi-Step Forms - Enables the Contact Form 7 plugin to create multi-page, multi-step forms.
  • Advanced Contact form 7 DB - Ein Plugin, um Nachrichten von Contact Form 7 zuverlässig abzuspeichern und zu exportieren.
  • Flamingo - Ein Plugin, um Nachrichten von Contact Form 7 zuverlässig abzuspeichern.

7 Weitere Plugins, um Formulare zu erstellen

  1. Gravity Forms
    • Gravity Forms Gutenberg Add-On
    • Gravity Forms Multilingual
    • Multiple Columns for Gravity
    • Forms Styles & Layouts Gravity Forms
  2. Everest Forms
  3. Simple Basic Contact Form

Bilder und Bildergalerien spielen auf einer Internetseite eine wichtige Rolle. Zum einen lockern Bilder die Webseite und die Texte auf und zum anderen können Bilder die Inhalte auch unterstützen. Manchmal ist es aber auch einfach nur der Wunsch, eine größere Menge von Bildern in Form einer Galerie zu veröffentlichen. Eine besondere Rolle bei der Veröffentlichung von Bildern spielt dabei die Optimierung der Bilder für das Internet, denn die Bilder dürfen nicht zu groß sein und sollten dennoch qualitativ hochwertig sein und die Dateinamen sollten gut gewählt werden, da die Bilder auch von den Suchmaschinen gefunden werden sollen.

WordPress hat eine eigene Mediathek, wo Bilder und andere Dateiformate gespeichert werden. Auch die Möglichkeit Bilder zu einer Galerie zusammenzustellen.

Bilder in unterschiedlichen Qualitäten und Größen

Nachfolgend siehst Du drei Bilder in unterschiedlicher Abmessung, Auflösung, Qualität und Dateigröße. WordPress erstellt beim Hochladen vier Bildgrößen (Thumbnail, klein, mittel, groß). Du kannst die verschiedenen Bildgrößen in Deiner Seite einsetzen und auch das Originalbild steht dir zur Verfügung. Schau dir die drei Bilder an und bewerte sie hinsichtlich der Bildqualität und Dateigröße. Klicke zuerst auf ein Bild mit der linken Maustaste, danach klicke das Bild mit der rechten Maustaste an und wähle Grafik anzeigen. Das Bild wird dann in seiner Gesamtgröße gezeigt und du kannst einschätzen wie es zu den unterschiedlichen Dateigrößen (2000 KB = 2 MB, 100 KB & 80 KB) kommen konnte. Die drei Faktoren Abmessung, Auflösung und Qualität sind dafür verantwortlich wie groß eine Bilddatei wird und Du solltest Bilder so online zur Verfügung stellen, dass die Bildqualität sowie die Bildgröße in einem guten Verhältnis zur Dateigröße steht, denn lange Ladezeiten wegen zu großer Datenmengen sollten auf jeden Fall vermieden werden.

Empfehlungen für gute Bildgrößen und -formate

Hier entsteht in Kürze eine Anleitung, wie Du Deine Webseite mit dem Customizer gestalten kannst.