WordPress Konfektionierung

Wenn die Installation von WordPress abgeschlossen ist, beginnt eigentlich erst die Arbeit. Wir wollen diese Basisinstallation soweit anpassen, dass für ein konkretes Projekt geeignet ist. Das hier gezeigte Musterprojekt heißt „Asia Restaurant Jumbo“, das gewählte Thema ist „Twenty Seventeen“, das defaultmäßig installiert wird.

• Details zum Thema Twenty Seventeen (Auf „Preview“ klicken)

In diesem Beitrag erfährst Du, wie diese Seite Schritt für Schritt entstanden ist und das Endergebnis kannst Du hier sehen:

http://jumbo.iam.at

Eventuell wurden aber an der Seite in der Zwischenzeit auch schon Erweiterungen vorgenommen, etwa wurde eine Bildergalerie der Umgebung mit einem dafür besser geeigneten PlugIn eingefügt.

Alle hier vorgestellten Dinge wie Seiten, Beiträge, Themen, Bilder, Menüs, Widgets hängen zusammen und es kann sein, dass bei unserem Spaziergang durch das Werden einer Seite etwas erwähnt aber erst später erklärt wird. Auch muss man sich entscheiden, ob man zuerst das Layout und dann die Inhalte oder umgekehrt bespricht.

Ich sag so: ohne Inhalte braucht man kein Layout und auch ohne Layout ist ein Inhalt Inhalt. Über die mitgelieferten Dummy-Seiten zu reden, ergibt keinen Sinn. Wir machen daher Nägel mit Köpfen und erzeugen zuerst den Inhalt und überlegen uns dann, wie wir den Inhalt über das Thema richtig zur Geltung bringen.

Projekt

Das zu realisierende Projekt heißt „Homepage für ein Chinarestaurant“.

An Rohmaterialien haben wir:

• eine Bildersammlung
• eine Speisekarte
• Name: „Asia Restaurant Jumbo“
• Adresse: Hauptstraße 33, 3270 Scheibbs
• Telefonnummer: 07482 43980
• Öffnungszeiten
• die Grundinstallation von WordPress erfolgte und wurde im Beitrag „WordPress Installation“ beschrieben.
• Sie Seite heißt http://jumbo.iam.at

Kriterien

• Man soll mit einem Minimum an Seiten auskommen
• Alles soll nur mit den Bordmitteln und ohne PlugIns erledigt werden

Was braucht ein Restaurant

• Adresse (Widget)
• Erreichbarkeit (Widget)
• Öffnungszeiten (Widget)
• Raucher/Nichtraucher (Widget)
• Speisekarte (Seite)
• Bilder (Seite)
• Beiträge (über aktuelle Ankündigungen)

Ein „Widget“ ist ein kleiner Baustein, den man auf jeder Seite und jedem Beitrag sichtbar machen kann. Die Fußleiste oder eine Seitenleiste sind Orte, an denen Widgets platziert werden können. Alles, was sich in diesen Bereichen befindet, brauch keine eigene Seite, weil man es ohnehin auf jeder Seite und jedem Beitrag findet. Man muss also nicht nach einer Öffnungszeit suchen, man findet sie auf jeder Seite, weil es ein Widget ist. Seiten und Beiträge dagegen sind dagegen das Zentrale, was man anzeigen will. Im Falle eines Restaurants kann man zum Beispiel die Bilder oder die Speisekarte an die erste Stelle setzen oder alternativ die Beiträge, wenn zum Beispiel ein Urlaub anzukündigen ist.

Zuerst der Inhalt, dann das Layout

Wenn man erstmals mit einem Thema zu tun hat, wird man experimentieren und untersuchen wollen, welche Wirkung, die einzelnen Einstellungen haben. Das kann man mit den vorgefertigten Seiten tun. Diese Spielphase sollte man nicht auslassen. Dann aber löschen wir alle Seiten und Beiträge und auch Widgets und fertigen neue für unser Projekt an. Eine Seite belassen wir, die „Startseite“. Diese Seite ist ein Link, der immer auf die Homepage zeigt, also auf jumbo.iam.at.

Seiten und Beiträge

Seite „Speisekarte“

Die wichtigste Seite eines Restaurants ist die Speisekarte. Wir machen es uns ganz einfach. Das Restaurant versendet fallweise einen vierseitigen Folder, in dem möglichst viele Speisen abgedruckt sind. Wir scannen diesen Folder ein. Das ergibt vier .jpg-Dateien, die auf einer neuen Seite „Speisekarte“ untergebracht werden sollen.

• Dashboard -> Seiten -> Erstellen -> „Speisekarte“
• Dateien hinzufügen -> Galerie erstellen -> Dateien hochladen -> Button „Neue Galerie erstellen“

