How-To: Erste WordPress-Webseite

Wo fange ich an, wenn ich meine eigene Webseite erstellen will? Server, Datenbanken und Codes sind einschüchternd, wenn man noch nie damit gearbeitet hat und rufen bei so manchen Studenten ein grosses Fragezeichen auf.

Wir sind zwei Studenten und beobachten immer wieder, dass unsere Kollegen sich mit dem Thema Webseiten-Installation schwertun. Aus diesem Grund haben wir uns entschlossen, eine zweiteilige Einführung in WordPress zu erstellen. Der erste Teil befasst sich mit dem Installieren und Aufsetzen der WordPress-Templates und der zweite mit den Funktionen des fertig installierten Produktes.

Um sowohl Neulinge anzusprechen, als auch jene Personen, die bereits einmal mit WordPress gearbeitet haben, erstellten wir jeweils zwei Formate. Einerseits sind dies Erklärvideos, die sich auf die grundlegenden Arbeitsschritte konzentrieren, andererseits eine detaillierte, schriftliche Anleitung, die den Neunutzer Schritt für Schritt durch den Prozess führt.

Das aus diesem Beispiel hervorgegangene Resultat findet ihr unter www.bischofberg.ch.

Die Videos und Anleitungen findet ihr nachfolgend.


Videotutorials:

WordPress Grundinstallation Anleitung
 

 

Einführung in die WordPress Benutzeroberfläche
 

 

Schriftliche Anleitungen:

WordPress Grundinstallation Anleitung

Hier als Download verfügbar.

Einführung in die WordPress Benutzeroberfläche

WordPress ist eine Software, mit der sich eine Webseite über den Browser erstellen und verwalten lässt. WordPress zeichnet sich durch seine hohe Benutzerfreundlichkeit und Anpassbarkeit aus. Die Installation ist weitgehend automatisiert und das System bringt mehrere Vorlagen (Themes) mit sich. Als webbasierte Anwendung teilt WordPress sich in getrennte Nutzeroberflächen im Browser auf. Besucher der Webseite sehen das sogenannte Front-End. Im Back-End verwaltet der Besitzer die Webseite. Nachfolgend sind grundlegende Punkte aufgelistet, mit welchen sich WordPress bereits weitgehend verwalten lässt:

Beiträge: Hier können Posts (Beiträge) erstellt und verwaltet werden. Ausserdem ist es möglich, Kategorien und Schlagwörter (Tags) zuzuweisen. Mit dem Button «Erstellen» kann ein neuer Beitrag auf der Webseite erstellt werden. In der Tabelle darunter werden alle bereits erstellten Beiträge aufgelistet. Dort kann man diese schnell bearbeiten und löschen.

Im Bearbeitungsmodus können auf der rechten Seite die Einstellungen wie Veröffentlichungszeit, Position (z.B. auf der Startseite) oder die allgemeine Sichtbarkeit des Posts eingestellt werden.
Ausserdem können hier Kategorien oder Schlagwörter zugewiesen oder auch direkt neu erstellt werden.  Ein weiteres wichtiges Element, das Beitragsbild, kann ebenfalls hier hochgeladen, bearbeitet und hinzugefügt werden.
Als letzter Schritt kann der Post per Vorschau angeschaut, nur gespeichert oder ganz veröffentlicht werden.

Im Untermenü können benutzerdefinierte Kategorien erstellt und die Beiträge mit der jeweils passenden Kategorien versehen werden. Auf einer Seite kann festgelegt werden, nach welchen Kategorien die Beiträge sortiert und angezeigt werden.  So ermöglicht man es dem User, Beiträge nur auf bestimmten Seiten anzuzeigen.

Medien: Hier können Medien hochgeladen und verwaltet werden. Mit dem Button «Datei hinzufügen» können Mediendateien auf dem eigenen Computer ausgewählt und hochgeladen werden. In der darunterliegenden Ansicht werden bereits hochgeladene Dateien angezeigt. Durch Klicken gelangt man in die Detailansicht, wo man grundlegende Bearbeitungsmöglichkeiten wie Beschnitt findet.
Hier hochgeladene Dateien können beim Bearbeiten oder Erstellen eines Beitrages ausgewählt und eingefügt werden.

Seiten: Hier können Seiten einer Webseite erstellt und verwaltet werden. Mit dem Button «Erstellen» kann eine neue Seite erstellt werden. Kurz nach dem Erstellen erscheint in der Bearbeitungsansicht ein Permalink. Dies ist der Link, mit welchem später die Seite im Browser aufgerufen wird. Dieser kann wiederum bearbeitet und umbenannt werden.

