Projektdokumentation – Content Management Systeme

Wie erstelle ich eine Website auf WordPress?

1. Das Backend einrichten

1.1 Website-Titel und Untertitel

Ich habe im WordPress-Backend den Bereich Einstellungen → Allgemein geöffnet.
Als Website-Titel habe ich „Tante Mimis“ eingetragen.
Den Untertitel habe ich passend zu den Inhalten meiner Website angepasst.
Anschließend habe ich die Einstellungen gespeichert.

1.2 Permalinks

Unter Einstellungen → Permalinks habe ich die Permalink-Struktur auf „Beitragsname“ umgestellt.
Dadurch enthalten die Internetadressen meiner Beiträge den jeweiligen Beitragsnamen und sind für Besucher leichter verständlich.
Danach habe ich die Änderung gespeichert.

1.3 Kommentareinstellungen

Im Bereich Einstellungen → Diskussion habe ich die Kommentareinstellungen konfiguriert.
Besucher dürfen meine Beiträge kommentieren.
Name und E-Mail-Adresse müssen beim Kommentieren angegeben werden.
Neue Kommentare werden erst nach meiner manuellen Freigabe veröffentlicht.
Zusätzlich habe ich die E-Mail-Benachrichtigungen für neue Kommentare aktiviert.

1.4 Medien-Uploads

Unter Einstellungen → Medien habe ich festgelegt, dass Uploads in monats- und jahresbasierten Ordnern organisiert werden.
In der Mediathek habe ich meine Bilder mit verständlichen Bezeichnungen und passenden Alternativtexten versehen.
Dadurch sind die Medien übersichtlicher organisiert und die Bilder besser zugänglich.

→ Durch diese Grundeinstellungen habe ich das WordPress-Backend an meine Website angepasst und eine übersichtliche Grundlage für die weitere Bearbeitung geschaffen.

2. Themes und Menüverwaltung

2.1 Theme installieren und anpassen

Ich habe im WordPress-Backend unter Design → Themes nach dem Theme Astra gesucht.
Anschließend habe ich Astra installiert und aktiviert.
Danach habe ich über Design → Anpassen die Gestaltung meiner Website angepasst.
Unter den globalen Einstellungen habe ich die Farben an das Logo und die Markenwelt von Tante Mimis angepasst.
Für Überschriften habe ich eine dekorativere Schrift gewählt und für Fließtexte eine gut lesbare Schrift eingestellt.
Die Überschriften wurden in einem warmen Braun und der Fließtext in Dunkelbraun gestaltet.
Die Buttons habe ich mit Apricot beziehungsweise Salbeigrün hinterlegt und mit dunkelbrauner Schrift versehen.
Im globalen Containerbereich habe ich die Breite und die Darstellung des Seiteninhalts angepasst.
Danach habe ich im Header Builder das Logo und das primäre Menü positioniert.
Zusätzlich habe ich den Headerhintergrund, die Menüfarbe und die mobile Darstellung kontrolliert.
Abschließend habe ich die Änderungen über Veröffentlichen gespeichert.

2.2 Hauptmenü erstellen

Unter Design → Menüs habe ich ein neues Menü mit dem Namen „Hauptmenü Tante Mimis“ erstellt.
Ich habe verschiedene Eintragstypen in das Menü aufgenommen.
Dazu gehörten Seiten, ein veröffentlichter Beitrag und ein externer Link.
Zusätzlich habe ich einen nicht klickbaren Menüpunkt als Oberkategorie erstellt.
Unter diesem Oberpunkt habe ich weitere Einträge als Untermenü angeordnet.
Die Reihenfolge der Menüeinträge habe ich per Drag-and-drop angepasst.
Anschließend habe ich das Menü der Position Hauptmenü beziehungsweise Primäres Menü zugewiesen.
Zum Schluss habe ich das Menü gespeichert und auf der Website in der Desktop- und Smartphone-Ansicht überprüft.