Bevor der Button „Neue Galerie erstellen“ aktiv ist, müssen alle Bilder mit einer Bildunterschrift versehen sein.

Die Bilder erscheinen in der Seite eingebettet, sind aber nicht in der richtigen Reihenfolge. Das macht nichts, man kann die Bilder einfach mit Drag&Drop an ihren Bestimmungsort bringen.

Klickt man die Galerie an, wird sie eingerahmt und am oberen Rand erscheint ein Bleistift, mit dem man zur Bearbeitung kommt.

Hier legt man fest, wie die Bilder verlinkt werde (hier kommt man zu Medien-Datei),  wie viele Spalten gezeigt werden sollen und wie groß das gezeigt Bild sein soll. Da man den Text lesen können muss, wählen wir hier „groß“.

Wenn das Restaurant eine neue Speisekarte erstellt, muss man sie nur scannen und die Bilder ersetzen. Fertig.

Einen Text muss diese Seite nicht enthalten, denn es steht alles auf den Bildern.

Seite „Bildergalerie“

Die Bildergalerie soll Einblicke in das Restaurant geben. Diese Galerie wird ebenso wie die Speisekarte hergestellt, nur werden die Bilder dreispaltig angeordnet und es wird eine kleine Größe als Vorschaubild gewählt. Das Ergebnis in der Bearbeitungsansicht:

Wir vermissen an dieser Stelle so etwas wie eine Diashow, mit dem man von Bild zu Bild blättern kann. Es gibt Themen, die solche Galerie-Ansichten unterstützen und es gibt auch eine große Zahl von PlugIns dafür. Wir belassen es aber zunächst bei den Bordmitteln, eine einfach dreispaltige Anordnung der Bilder. Klickt man auf ein Bild, kann man einen Kommentar eingeben oder das Originalbild in voller Größe anschauen.

Es wird Dir auffallen, dass man diese beiden erstellen Seiten nicht im Menü sieht, wenn man die Seite anwählt. Das ist richtig. Eine Seite wird durch ihren Seitennamen angesprochen. Die beiden erstellten Seiten heißen „Speisekarte“ und „Bildergalerie“ und ihre Adressen sind:

Speisekarte: http://jumbo.iam.at/speisekarte/
Bildergalerie: http://jumbo.iam.at/bildergalerie/

Menü

Wie kommen die Seiten ins Menü?

• Dashboard -> Design -> Menü

Wir sehen links das Seitenverzeichnis und die zwei erstellen Seiten. Oben sieht man, dass wir derzeit das „Obere Menü“ bearbeiten und rechts sieht man, dass es als einzige Seite die „Startseite“ gibt und das ist gar keine Seite sondern ein Link auf http://jumbo.iam.at. Ganz egal, was auf dieser Startseite angezeigt wird, eine konkrete Seite oder der jeweils letzte Beitrag, hier kommt man genau dorthin. Daher wurde diese eine Seite „Startseite“ auch nicht entfernt.

Wir klicken links die beiden Seiten an und dann auf den Button „Zu dem Menü hinzufügen“. Dann stehen rechts drei Seiten untereinander: Startseite, Bildergalerie und Speisekarte. Und da die Speisekarte wichtiger ist als die Bildergalerie, reihen wir diese beiden Seiten durch einfaches Ziehen um.

Wichtig: Nicht vergessen nach jeder Änderung in diesem Menü auf den Button „Menü speichern“ zu klicken.

Das zweite Menü, das „Social Icon Menü“ wird gelöscht, bzw. alle Einträge daraus werden entfernt, weil Familie Ye wenig internet-affin ist und keine Aktivitäten auf Facebook & Co. setzt.

Beitrag „Eröffnung der Homepage“

Eine Seite beschreibt einen Gesichtspunkt in einem Projekt und ist vergleichsweise statisch. Wir mögen Bilder zur Galerie hinzufügen die Speisekarte erneuern aber die Position der Seite im Menü bleibt unverändert.

Beiträge sind etwas anderes als Seiten. Ein Beitrag berichtet über etwas Vergängliches, zum Beispiel über eine besondere Aktion, über eine Veranstaltung oder über einen geplanten Urlaub. Man könnte für diese Beiträge auch eine eigene Ankündigungsseite erstellen, die man bei Bedarf anpasst. Aber wenn man mit seinen Kunden kommunizieren will, ist es besser, dass alle diese Beiträge auch auf der Webseite im Sinne einer Chronik gesammelt werden. Und WordPress kann gerade das sehr gut.

Ein Beitrag kann zum Beispiel sein, dass man die Gäste darauf hinweist,

