Home

Arbeiten mit dem
Joba-WordPress-Theme

Auf dieser Seite finden Sie Hinweise und Informationen für die redaktionelle Arbeit mit der JoBa-Website. Es ist alles auf einer Seite untergebracht, sie ist deshalb ziemlich lang, aber man kann dafür alles an einem Ort finden. Dieses kleine Tutoral kann jederzeit erweitert werden. Wenn etwas unklar ist, oder mehr Informationen zu bestimmten Themen gewünscht wird, lassen Sie es mich wissen. (eichner@o8design.de)

Zugang/Login

Um die Website zu bearbeiten, hängen Sie einfach ein „wp-admin“ ans Ende der Web-Adresse. Daraufhin erscheint die Login-Maske, wo man sich mit Username und Passwort anmelden kann
https://www.josephine-baker-gesamtschule.org/wp-admin

Grundsätzlicher Aufbau und Begriffe

Die Joba Website basiert auf dem Contentmanagementsystem „WordPress“. WordPress arbeitet „Theme-basierend“, d. h. das Kernsystem stellt die Grundfunktionalität bereit, das Design und alle weiteren Funktionen der Website werden über das sogenannte „Theme“ (eine Sammlung von Styling-Vorgaben und Funktionen) hinzugefügt, in diesem Fall also das „Joba-Theme“.

Bei WordPress spricht man von „Frontend“ und „Backend“. Ersteres ist das, was der Besucher sieht, das „Backend“ ist der Bereich, in dem man die Website bearbeitet, Seiten einpflegt, Medien hochlädt und alles steuert. Alle Funktionen sind über das Menü links verfügbar. Im Backend, besonders im Editor, sehen die Inhalte oft etwas anders aus als im Frontend. Nicht jeder User sieht dasselbe im Backend, das hängt mit individuelle Einstellungen und den Rechtes des Users zusammen.

Die Joba-Website hat eine relativ einfache Struktur. Es gibt die Startseite mit den Elementen:

  • Logo, Servicenavigation (Impressum, Kontakt etc.) und Hauptnavigation im Kopfbereich (Header)
  • der Slider (großes Bildkarussell im Kopfbereich)
  • darunter die Teaser, kleine Häppchen, die auf Inhalte neugierig machen sollen. Davon wird noch viel die Rede sein.
  • Dann kommt der Ticker, eine Laufschrift mit aktuellen Inhalten und darunter ein frei gestaltbarer Bereich, der aktuell nur 2 Banner enthält.
  • Ganz unten dann der Footer (Seitenfuß) mit Kontaktinformationen, Adresse, Mininavigation…

Dann gibt es die „normalen Inhalts-Seiten“, in den Varianten mit oder ohne Seitenleiste. Seiten können ein Beitragsbild haben, das auch als Kopfbild verwendet wird und in der Seitenhierarchie nach unten vererbt wird. Seiten, die kein eigenes Beitragsbild festlegen, erben also von der Elternseite. Die Seitenspalte kann Text/Bild oder kleinere Text-Teaser enthalten, die den Inhalt der Seite ergänzen. Man kann in der rechten Spalte im Backend das „Seiten-Template“ umstellen, also ein Seiten-Template mit oder ohne Seitenpalte auswählen.

Dann gibt es noch die Seite Aktuelles, die eine Sonderfunktion hat, nämlich aktuelle oder wichtige Themen schnell zugänglich zu machen.

Gutenberg-Editor und Classic-Editor

WordPress hat seit einigen Jahren einen neuen Editor mit Namen „Gutenberg“. Dieser basiert auf einer flexiblen Blockstruktur, mit der man individuelle Inhaltselemente erstellen und  kombinieren kann. Damit kann man sehr viel bauen, aber durch die zusätzliche Komplexität benötigt man Einarbeitungszeit und ein Grundverständnis, wie ein „Page-Builder“ (quasi Seiten-Bauer) generell arbeitet. Ich finde den neuen Editor für die meisten Arbeiten etwas überdimensioniert, auch weil ein zu individueller Seitenaufbau oft gar nicht sinnvoll ist und das Gesamtdesign der Website stören kann. Wer aber Lust und Interesse hat, sich mit „Gutenberg“ zu beschäftigen, kann ihn natürlich gerne verwenden.

Für die typischen Aufgaben (Text schreiben und formatieren, Bilder/Bildergalerien, Links und PDFs einfügen) empfehle ich, den alten, einfacher aufgebauten Classic-Editor zu verwenden, bei dem es ein Seitentitel-Eingabefeld und einen Texteditor mit Formatierungsoptionen gibt, wie man das von Word kennt.

Ich habe, bis auf wenige Ausnahmen, die meisten Seiten mit dem Classic-Editor erstellt. Man kann aber zwischen den Editoren wechseln. Vom Gutenberg Editor zum Klassik-Editor und zurück. Manche Elemente stehen nur im Gutenberg-Editor zur Verfügung.

 

Eine Seite anlegen und Inhalte einfügen