Design: Hier können die Grundeinstellungen des Layouts der Seite eingestellt werden.

Im Unterpunkt Themes können neue Designs für die Webseite hochgeladen und installiert werden. Es gibt bereits viele frei zugängliche Templates, welche bereits einen hohen Qualitätsstandard aufweisen und mit denen eine professionelle Webseite gestaltet werden kann. Oftmals unterscheiden sich diese aber im Umfang und Skalierbarkeit gegenüber den kostenpflichtigen Vorlagen. Die Themes können online erworben und heruntergeladen werden.

Ein Theme sollte zusätzlich durch ein sogenanntes Child-Theme erweitert werden, damit bei einem Update des Parent-Themes die Anpassungen und Einstellungen nicht verworfen werden. Child-Themes sind Themes, die mit ihrem Parent-Theme verknüpft sind und davon ihr Aussehen und ihre Funktionen erben.

Ein Child-Theme kann wie folgt installiert werden:

  1. Via Filezilla auf den FTP-Server der Webseite verbinden
  2. Im Theme-Verzeichnis (…/wp-conten/themes) einen Ordner erstellen (z.B. „namedesparenthemes-child“).
  3. Folgende Dateien müssen erstellt werden:
    • style.css
    • functions.css
    • screenshot.png
  1. css und functions.php mit dem folgenden Code ergänzen:

style.css

functions.php

  1. Für screenshot.png kann ein Bild des Themes gemacht werden. Dieses wird anschliessend in der Theme-Übersicht angezeigt.
  2. Das Child-Theme kann nun in der Theme-Übersicht aktiviert werden.

Der Customizer bietet die Möglichkeit, grundlegende Einstellungen (z.B. Titel der Seite, Webseiten-Icons etc.) direkt am Theme anzupassen, ohne in den Code eingreifen zu müssen. Widgets mit einem blauen Stift können durch Klicken direkt im Customizer bearbeitet werden.

Im Unterpunkt Menüs können Menüs wie das Hauptmenü oder der Footer erstellt werden. Auf der linken Seite können bereits erstellte Beiträge angewählt und zum Menü hinzugefügt werden. Per Drag and Drop können die Einträge in die bevorzugte Reihenfolge gebracht werden. In den Menü-Einstellungen unten auf der Seite kann angegeben werden, wo im Theme das Menü erscheinen soll. Dies ist aber meistens vom Theme vorgegeben.

Plugins: Das Theme kann zusätzlich mit Plugins erweitert werden. Plugins sind Erweiterungen für das Theme oder für WordPress, welche zusätzliche Funktionen zum Front- und/oder Back-End hinzufügen. Sie können manuell hochgeladen oder online direkt in WordPress (durch Klicken auf den «Installieren»-Button) installiert werden.

Einstellungen: Hier können allgemeine Angaben wie der Name der Webseite oder die Sprache angepasst werden. Des Weiteren kann auch die Blogseite ausgesucht, die Mail-Einstellungen oder die Bildergrösse für die Posts angepasst werden.

Unter Lesen kann festgelegt werden, welche Seite als Start- oder Beitragsseite verwendet werden soll.

(sba)

Kritik
von Sandro Anderes und Sarah Büchel

Für unser Digezz-Projekt sind wir nach der IPERKA-Methode vorgegangen und möchten mit diesem auch die Kritik verfassen:

Informationen beschaffen

Wir haben uns entschieden für die Pfadicorps Bischofberg die bestehende Webseite neu aufzubauen und zeitgemäss zu gestalten. Da diese Projektidee keine publizistische Tragweite hat, haben wir uns entschieden die komplette Installation von Wordpress (kein Click-Install) sowie einige Grundlegende Tipps und Tricks des CMS als Animations-Tutorial für angehende Studenten und Wordpress-Einsteiger zu erstellen.

Konkrete Projektidee:
- 2 Animations-Tutorials mit Illustrator und After Effects mit den Themen «Grundinstallation und Einrichtung Datebank für Wordpress» und «How-To-Use Wordpress»
- Wordpress-Webseite für die Pfadicorps Bischofberg als Pilotprojekt

Zielgruppe:
- Wordpress Neueinsteiger

Wie muss es sein:
- Einfach und für jeden verständlich, ansprechend, modern

Deadline:
- Publikationstermin Digezz (7. Juni)

Planen

