Index

FAU Einrichtungen

FAU Einrichtungen ist das Theme für Lehrstühle, Einrichtungen und Projekte. Es ist barrierefrei und hält sich an das Corporate Design der FAU. Unsere Anleitungsseiten führen Sie durch alle wichtigen Schritte zur Einrichtung und Gestaltung Ihrer neuen CMS-Instanz mit dem Theme FAU Einrichtungen.

Die folgenden Anleitungsseiten sind auf FAU Einrichtungen-spezifische Themen ausgerichtet. Wenn Sie allgemein mehr über Inhaltserstellung erfahren möchten, besuchen Sie unsere Anleitungsseiten für Inhalte bearbeiten. Sie sind noch nicht mit dem CMS WordPress vertraut? Besuchen Sie die Anleitungsseiten für WordPress Grundlagen.

Übrigens: Unsere WordPress-Anleitung verwendet ebenfalls das FAU Einrichtungen Theme für Lehrstühle und zentrale Einrichtungen.

Sie haben noch keine CMS-Instanz? Auf der Seite Eine CMS-Instanz beantragen erhalten Sie einen kompakten Überblick über Ihre Hosting-Möglichkeiten am RRZE.

Beispiel Portalmenu auf dem Standardtemplate

Mit Hilfe des Shortcodes [[Portalmenu]] ist es möglich, einmal definierte Menüs auch im Inhaltsbereich einer Seite darzustellen.
Dieses Menü muss zuvor von einem Bearbeiter mit Administrationsrechten angelegt worden sein.

Bei den Templates Startseite, Portalseite und Portalindex wird im Editor (unter Seiten-Eigenschaften) eine Option angeboten, bei der man bequem das Menü aus einer Liste auswählen kann; In diesen Fällen braucht man kein Shortcode angeben.

Nutzungshinweise

• Damit bei den Bildern kein Platzhalterbild erscheint, müssen die verlinkten Seiten jeweils ein eigenes Artikelbild (Beitragsbild) haben. Nur wenn ein solches vorhanden ist, wird es angezeigt. Das Platzhalterbild kann vom Administrator im Customizer geändert werden.
• Die Darstellung der Portalmenüs ist auf Desktop-Rechnern nur dann auf optimal, wenn im Inhaltsbereich ausreichend Platz vorhanden ist. Sollte der Inhaltsbereich zu klein sein, weil die Bildschirmauflösung klein oder das Template mit Navigation links verwendet wurde, wird das Menü möglicherweise schon nach dem zweiten Element umbrechen. Das Portalmenü eignet sich daher am Besten bei den Templates Standard, Startseite, Portalseite und Portalindex.

Die folgenden Beispiele zeigen den Einsatz und die Konfigurationsmöglichkeiten des Shortcodes:

Portalmenu Default

Nur mit Angabe eines Menus. Ohne weitere Parameter.

Es konnte kein Menü unter der angegebenen Bezeichnung gefunden werden, oder das Menü enthielt keine Inhalte.

Code

[portalmenu menu="Portal Grundlagen 22"]

Portalmenu Parameter

Die im Shortcode verwendeten Default-Parameter sind:

• showsubs ="true"
• nothumbs="false"
• nofallback="false"

Portalmenu ohne Unterpunkte:

Es konnte kein Menü unter der angegebenen Bezeichnung gefunden werden, oder das Menü enthielt keine Inhalte.

Code

[portalmenu menu="Portal Grundlagen 22" showsubs="false"]

Portalmenu ohne Unterpunkte und ohne Thumbs:

Es konnte kein Menü unter der angegebenen Bezeichnung gefunden werden, oder das Menü enthielt keine Inhalte.

Code

[portalmenu menu="Portal Grundlagen 22" showsubs="false" nothumbs="true"]

Portalmenu mit Unterpunkte und ohne Thumbs:

Es konnte kein Menü unter der angegebenen Bezeichnung gefunden werden, oder das Menü enthielt keine Inhalte.

Code

[portalmenu menu="Portal Grundlagen 22"  nothumbs="true"]

Portalmenu Type 2:

Es konnte kein Menü unter der angegebenen Bezeichnung gefunden werden, oder das Menü enthielt keine Inhalte.

Code

[portalmenu menu="Portal Grundlagen 22"   type="2"]

Portalmenu Type 3:

Es konnte kein Menü unter der angegebenen Bezeichnung gefunden werden, oder das Menü enthielt keine Inhalte.