Um eine neue Seite zu erstellen geht man im WordPress-Backend links im Menü zu „Seite“, darunter „Erstellen“. Dann kann man in der sich öffnenden Eingabemaske oben den Titel festlegen. Um eine bereits vorhanden Seite zu Bearbeiten kann man sie aus der Seitentabelle heraussuchen (Backend-Seitenleiste > Seiten > Alle Seiten), über das Suchfeld rechts heraussuchen oder, was meistens einfacher ist, im Frontend öffnen (den Button „Seite bearbeiten“ auf dem schwarzen Leiste oben verwenden). Analog dazu kommt man mit „Seite ansehen“ wieder ins Frontend zurück.

Ich empfinde es als praktisch, mit mehreren Tabs zu arbeiten, damit man nicht laufend ins Backend rein und wieder raus springen muss. Also die gerade in Arbeit befindliche Seite in einem neuen Tab öffnen und nach dem Speichern/ aktualisieren refreshen…

Text schreiben oder aus anderen Programmen einfügen, geht wie in Word. Return erzeugt einen neuen Absatz. Wenn man nur einen Zeilenumbruch möchte, also ohne Zwischenraum/Leerzeile, dann kann man „Shift-Return“ verwenden. Hier nochmal die Ansicht des Editors in der Classic und Gutenberg-Variante.

Bilder und Medien einfügen kann man mit dem Button „Dateien hinzufügen“. Oder einfach in den Editor ziehen per Drag & Drop. Wichtig: Eine passende Bildgröße auswählen. Wenn man „Thumbnail“ (Vorschau/Daumennagel-Bild, nur 150 Pixel breit) wählt für ein Bild, das die gesamte Spalte ausfüllen soll, und es mit den Anfassern vergrößert, wird ein zu kleines Bild hochskaliert, das Bild sieht dann unscharf aus. Für Bilder, die die ganze Inhaltsspalte (ohne Seitenleiste ca. 1000 px breit auf einem 19-Zoll Monitor, mit Seitenleiste ca. 700 px)  füllen sollen, am besten die Größe „Groß“ verwenden. Wenn man ein Bild mit „Groß“ in eine Seite (mit oder ohne Seitenleiste) einfügt, wird das Bild von WordPress automatisch an die passende Breite angepasst. Sehr praktisch!

Bilder kann man anpassen und bearbeiten über den kleinen Stift, der im Editor erscheint.

Ein Sonderrolle hat das Beitragsbild. Das wird einer Seite als Schlüssel-Bild zugewiewsen und überall verwendet, wo Inhalte dieser Seite auf der Website verwendet werden. Dazu mehr weiter unten bei „Inhalte ausspielen“

Eine Bildergalerie kann man folgendermaßen erstellen: „Dateien hinzufügen“, in der Leiste links dann „Galerie erstellen“. Dann kann man direkt aus dem Mediathek-Fenster Bilder für die Galerie auswählen. Das ist sehr komfortabel gelöst, man kann die Galerie jederzeit anpassen (Anklicken, Stift wählen), Bilder entfernen oder hinzufügen, die Anzahl der Spalten festlegen etc.
Im Gutenberg Editor sieht alles ein bisschen anders aus… aber funktioniert ähnlich.

Manchmal möchte man die Bilder in einem Slider zeigen. Das geht aktuell über den Button „Add slideshow“ im Kopfbereich des Editors. Slideshows werden unter dem Menüpunkt „MetaSlider“ erstellt und verwaltet und können in beliebige Seiten eingefügt werden.

Man kann eine Seite sofort veröffentlichen oder erstmal als Entwurf speichern. Das hat den Vorteil, dass man in Ruhe probieren kann und nicht jede Änderung sofort online sichtbar ist.

Anmerkung:
Ich habe auf manchen Seiten eine spezielle Bildergalerie vom Typ „gekachelte Galerie“ verwendet, weil ich fand, dass es chic aussieht. Das geht aber nur mit dem Gutenberg-Editor und dem gleichnamigen Blockelement.

 

 

Inhalte an verschiedenen Stellen ausspielen

Wichtige Seiten oder neue Inhalte können an verschiedenen Stellen der Website prominent präsentiert werden. Denn was nützt es, wenn es etwas Neues gibt und niemand davon erfährt.
Zum Interesse wecken sind folgende Elemente vorgesehen:

  • Der große Slider auf der Startseite
  • Der Teaserblock auf der Startseite
  • Die Teaser (hier als pinke Blöcke) auf der Seite „Aktuelles“
  • Die Text/Bild-Teaser in der Seitenspalte
  • Die kleinen Text-Teaser in der Seitenspalte
  • Der Ticker
  • Die Teaser vom Typ „übergeordnete Seite“

Alle diese Elemente können mit den Checkboxen und Eingabefeldern unter dem Editor aktiviert werden. Meistens reicht ein Klick, um eine Seite im Startseiten-Slider, Startseiten-Teaserblock, auf der Seite Aktuelles etc. erscheinen zu lassen. Als Bildmaterial wird das Beitragsbild verwendet. Für die Texte zieht sich das System Titel und erste Sätze aus dem Text. Wenn das inhaltlich nicht passt oder unschön aussieht, kann man für Slider oder Teaser einen Extra-Titel und eine Unterzeile eingeben, die nur für das Element (Slider oder Teaser) verwendet werden.

