Fortgeschrittenenkurs WordPress

Individuell gestaltete Startseite

Trotz gemeinsamem Layout soll mindestens die Startseite, das Aushängeschild Ihrer Einrichtung, möglichst unverwechselbar und damit einmalig aussehen.  Welche Möglichkeiten stehen Ihnen zur Verfügung?

Image-Scroller

Falls Sie mehr als ein Bild auf die Startseite bringen wollen und hinter den Bildern Beiträge stecken sollen.

Mehr dazu: Image-Scroller

Geräteunabhängig und barrierefrei!

Was geht, wir aber nicht empfehlen können, sind Gestaltungen mit Layout-Tabellen. Damit ist eine mittlerweile veraltete Technik gemeint, mit der man Elemente nebeneinander ausrichtet. Meist passen diese nicht auf die Smartphone-Displays, lassen sich schlecht mit Bildschirmvorlesern vorlesen.

Gestalten Sie Webseiten rein inhaltlich. Ihre Sicht auf die Seite ist nur eine von vielen möglichen (Betriebssystemen, Browsern und Geräten wie Tablets oder Telefonen).

Testen Sie Ihre Webseite auch direkt mit dem Firefox, als ob Sie ein Smartphone oder Tablet verwendeten:

Alt -  Extras - Webentwickler - Bildschirmgrößen testen

Navigationsmenüs

Die klassische Organisation Ihrer Seiten. Halten Sie die Komplexität so gering wie möglich, die Beschriftungen der Navigationsmenüs sollen kurz und in der Benutzersprache gehalten sein.

Tiefen Verschachtelungen folgen Benutzer kaum, sie verwenden meist die Suche. Bieten Sie diese daher immer an! (Für die Suche gibt es eigene Widgets, die sie in die rechte oder auch per Shortcode in die mittlere Spalte einsetzen können.)

DatenTabellen

Der Einsatz von Tabellen auf Webseiten ist sinnvoll, wenn Tabellen (wie z.B. aus Tabellenkalkulationsprogrammen oder anderen Office-Anwendungen) präsentiert werden sollen.

Tabellarische Daten können Sie in Excel vorbereiten und dann über das Plugin Tablepress importieren.

Dabei wird die Tabelle zuerst separat vorbereitet und dann über den Shortcode [table id=nrdertabelle /] an beliebigen Stellen im Projekt eingebunden.

Das Plugin finden Sie in der linken Spalte, wenn nicht, schreiben Sie an webmaster@uni-mainz.de und wir schalten es gern für Sie ein.

Mehr zu TablePress

Sprachvarianten

Für jede Sprache, in die Sie ihr Blog übersetzen möchten, legen wir Ihnen ein eigenes Blog an.

Im Schulungsblog ist eine englische Sprachvariante aktiviert.

Wenn Sie nichts für Ihre Seite eintragen, dann zeigt der Link "English" auf die englische Startseite des ZDV. Dies ist so voreingestellt.

Nehmen Sie an, Sie hätten für Ihre Seite eine englische Fassung auf einer anderen Webseite übersetzt. Tragen Sie auf Ihrer Seite bei Sprachvarianten im Feld Wert diese Webadresse ein.

Diese Adresse wird dann auf der Seite oben rechts angezeigt anstelle der voreingestellten.

Dateien zum Download anbieten

Nicht immer ist dafür ein CMS für öffentliche Webseiten (wie WordPress oder OpenText) die beste Lösung...

Download-Lösungen an der JGU: welche Software verwenden?

- JGU-Reader: für alles Lehrveranstaltungsrelevante (Scripte, Materialien), Der Teilnehmerkreis ergibt sich aus der Anmeldung an der Veranstaltung .

- Ilias: e-learning Inhalte, Benutzerkreis frei wählbar.

- Sharepoint-Teamweb Dokumentenbibliothek: Intranet-Daten, Benutzerkreis bestimmen Sie (aus der Menge der Uni-Accounts)

- WordPress-Downloadcenter: Am leichtesten nutzbar, wenn Sie den Teilnehmerkreis nicht einschränken müssen.  Sie können beliebige Verzeichnisse innerhalb der Uni-Virtual Hosts anzeigen lassen!
Mehr dazu: Downloadcenter-Plugin