→ Durch die Installation und Anpassung des Astra-Themes habe ich das Erscheinungsbild meiner Website an die Marke Tante Mimis angepasst. Mit dem Hauptmenü habe ich außerdem eine übersichtliche Navigation geschaffen, die Seiten, Beiträge, externe Inhalte und thematische Unterbereiche miteinander verbindet.

3. Beiträge

3.1 Kategorien und Schlagwörter

Ich habe unter Beiträge → Kategorien drei passende Kategorien für mein Projekt angelegt.
Die Kategorien heißen Fotografie, Geschichten und Tante Mimi persönlich.
Anschließend habe ich unter Beiträge → Schlagwörter mindestens drei Schlagwörter erstellt.
Dafür habe ich unter anderem Familienfotografie, Haustierfotografie und Aron Affe verwendet.
Dadurch kann ich meine Beiträge thematisch strukturieren und genauer zuordnen.

3.2 Blog-Beitrag

Ich habe meinen Blog-Beitrag „Das Gesicht hinter Tante Mimis“ bearbeitet.
Den Beitrag habe ich mit mindestens zwei H2-Überschriften strukturiert.
Ich habe dem Beitrag eine passende Kategorie zugeordnet.
Zusätzlich habe ich passende Schlagwörter vergeben.
Ich habe ein Beitragsbild festgelegt und die Darstellung im Frontend kontrolliert.
Anschließend habe ich den Beitrag gespeichert beziehungsweise veröffentlicht.

3.3 Beitragsseiten und Einzelbeiträge

Über Design → Anpassen habe ich die Darstellung meiner Blog- und Archivseiten angepasst.
Ich habe festgelegt, welche Elemente wie Beitragsbild, Titel, Kategorie, Datum und Textauszug angezeigt werden.
Außerdem habe ich das Layout und die Seitenleiste angepasst.
Danach habe ich die Einstellungen für einzelne Beiträge bearbeitet.
Dabei habe ich Beitragsbild, Titel, Metadaten und Containerdarstellung kontrolliert.
Abschließend habe ich die Änderungen gespeichert und im Frontend überprüft.

4. Seiten

4.1 Seiten anlegen

Ich habe unter Seiten → Erstellen eine Startseite für Tante Mimis angelegt.
Zusätzlich habe ich mindestens eine weitere Seite erstellt.
Als weitere Seite habe ich beispielsweise „Über Tante Mimi“ angelegt.
Unter Einstellungen → Lesen habe ich meine Startseite als statische Homepage festgelegt.
Die Blogseite habe ich separat als Beitragsseite zugeordnet.

4.2 Inhaltselemente

Auf meinen Seiten habe ich verschiedene Gutenberg-Blöcke verwendet.
Dazu gehören eine Überschrift, ein Bild und ein Button.
Zusätzlich habe ich weitere Elemente wie Textblöcke oder Spalten genutzt.
Danach habe ich die Seite im Frontend geöffnet und die Darstellung auf unterschiedlichen Bildschirmgrößen geprüft.
Bei Bedarf habe ich Abstände, Bildgrößen und Texte angepasst.

5. Widgets und Plugins

5.1 Widgets einrichten

Ich habe unter Design → Anpassen die Einstellungen für meine Blogseite geöffnet.
Dort habe ich eine Seitenleiste für die Beitragsübersicht aktiviert.
Anschließend habe ich unter Design → Widgets verschiedene Widgets in die Seitenleiste eingefügt.
Ich habe unter anderem eine Suchfunktion, eine Kategorienübersicht und die neuesten Beiträge eingebunden.
Zusätzlich habe ich unter Design → Anpassen → Footer den Footerbereich meiner Website gestaltet.
Dort habe ich passende Texte, Navigationselemente und weitere Informationen zu Tante Mimis eingefügt.
Anschließend habe ich im Frontend geprüft, ob Seitenleiste und Footer korrekt angezeigt werden.

5.2 Plugin installieren