Code

[portalmenu menu="Portal Grundlagen 22"   type="3"]

Portalmenu Listview:

Es konnte kein Menü unter der angegebenen Bezeichnung gefunden werden, oder das Menü enthielt keine Inhalte.

Code

[portalmenu menu="Portal Grundlagen 22" listview="1"]

Portalmenüs

Unsere FAU-Themes bieten die Funktion für ein klassisches Portalmenü, welches auf Portalseiten, Startseiten und im Content-Bereich zur Verfügung steht. Dieses bietet den Besuchern den schnellen Einstieg zu Ihrem Content.

Portalmenü auf Startseiten, Portalseiten und Portalindexseiten

Um das Portalmenü für eine Startseite oder eine Portalseite bzw. Portalindexseite zu aktivieren gehen Sie wie folgt vor:

1. Navigieren Sie auf die Seite und gehen Sie auf „Seite bearbeiten“.
2. Wählen Sie ein Portalmenü im entsprechenden Menüfeld aus.
   

   

   
   

Portalmenü-Shortcode zum Einsatz im Content-Bereich

Mit Hilfe des Shortcodes [portalmenu] ist es möglich, einmal definierte Menüs auch im Inhaltsbereich einer Seite darzustellen.
Dieses Menü muss zuvor von einem Bearbeiter mit Administrationsrechten angelegt worden sein.

Bei den Templates Startseite, Portalseite und Portalindex wird im Editor (unter Seiten-Eigenschaften) eine Option angeboten, bei der man bequem das Menü aus einer Liste auswählen kann; In diesen Fällen braucht man keinen Shortcode angeben.

Nutzungshinweise

• Damit bei den Bildern kein Platzhalterbild erscheint, müssen die verlinkten Seiten jeweils ein eigenes Artikelbild haben. Nur wenn ein solches vorhanden ist, wird es angezeigt. Das Platzhalterbild kann vom Administrator im Customizer geändert werden.
• Die Darstellung der Portalmenüs ist auf Desktop-Rechnern nur dann auf optimal, wenn im Inhaltsbereich ausreichend Platz vorhanden ist. Sollte der Inhaltsbereich zu klein sein, weil die Bildschirmauflösung klein oder das Template mit Navigation links verwendet wurde, wird das Menü möglicherweise schon nach dem zweiten Element umbrechen. Das Portalmenü eignet sich daher am Besten bei den Templates Standard, Startseite, Portalseite und Portalindex.
  

  Als Beispiel: Diese Seite mit dem Standard Template aufrufen.

  
  

Shortcode Attribute

Mögliche Shortcode-Attribute für den [portalmenu]-Shortcode sind:

• showsubs ="true"
• nothumbs="false"
• nofallback="false"
• type="1"
• listview="1"
• hoverzoom="false"
• hoverblur="false"

Darstellungsbeispiele

Die folgenden Beispiele zeigen den Einsatz und die Konfigurationsmöglichkeiten des Shortcodes:

Weiterführende Inhalte

Portalmenüs in Szene setzen | Tipp der Woche

In diesem Tipp der Woche dreht sich alles um das Portalmenü. Lernen Sie, wie Sie Portalmenüs in Szene setzen.

Verwendete Programme

GIMP „GNU Image Manipulation Program“ oder ein anderes Bildbearbeitungsprogramme zum Zuschneiden von Bildern.

Umsetzung Vorbereitend werden mit dem Bil…Weiterlesen

Einsatz von Social Media an der FAU

Soziale Netzwerke und Werkzeuge zur gemeinsamen Bearbeitung und Verbreitung von Dokumenten und Informationen, haben sich inzwischen auch bei Bildungs- und Forschungseinrichtungen als neues Instrument für Kommunikation und Marketing etabliert. Das vorliegende Dokument vermittelt einen Überblick über…Weiterlesen

Galerie

Die Galerie-Funktion von WordPress erlaubt das Einfügen einer Bildergalerie in Seiten und Beiträgen. Wie die Galerie aussieht, wird vom Theme gesteuert.
Zudem gibt es Optionen, mit denen das Aussehen beeinflusst werden kann. Auf der Anleitungsseite zu Bildern erfahren Sie, wie Sie einzelne Bilder einbinden können.

Inhaltsverzeichnis

1. Galerien im klassischen Editor
   • Galerien im Grid-Format
   • Optionen der Standardgalerie