Um die Reihenfolge (das Ranking) der Elemente in „Teaser-Gruppen“ festlegen zu können, gibt es Ranking-Felder. Am besten geht man dabei so vor: Wenn Sie eingeloggt sind (als Bearbeiter der Website) rollen Sie mit der Maus über die Teaser auf der Startseite oder unter „Aktuelles.“ Dann erscheint das Title-Fähnchen. Dort können Sie das Ranking des Elementes auslesen. Wenn Sie dann z. B. etwas vor dieses Element setzen wollen, muss eine kleinere Zahl verwendet werden. Bsp: Der 3. Teaser hat Ranking -11, dann verwenden Sie -12 oder -11.1, um etwas vor diesem Element zu platzieren.

Hinweis: Nicht alle Teaser haben ein explizites Ranking, manche werden automatisch nach Erstellungsdatum geordnet, wenn kein Ranking eingeben wurde.

 

Für die Teaser in der Seitenspalte kann man auch den Seitenbaum auswählen, in dem sie erscheinen sollen. Beispiel: Die Seite „Sprache und Kommunikation“ soll nur im Bereich „Unsere Schule“ in der Seitenspalte „angeteasert“ werden.

Eine Sonderfunktion hat das Element „Teaser übergeordnete Seite“. Wird diese Checkbox gecheckt, wird auf der übergeordneten Seite (Elternseite) ein Teaserblock erzeugt. Der Sinn ist, dass man damit einfach eine „Verteilseite“ generieren kann, also eine Seite, deren hauptsächlicher Sinn darin besteht, ihre thematisch zusammenhängenden Folgeseiten zu präsentieren. Wie z. B. hier zu sehen. Allerdings darf die Seite keine Seitenpalte haben, sonst passt es vom Layout nicht.

Arbeiten mit Beitragsbildern

Eine besondere Rolle spielt das Beitragsbild, das man für jede Seite festlegen kann (in der rechten Spalte, wenn nicht sichtbar, dann oben rechts aktivieren unter „Ansicht anpassen“). Dieses Bild wird verwendet, um die Seite im Slider, Teasern, Kopfbild etc. visuell zu repräsentieren. Diese Universalverwendung bringt aber auch eine gewisse Schwierigkeit mit sich: Das Bild wird in ganz unterschiedlichen Größenverhältnissen erscheinen. Je nach verwendetem Gerät ist der Slider mal quadratisch oder sogar ein Hochformat, auf breiten Desktop-Monitoren hingegen ein langer schmaler Streifen. Noch schlimmer wir es beim Kopfbild, welches oft wenig hoch aber sehr breit werden kann.
Wenn Menschen auf dem Bild sind, kann das schnell dazu führen, dass die Person mit abgeschnittenem Gesicht erscheint oder im entsprechenden Ausschnitt gar nicht sichtbar ist.

Die Lösung dafür ist Zentrieren. Wenn sich die wichtigste Bildinformation genau (oder wenigstens annähernd) im Zentrum des Bildes befindet, ist sie in jedem Format sichtbar.
Das betrifft aber nur Bilder, die als Beitragsbild verwendet werden.

Man kann Bilder direkt in WordPress zuschneiden. Aus der Mediathek öffnen, dann „Bearbeiten“ und dann den Button „Zuschneiden“ verwenden.

Der Ticker

Der Ticker (die Laufschrift auf der Startseite) wird im Backend unter dem Menüpunkt unter „Beiträge“ verwaltet. Er wird einfach im Text-Editor bearbeitet, jede Zeile entspricht einem Ticker-Element. Die Einträge werden bei der Ausgabe auf der Seite farblich voneinander abgesetzt. Man kann auch Links eingeben.

Noch ein paar allgemeine Hinweise:

Medien austauschen:
Oft kommt es vor, dass man ein Bild oder PDF hochgeladen und bereits „verbaut“ hat, an dem man dann noch etwas ändern muss. Dafür gibt es in der Mediathek den Button „Eine neue Datei hochladen„. Diese Funktion ersetzt das alte Element durch das neue und aktualisiert alle Vorkommnisse. Das geht viel schneller, als das alte Bild zu löschen und eine neues einzufügen.

Ein PDF einfügen:
Um ein PDF in den Text einer Seite einzufügen, gehen Sie genau so vor, wie bei jedem anderen Link, nur dass im sich Öffnen-Dialogfenster keine Seiten-Url (Seitenadresse) sondern die Adresse des PDFs aus der Mediathek verwendet wird. Das öffnet dann das PDF. Sie können noch angeben, ob das PDF in einem neuen Tab (was man oft macht) oder auf der aktuellen Seite geöffnet werden soll. Das kleine PDF-Icon wird vom Joba-Theme automatisch hinzugefügt.