• Navigation überspringen
  • Zur Navigation
  • Zum Seitenende
Organisationsmenü öffnen Organisationsmenü schließen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
  • FAUZur zentralen FAU Website
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Suche öffnen
  • RRZE
  • Videoportal
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
Menu Menu schließen
  • Grundlagen
    • Allgemeines
      • Grundsätzliches zum Webpublishing
      • Rahmenbedingungen für Webauftritte
      • Eine CMS-Instanz beantragen
      • Konzeption einer Website
      • Häufig gestellte Fragen
    • WordPress Grundlagen
      • Über WordPress
      • Login und Navigation im Backend
      • Benutzer anlegen und bearbeiten
      • Seiten
      • Beiträge
      • Menüs
    • Inhalte bearbeiten
      • Inhalte erstellen
        • Beiträge erstellen
      • Mediathek
      • Bilder
      • Galerie
      • PDFs
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • SEO – Search engine optimization
      • Suchmaschinenoptimierung in 5 Minuten
      • SEO Inhalte gestalten
      • SEO Grundlagen
      • SEO und Barrierefreiheit
    • Tutorials
      • Tipps und Tricks
      • Publikationsliste erstellen
      • Neue Daten in die FAU-Karte einbinden
      • Vortragsliste erstellen
      • Pflege MeinStudium-Portal
    Portal Grundlagen
  • Block-Editor
    • Was ist der Block-Editor?
    • Hauptelemente des Editors
      • Die obere Editorleiste
      • Das Inserter Fenster
      • Der Inhaltsbereich
      • Das Einstellungsfenster
    • Der Block
      • Block-Typen
      • Die Block-Werkzeugleiste
      • Einen Block hinzufügen
      • Die Listenansicht
    • Block-Funktionen
      • Text und Bild verlinken
      • Blöcke gruppieren
      • Anker-Links (Sprungmarken)
      • Block-Vorlagen erstellen
      • Bild in Tabellenblock einfügen
      • Spalten einfügen
    • Umstellung auf den Block-Editor
    • FAQ Block-Editor
    Portal Der Block-Editor
  • Plugins
    • Plugins aktivieren
    • Portale
      • Mein Studium
      • Jobs
      • Lehrveranstaltungen (Lectures)
      • CRIS
    • Inhaltliche Erweiterung
      • RRZE FAUdir (Personen)
      • RRZE Bluesky
      • Elements Blocks
      • Elements (Gestaltung)
      • Multilang (mehrsprachige Seiten)
      • FAQ
      • Video
      • FAU oEmbed
      • Typesettings (Code Highlighter)
      • Glossary
      • Person (Kontakte)
      • Advanced Editor Tools
    • Funktionale Erweiterung
      • Downloads
      • Post-Expiration (Verfallsdatum Beiträge)
      • Calendar
      • Expo
      • RSVP (Buchungssystem)
      • WS Form (Formulare erstellen)
      • Contact Form 7
      • RRZE Events
    • SEO & Marketing
      • Autoshare
      • RSS Feed
      • RRZE Newsletter
      • The SEO Framework
      • QR-Code Generator
      • Statistik
      • Siteimprove
    • Benutzer- und Zugriffsverwaltung
      • Workflow (Rollen & Module verwalten)
      • Access Control
      • Private Site
    • Sicherheit & Datenschutz
      • Legal (Rechtl. Pflichttexte)
    • Spezialplugins
      • Remoter
      • Progressive Web-App (PWA)
      • Synonym
    Portal Plugins
  • Themes
    • Was ist ein Theme?
    • Ein Theme auswählen
    • FAU Events
      • Startseite
      • Widget-Bereiche und Footer-Inhalt
      • Referenten und Vorträge
      • Shortcodes für Referenten und Vorträge
      • Call for Papers
      • Externe Anmeldeformulare einbinden
    • FAU Einrichtungen
      • Eine Startseite erstellen
      • Seitenlogo und Seiteninformationen ergänzen
      • Rechtstexte generieren
      • Templates
      • Widgetbereiche und Widgets
      • Dynamische Sidebar
      • Portalseiten und -menüs
      • Seitennavigation
      • Slider und Blogroll
      • Bildlinks (Logos einbinden)
      • Abmessungen für Bilder und Grafiken
      • Shortcodes
    • Francesca – Ein Theme für Kooperationen
    Portal Themes
  • Barrierefreiheit
    • Vorwort und Überblick
    • Einführung und Hintergründe
    • Bereitstellung und Pflege von Inhalten
    • Entwicklung und Design
    • Organisatorische und rechtliche Anforderungen
    • Satzungen
    • Tests der Barrierefreiheit
    • Weitere Leitfäden und relevante Informationsangebote
    • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
    Portal Barrierefreiheit
  • Entwicklung
    • Vorgaben für das Design
      • Farben (Markendesign 2021)
      • Logos
      • Schriften
    • Einsatzkontext (Statistik)
      • Einrichtungsbezeichnungen
    • Versionsverwaltung Git
    • Einheitliche Vergabe von Versionsnummern
    • Vorgaben an Themes
    • Vorgaben an Plugins
    • Eigene Testinstanz
    • Serverkonfiguration
    • Statistiken zu Webauftritten
    Portal Entwicklung
  1. Startseite
  2. Plugins
  3. Inhaltliche Erweiterung
  4. Elements
  5. Assistant

Assistant