• dass diese Seite seit 23. Februar 2017 besteht und dass man sich freut, die Information zeitgemäß weitergeben zu können.
• Danach wird es zum Beispiel einen neuen Flyer geben oder eine neue Speise oder
• einen Bericht darüber, dass man auch japanische Sushi im Angebot hat.
• Unsere chinesischen Wirtsleute gehen nach Ostern auf Urlaub und auch das wird man rechtzeitig ankündigen.

Alles das hat Beitrags-Charakter.

Man kann diese Beiträge irgendwo im Menü verstecken oder man kann sie gleich an die erste Stelle setzen, denn sie sind es ja, auf die aus aktuellem Anlass hingewiesen werden soll. Und man kann zwischen diesen beiden Möglichkeiten leicht hin- und herschalten.

Wenn es also nichts Besonderes zu berichten gibt, schaltet man auf den Normalbetrieb „Speisekarte“ und sonst schaltet man die Beiträge in den Vordergrund. Wir zeigen später wie das geht.

Erstellen wir also einen neuen Beitrag mit dem Titel „Unsere neue Homepage“.

Ein Beitrag schaut (fast) genau so aus wie eine Seite. Der Text könnte lauten: „Am 23. Februar 2017 eröffnete das Asia Restaurant Jumbo seine neue Homepage. Ihr findet hier alles Wissenswerte über unser Restaurant, einige Bilder, selbstverständlich die Speisekarte und wenn es etwa Besonderes zu berichten gibt, werden wir das immer auf dieser Seite ankündigen. Wir freuen uns über Euren Besuch. Eure Familie Ye.“

So schaut dann der Beitrag in der Entwurfsansicht aus. Es wurde auch auf einen Link zum Eintrag in Google-Maps hingewiesen:

Hier würde ich gerne ein Bild der Familie Ye einbauen aber ich habe noch keines. Wir holen das nach. In der endgültigen Version wird dieser Betrag auf zwei Beiträge aufgeteilt: auf den Beitrag „Eröffnung“ und auf die Seite „Bewerte uns auf Google“.

Widget Anschrift, Telefon, Öffnungszeiten

• Dashboard -> Design -> Widgets

Unter „Verfügbare Widgets“ gibt es eine große Auswahl von Widget-Typen. Und diese Auswahl wächst noch beachtlich, wenn man sich auf PlugIns einlässt. Der wohl wichtigste Widget-Typ ist „Text“. Mit diesem Text-Widget kann man beliebige Texte und Bilder in den Randzonen einer Seite unterbringen. Warum ein solches Text-Widget nicht einfach eine Seite ist, kann man wohl nur auf der Entwicklung von WordPress verstehen. Logisch ist es nicht. Ein Beispiel: wäre ein Widget eine Seite und würde man sie versehentlich löschen, dann findet man sie immer noch im Papierkorb. Nicht so bei einem Widget! Widgets haben keinen Papierkorb. Ein gelöschtes Widget ist unwiederbringlich weg. Wenigstens für das Editieren eines solchen Text-Widgets gibt es ein PlugIn, mit dem man es genau so wie mit dem Seiteneditor bearbeiten kann.

Mit den Widgets sind wir also bei einem Bereich angelangt, wo man doch ein paar Html-Tags braucht. Ich habe es vereinfacht, wie man im folgenden Bild sieht. Um ein Widget zu einem Footer oder Seitenbereich hinzuzufügen, wählt man den Typ aus den „Verfügbaren Widgets“ aus und klickt auf „Hinzufügen“.

Mit dem einzigen Html-Tag <pre> wir eingestellt, dass der Text wie ein Kode formatiert wird. Damit muss man sich um Formatierung nicht weiter kümmern, alles wird so ausschauen, wie man es tippt. Zum Abschluss muss man noch angeben, in welchem Bereich man das Widget anzeigen möchte.

Das macht man für die Adresse, die Telefonnummer und für die Öffnungszeiten.

Damit sind die grundlegenden Inhalte erfasst und man kann sich dem Aussehen der Seite widmen.

Thema

Das Thema legt fest, wie eine Webseite aufgeteilt ist, also Kopfbereich, Fußbereich, Seitenleisten und dazu den eigentlichen Inhalt, in dem Beiträge und Seiten Platz finden. Fonts, Farben, Abstände uvam. Alles das ist Teil des Themas. Die mit WordPress mitgelieferten Themen wurden seit 2010 nach der Jahreszahl benannt. Das aktuelle Thema heißt „Twenty Seventeen“.

Bilder

Wenn man dieses Thema erstmals untersucht, stellt man fest, dass die Bilder den Charakter eines Hintergrundbilds haben und sich der Text der Seiten über diese Bilder schiebt und darunter erscheint immer ein neues Bild. Eines dieser Bilder ist 2000 x 1200 Pixel groß. Aber die Größe der Bilddateien ist erträglich und beträgt nur etwa 100k, wenn man die .jpg-Qualität aut etwa 50% einstellt.