2. Galerien im Block-Editor
3. Video-Anleitung

Galerien im klassischen Editor

Die Darstellung der Galerie unterscheidet sich im klassischen Editor und im Block-Editor.
Wenn Sie vorerst die alte Darstellung der Galerien bevorzugen, müssen Sie den Galerie-Shortcode verwenden oder den klassischen Block einsetzen.

Code

Standardansicht

Die Standarddarstellung der Galerie erfolgt in Form eines Sliders. Von dieser Darstellung kann mit folgenden Optionen abgewichen werden.

Bildergalerie im Grid-Format

Standard type=“grid“

Code

[gallery type="grid"  ids="18509,18508,18507,18510,18511"]

Der Standardtyp „grid“ ohne Angabe von Columns wird eine Mindestbreite pro Bild festlegen und dann abhängig von der Bildschirmauflösung selbstständig umbrechen.
Außerdem ist nur bei dieser Form ein Hover-Effekt vorhanden, der das jeweilige Bild beim Überfahren mit der Maus etwas vergrößert.

Bei den folgenden Varianten hingegen wird versucht die angegebene Zahl an Bildern pro Zeile darzustellen; Dabei wird jedoch die Größe des Bildes variieren.
Wenn Bilder unterschiedliche Dimensionen haben, wird stets nur eine Reihe von Bildern dieselbe Höhe haben. Die Proportionen werden dabei soweit möglich eingehalten.

Häufiger in Verwendung kommen 3er oder 4er Grids:

Standard type=“grid“ mit Columns-Angabe: columns=“3″

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.

Beispiel

Code

[gallery type="grid"  columns="3" ids="26254,26255,26253,26252"]

Standard type=“grid“ mit Columns-Angabe: columns=“4″

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.
Die Parameter type="grid" columns="4" entsprechend type="4cols".

Beispiel

Code

[gallery type="grid"  columns="4"  ids="18509,18508,18507,18510,18511"]

Weniger nützlich sind die Formate mit 2 oder 5 Bilder pro Zeile:

Standard type=“grid“ mit Columns-Angabe: columns=“5″

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.

Beispiel

Code

[gallery type="grid"  columns="5"   ids="18509,18508,18507,18510,18511"]

Bildunterschrift anzeigen

Mit dem Attribut captions="true" lässt sich die Anzeige der Bildunterschriften aktivieren.
Diese Funktion steht sowohl in der Griddarstellung, als auch in der Sliderdarstellung der Galerie zur Verfügung.
Bei Nutzung der Griddarstellung werden diese unter allen Bildern gezeigt,l bei der Sliderdarstellung nur unter den aktiven Slide.

Beispiel

Code:

[gallery type="grid" captions="true"  ids="18509,18508,18507,18510,18511"]

Abstand der Bilder abschalten

Mit der CSS-Klasse nospace kann der innere Abstand der Bilder entfernt werden. Somit erscheint die Bilderliste direkt zusammenhängend.

Beispiel mit Flexgrid

Code:

[gallery type="grid" class="nospace"  ids="18509,18508,18507,18510,18511"]

Beispiel mit 4cols

Code:

[gallery type="4cols" class="nospace"  ids="18509,18508,18507,18510,18511"]

Optionen der Standardgalerie

Die Standard Bildergalerie kann über die folgenden Parameter beeinflusst werden:

• type="grid"
  Die Darstellungsoptionen mit dem Type Grid erlauben es, die Bilder ohne einem dynamischen SLider darzustellen. Beispiele hierzu entnehmen Sie der dazugehörigen Beispielseite.
• order="rand"
  Dies erlaubt es, die Bilder in Zufallsreihenfolge darzustellen. Diese Option kann über den Galerie-Wizard von WordPress eingestellt werden.
• nodots="true"
  Mit dem Parameter "nodots" lassen sich in der Standarddarstellung die Punkte, welche die einzelnen Bilder der Liste repräsentieren, abschalten.
• columns="n"
  Hier kann eine Zahl von 2 bis 5 eingetragen werden. Auf einer Desktop-Darstellung größer als 992 Pixel werden die Grafiken dann entsprechend der Zahl nebeneinander dargestellt. Diese Option kann über den Galerie-Wizard von WordPress eingestellt werden.

Beispiel der Option nodots="true"

Code

[gallery nodots="true" ids="18509,18508,18507,18510,18511"]

Weitere Variationen der Standardgalerie