Damit das Projekt reibungsfrei abläuft mussten in der Planung einige Schritte beachtet werden. Wir haben uns als erstes darauf konzentriert, dass wir die Ressourcen wie Zugangsdaten zu der bestehenden Pfadi-Webseite sowie die des Hosters für Datenbank, FTP und all. Domain-Zugriff rechtzeitig erhalten aber auch den nötigen Zeitbedarf und allfällige Hilfe von Dozenten einplanen können. Als weiteren Schritt wurden die einzelnen Teilaufgaben sowie die Meilensteine definiert, damit ein Weiterarbeiten auch unabhängig voneinander gewährleistet werden kann. Als letztes haben wir die einzelnen Tasks priorisiert und Reservezeit für Unerwartetes eingeplant.

Meilensteine:
- Bis 27. März: Ideefindung und Besprechung
- 10. April: Definitiver Projektstart
- 5. Mai: Fertigstellung Animationsvideos
- 19. Mai: Überarbeitung Animationsvideos
- 26. Mai : Fertigstellung Website
- 31. Mai: Überarbeitung Website
- 5. Juni Publikationsbericht und Kritik und letzte Änderungen
- 7. Juni Publikationstermin

Entscheiden

Während des Projektes war es wichtig ständig in Kontakt zu bleiben und sich regelmässig über Unklarheiten auszutauschen sowie auch Rückmeldung des Partners zu der bisher geleisteten Arbeit einzuholen. Bei uns war vor allem während dem Re-Design der Website wichtig, sich mit dem Projektpartner und auch dem Endverbraucher (Pfadicorps) abzusprechen, damit keine falschen bzw. unnötigen Aufwände betrieben werden. Aber auch, oder vor allem auch, bei den Videos war es wichtig nicht vorhandenes Know-How einzuholen, damit dieses auch fehlerfrei weitervermittelt werden kann.

Realisieren

Der Hauptteil war natürlich die Umsetzung des Projektes. Wichtig war dabei ein gesundes Mass an Selbstdisziplin zu zeigen, damit die definierten Teilziele und Meilensteine termingerecht fertiggestellt werden können und das Projekt nicht in Verzug gerät. Weiter waren die Fragen zu klären ob Mittel und Wege in Bezug auf das Ziel stimmen und ob alle Teilnehmenden nach Plan und Absprache vorgehen.

Uns ist dies gut gelungen und wir konnten mit kleinen Ausnahmen die Termine rechtzeitig Einhalten. Auch die Kommunikation untereinander während der Realisationsphase war hoch und wir waren fast täglich miteinander in Kontakt um das bestmögliche aus den Videos und vor allem auch auf der Webseite herauszuholen und spontane Ideen oder Änderungen zu besprechen.

Kontrollieren

Damit bei der Abgabe bzw. Übergabe der Tutorials und der Webseite keine Überraschungen auftreten, wurde durch Gegenseitige- aber auch durch Fremdkontrolle regelmässig überprüft ob es irgendwelche Technische-Diskrepanzen oder Verständnisfehler gibt oder geben könnte. Des Weiteren wurde wiederholt kontrolliert ob die Teilziele erreicht werden können, ob es noch Unklarheiten gibt und ob die Abmachungen klar sind und sich alle daranhalten.

Auswerten

Als letzten Teilschritt haben wir ein Fazit über die einzelnen Teilprojekte sowie über das Gesamtprojekt gezogen und reflektiert, was wir in Zukunft besser machen können.

Wir können sagen, dass wir alle Ziele wie geplant erreicht haben und die Ressourcen, vor allem auch das Zeitmanagement optimal einsetzen konnten. Der Umgang im Team war im Allgemeinen sehr angenehm und konnte einen hohen Produktivitätsgrad aufweisen. Auch der durchgehende Austausch und die Einholung eines gegenseitigen Feedbacks, trug zu einer positiven Stimmung bei. Für Zukünftige Projekt oder auch Digezz-Arbeiten würde ich gerne an dieser Leistung anknüpfen und wenn, dann das ganze möglicherweise Administrativ noch etwas besser strukturieren und ordnen. Auch die Einschätzung der Arbeitsstunden ist etwas, für was wir in Zukunft genauer analysieren müssen, da wir doch den Aufwand etwas unterschätzten. Vor allem bei den Animationsvideos sind wir mit Null Know-How gestartet und mussten uns zuerst über die vollständige Thematik noch informieren, sowie auch nicht vorhandenes Wissen durch diverseste Quellen einholen.

Was aber nicht zu vergessen ist, ist natürlich der Lerneffekt, welcher mit After Effects und Illustrator für die Tutorial-Videos hinzukam und wir zukünftig noch gut weiter davon profitieren können. Aber auch die Installation, Gestaltung und Usability einer Webseite können wir zukünftig zu unseren Fähigkeiten dazuzählen.

Keine Kommentare

Schreibe einen Kommentar