Bereichsnavigation: Plugins
  • Plugins aktivieren
  • Portale
  • Inhaltliche Erweiterung
    • RRZE FAUdir (Personen)
    • RRZE Bluesky
    • Elements Blocks
    • Elements
      • Accordion
      • Alerts / Hinweisboxen
      • Assistant
      • Buttons
      • Call To Action (CTA)
      • Content-Index
      • Content-Slider / Text-Slider
      • Divider - Der unsichtbare Trenner
      • Einschub
      • Filterfunktion für Tabellen
      • Galerie
      • Hidden Text
      • Icon-Listen
      • Icons
      • LaTeX
      • Legal-text
      • Limit width
      • Mehrspaltige Fließtexte
      • Mehrspaltiger Inhalt
      • News - Beiträge ausgeben
      • Notices / Absatzklassen
      • Tabs - Registerkarten
      • Timeline
    • Multilang
    • FAQ
    • Video
    • FAU oEmbed
    • RRZE Typesettings
    • Glossary
    • Person
    • Advanced Editor Tools
  • Funktionale Erweiterung
  • SEO & Marketing
  • Benutzer- und Zugriffsverwaltung
  • Sicherheit & Datenschutz
  • Spezialplugins

Assistant

Beratung und Support

Webteam

Webteam

  • E-Mail: webmaster@fau.de
Beschreibung: Für alle Fragen rund um WordPress, Webhosting & Co.

GitHub

  • Repository
  • Fehler melden
Elements ist auf allen CMS-Instanzen vorinstalliert und bereits aktiviert. Sie können alle Elements-Shortcodes ohne vorangegangene Aktivierung benutzen.

Mit dem Shortcode Assistant können Sie Inhalte von mehreren Unterseiten gesammelt in einem Accordion ausgegeben.
Dabei wird ein Accordion mit Tabs aufgebaut, dessen Inhalte und Tabs sich aus den hierarchisch einer Seite untergeordneten Seiten ergibt.

Sprich: Wenn eine Seite über die Hierarchie (Seiten Attribute: Eltern) als Child angegeben ist und als Id die darüber verwendete Seite angegeben wird, werden die Seiteninhalte als Accordioneintrag angezeigt.
Ob diese Seiten in einer Navigation auftauchen oder nicht, spielt dabei keine Rolle.

Beispiel

Hier wurde der Shortcode Assistant von unserer Anleitungsseite „Inhalte bearbeiten“ generiert.
Unterseiten werden dabei als Akkordeonfächer angelegt. Die Unterseiten von Unterseiten als Tabs innerhalb der Fächer.

Es gibt verschiedene Möglichkeiten, Dokumente in Form von PDFs hochzuladen und mit Ihren Besuchern zu teilen.

Inhaltsverzeichnis

  1. PDFs in die Mediathek hochladen
  2. PDFs auf einer Inhaltsseite einbinden
  3. PDFs auf einer Seite einbette
  4. Die URL einer PDF finden

PDFs in die Mediathek hochladen

Gehen Sie wie folgt vor, um PDFs in die Mediathek hochzuladen.

Achten Sie darauf, dass der Dateiname von PDF-Dateien idealerweise keine Sonderzeichen enthält. Manchmal können auch Umlaute dafür sorgen, dass die Mediathek eine PDF-Datei nicht einbinden kann. In diesen Fällen einfach den Dateinamen ändern und erneut in die Mediathek hochladen.

Gehen Sie wie folgt vor, um Dokumente über die Mediathek hochzuladen.

  1. Navigieren Sie im Wordpress Backend zu Medien. Klicken Sie, um zur Mediathek zu gelangen
  2. Klicken Sie entweder in der linken Seitenleiste, oder oberhalb der Mediathek auf den Button "Mediendatei hinzufügen".
  3. Im gestrichelten Bereich "Dateien für den Upload bereitstellen" können Sie Dateien entweder per Drag & Drop von Ihrem Computer hineinziehen, oder drücken den Button "Dateien auswählen".

PDFs auf einer Inhaltsseite einbinden

PDF inline im klassischen Editor einfügen

  1. Navigieren Sie auf die Inhaltsseite, auf welcher die PDF eingebunden werden soll.
  2. Klicken Sie auf Dateien hinzufügen über der Editor-Werkzeugleiste.
  3. Die Mediathek öffnet sich. Falls Sie im Reiter "Dateien hochladen" sind, wechseln Sie in den Reiter Mediathek.
  4. Wählen Sie das Dokument aus, das eingebunden werden soll.
  5. Klicken Sie in die Seite einfügen am unteren rechten Rand der Mediathek.
  6. Das Dokument wurde korrekt verlinkt.

Passen Sie gegebenenfalls den Linktext an, damit der Linktext "sprechend" ist.
Negativbeispiel: "Hier", "PDF", "Dokument"
Besser: In unserem Ratgeber zur Bildeinbindung (pdf) können Sie mehr erfahren.

PDF inline im Block-Editor einfügen

  1. Navigieren Sie auf die Inhaltsseite, auf welcher die PDF eingebunden werden soll.
  2. Markieren Sie den Text, der zu der PDF verlinken soll und klicken Sie auf das Link-Symbol in der Block-Werkzeugleiste.
  3. Ein Pop-Up mit Suchzeile öffnet sich. Geben Sie dort den Dokumentenname oder die URL der PDF ein.
  4. Wählen Sie das Dokument aus, das eingebunden werden soll.
  5. Das Dokument wurde korrekt verlinkt.

PDFs auf einer Seite einbetten