Beispiele für die Nutzung der Galerie mit den drei verschiedenen Linkzielen (post, file, none) aus dem Wizard:

Beispiel ohne Link (Default)

Code:

[gallery type="grid" ids="18509,18508,18507,18510,18511"]

Beispiel link=“file“

Code:

[gallery type="grid" link="file" ids="18509,18508,18507,18510,18511"]

Beispiel link=“post“

Code:

[gallery type="grid" link="post" ids="18509,18508,18507,18510,18511"]

Beispiel link=“none“

Code:

[gallery type="grid" link="none" ids="18509,18508,18507,18510,18511"]

Galerien im Block-Editor

Standardansicht

Die Standarddarstellung der Galerie erfolgt in Form eines Grid-Formats. Es werden keine Bilduntertitel oder Bildbeschreibungen angezeigt. In diesem Falle empfehlen wir, Bilder einzeln untereinander einzubinden.

Über die Block-Einstellungen haben Sie folgende Konfigurationsmöglichkeiten:

• Anzahl der Spalten festlegen
• Auflösung der Bilder
• Zufällige Reihenfolge
• Passendes Zuschneiden der Bilder

Video-Anleitung

In diesem Tipp-der-Woche Video erfahren Sie, wie Sie Grid-Galerien im klassischen Editor erstellen können.

Formeln, Daten und Quellcode

Zur Darstellung von Formeln, Daten und Quellcode, die über eine eigene Textformatierung verfügen, sind die HTML-Elemente <pre> und <code>  nutzbar.

Die folgenden Beispiele zeigen deren Einsatz.

Code-Tag

Der folgende Text ist im Code-Tag: Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten:
. Aber ob das sinnvoll ist, ist eine andere Frage..

Code

<code>Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten: <br>. Aber ob das sinnvoll ist, ist eine andere Frage.</code>

Pre-Tag

Der folgende Text ist im Code-Tag:

Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten: 
. Aber ob das sinnvoll ist, ist eine andere Frage.

Code

<pre>Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten: <br>. Aber ob das sinnvoll ist, ist eine andere Frage.</pre>

Code in Pre

Beispiel:

Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten: 
. Aber ob das sinnvoll ist, ist eine andere Frage.

Code

<pre>Dies ist im Code-Tag. Das kann durchaus auch länger sein. <code>Und vielleicht ein Break enthalten: <br></code>. Aber ob das sinnvoll ist, ist eine andere Frage.</pre>

Zitate

Zitate werden verwendet, um Fremdaussagen optisch und semantisch korrekt darzustellen. Sie können den Zitat-Block verwenden, um:

• ein wörtliches Zitat wiederzugeben (z.B. aus Interviews oder Artikeln)
• eine zentrale Aussage hervorzuheben
• Testimonial-Texte (z.B. Stimmen von Studierenden) darzustellen

Zitat-Block

Das Zitat „Ich bin Pirat und mir geht’s gut. Am Tag packt mich die Stehlenswut.“ kommt aus dem Holzfäller-Lied (Original Lumberjack Song) von Monthy Python.
Hier heißt es „Ich bin Holzfäller und mir geht’s gut. Am Tag packt mich die Arbeitswut.“Wikipedia

Testimonial-Block

Im neuen Theme FAU Elemental empfehlen wir, statt des regulären Zitat-Blocks den neuen Block FAU Testimonial zu verwenden. Der Testimonial-Block kann auch mit einem Bild versehen werden. Sie haben zudem die Möglichkeit, mehrere Zitate hinzuzufügen um den Block als Zitat-Slider zu verwenden.

Zitat im Code-Editor

Zitate können im Code-Editor über <blockquote></blockquote> eingebunden werden. Die folgenden Beispiele sind möglicherweise veraltet und funktionieren nur noch im Klassik-Editor oder im Block-Editor über die Code-Ansicht, welche bei Aktivierung des Block-Editors jedoch standardmäßig nicht mehr verfügbar ist. In Ausnahmefällen kann der Code-Editor über den Websupport aktiviert werden.

<blockquote lang="cn">
孤山寺北贾亭西
水面初平云脚低
..
</blockquote>

Inhalte bearbeiten

Als Redakteur oder Redakteurin kümmern Sie sich um die Inhalte eines Webauftritts. Informationen zu weiteren Rollen erhalten Sie auf den Anleitungsseiten für Benutzerrollen. Starten Sie bei WordPress Grundlagen, wenn Sie das erste Mal mit diesem CMS arbeiten.