- direkt in WordPress: keine Einschränkung des Teilnehmerkreises

Beschränkung der Öffentlichkeit: Authentisierungsmöglichkeiten

Manche Seiten möchten Sie nur einem eingeschränkten Benutzerkreis zugänglich machen. Wenn Sie Dokumente und Termine dort tauschen, ist Sharepoint Teamweb geeignet.. Wenn nur gelesen und kommentiert werden soll, ist WordPress sinnvoll.

Mehr dazu: JGU-Auth

Formulare

Erfassen Sie Daten per Formular. Die Daten werden in eine Datenbanktabelle geschrieben. Zusätzlich können die Daten per E-Mail verschickt werden. Manche Personendaten können im Formular vorausgefüllt werden, wenn sich Benutzer an dem Formular anmelden. Dies geschieht in Kombination mit JGU-Auth.

Mehr dazu: Formulare sowie Übersicht Shortcode und erzeugtes Ergebnis

JGU-XSL

Sind Daten einmal strukturiert erfasst worden, ist es oft nicht nötig, diese nochmals einzugeben. Vielmehr definieren Sie über eine Schnittstelle wie z.B. JGU-XSL, welchen Datenbereiche Sie in Ihrer Webseite eingeblendet haben möchten.

Mehr dazu: JGU-XSL mit Univis und Blogfeeds

Beispiel: Mehrere Personen aus dem Univis

