• Zum Inhalt springen
  • Zur Navigation springen
  • Zum Seitenende springen
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
  • RRZE
  • Videoportal
  • Lageplan und Anfahrt
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
Menu Menu schließen
  • Grundlagen
    • Rahmenbedingungen für Webauftritte
    • Über WordPress
      • Grundsätzliches zum Webpublishing
      • Login und Navigation im Backend
      • Profil
      • Dashboard
      • Der Customizer
      • Einstellungen im Backend
      • Einen neuen Benutzer anlegen
    • Seiten
      • Eine Seite erstellen
      • Mehrere Seiten gleichzeitig konfigurieren
      • Seiten und Beiträge freigeben
    • Beiträge
    • Inhalte bearbeiten
      • Mediathek
      • Bilder
      • Galerie
        • Bildergalerie im Gridformat
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • Seitenstruktur erstellen
      • Kategorien und Schlagworte
      • Die Sidebar
    • Menüs
      • Menüs mit Widgets erstellen
    • Häufig gestellte Fragen
    Portal Grundlagen
  • Plugins
    • Plugins aktivieren
    • Externe Daten einbinden
      • Calendar
      • CRIS
      • FAU oEmbed
      • Jobs
      • Remoter
      • Statistik
      • UnivIS
      • Video
    • Neue Inhaltstypen erstellen
      • Expo
      • FAQ
      • Glossary
      • Person
      • Legal (ehemals ToS – „Terms of Service“)
      • RSVP
      • Synonym
    • Inhaltsseiten mit Funktionen erweitern
      • Contact Form 7
      • Downloads
      • Elements
      • Multilang
      • Ratebutton
      • TinyMCE Advanced
      • Verfallsdatum für Beiträge („Post-Expiration“)
    • Zugang beschränken
      • Access Control
      • Private Site
    • Beiträge teilen
      • Auto-Tweet
      • RSS
    • Plugin-Help
    • Spezialplugins
      • Newsletter
      • Progressive Web-App (PWA)
      • Workflow
    • Über Externe Plugins
    • Über FAU- und RRZE-Plugins
    Portal Plugins
  • Themes
    • FAU Einrichtungen
      • Umsetzungsbeispiele
      • Templates
        • Standardtemplate
        • Die Inhaltsseite mit Navi
        • Portalseite
        • Portalindexseite
        • Startseite
        • Startseite Fakultät
      • Shortcodes
        • Blogroll
        • Portalmenus
        • Bildlinks
    • 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
    Portal Themes
  • Entwicklung
    • Design
      • Farben (Markendesign 2021)
      • Logos
        • Logos zentraler Anwendungen
        • Einsatz im Videoportal
        • Einsatz im Social Media und auf Online-Plattformen
      • Schriften
    • Einsatzkontext (Statistik)
      • Einrichtungsbezeichnungen
    • Versionsverwaltung Git
    • Einheitliche Vergabe von Versionsnummern
    • Vorgaben an Themes
    • Vorgaben an Plugins
    • Eigene Testinstanz
    • Serverkonfiguration
    • Statistiken zu Webauftritten
    Portal Entwicklung
  • Tutorials
    • Schnelleinstieg FAU Events
    • Hinweise zur redaktionellen Arbeit
    • Publikationsliste erstellen
    • Tipps und Tricks
    • Neue Daten in die FAU-Karte einbinden
    • Vortragsliste erstellen
    • Schnelleinstieg FAU Einrichtungen
      • Vorbereitungen
      • Navigation im Backend und allgemeine Grundlagen in WordPress
      • Ein Theme auswählen
      • Seitenlogo und Seiteninformationen ergänzen
      • Eine Startseite erstellen
      • Rechtstexte generieren
      • Inhaltsseiten erstellen für Anfänger
      • Beiträge und die dynamische Sidebar
      • Abmessungen für Bilder und Grafiken
      • Beiträge und die dynamische Sidebar
      • Portale und die Seitennavigation
      • Blogroll und Finetuning
    • 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
    • SEO – Search engine optimization
      • SEO Inhalte gestalten
      • SEO Grundlagen
      • SEO und Barrierefreiheit
    Portal Tutorials
  1. Startseite
  2. Tutorials
  3. Tipps und Tricks
  4. Tipp: Die News-Sidebar nutzen

Tipp: Die News-Sidebar nutzen