Im Block-Editor können Sie den Block "Datei" verwenden, um eine PDF-Datei direkt auf einer Seite einzubetten.

  1. Navigieren Sie auf der Seite an die Stelle, an der Sie die PDF-Datei einbinden möchten.
  2. Wählen Sie über das Plus-Icon (Block-Inserter) den Block "Datei", oder geben Sie an einer freien Stelle /datei ein.
  3. Navigieren Sie zu Mediathek oder drücken Sie "Hochladen", um eine PDF hinzuzufügen.
  4. Die PDF ist nun eingebunden und kann direkt auf der Seite eingesehen werden.
  5. Sie können die Einbettung über die Block-Einstellungen in der rechten Sidebar deaktivieren, oder auch einen Download-Button anzeigen lassen.

CheatSheet RRZE Elements

Die URL einer PDF finden

So gehen Sie vor, wenn Sie die URL einer bereits in der Mediathek hochgeladenen PDF benötigen:

  1. Navigieren Sie zur Mediathek.
  2. Geben Sie in der Suchleiste den Dateinamen ein. Sie können zuvor im Dropdown "Alle Medien" nach Dokumenten sortieren, um die Auswahl einzuschränken.
  3. Öffnen Sie die gewünschte PDF-Datei.
  4. Im Overlay rechts sehen Sie das Feld Datei-URL. Mit dem darunter liegenden Button können Sie die URL direkt in die Zwischenablage kopieren.

Auf der Anleitungsseite zu Bildern finden Sie detaillierte Informationen zur Einbindung von Bildern, Galerien, Dokumenten und Videos.

Bilder und Dokumente in die Mediathek laden

Bilder in den Formaten .jpg und .jpeg werden automatisch beim Upload für das Netz optimiert und verkleinert. Bilder im .png-Format behalten Ihre vollständige Dateigröße bei.

Gehen Sie wie folgt vor, um Bilder oder Dokumente über die Mediathek hochzuladen.

  1. Navigieren Sie im Wordpress Backend zu Medien. Klicken Sie, um zur Mediathek zu gelangen
  2. Klicken Sie entweder in der linken Seitenleiste, oder oberhalb der Mediathek auf den Button "Mediendatei hinzufügen".
  3. Im gestrichelten Bereich "Dateien für den Upload bereitstellen" können Sie Dateien entweder per Drag & Drop von Ihrem Computer hineinziehen, oder drücken den Button "Dateien auswählen".


Gehen Sie wie folgt vor, um Bilder oder Dokumente von einer Inhaltsseite aus hochzuladen.

  1. Navigieren Sie auf die Inhaltsseite, auf welcher die Bilder eingebunden werden sollen.
  2. Öffnen Sie auf Ihrem Computer den Ordner mit den gewünschten Bildern, die hochgeladen werden sollen.
  3. Klicken Sie im Inhaltsbereich des Editors auf die Position, an welcher das Bild eingefügt werden soll.
  4. Ziehen Sie die Bilder in das WordPress Editorfenster und lassen Sie die Maustaste los, wenn der Text "Dateien für den Upload bereitstellen" im Editorfenster erscheint.
    • Im Block-Editor (Gutenberg Editor) ziehen Sie die Bilder einfach an die gewünschte Stelle, bis ein blauer Balken erscheint. Lassen Sie los, um die Bilder einzufügen.

  5. Die Mediathek öffnet sich mit den neuen Dateien als Auswahl.
  6. Falls es sich um kein dekoratives Bild handelt: Vergeben Sie einen Alternativtext in der rechten Spalte. Im Tipp der Woche erfahren Sie mehr über die Vergabe von Alternativtexten.
  7. Die Bilder sind ab sofort hochgeladen.

Filtermöglichkeiten in der Mediathek

Darstellungsoptionen

  • Wechseln Sie mit den Icons im Filterbereich zwischen der Listen- und Kachelansicht
  • In der Listenansicht haben Sie die Möglichkeit, Uploads u.a. nach Autor, Dateiname, Größe oder Datum zu sortieren. Klicken Sie dazu einfach auf die Pfeile im Headerbereich der Liste.

Filteroptionen

  • Im Dropdown "Alle Medien" können Sie u.a. nach Bildern, Dokumenten, Videos und Archiven filtern
  • Im Dropdown "Alle Daten" können Sie die Bildauswahl auf einen bestimmten Monat bzw. Jahr beschränken
  • Im Dropdown "Alle Kategorien" sehen Sie eine Auflistung Ihrer vergebenen Kategorien, nach denen Sie sortieren können
  • Im Dropdown "Alle Schlagwörter" sehen Sie eine Auflistung Ihrer vergebenen Schlagwörter, nach denen Sie sortieren können

  • Abmessungen für Bilder und Grafiken
  • Ein Beitragsbild anpassen
  • Zusatzklassen für Bilder
  • Hover Effekte von Bildern
Bilder und Grafiken kommen in verschiedenen Größen und Formen daher. Damit Sie immer den richtigen Bildausschnitt treffen finden Sie im Folgenden eine Auflistung aller gängigen Bildformate.
Beitragsbilder
Beitragsbilder erscheinen in der Blogroll und im Custom News-Shortcode des Element-Plugins. Auch auf Such- und Archivseiten und beim teilen von Artikeln werden die Beitragsbilder mit ausgegeben.
Empfohlene Abmessungen:
  • Seitenverhältnis 3:2 | Querformat
  • Bildgröße: < 1920 × 1280 px
  • Dateigröße: < 350 kb
  • Bildformat: .png | .jpeg | .jpg | .svg
Bühnenbilder
Bühnenbilder erscheinen im Slider des Templates "Startseite Fakultät"
  • Seitenverhältnis 3,6:1 | Querformat
  • Bildgröße: > 1260 × 350 px
  • Dateigröße: < 350 kb
  • Bildformat: .png | .jpeg | .jpg | .svg