Frageliste vergangener Kurse

  • Wie kann ich Sprungmarken setzen? Am einfachsten mittels eines Inhaltsverzeichnisses, ansonsten den Anchor im Textmodus setzen (engl: anchors, Doku vom W3 Beispiel: zum Anfang oder der Mitte der Seite springen
  • Warum funktioniert der Weiterlesen-Link " nicht? Er funktioniert nur in der Übersicht von Beiträgen!
  • Wie fügt man ein Kontaktformular ein (was im "normalen" WordPress ja ganz einfach ist)? Auf der Seite, die das Formular enthalten soll: Optionen - Diskussion (Haken muß gesetzt sein), dann bei Diskussion - Kommentare erlauben anhaken.
  • Verlinktes (zb Bilder) in der rechten Spalte haben einen größeren Abstand. Warum? Dies soll dazu dienen, daß man Links besser / genauer anklicken kann.
  • Alternativ (Alias-)URL = Permalink
  • Integration Jogustine - Abfragen (Hörsäle-Seminarräume...) - im Moment nur Dozenten und Bereiche (aber nette Idee!)
  • Integration UnivIS - Abfragen (Institutspersonal) = JGU-XSL
  • Script-Integration (PHP-SQL - CGI oder XML - JS - SSI ...) - Nur XML über XSLT
  • Medien-Integration (HTML5/Flash...) = jgu-video
  • (Auto-)Seitenkonvertierung OpenText->WordPress = Ja, das machen wir jeden Tag ein wenig besser
  • Datensicherung = Revisions, exporte aller Daten sind möglich
  • "Test/Ausprobier-/Herumspiel-" Seiten - auf Privat setzen
  • Moderierte Seiten (verschiedene Autoren) = per Funktionsmailadresse blogweise administrierbar

 

Einführungskurs WordPress

  • Nach Einwählen in das Schulungsblog und einem Blick in die Umgebung legen Sie eine erste Seite an.
  • Füllen Sie die Seite mit Text, Inhaltsverzeichnis und Bildern in der mittleren Spalte.
  • Definieren Sie, wie die rechte Spalte aussehen soll (spezifisch oder allgemein)
  • Legen Sie Menüs an und weisen Sie Ihre Seiten den Menüs zu.
  • Erstellen Sie Beiträge, weisen Sie Kategorien zu.

Login

Ergänzen Sie Ihre Blogadresse um /wp-admin . Beispiel:

www.blogs.uni-mainz.de/schulungsblog/wp-admin/

Mehr dazu: Anmelden an der Webseite

Umgebung kennenlernen

Admin-Menüband oben zum Hin-und Herschalten und Neuanlegen von Elementen, Dashboard-Menü für die gesamte Verwaltung der Inhalte.

Mehr dazu: Obere Menüleiste

Seiten anlegen

funktioniert über  "+ Neu - Seite " in der Adminbar. Der Titel wird zu einem Teil der Adresse der Seite.

Schreiben Sie in den Titel die Worte, nach denen man suchen würde um Ihre Seite zu finden. (Statt "Willkommen auf unserer Seite" lieber "Institut für x-Wissenschaft"

Mehr dazu: Seite erstellen

Wenn Sie Ihre Texte von anderen bekommen, sollten diese möglichst nicht formatiert sein, da Formatierungen beim Übertragen meist verlorengehen.

Mehr dazu: Text aus anderen Anwendungen einfügen

Schreiben Sie besonders kurz und einfach auf den Webseiten. Verwenden Sie die Worte, die auch Ihre Zielgruppe verwendet.

Es gibt einige Spezialseiten, wichtigste ist die Sitemap. Wenn Sie eine leere Seite mit diesem Namen anlegen, wird dort der Menübaum des Menüs der linken Spalte angezeigt.

Inhaltsverzeichnis (Shortcode)

Der gesamte Inhalt der Webseite sollte in einem Rutsch erfassbar sein. Da Sie nicht wissen können, über welches Gerät der Kunde Ihre Seite erreicht (Smartphone, Braille-Zeile, Screenreader) und auch lange Seiten praktisch sind (Ausdruck auf Papier), nutzen Sie den Shortcode für die automatischen Inhaltsverzeichnisse.

Shortcodes sind intelligente Abkürzungen in eckigen Klammern, die meist trickreiche Dinge anstoßen. Dieser Shortcode erzeugt ein Inhaltsverzeichnis [toc] aus allen Überschriften der Seite.

Mehr dazu: Inhaltsverzeichnisse

Links

Bedenken Sie bei Links im Lauftext, daß der Leser sich immer dafür entscheiden muß, weiterzulesen. Am Ende eines von Links durchsetzten Textes sollte keinesfalls etwas stehen, was ALLE Leser erfassen sollten. Stellen Sie Links daher besser separat in eine Liste ans Ende des Textes.

Der Linktext soll aussagekräftig sein, günstig ist oft die Überschrift der verlinkten Seite. Der Linktext sollte auf der Seite nur einmal vorkommen . Statt "Klicken Sie hier" besser "Aktuelle Mitteilungen aus dem Institut X".

Markieren Sie den zu verlinkenden Text und wählen dann das Icon mit der Kette.

Mehr dazu: Links setzen

Bilder

Lockern Sie die Textwüste mit einem selbstgemachtem Foto auf.

Sonnenuntergang am Meer als Beispiel für ein Bild

Klicken Sie an die Stelle, an der das Bild erscheinen soll, auf "Dateien hinzufügen" oberhalb der Texteditor-Iconleiste und folgen Sie dem Dialog:

  • Wählen Sie eine möglichst kleine Anzeigegröße (Smartphones).
  • Wählen Sie aus, wie das Bild verlinkt werden soll (Dateianhang Anzeigeneinstellung)
  • Vergeben Sie mindestens den Alternativtext, sonst ist das Bild unverständlich für all die, die sich Webseiten vorlesen lassen müssen.

Mehr dazu: Bilder in der Webseite

Beachten Sie Kopierrecht und Persönlichkeitsschutz.

Mehr dazu: Bilder im Internet

Rechte Spalte

Standardmäßig werden in der rechten Spalte verschiedene Sammlungen Ihrer Beiträge angezeigt. Diese Anzeigeprogramme ("Widgets") können Sie ersetzen durch eine rechte Spalte, die ausschließlich zu Ihrer Seite gehört. Dazu schreiben Sie im Textmodus ans Ende Ihres Textes:

[rechtespalte]all dies steht rechts[/rechtespalte]

Zusätzlich schalten Sie das Klappmenü Template auf "spezifische rechte Spalte". Nur wenn Sie beides gemacht haben, haben Sie die rechte Spalte dieser Seite jetzt unter Kontrolle und können dort frei Texte und Bilder einfügen.

Mehr dazu: Seitenspezifische rechte Spalte

Struktur der Webseiten

Bringen Sie Ordnung in Ihre Inhalte, verwenden Sie Schlagworte und Kategorien, pflegen Sie eine Navigationsstruktur.

Schlagworte und Kategorien

Sie können jeder Seite Schlagworte und Kategorien zuweisen. Fangen Sie dabei mit Schlagworten an. Beobachten Sie die Schlagwortliste. Schlagworte, die sehr häufig vorkommen, haben offensichtlich eine hohe Relevanz für ihre Website. Diese Worte könnten Sie dann auch in Kategorien übernehmen, die z.B. einfach als Links in der Navigationsstruktur Verwendung finden könnten.

Der Vorteil dieser Vorgehensweise beim Aufbau Ihrer Webseiten: Sie müssen sich zu Anfang nur wenig Gedanken um die Struktur machen. Diese wächst nach Bedarf mit Ihren Inhalten!

Menüs anlegen

Sobald Sie Ihre zukünftigen Seiten veröffentlich haben (Entwürfe lassen sich keinem Menü zuordnen), bilden Sie mit Ihnen die Navigationsstruktur

Gehen Sie im Dashboard zu Design - Menüs, klicken Sie auf "create a new menu", vergeben Sie einen Namen für das Menü (dient nur zum Verwalten). Dies machen Sie nur einmal am Anfang. Sobald es die Menüs gibt, müssen Sie neue Seiten nur noch dem vorhandenen Menü hinzufügen.

Menü links oder oben?

Sie bestimmen durch anhaken, an welcher Stelle Ihr Menü auftauchen soll (links oder oben).

(Obacht: weil es die Menüs nur einmal pro Blog gibt, kommt es in der Schulung an dieser Stelle zu ganz natürlichem Chaos. Keine Panik!)

Seiten dem Menü zuweisen

Prüfen Sie zuerst, ob das richtige Menü ausgewählt ist. Machen Sie eine Haken an die Seiten, die in Ihrem Menü auftauchen sollen und klicken Sie auf "Menü hinzufügen".

Sie tauchen jetzt ganz unten in der Menüliste auf.

Ziehen Sie mit der Maus die Menüpunkte an die gewünschte Stelle, z.B. für einen Unterpunkt rechts unter die Seite, die den Oberpunkt bilden soll.

Mehr dazu: Navigationsmenüs

Sitemap erstellen

Beiträge

Für alle zeitbezogenen Inhalte nehmen Sie statt der Seite den Beitrag. Dessen Webadresse enthält immer automatisch das Erstellungsdatum.

 

Widgets

Sobald Sie einige Beiträge mit Kategorien und Schlagworten erstellt haben, können Sie im Dashboard unter Design -  Widgets diese verwalten.

Der Bereich ist dreigeteilt, links oben alle überhaupt vorhandenen Widgets, rechts die aktiven Widgets in den Anzeigebereichen.

(Obacht: weil es die Menüs nur einmal pro Blog gibt, kommt es in der Schulung an dieser Stelle zu ganz natürlichem Chaos. Keine Panik!)

Vertiefungsrunde

Nachdem wir nun einmal "durch" sind, behandeln wir nun alle vorigen Themen anhand je eines Beispiels vertiefend.

Umgebung der Webseite: Layout

Da das Layout der Uni vorgegeben  ist, individualisieren Sie Ihre Seite, z.B. mit einem eigenen Kopftext. Die stellen Sie in der Adminbar beim Blognamen unter "Kopfzeile" ein.

Mehr dazu: Webseiten-Struktur einrichten

Umgebung (Dashboard)

Oben rechts können Sie die "Ansicht anpassen", damit kontrollieren Sie, welche Einstellmöglichkeiten jeweils auf der Seite sichtbar sein sollen. Bei Willkommen - Profil stellen Sie ein Ihnen angenehmeres Farbschema eins.

Beiträge anlegen, aber nicht sofort 🙂

Neue Beiträge können Sie auch für die Zukunft erstellen bei "Veröffentlicht am -  Bearbeiten". Obacht: die Seite ist bis zu dem Zeitpunkt nicht existent!

Dateien einbinden

Genauso wie Bilder verlinken Sie auch Dateien in einer Webseite über "Dateien hochladen". Anklickbarer Text der Datei ist dabei der Titel.

Seiten ordnen (Eltern)

Falls Sie viele Seiten haben, ist die Übersicht und Auswahl dadurch erschwert. Ordnen Sie in so einem Fall die Seiten den Menüoberpunkt über Attribute - Eltern - Seite zu.

Menüs mit Kategorien und Links

In den Menüs können Sie außer den normalen Seiten auch Betragssammlungen (Kategorien) sowie externe Links einbauen.

Die weite Welt der Shortcodes

Sie kennen jetzt schon toc und rechtespalte. Viele Tricks in WordPress sind per Shortcode realisiert. Wenn Sie zum Beispiel alle im Jogustine vorhandenen Veranstaltungen anzeigen lassen wollen, geht das per Shortcode

[jogustine instructor = "Alexander Reinemann"]

Mehr dazu: Informationen aus Jogustine importieren

Dies lassen Sie einstellen

  • Startseite: aktuelle Beiträge oder feste Seite
  • Sprachvarianten
  • Tabellen
  • Imageslider

Mehr dazu: Administrative Einstellungen

Lust auf mehr? Wir haben auch Schulungen für Fortgeschrittene...

 

 

WordPress Kurse

Kursraum 3 im ZDvDas Zentrum für Datenverarbeitung bietet regelmäßig WordPress-Kurse an. Diese Kurse richten sich an Autoren, die für eine Einrichtung oder ein wissenschaftliches Projekt innerhalb der Universität Mainz ein Blog betreuen möchten. Dabei erlernen Sie sowohl die Handhabung des Systems als auch die möglichen Einsatzgebiete. Für die Schulung erhalten Sie Zugang zu einem Schulungsblog, wo Sie die Kursinhalte ausprobieren und vertiefen können. Sollten Sie ein konkretes Projekt mit WordPress umsetzen wollen (siehe auch: Wie bekomme ich ein WordPress-Blog?), können wir Ihnen dieses auch gerne schon vor der Schulung einrichten.

Bitte beachten: Die Schulungen behandeln die Handhabung des zentral installierten WordPress-Systems www.blogs.uni-mainz.de . Hinweise zur Installation oder zur privaten Nutzung sind nicht Thema der Schulung.

Einführungskurs WordPress

Diese Schulung richtet sich an WordPress-Anfänger. Sie lernen, Seiten und Beiträge anzulegen, Bilder einzubauen, und die Struktur der Webseite per Navigationsmenü, Kategorien und Schlagworten zu definieren.

Fortgeschrittenenkurs WordPress

Sie arbeiten bereits mit der ZDV-Wordpress Instanz und möchten Ihre Kenntnisse effizient vertiefen. Lernen Sie, Formulare, Authentisierungsmöglichkeiten, Schnittstellen und andere Plugins kennen.

Kurstermine

Wann sind die Termine?

Wie viele Plätze sind frei?

Wo findet der Kurs statt?

WordPress-Termine und Anmeldung

Die Kurse haben wir mit dem System Ilias organisiert, so können Sie in einem Rutsch alle Termine sehen und auch gleich Ihrem Wunschkurs beitreten. Sie müssen sich nur anmelden und bei der allerersten Anmeldung die Nutzungsvereinbarung bestätigen.

Wie bekomme ich ein WordPress-Projekt?

Das Zentrum für Datenverarbeitung stellt eine zentrale WordPress-Installation mitsamt Schnittstellen zum Abrufen von Daten aus anderen Uni-Systemen (z.B. Jogustine, Uni-Bibliografie, UnivIS) zur Verfügung. Die zentrale WordPress-Installation wird bereits in über 500 Projekten von über 2.300 Redakteuren campusweit genutzt (Stand Januar 2017). Also: WordPress müssen Sie nicht selbst installieren.

Was müssen wir von Ihnen wissen, um Ihnen ein Projekt anzulegen?

Damit das Eintragen ohne viel hin und her funktioniert, klären Sie im Voraus folgende Daten:

Aussagekräftiger Titel

(Name des Blogs, er erscheint in der Titelleiste des Browsers, im Seitenfuß, als Überschrift in Feeds. Beispiel: dieser Blog heißt JGU Blogs)

Blogadresse

Die Projektdresse (URL) nach dem Muster www.blogs.uni-mainz.de/[Ihr Wunschname].

Kann das Blog einem Fachbereich zugeordnet werden, setzen Sie die Nummer des Fachbereichs bitte Ihrem Wunschnamen voran. Beispiel: www.blogs.uni-mainz.de/fb05fachschaftgekothe. Erlaubt sind Ziffern und Kleinbuchstaben. Folgende Zeichen können nicht enthalten sein: Umlaute, Leerzeichen, Unter- und Schrägstriche und andere Sonderzeichen.

NOCH eine Adresse = Domain

Zusätzlich sollten Sie als erste Adresse ('primary'' Domain) eine weitere Adresse eintragen lassen (zum Beispiel in der Art projektname.uni-mainz.de).

Bei der Einrichtung gibt es einige technische Details zu beachten: Hinweise zum Eintrag der zusätzlichen Adresse

Sprachvariante

Deutsch oder Englisch? Standardtext im Webauftritt und Sprache des Dashboards, mehr dazu: Sprachvarianten

Startseite

Welche Inhalt soll sie enthalten? Statisch (Beispiel: Bild und Text) oder eine automatische Sammlung neuester Beiträge (Beispiel: so wie auf der Startseite dieses WordPress-Handbuchs)?

Menü

Auf Wunsch legen wir Ihnen ein vorgefertigtes Menü an, das spart Ihnen Arbeit. Mehr zu Menüs

Wer ist verantwortlich für das Projekt?

Wer diesen Antrag ausfüllt, ist für die Seiten verantwortlich und muß bei Rückfragen während der gesamten Betriebszeit des Projekts erreichbar sein. Wahlweise können Sie uns auch in der Bestellliste einen anderen Ansprechpartner nennen.

Bestelliste

Überlegen Sie, was Sie noch brauchen, vielleicht noch einige Zusatzfunktionen?

 

Laufzeit  - Wann brauchen Sie das Projekt nicht mehr?

Wir erleben viele Webseiten mit einer begrenzten Lebensdauer (Konferenz, Kooperationen, Veranstaltungen). Diese veralten vor sich hin, die dort angegebenen Kontakte sind nicht mehr zuständig oder nicht mehr an der Uni. Lassen Sie es nicht so weit kommen! Wir entfernen den Website für Sie zu Ihrem Wunschtermin. Wenn Sie hier nichts angeben, fragen wir nach, wenn es ein Jahr lang keinerlei Aktivitäten in Ihrem Projekt mehr gab.

Wie ist das mit dem Layout?

Das WordPress-Hosting ist für Fachbereiche und Einrichtungen der Universität kostenlos.
Als Layout ('Theme') ist für alle Domänennamen, die auf *uni-mainz.de lauten, auf Wunsch der Hochschulleitung das gemeinsame Layout der Johannes Gutenberg Universität festgelegt.

Prinzipiell besteht in begründeten Einzelfällen (z.B. Kooperationsprojekte mit externen Einrichtungen) die Möglichkeit, über sog. 'Child-Themes' CSS-basierte Abwandlungen des Uni-Layouts zu verwenden. Bitte wenden Sie sich hierzu ggf. an die Stabsstelle Kommunikation und Presse (KOM) der Johannes Gutenberg-Universität Mainz.

Meine Website ist fertig und kann online gehen

(Neu seit Februar 2017)
Solange Ihr Blog noch unfertig ist, haben wir es geschützt, so daß nur Schreibberechtigte die Seite sehen können (wer das ist, sehen Sie in der Rechteliste).
Sobald Ihr Website online gehen soll, melden Sie sich, dann schalten wir dies ab.
Diese Sicherung dient dazu, daß nur vollständige Websites der Uni sichtbar sind, und keine Teile davon, die noch in Arbeit sind.

Sie haben alle Daten beisammen, dann teilen Sie uns alles zu Ihrem neuen WordPress-Projekt mit!

Ich möchte ein neues WordPress-Projekt beantragen!