Für meine Website habe ich das Plugin WPForms ausgewählt, da ich damit ein Kontaktformular erstellen und auf meiner Website einbinden konnte.
Vor der Installation habe ich geprüft, ob das Plugin aktuell ist, gute Bewertungen besitzt und mit meiner WordPress-Version kompatibel ist.
Unter Plugins → Plugin hinzufügen habe ich nach WPForms gesucht.
Anschließend habe ich das Plugin installiert und aktiviert.
Danach habe ich über WPForms ein eigenes Kontaktformular erstellt.
Ich habe passende Formularfelder wie Name, E-Mail-Adresse und Nachricht eingerichtet.
Anschließend habe ich die Einstellungen des Formulars überprüft und gespeichert.
Danach habe ich das Formular auf meiner Kontaktseite eingebunden.
Abschließend habe ich die Kontaktseite im Frontend geöffnet und getestet, ob das Formular korrekt dargestellt wird und ausgefüllt werden kann.

6. Medien

6.1 Mediathek organisieren

Ich habe für mein Projekt bereits zahlreiche Bilder in die WordPress-Mediathek hochgeladen.
Für die Aufgabenstellung habe ich mindestens fünf Bilder ausgewählt und deren Medieninformationen überprüft beziehungsweise ergänzt.
Dabei habe ich darauf geachtet, aussagekräftige Dateinamen zu verwenden. Für jedes ausgewählte Bild habe ich einen passenden Titel, einen Alternativtext und eine Beschreibung eingetragen.
Die Alternativtexte habe ich so formuliert, dass sie den sichtbaren Bildinhalt möglichst verständlich beschreiben.
Unter anderem habe ich das Logo von Tante Mimis, persönliche Bilder von mir sowie Grafiken zu Mapi Momente und MiWau Momente verwendet.
Anschließend habe ich die Suchfunktion der Mediathek getestet und überprüft, ob sich die Bilder anhand ihrer Bezeichnungen wiederfinden lassen.

6.2 Seite mit verschiedenen Medientypen erstellen

Für die Aufgabenstellung habe ich eine eigene Seite mit dem Titel „Tante Mimis Medienwelt“ erstellt.
Auf dieser Seite habe ich verschiedene Medientypen eingebunden, um die unterschiedlichen Möglichkeiten der Medienintegration in WordPress zu testen.
Als Einleitung habe ich kurz erklärt, dass auf der Seite verschiedene Medienformate dargestellt werden.

6.3 Einzelnes Bild einfügen

Zunächst habe ich über den Bild-Block ein einzelnes Bild aus meiner Mediathek eingefügt.
Dafür habe ich ein persönliches Bild von mir am Schreibtisch verwendet.
Unterhalb des Bildes habe ich die Bildunterschrift „Mimi – das Gesicht hinter Tante Mimis“ ergänzt. Anschließend habe ich Größe und Darstellung des Bildes im Frontend überprüft.

6.4 Galerie mit mindestens drei Bildern erstellen

Danach habe ich über den Galerie-Block eine Bildergalerie erstellt.
Für die Galerie habe ich drei Bilder ausgewählt, die zum Thema Fotografie und Familienmomente passen.
Die Bilder werden nebeneinander in einer übersichtlichen Galerie dargestellt.
Ich habe kontrolliert, ob die Bilder gleichmäßig angeordnet und vollständig sichtbar sind.
Zusätzlich habe ich die Galerie im Frontend überprüft.

6.5 YouTube-Video einbetten

Als weiteren Medientyp habe ich ein YouTube-Video eingebunden.
Dafür habe ich den YouTube-Block verwendet und die URL des gewünschten Videos eingefügt.
Das Video wurde anschließend direkt auf der Seite eingebettet.
Ich habe im Frontend überprüft, ob die Videovorschau korrekt erscheint und das Video geöffnet beziehungsweise abgespielt werden kann.
Über dem Video habe ich zusätzlich einen kurzen erklärenden Text eingefügt.

6.6 Block „Medien und Text“ verwenden

Anschließend habe ich den Block „Medien und Text“ verwendet.
Dabei habe ich ein Bild beziehungsweise das Logo von Tante Mimis mit einem Textbereich kombiniert.
Den Textbereich habe ich mit der Überschrift „Was Tante Mimis verbindet“ versehen.
Dadurch konnte ich Bild- und Textinhalte innerhalb eines gemeinsamen Blocks übersichtlich miteinander verbinden.
Auch diesen Bereich habe ich anschließend im Frontend auf seine Darstellung überprüft.