Bannerbild
Das Bannerbild erscheint auf dem Template "Startseite" im Header der Seite
  • Seitenverhältnis 125:18 | Querformat
  • Empfohlene Bildgröße: 1024 x 182 pixel px
  • Dateigröße: < 350 kb
  • Bildformat: .png | .jpeg | .jpg | .svg

Das Beitragsbild ist das Vorschaubild für Ihren Beitrag. Es wird im Format 3:2 ausgegeben. Hat Ihr Bild ein anderes Format, möchten es jedoch komplett anzeigen lassen, können Sie das Miniaturbild in WordPress nachbearbeiten.

Sie laden Ihr Bild ganz normal hoch, wie im Abschnitt über die Mediathek beschrieben. Danach wählen Sie das Bild in der Mediathek aus:

Beitragsbild auswählen
Das Beitragsbild auswählen

Wenn Sie es anklicken, öffnet sich das Fenster mit den Details zum Bild:

details zum Bild
Details zum Bild

Hier klicken Sie auf "Bearbeiten", woraufhin der Bearbeitungsmodus aktiviert wird. Hier stellen Sie zunächst sicher, dass das Miniaturbild zur Bearbeitung ausgewählt ist.

darauf achten, dass "Miniaturbild" ausgewählt ist
Achten Sie darauf, "Miniaturbild" auszuwählen!

Nun wählen Sie durch Ziehen den Bereich aus, den Sie als Miniaturbild angezeigt haben möchten (der Mauszeiger verändert sich dabei nicht). Sie können den ausgewählten Bereich mit der Maus verschieben und an den Quadraten in der Linie verändern. Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie auf das Symbol für das Freistellungswerkzeug.

auswählen und freistellen
Auswählen und dann auf das Freistellungswerkzeug klicken

Danach ist die Schaltfläche "Speichern" aktiv und Sie können sie anklicken.

"Speichern" anklicken
"Speichern" anklicken

Damit ist das Miniaturbild zu Ihrem Beitrag Ihren Wünschen entsprechend geändert und als "Vorgucker" zu Ihrem Beitrag wird der Bildausschnitt angezeigt, den Sie ausgewählt haben.

Mit Hilfe von optionalen Klassen kann man die Darstellung von Bildern beeinflussen. Hierzu wird in der Regel das Attribut class um eine Anweisung ergänzt (Andere vorhandene Attribute, die durch WordPress eingestellt wurden, werden dabei intakt gelassen).

Bild mit "circle"

Runde Bilder sollten vor dem Upload in das Seitenverhältnis 1:1 gebracht werden.

Standardausgabe

class="circle"

Ein gelber Singvogel sitzt auf einem Ast.
Die Beschriftung des Bilds.

Hierzu wird dem <img>-Tag die Klasse circle zugewiesen:

class="circle"

Wenn die Bildbeschriftung mittig ausgegeben werden soll, wird dem caption-Shortcode die Klasse

class="aligncenter"

zugewiesen. Dadurch wird allerdings auch das Bild zentriert. Falls Text neben diesem Bild ausgegeben werden soll, muss auf den Shortcode für mehrspaltigen Inhalt zurückgegriffen werden.

Bild mit Klasse "thickborder"

Standardausgabe

class="thickborder"

Hierzu wird in dem <img>-Tag folgende Klasse ergänzt:

class="thickborder"

Bild mit Klasse "shadow"

Standardausgabe

class="shadow"

Hierzu wird in dem <img>-Tag folgende Klasse ergänzt:

class="shadow"

 

Bild mit Klasse "noshadow"

Standardausgabe

class="noshadow"

Hierzu wird in dem <img>-Tag folgende Klasse ergänzt:

class="noshadow"

Bild mit Klasse "borderless"

Standardausgabe

class="borderless"

Hierzu wird in dem <img>-Tag folgende Klasse ergänzt:

class="borderless"

Bild mit a class="lightbox"

Standardausgabe

class="lightbox"

Hierzu wird in dem <a>-Tag folgende Klasse ergänzt:

class="lightbox"

Bild mit a class="sizinglink"

Standardausgabe

class="sizinglink"

Hierzu wird in dem <a>-Tag folgende Klasse ergänzt:

class="sizinglink"

 

Ein Hover-Effekt wird immer dann automatisch gesetzt, wenn das Bild einen anklickbaren Link repräsentiert.

Die Verlinkung einer Mediendatei auswählen

Um zwischen den unterschiedlichen Verlinkungen zu wählen, können Sie wie folgt bei der Einbindung vorgehen:

  1. Wählen Sie Dateien hinzufügen im Editorfenster.
  2. Wählen Sie das gewünschte Bild aus.
  3. Unter Anzeige-Einstellungen für Anhänge | Link zur wählen Sie die gewünschte Linkart aus

Alternativ können Sie die Verlinkung auch durch HTML im Textmodus des Editors vornehmen.

Bild mit Link zur Mediendatei

Diese Art der Verlinkung ist ideal für alle Inhaltsbilder.

Sie öffnet das entsprechende Bild in einer Lightbox.

Der Nutzer kann das vergrößerte Bild ohne die Seite zu verlassen wieder schließen.

Bild mit Link zur Anhangseite

Bei dieser Variante wird auf die Anhangseite verlinkt. Wodurch die Bilddatei geöffnet wird und der Nutzer die Inhaltsseite verlässt.

Bild ohne Link

Wenn das Bild nicht verlinkt ist, ist auch kein Hover-Effekt sichtbar.