Bereichsnavigation: Tutorials
  • Barrierefreiheit
    • Vorwort und Überblick
    • Einführung und Hintergründe
    • Bereitstellung und Pflege von Inhalten
      • Spickzettel
    • Entwicklung und Design
      • Browser-Add-ons
    • 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
  • Digitale Hilfsmittel für Kongresse und Veranstaltungen an der FAU
  • Hinweise zur redaktionellen Arbeit
  • Neue Daten in die FAU-Karte einbinden
    • Neue Daten in die FAU-Karte einbinden – Tutorial
  • Publikationsliste erstellen
    • Publikationsliste erstellen – Tutorial
  • Schnelleinstieg FAU Einrichtungen
    • Vorbereitungen
    • Navigation im Backend und allgemeine Grundlagen in WordPress
    • Ein Theme auswählen
    • Seitenlogo und Seiteninformationen ergänzen
    • Eine Startseite erstellen
    • Rechtstexte generieren
    • Inhaltsseiten erstellen für Anfänger
    • Beiträge und die dynamische Sidebar
    • Abmessungen für Bilder und Grafiken
    • Portale und die Seitennavigation
    • Blogroll und Finetuning
  • Schnelleinstieg FAU Events
  • SEO – Search engine optimization
    • SEO Grundlagen
    • SEO Inhalte gestalten
    • SEO und Barrierefreiheit
  • Tipps und Tricks
    • Tipp: Seitenumbrüche
    • Tipp: Logos und Titel
    • Tipp: Brotkrümel-Navigation und Seitennavigation
    • Tipp: Corporate Design
    • Tipp: Statistik
    • Tipp: Ein Top-Event herausstellen
    • Tipp: GitHub – Kommunikation mit den Entwicklern
    • Tipp: Eine Kategorieseite ins Menü einbinden
    • Tipp: Die News-Sidebar nutzen
    • Tipp: Beiträge zu einem bestimmten Datum veröffentlichen
    • Tipp: Beiträge auf der Startseite halten
    • Tipp: Zeitumstellung im Kalender
    • Tipp: Möglichkeiten, Bilder und Grafiken hervorzuheben
  • Vortragsliste erstellen
    • Vortragsliste erstellen – Tutorial
  • WordPress Tipp der Woche

Tipp: Die News-Sidebar nutzen

Die News-Sidebar gibt Ihnen die Möglichkeit, Ihren Beitragsseiten allgemeine Informationen und Links mitzugeben. Diese Sidebar definieren Sie über Widgets für alle Beitragsseiten gleich.

Empfehlenswert für diese Sidebar sind folgende Widgets:

  • Text
  • Individuelles Menü
  • Kategorien
  • Kontakt-Visitenkarte
  • Suche

Weniger ist mehr! Letztlich ist es für Sie wichtig, dass der Besucher den Artikel liest, den er aufgerufen hat oder eine Auswahl aus der Artikelkategorie trifft, die er sich anzeigen lässt. Überladen Sie also die Sidebar nicht, lassen Sie den Fokus auf dem Beitrag.

Individuelles Menü

Um dieses Widget nutzen zu können, müssen Sie zunächst ein Menü definieren; für die Menüpunkte wählen Sie „Individuelle Links“. Falls dies nicht angezeigt werden sollte, sehen Sie bitte unter „Ansicht anpassen“ nach, ob diese Box ausgeblendet ist:

(metabox screenshot)

Unter „Individuelle Links“ bekommen Sie ein Formular, in das Sie die URL und den Linktitel eingeben; in unserem Beispiel sind das die Links auf die Fakultäten und als Linktitel die Bezeichnungen der Fakultäten:

Screenshot von der Metabox, in der man URL und Linktext angibt und anschließend auf "Menü hinzufügen" klickt.

Speichern Sie das Menü, sobald es fertiggestellt ist. Wir haben für unseren Zweck ein Menü mit dem Namen NewsSidebar erstellt. Dies erhält in unserem Fall den Titel „Zu den Fakultätsseiten“; so wird es im Widget eingebunden:

Screenshot: Ein individuelles Menü wird zum Widget News Sidebar hinzugefügt.
Individuelles Menü zum Widget hinzufügen

 

Dann füllen Sie den Punkt „individuelles“ Menü aus und speichern die Einstellungen ab.

 

Der Screenshot zeigt die Schritte, die beim Befüllen des individuellen Menüs zu machen sind: Titel vergeben, Menü auswählen und speichern.
Individuelles Menü befüllen

Auf den Beitragsseiten sieht das dann in etwa so aus:

Screenshot, auf dem die News Sidebar mit Links auf die Fakultäten der FAU zu sehen ist

Wenn Sie möchten, dass die Fakultäten leichter auf einen Blick zu erkennen sind, können Sie die einzelnen Links mit den Fakultätsfarben hinterlegen. Dazu müssen Sie das Menü noch einmal bearbeiten; Sie geben dort für die einzelnen Menüelemente die jeweilige CSS-Klasse an. Das ist

  • phil für die Philosophische Fakultät und Fachbereich Theologie
  • med für die Medizinische Fakultät
  • nat für die Naturwissenschaftliche Fakultät
  • rw für die Rechts- und Wirtschaftswissenschaftliche Fakultät
  • tf für die Technische Fakultät