6.7 Darstellung im Frontend kontrollieren

Nach der Fertigstellung habe ich die komplette Seite im Frontend geöffnet.
Dabei habe ich überprüft, ob alle eingesetzten Medientypen korrekt dargestellt werden.
Ich habe insbesondere kontrolliert, ob:
das Einzelbild vollständig sichtbar ist,
die Galerie aus mindestens drei Bildern korrekt dargestellt wird,
das YouTube-Video eingebettet ist,
der Block „Medien und Text“ korrekt aufgebaut ist.
Zusätzlich habe ich geprüft, ob Abstände, Größen und die Anordnung der Inhalte zur restlichen Gestaltung von Tante Mimis passen.

Fazit
Ich habe die WordPress-Mediathek organisiert und mehrere Bilder mit passenden Metadaten versehen. Anschließend habe ich auf der Seite „Tante Mimis Medienwelt“ unterschiedliche Medientypen eingesetzt. Dazu gehören ein einzelnes Bild, eine Galerie mit mindestens drei Bildern, ein eingebettetes YouTube-Video sowie ein Medien-und-Text-Block. Abschließend habe ich die Darstellung aller Elemente im Frontend überprüft.

7. Backendbenutzer und Zugriffsrechte

7.1 Benutzer anlegen

Ich habe im WordPress-Backend über Benutzer → Neu hinzufügen zwei Testbenutzer angelegt.
Dem ersten Testbenutzer habe ich die Rolle Redakteur zugewiesen.
Der zweite Testbenutzer erhielt die Rolle Autor.
Laut Aufgabenstellung sollte zusätzlich ein dritter Benutzer mit der Rolle Abonnent erstellt werden.
Da mir für die Prüfungsumgebung keine dritte separate E-Mail-Adresse zur Verfügung stand, konnte ich diesen Benutzer nicht zusätzlich anlegen.
Diesen Punkt habe ich mit meiner Lehrerin abgestimmt. Sie hat bestätigt, dass ich die Abweichung transparent in meiner Dokumentation festhalten kann.

7.2 Unterschiedliche Zugriffsrechte

Durch die beiden angelegten Benutzer konnte ich unterschiedliche Benutzerrollen innerhalb von WordPress abbilden.
Die Rolle Redakteur verfügt über weitergehende redaktionelle Rechte. Sie kann unter anderem Beiträge und Seiten verwalten und auch Inhalte anderer Benutzer bearbeiten.
Die Rolle Autor ist stärker eingeschränkt. Ein Autor kann eigene Beiträge erstellen, bearbeiten und veröffentlichen, besitzt jedoch keine vergleichbaren Rechte zur Verwaltung fremder Inhalte oder Seiten.
Beide Rollen haben deutlich weniger Berechtigungen als ein Administrator und können beispielsweise keine grundlegenden Website-Einstellungen oder Benutzerrollen verwalten.
Die zusätzlich geforderte Rolle Abonnent hätte nur sehr eingeschränkte Zugriffsrechte und würde hauptsächlich der Verwaltung des eigenen Benutzerprofils dienen.
Da der dritte Benutzer nicht angelegt werden konnte und für einen vollständigen Rollenvergleich zeitlich keine separate Anmeldung mit allen Konten mehr möglich war, habe ich diesen Teil in der Dokumentation entsprechend kenntlich gemacht.

Fazit
Ich habe zwei Testbenutzer mit den Rollen Redakteur und Autor erfolgreich angelegt und damit unterschiedliche Zugriffsrechte in WordPress eingerichtet. Der zusätzlich geforderte Abonnent konnte aufgrund der fehlenden dritten E-Mail-Adresse nicht angelegt werden. Diese Abweichung wurde mit meiner Lehrerin abgestimmt. Die unterschiedlichen Berechtigungen der Benutzerrollen habe ich in der Dokumentation nachvollziehbar festgehalten.