Berechtigungen für Redakteure

• Seiten und Beiträge anlegen, veröffentlichen, editieren und löschen
• Seiten und Beiträge anderer Nutzer freigeben, editieren und löschen
• In der Mediathek Bilder hochladen oder löschen
• Kategorien und Schlagwörter erstellen und verwalten

 

Tabellen

Verwenden Sie Tabellen ausschließlich zur tabellarischen Darstellung von Daten. Aus Sicht der Usability und User Experience eignen sich Tabellen nicht zur Gestaltung von Seiteninhalten.

Beispiel: Normale Tabelle ohne Styling

Beispiel: Normale Tabelle im FAU Elemental Design

Tabellenanpassungen im Code-Editor

Die folgenden Tabellenanpassungen über CSS-Klassen sind möglicherweise veraltet und funktionieren nur noch im Klassik-Editor oder im Block-Editor über die Code-Ansicht, welche bei Aktivierung des Block-Editors jedoch standardmäßig nicht mehr verfügbar ist. In Ausnahmefällen kann der Code-Editor über den Websupport aktiviert werden.

Listendarstellung (ohne Slider)

Mit Angabe des Attributs type="list" lässt sich die Darstellung auf eine feste Anzeige aller Grafiken festlegen. Hier kommt es nicht zum „sliden“ der Bilder; Stattdessen sind stets alle Bilder zu sehen.

Default Size thumbnail (150×150)

Code

[imagelink type="list"]

Size logo-thumb (140:110)

Code

[imagelink type="list" size="logo-thumb"]

Size page-thumb (220:110)

Code

[imagelink type="list" autoplay="0" size="page-thumb"]

Size post-thumbnails (300:150)

Code

[imagelink type="list" autoplay="0" size="post-thumbnails"]

Darstellungsoptionen

Bei Nutzung des Shortcodes [imagelink] stehen folgende Parameter zur Verfügung, welche die Ausgabeoptik und die Auswahl der Bildlinks beeinflussen.

Allgemeine Parameter

• cat="Bildlinkkategorie"
  Mit diesem Parameter lässt sich die Auswahl der Bilder auf eine Kategorie beschränken. Hierbei wird der Name der Kategorie angegeben, zu der die Bildlinks hinzugefügt wurden.
• catid=nn
  Mit diesem Parameter lässt sich die Auswahl der Bilder auf eine Kategorie beschränken. Hierbei ist hier die numerische Id der Kategorie anzugeben. (Diese lässt sich nur im Backend bei der Anzeige der Bildlink-Kategorien anzeigen.)
• dots=true|false
  Hiermit kann bei Sliderdarstellung die Ausgabe der „Dots“ unterbunden werden.
• autoplay=true|false
  Mit der „autoplay“-Angabe kann man das automatische Abspielen der Slides in der Sliderdarstellung ausschalten.
• title="Text"
  Für die (interne, optisch unsichtbare) Darstellung einer Hierarchie der Bildlinks, kann hier ein Titel angegeben werden. Dieser wird von Screenreadern und Suchmaschinen verwendet.
• order="asc|desc|rand"
  Mit Angabe des „order“-Parameters kann festgelegt werden, in welcher Reihenfolge die Bildlinks dargestellt werden. Bei einer Zufallssortierung mittels order="rand" wird sich die Reihenfolge der Bilder bei dem nächsten Laden der Seite ändern.

Optische Anpassungen

Mit Hilfe des Attributs class kann die Ausgabe der Bildlinks optisch angepasst werden:

Border

Beispiel mit einem Border.

Code

[imagelink autoplay="false"  class="border"]

Rounded

Beispiel mit einer Rundung um den Bildern.

Code

[imagelink autoplay="0"  class="rounded"]

Shadow

Beispiel mit einem Schattenwurf.

Code

[imagelink autoplay=false  class="shadow"]

Background Colors

Beispiel mit den Standardklassen für Hintergründe.
Zur Verfügung stehen die Klassen:
bgcol-phil, bgcol-nat, bgcol-rw, bgcol-tf, bgcol-med, bgcol-fau, bgcol-hellgrau

Code

[imagelink autoplay=false  class="bgcol-phil"]

Background Rounded und Hintergrundfarbe

Beispiel mit den Standardklassen für Hintergründe.

Code

[imagelink autoplay=false  class="rounded bgcol-grau"]