Die mitgelieferten Bilder könnten zwar belassen werden, passen aber für den Zweck eines China-Restaurants nicht. Es wurden daher  fünf neue Bilder angefertigt, die an die Stelle der vorgefertigten Bilder treten sollten. Es handelt sich um eigene Aufnahmen, die mit GIMP auf die richtige Proportion 20:12 gebracht wurden und dann auf die endgültige Größe von 2000×1200 Pixel verkleinert wurde.

Diese Bilder können nun als Beitragsbild zu einer Seite oder als Headerbild oder als Bild innerhalb einer Seite oder eines Artikels oder – so wie hier – in Form einer Galerie angezeigt werden. Das Thema „Twenty Seventeen“ bietet die Möglichkeit, dass das Headerbild immer ein anderes sein kann. Diese Möglichkeit wurde auch ausgenutzt und daher erscheint bei jedem Besuch der Seite ein anderes aus diesen fünf Bildern als Header-Bild.

Customizer

Probieren wir gleich einmal, was der „Customizer“ kann.

Im Bild sieht man kleine blaue Bleistiftsymbole, mit denen man direkt zur Einstellung des betreffenden Details kommt. Auf der linken Seite sieht man eine Liste der Bereiche, die man konfigurieren kann. Hier, beim Standardthema, sind es nicht all zu viele Dinge aber bei größeren Themen gibt es hier jede Menge Einstellmöglichkeiten.

Die Einstellbereiche sind:

Website-Informationen: das sind der Titel und der Untertitel, ein Logo sowie das Website-Icon

Farbschema: man kann zwischen hell. dunkel und individuell wählen. Weiters kann man die Titelfarbe im Header einstellen.

Header-Medien: Das Thema erlaubt die Anzeige eines Videos an der Stelle des Header-Bildes. Solange das Video nicht geladen ist, wird das Header-Bild angezeigt. Das Header-Bild können auch mehrere sein. Und man kann den Header so einstellen, dass eine zufällige Auswahl aus den Bilder getroffen wird.

Menüs: Dieses Thema bietet Platz für zwei Menüs: das Obere Menü (unter dem Header-Bild) und das Social-Links-Menü (ganz unten im Fußzeilen-Bereich). Zu diesen festen Standorten wird kann eines von mehreren Menüs zugewiesen werden. Bei diesem Thema ist es ganz einfach, denn die vorgefertigten Menüs heißen genau so wie ihre Platzhalter. Hier ist also nichts zu tun. Bei ganz kleinen Einseiten-Webs kann man das Menü natürlich auch ausschalten. Weiters kann man hier sie Links eines Menüs auch anordnen oder löschen oder neue hinzufügen.

Widgets: Widgets sind kleine Module, die in dafür vorgesehenen Bereichen angeordnet werden können. Bei diesem Thema gibt es die Bereiche Seitenleiste, Footer1 und Footer2.

Statische Startseite: Hier wird festgelegt, was dieses Web anzeigt, wenn sie ein Besucher öffnet. Es können entweder die Beiträge sein (das ist dann nützlich, wenn man den Besucher immer auf Aktualitäten hinweisen will) oder es kann irgendeine statische Seite sein.

Theme-Optionen: Das Thema kann ein- oder zweispaltig sein. Dieses „spaltig“ bezieht sich auf die Anordnung von Titel und Text. Weiters können auf der Startseite mehrer Inhalte aufeinander folgen. Das Thema nennt sie „Startseiten-Abschnitte“. Wenn man also auf der Startseite nach unten scrollt, werden die verschiedenen Startseitenabschnitte der Reihe nach sichtbar. Jeder Abschnitt ist eine eigene Seite mit einem Eigenen Beitragsbild und das erklärt auch die interessante Abfolge der Bilder.

Zusätzliches CSS: Wenn man einen Text auf ganz besondere Weise formatieren will, kann man hier den zugehörigen Kode einfügen.

Man darf sich bei diesem einfachen Thema nicht erwarten, dass man weit in die Details konfigurieren kann, wie etwa Fonts, oder Abstände usw. Dazu müsste man schon eines der gewichtigeren Themen bemühen.

Das Header-Bild wurde so eingestellt, dass es zufällig ausgewählt wird.

Wir sind damit mit dieser einfachen Homepage fertig. So präsentiert sich die Seite mit dem Diskus:

Man kann die fertige Seite bei http://jumbo.iam.at anschauen.

Aber natürlich ist das längst nicht alles, was man von einer Homepage verlangen kann. Wir werden über die weiteren Details beim Umgang mit WordPress berichten.