Bild mit individuellem Link

Tabellen können für tabellarische Daten verwendet werden.

Keine Layout-Tabellen

Zu beachten ist dabei, dass Tabellen keinesfalls dazu verwendet werden sollten, Inhalte zu gestalten. Die Positionierung von Inhalten mit Hilfe von Tabellen ist in Hinblick auf die zunehmende Nutzung von Handys nicht sinnvoll, da dort die Darstellung auf kleine Auflösungen beschränkt ist und somit auch Inhalte nicht so erscheinen, wie auf einem großen Monitor.

Das Theme stellt zur Anpassung der Optik von Tabelle einige CSS-Klassen bereit. Diese erlauben es, die wechselnden Farben abzuschalten und die Tabelle automatisch sortierbar zu machen.

 

Beispiel: Normale Tabelle ohne Styling

Title 1 Title 2 mit Link
Inhalt Zeilenüberschrift Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.
Inhalt Zeilenüberschrift Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.
Inhalt Zeilenüberschrift Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.
Inhalt Zeilenüberschrift Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.


Beispiel: Tabelle mit class="nooddcolor"

Mit der class="nooddcolor" wird die wechselnde Farbe zwischen den Zeilen unterdrückt.

Title 1 Title 2
Content 1 Zeilenüberschrift Content 2
Content 3 Zeilenüberschrift Content 4
Content 5 Zeilenüberschrift Content 6


Beispiel: Tabelle mit class="nobackground"

Mit der class="nobackground" wird bewirkt, dass die Tabelle keine Hintergrundfarbe hat.

Title 1 Title 2
Content 1 Zeilenüberschrift Content 2
Content 3 Zeilenüberschrift Content 4
Content 5 Zeilenüberschrift Content 6


Beispiel: Tabelle mit class="sorttable"

Mit der class="sorttable" wird eine Sortier-Möglichkeit aktiviert:

Keywords Impressions Clicks CTR Rank
silly tshirts 6,000 110 1.8% 22.2
desktop workspace photos 2,200 500 22% 8.9
arrested development quotes 13,500 900 6.7% 12.0
popular web series 8,700 350 4% 7.0
2013 webapps 9,900 460 4.6% 11.5
ring bananaphone 10,500 748 7.1% 17.3

 

Beispiel: Tabelle mit class="filtertable"

Mit der class="filtertable" wird eine Filter-Möglichkeit aktiviert:

Keywords Impressions Clicks CTR Rank
silly tshirts 6,000 110 1.8% 22.2
desktop workspace photos 2,200 500 22% 8.9
arrested development quotes 13,500 900 6.7% 12.0
popular web series 8,700 350 4% 7.0
2013 webapps 9,900 460 4.6% 11.5
ring bananaphone 10,500 748 7.1% 17.3

 

  • Bildergalerie im Gridformat
  • Optionen der Standardgalerie
Die Standarddarstellung der Galerie erfolgt in Form eines Sliders. Von dieser Darstellung kann mit folgenden Optionen abgewichen werden.

Standard type="grid"

Beispiel

beispiel-3
beispiel-4
beispiel-2
beispiel-1

Code

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

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

beispiel-3
beispiel-4
beispiel-2
beispiel-1

Code

beispiel-3
beispiel-4
beispiel-2
beispiel-1

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

beispiel-3
beispiel-4
beispiel-2
beispiel-1

Code

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

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

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

Code

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

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

beispiel-3
beispiel-4
beispiel-2
beispiel-1

Code:

03_ppt_img_ganze_Seite_720x541px
Symbolbild Hardware RRZE
02_ppt_img_ganze_Seite_720x541px
Symbolbild Hardware RRZE
01_ppt_img_ganze_Seite_720x541px
Symbolbild Hardware RRZE
05_ppt_img_ganze_Seite_720x541px
Symbolbild Hardware RRZE
06_ppt_img_ganze_Seite_720x541px
Symbolbild Hardware RRZE

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

beispiel-3
beispiel-4
beispiel-2
beispiel-1

Code:

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

Beispiel mit 4cols

beispiel-3
beispiel-4
beispiel-2
beispiel-1

Code:

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px
Die Standard Bildergalerie kann derzeit nur über die Parameter
  • 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.

beeinflusst werden.

Beispiel der Option nodots="true"

Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE

Code

Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE
Symbolbild Hardware RRZE

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)

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

Code:

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

Beispiel link="file"

Bild 03_ppt_img_ganze_Seite_720x541px öffnen
Bild 02_ppt_img_ganze_Seite_720x541px öffnen
Bild 01_ppt_img_ganze_Seite_720x541px öffnen
Bild 05_ppt_img_ganze_Seite_720x541px öffnen
Bild 06_ppt_img_ganze_Seite_720x541px öffnen

Code:

Bild 03_ppt_img_ganze_Seite_720x541px öffnen
Bild 02_ppt_img_ganze_Seite_720x541px öffnen
Bild 01_ppt_img_ganze_Seite_720x541px öffnen
Bild 05_ppt_img_ganze_Seite_720x541px öffnen
Bild 06_ppt_img_ganze_Seite_720x541px öffnen

Beispiel link="post"

Bild 03_ppt_img_ganze_Seite_720x541px öffnen
Bild 02_ppt_img_ganze_Seite_720x541px öffnen
Bild 01_ppt_img_ganze_Seite_720x541px öffnen
Bild 05_ppt_img_ganze_Seite_720x541px öffnen
Bild 06_ppt_img_ganze_Seite_720x541px öffnen

Code:

Bild 03_ppt_img_ganze_Seite_720x541px öffnen
Bild 02_ppt_img_ganze_Seite_720x541px öffnen
Bild 01_ppt_img_ganze_Seite_720x541px öffnen
Bild 05_ppt_img_ganze_Seite_720x541px öffnen
Bild 06_ppt_img_ganze_Seite_720x541px öffnen

Beispiel link="none"

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

Code:

03_ppt_img_ganze_Seite_720x541px
02_ppt_img_ganze_Seite_720x541px
01_ppt_img_ganze_Seite_720x541px
05_ppt_img_ganze_Seite_720x541px
06_ppt_img_ganze_Seite_720x541px

Zitate in Form eines längeren hervorgehobenen Absatzes oder auch kurze Denksätze können im Editor mit dem Zitatzeichen oder direkt im HTML mit den Tag <blockquote> gekennzeichnet werden.

 

Beispiel

Dies ist ein Blockquote.
Ein längerer als Zitat gekennzeichneter Absatz mit Zitatangabe.
...
Zitationsangabe mit <cite>. Mit einem Link.

Dazugehöriger HTML-Code (über den Editor erzeugt)

<blockquote>Dies ist ein Blockquote.
Ein längerer als Zitat gekennzeichneter Absatz mit Zitatangabe.
...
<cite>Zitationsangabe mit <cite>. Mit einem <a href="#">Link</a>.</cite></blockquote>

Zitation im Absatztext

Ist gewünscht nur ein paar Worte in einem Absatz als Zitat hervorzuheben, wird das HTML-Element <cite> verwendet.

In dem vorherigen Satz wurde dazu das Wort "Zitat" entsprechend gekennzeichnet.

 

 

Absatzzitate ohne Quote-Zeichen

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

Dies wird erreicht, indem der HTML-Tag blockquote um die Klasse "noquote" ergänzt wird.

Code

<blockquote class="noquote">Dies ist ein Blockquote.
...
<cite>Zitationsangabe mit <cite>. Mit einem <a href="#">Link</a>.</cite></blockquote>

 

Blockquotes ohne Quotes werden insbesondere dann benötigt, wenn es darum geht, wissenschaftliche Formeln und ähnliches darzustellen. In diesen Fällen wäre ein Quotezeichen falsch.

Ebenso sind westeuropäische Quotezeichen nur bei westeuropäischen Texten sinnvoll.
Das folgende Beispiel zeigt dies bei chinesischen Text:

孤山寺北贾亭西
水面初平云脚低
几处早莺争暖树
谁家新燕啄春泥
乱花渐欲迷人眼
浅草才能没马蹄
最爱湖东行不足
绿杨阴里白沙堤

Code

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

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>

Wenn Sie gerade erst dabei sind, einen neuen Webauftritt zu erstellen und Sie nicht möchten, dass Besucher Ihre unfertige Seite aufrufen, können Sie das Plugin Private Site verwenden, um Ihre Seite "ungesehen" zu erstellen.

Das Plugin ist auf der CMS-Instanz des RRZE bereits vorinstalliert. Sie müssen es daher nur noch selbst aktivieren.

Nach erfolgreicher Aktivierung des Plugins können Sie über Einstellungen | Lesen die Zugangsbeschränkung einstellen.

Hier setzen Sie anschließend das Häkchen beim Punkt Zugangsbeschränkung, um Ihre Seite vor Besuchern zu verbergen.

Zugangsbeschränkung aktivieren

Denken Sie bitte daran, diese Einstellung nach Fertigstellung Ihres Webauftritts rückgängig zu machen, um Ihre Seite für Besucher sichtbar zu machen. Wir empfehlen diese Funktion nur für den anfänglichen Seitenaufbau und nicht für bereits bestehende Projekte, an denen nur kleine Änderungen durchgeführt werden sollen.

Inhaltsverzeichnis

  • Einen Beitrag erstellen
    • Einen Beitrag anlegen
    • Den Anleser festlegen
    • Ein Beitragsbild hinzufügen
    • Das Bühnenbild festlegen
    • Kategorien und Schlagwörter festlegen
    • Einen Beitrag als Top-Event festlegen
  • Einen externen Beitrag ausgeben
  • Weiterführende Inhalte

Im unteren Video: Externe Beiträge einbinden, Dynamische Sidebar und Blogroll

Einen Beitrag erstellen

Beiträge werden wie Inhaltsseiten erstellt und befüllt. Lediglich der erste Schritt unterscheidet sich. Falls Sie noch keine Inhaltsseite erstellt haben, auf "Inhaltsseiten erstellen" gibt es eine Schritt-für-Schritt Anleitung.

Einen Beitrag anlegen

Um einen neuen Beitrag zu erstellen, gehen Sie wie folgt vor:

  1. Klicken Sie Admin-Leiste | Neu.
  2. Ein leerer Beitrag öffnet sich.
  3. Erstellen Sie den Inhalt des Beitrags über den Editor. Auf der Anleitungsseite "Inhaltsseiten erstellen" finden Sie eine Schritt-für-Schritt Anleitung zum Erstellen von Inhalten.

Den Anleser festlegen

Dieser Schritt ist optional.

Auf Startseite Fakultät erscheint der komplette Anleser im Slider

Der Anleser wird auf der Blogroll der Startseite dargestellt. Falls kein individueller Text eingetragen ist, wird der Anleser automatisch generiert. Gehen Sie wie folgt vor, um einen individuellen Text für den Anleser zu hinterlegen:

  1. Navigieren Sie Beitrag bearbeiten | Reiter Beitragsoptionen.
  2. Füllen Sie das Feld "Anleser" aus.
  3. Nach Veröffentlichung wird der Anleser in der Blogroll ausgegeben.