Screenshot, der zeigt, wo die CSS-Klasse für den individuellen Link angegeben werden muss

 

Individuelles Menue farbig hinterlegen

 

Tun Sie dies, sieht das Ergebnis in etwa wie unten aus:

Der Screenshot zeigt ein Menü mit Links auf die einzelnen Fakultäten der FAU, in dem die einzelnen Links mit der jeweiligen Fakultätsfarbe hinterlegt sind.

 

Das Menü in der News Sidebar

Das Textwidget

Im Textwidget können Sie freien Text und auch Shortcodes eingeben. So könnten Sie hier zum Beispiel eine Kontaktperson angeben oder Ihren Kalender einbinden. Um das zu tun, ziehen Sie wie oben beschrieben das Widget in den Bereich „News Sidebar“. Dort öffnen Sie das Widget mit Klick auf den kleinen Pfeil nach unten und befüllen es nach Ihren Wünschen. Für unser Beispiel binden wir einen Kalender ein.

Zunächst ziehen Sie das Textwidget in die News Sidebar.

Screenshot, der zeigt wo das Textwidget ist und wie man es zur News Sidebar zieht.

Dann öffnen Sie das Widget, geben eine Überschrift ein und den Shortcode für Ihren Kalender.

Der Screenshot zeigt das Textwidget mit ausgefüllten Textboxen für Titel und Inhalt

Wenn das Textwidget unter dem individuellen Menü ist, sieht das dann so aus:

Das Kategorien-Widget

Dieses Widget zeigt alle Beitragskategorien an, die Sie angelegt haben und stellt somit ein kleines Menü dar, mit dem Ihre Besucher sich innerhalb der Beiträge orientieren können. Sie ziehen das Widget „Kategorien“ in die News Sidebar wie es bei den anderen Widgets bereits beschrieben ist. Auch hier können Sie einen Titel vergeben und wählen, ob Sie die Kategorien in einer Auswahlbox anzeigen möchten, einen Beitragszähler, der anzeigt, wieviele Beiträge in der jeweiligen Kategorie vorhanden sind, und ob Sie die Hierarchie anzeigen möchten.

Der Screenshot zeigt das Kategorie-Widget mit ausgefülltem Titel.

Nachfolgend vier Screenshots, die das Ergebnis im Frontend zeigen:

Nur Kategorien werden angezeigt
Eine Auswahlbox wird als Dropdown-Menü angezeigt
Die Anzahl der vorhandenen Beiträge wird hinter dem Kategorienamen angezeigt
Subkategorien werden mit angezeigt
Nur Kategorien werden angezeigt
Eine Auswahlbox wird als Dropdown-Menü angezeigt
Die Anzahl der vorhandenen Beiträge wird hinter dem Kategorienamen angezeigt
Subkategorien werden mit angezeigt

Das Widget Kontakt-Visitenkarte

Mit diesem Widget können Sie einen Kontakt in der Sidebar anzeigen. Ziehen Sie wie oben beschrieben das Widget in die News Sidebar. Dann geben Sie zunächst einen Titel ein und wählen danach im Dropdown-Menü den Kontakt, der hier angezeigt werden soll.

Der Screenshot zeigt das ausgefüllte Kontakt-Widget.

Wenn man den Kontakt nach oben stellt, sieht dass dann so aus:

Der Screenshot zeigt das Kontakt-Widget im Frontend.

Hier können Sie bereits sehen, dass die Sidebar sehr lang werden kann, wenn Sie Ihre Möglichkeiten ausschöpfen; die Kategorien sind hier schon gar nicht mehr auf dem Bildschirm zu sehen. Wenn Ihnen die ausführliche Version der Kontaktanzeige zu lang sein sollte, können Sie auch über das Textwidget einen Kontakt einbinden, den Sie über die Shortcode-Attribute so konfigurieren, dass sie kürzer ist.

Das Suche-Widget

Mit diesem Widget stellen Sie Ihren Besuchern ein Suchformular zur Verfügung. Sie fügen es auf die jetzt schon bekannte Weise der News-Sidebar hinzu. Hier geben Sie einen Titel ein und speichern das Widget dann.

Der Screenshot zeigt das Suche-Widget mit ausgefüllter Textbox für den Titel

Wenn dann alle diese Widgets in der Sidebar verfügbar sind, sieht das im Frontend so aus:

Der Screenshot zeigt eine Beitragsseite mit allen beschriebenen Widgets in der Sidebar.

Wie Sie sehen, mussten wir die Ansicht stark verkleinern, um die gesamte Sidebar auf dem Screenshot darzustellen. Insofern raten wir Ihnen, nur ein bis zwei Widgets in die Sidebar zu übernehmen, da sie sonst bei einer üblichen Artikellänge von etwa drei bis vier Absätzen nicht wahrgenommen werden.

Regionales RechenZentrum Erlangen
(RRZE)

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