Beitragsbild hinzufügen

Das Beitragsbild erscheint in der Blogroll und auf der Beitragsseite. Falls kein Beitragsbild gesetzt ist, wird ein Fallback verwendet.

Um ein Beitragsbild festzulegen, gehen Sie wie folgt vor:

  1. Navigieren Sie Beitrag bearbeiten | Reiter Beitragsbild.
  2. Klicken Sie Beitragsbild festlegen.
  3. Wählen Sie ein Beitragsbild in einem passendem Format. Aktuelle Empfehlungen finden Sie auf der Anleitungsseite zu Abmessungen und Größen für Bilder.
  4. Das Beitragsbild wird nach der Auswahl im Reiter Beitragsbild dargestellt.

Bühnenbild festlegen

Das Bühnenbild erscheint auf dem Template Startseite Fakultät im Slider. Falls kein Bühnenbild festgelegt ist, wird das Beitragsbild oder der Slider-Fallback verwendet.

Um ein Bühnenbild festzulegen, gehen Sie wie folgt vor:

  1. Navigieren Sie Beitrag bearbeiten | Reiter Beitragsoptionen | Bühnenbild.
  2. Wählen Sie ein Bühnenbild aus
    Auf unserer Anleitungsseite finden Sie die aktuell empfohlenen Abmessungen und Größen für Bilder
  3. Das Bühnenbild wird im Slider verwendet, wenn der Beitrag veröffentlicht / aktualisiert wird.

Kategorien und Schlagwörter festlegen

Kategorien und Schlagwörter erleichtern die Organisation und Verteilung von Beiträgen. So können Sie einstellen, dass nur Beiträge einer bestimmten Kategorie auf der Startseite erscheinen. Um einem Beitrag eine Kategorie oder ein Schlagwort zuzuweisen, gehen Sie wie folgt vor:

  1. Navigieren Sie Beitrag bearbeiten | Reiter Kategorien oder Schlagwörter.
  2. Vergeben Sie eine Kategorie oder mehrere Schlagwörter.
  3. Aktualisieren Sie Ihren Beitrag

Einen Beitrag als Top-Event festlegen

Top-Beiträge erscheinen in der Sidebar der Startseite und sind permanent sichtbar. Die Funktion eignet sich für Veranstaltungen und wichtige Ankündigungen.

Um einen Beitrag als Top-Beitrag zu definieren, folgen Sie diesen Schritten:

  1. Navigieren Sie Beitrag bearbeiten | Reiter Top-Event.
  2. Wählen Sie Ja, diesen Beitrag als Top-Event anzeigen.
  3. Vergeben Sie Titel und Kurzbeschreibung.
  4. Wählen Sie ein Datum, dieses erscheint unter der Ausgabe des Top-Events.
  5. Optional: Aktivieren und wählen Sie ein Symbolbild.
  6. Nach Veröffentlichung erscheint Ihr Top-Event in der Sidebar der Startseite.

Einen externen Beitrag ausgeben

Wenn wichtige Zeitungen oder externe Artikel veröffentlicht werden, kann es wünschenswert sein, einzelne Beiträge auch auf der eigenen Internetseite zu präsentieren. Für externe Artikel kann beispielsweise ein eigener Bereich geschaffen werden. Um einen externen Beitrag hinzuzufügen, gehen Sie wie folgt vor:

  1. Erstellen Sie einen leeren Beitrag.
  2. Ergänzen Sie Anleser, Beitragsbild und Bühnenbild.
  3. Vergeben Sie eine Extra-Kategorie z.B. Externes
  4. Navigieren Sie zu Beitrag bearbeiten | Reiter Beitrags-Optionen | Externer Link.
  5. Tragen Sie den Link des externen Artikels in das Feld Externer Link ein.
  6. Veröffentlichen Sie den Beitrag.
  7. Mit dem Custom-News Shortcode können Sie alle Beiträge der gewählten Kategorie (z.B Externes) auf einer individuellen Inhaltsseite einbinden.
Einen externen Beitrag bearbeiten Sie wie alle anderen "eigenen" Beitragsseiten über Dashboard | Beiträge | Alle Beiträge über den Link bearbeiten.

Weiterführende Inhalte

PDF-Dateien auf der Webseite einbinden | Tipp der Woche

Lernen Sie, wie Sie PDFs und Word-Dateien auf der eigenen Webseite einbinden können.

So geht's:

Benennen Sie PDF-Dateien oder Word-Dateien so, dass keine Sonderzeichen enthalten sind. Achten Sie darauf, dass der Dateiname nicht zu lange ist (idealerweise unter 50 Zeichen bleiben) Navi...Weiterlesen

Bilder einbinden und ausrichten | Tipp der Woche

Bilder erweitern den eigenen Inhalt um Zusatzinformationen, Impressionen oder Infografiken. Aber wie bindet man ein Bild eigentlich am geschicktesten ein? Welche Möglichkeiten gibt es und wieso ist der visuelle Editor besonders gut dafür geeignet?

Neue Bilder einbinden Neue Bilder können dir...Weiterlesen

Beiträge in Inhaltsseiten einbinden | Tipp der Woche

Ein meist unbekanntes Feature ist die Möglichkeit Beiträge auf Inhaltsseiten einzubinden. So kann man auf einer Themenseite über ein Thema alle passenden Beiträge einer zugehörigen Kategorie an der gleichen Stelle zur Schau stellen.

Umsetzung Alles beginnt mit dem Shortcode . Dieser Shortc...Weiterlesen

Aufzählungen und Listen können Inhalte strukturieren. Die folgenden CSS-Klassen stehen für die Gestaltung von Listen zur Verfügung. Hierfür wird dem öffnenden Listen-Tag im Textmodus das Attribut class="Klassenname" zugeteilt.

Die folgenden Klassen stehen zur Verfügung:

Standardausgabe

<ul>

<ul>...<ul>
  • Element 1
  • Element 2
    • Unterelement (unsorted list) 1
    • Unterelement (unsorted list) 2
    • Unterelement (unsorted list) 3
  • Element 3
    1. Unterelement (sorted list) 1
    2. Unterelement (sorted list) 2
    3. Unterelement (sorted list) 3

<ol>

<ol>...<ol>
  1. Element 1
  2. Element 2
    • Unterelement (unsorted list) 1
    • Unterelement (unsorted list) 2
    • Unterelement (unsorted list) 3
  3. Element 3
    1. Unterelement (sorted list) 1
    2. Unterelement (sorted list) 2
    3. Unterelement (sorted list) 3

Ausgabe ohne Listenpunkte

<ul>

<ul class="nolist">...<ul>
  • Element 1
  • Element 2
    • Unterelement (unsorted list) 1
    • Unterelement (unsorted list) 2
    • Unterelement (unsorted list) 3
  • Element 3
    1. Unterelement (sorted list) 1
    2. Unterelement (sorted list) 2
    3. Unterelement (sorted list) 3

<ol>

<ol class="nolist">...<ol>
  1. Element 1
  2. Element 2
    • Unterelement (unsorted list) 1
    • Unterelement (unsorted list) 2
    • Unterelement (unsorted list) 3
  3. Element 3
    1. Unterelement (sorted list) 1
    2. Unterelement (sorted list) 2
    3. Unterelement (sorted list) 3

Klasse Markercolor

Das Fakultätskürzel steuert die Farbe. Ohne Fakultätskürzel wird FAU-Blau verwendet.

<ul">

<ul class="phil markercolor">...<ul>
  • Element 1
  • Element 2
    • Unterelement (unsorted list) 1
    • Unterelement (unsorted list) 2
    • Unterelement (unsorted list) 3
  • Element 3
    1. Unterelement (sorted list) 1
    2. Unterelement (sorted list) 2
    3. Unterelement (sorted list) 3

<ol>

<ol class="phil markercolor">...<ol>
  1. Element 1
  2. Element 2
    • Unterelement (unsorted list) 1
    • Unterelement (unsorted list) 2
    • Unterelement (unsorted list) 3
  3. Element 3
    1. Unterelement (sorted list) 1
    2. Unterelement (sorted list) 2
    3. Unterelement (sorted list) 3

Kontrastmarker

Das Fakultätskürzel steuert die Farbe. Ohne Fakultätskürzel wird FAU-Blau verwendet.

<ul>

<ul class="med kontrastmarker">...<ul>
  • Element 1
  • Element 2
    • Unterelement (unsorted list) 1
    • Unterelement (unsorted list) 2
    • Unterelement (unsorted list) 3
  • Element 3
    1. Unterelement (sorted list) 1
    2. Unterelement (sorted list) 2
    3. Unterelement (sorted list) 3

<ol>

<ol class="med kontrastmarker">...<ol>
  1. Element 1
  2. Element 2
    • Unterelement (unsorted list) 1
    • Unterelement (unsorted list) 2
    • Unterelement (unsorted list) 3
  3. Element 3
    1. Unterelement (sorted list) 1
    2. Unterelement (sorted list) 2
    3. Unterelement (sorted list) 3

Spezialmarker für unsortierte Listen

<ul>

<ul><li class="symbol name">...<li><ul>
  • Positiv mit
    class="positiv"
  • Negativ mit
    class="negativ"
  • Fragezeichen mit
    class="question"
  • Ausrufezeichen mit
    class="exclamation"
  • Paragraphenzeichen mit
    class="paragraph"
  • Haken mit
    class="check"
  • Kreuz mit
    class="cross"

Code

[assistant id="18638"]

Hinweise

  • Der Inhalt der Oberseite wird nicht angezeigt.
  • Sidebars und Artikelbilder werden ebenfalls ignoriert. Sowohl der Oberseite als auch der Unterseiten

Die id eines Beitrages ermitteln

  1. Navigieren Sie auf die gewünschte Oberseite
  2. Bearbeiten Sie die Seite über Seite bearbeiten
  3. Kopieren Sie die id aus der URL-Zeile Ihres Browsers. Die Länge der id kann variieren. Sie finden diese hinter „post=0000“

Shortcode modifizieren

Die folgenden Anpassungen sind zusätzlich möglich.

  • color=““ – Bestimmt die Accordionfarbe
  • expand-all-link=“true“ – Generiert einen Button um alle Akkordeonfächer gleichzeitig zu öffnen
  • subpages=“true“ – Steuert die Ausgabe der Unterseiten.

Weitere Hinweise zum Webauftritt

Noch Fragen?

Schreiben Sie uns eine E-Mail an webmaster@fau.de.
Wir beantworten Ihnen alle offenen Fragen rund um unser Content Management System (CMS), WordPress, Webhosting und Co.

Regionales Rechenzentrum Erlangen
(RRZE)

Martensstraße 1
91058 Erlangen
  • Kontakt
  • Webworking Blog
  • Impressum
  • Datenschutz
  • Barrierefreiheit
  • RSS Feed
  • GitHub
  • Twitter
Nach oben