• 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
    • Rahmenbedingungen für Webauftritte
    • Über WordPress
      • Grundsätzliches zum Webpublishing
    • CMS-Dienstleistung
    • Konzeption einer Website
    • Login und Navigation im Backend
    • Benutzer anlegen und bearbeiten
    • Seiten
      • Eine Seite erstellen
      • Mehrere Seiten gleichzeitig konfigurieren
      • Seiten und Beiträge freigeben
    • Beiträge
    • Sidebar
    • Inhalte bearbeiten
      • Mediathek
      • Bilder
      • Galerie
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • Seitenstruktur erstellen
    • Menüs
    • Widgetbereiche und Widgets
    • Häufig gestellte Fragen
    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 (Kontakte)
      • 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
    • FAU Einrichtungen
      • Umsetzungsbeispiele
      • Templates
      • Portalmenüs
      • Bildlinks (Logos einbinden)
      • Shortcodes
    • Francesca – Ein Theme für Kooperationen
    Portal Themes
  • Tutorials
    • Schnelleinstieg FAU Events
    • Publikationsliste erstellen
    • Tipps und Tricks
    • Neue Daten in die FAU-Karte einbinden
    • Vortragsliste erstellen
    • Schnelleinstieg FAU Einrichtungen
      • Vorbereitungen
      • Navigation im Backend
      • Ein Theme auswählen
      • Seitenlogo und Seiteninformationen ergänzen
      • Eine Startseite erstellen
      • Rechtstexte generieren
      • Inhaltsseiten erstellen für Anfänger
      • Beiträge erstellen
      • Dynamische Sidebar
      • Abmessungen für Bilder und Grafiken
      • Portalseiten und -menüs
      • Seitennavigation
      • Suchmaschinenoptimierung in 5 Minuten
      • Slider und Blogroll
    • 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
    • Pflege MeinStudium-Portal
    Portal Tutorials
  • 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. Grundlagen
  3. Inhalte bearbeiten
  4. Bilder

Bilder

Bereichsnavigation: Grundlagen
  • CMS-Dienstleistung
  • Rahmenbedingungen für Webauftritte
  • Über WordPress
  • Konzeption einer Website
  • Login und Navigation im Backend
  • Benutzer anlegen und bearbeiten
  • Seiten
  • Beiträge
  • Sidebar
  • Inhalte bearbeiten
    • Mediathek
    • Bilder
      • Abmessungen für Bilder und Grafiken
      • Hover Effekte von Bildern
      • Zusatzklassen für Bilder
    • Galerie
    • Tabellen
    • Zitate
    • Formeln, Daten und Quellcode
    • Listen
  • Seitenstruktur erstellen
  • Menüs
  • Widgetbereiche und Widgets
  • Häufig gestellte Fragen

Bilder

Support und Beratung

Webteam

Webteam

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

Wenn es um Bildeinbindung geht, führt kein Weg um die Mediathek. Hier lernen Sie, wie Sie Bilder in Ihrer Webseite einpflegen können.

Inhaltsverzeichnis

  • Bilder in Inhaltsbereichen einbinden
  • Mehrere Bilder als Galerie einbinden
  • Dokumente (z.B. PDFs) auf einer Inhaltsseite einbinden
  • Videos einbinden


Bilder in Inhaltsbereichen einbinden



Nachdem die Bilder in die Mediathek geladen wurden, können Sie diese wie folgt auf Inhaltsseiten einbinden:

  1. Navigieren Sie auf die Inhaltsseite, auf welcher die Bilder eingebunden werden sollen.
  2. Positionieren Sie den Textcursor an die Position, an welcher das Bild eingebunden werden soll.
  3. Falls Sie das Bild noch nicht hochgeladen haben, folgen Sie die der Anleitung im Abschnitt „Bilder und Dokumente in die Mediathek laden“.
  4. Falls das Bild bereits in die Mediathek geladen wurde, klicken Sie Dateien hinzufügen über der Editor-Werkzeugleiste. Die Mediathek öffnet sich.
    Ein Screenshot der WordPress Mediathek.
  5. Falls Sie sich im „Dateien hinzufügen“ Reiter befinden: Wechseln Sie in den Reiter Mediathek, um ein bestehendes Bild auszuwählen.
  6. Wählen Sie das gewünschte Bild aus der Mediathek aus, welches eingebunden werden soll.
  7. Falls es sich um ein nicht dekoratives Bild handelt: Vergeben Sie einen Alternativtext über die Eingabemaske in der rechten Spalte.
    Ein Screenshot der Mediathek. Auf der rechten Seite sieht man einen Bereich der Anhang-Details. Das erste Feld steuert die Ausgabe des Alternativtextes.
  8. Falls benötigt, ergänzen Sie das Feld Bildbeschriftung. Diese sollte vom Alternativtext leicht abweichen.
    Ein Screenshot der Anhangdetails. Auf der rechten Spalte ist das Feld Beschriftung hervorgehoben.
  9. Scrollen Sie in der Eingabemaske nach unten.
    Ein Screenshot der Mediathek. Man sieht ein Scroll-Symbol, dass darauf hinweist, dass man in der Spalte auf der rechten Seite nach oben scrollen kann.
  10. Hier können Sie Bildausrichtung und Bildgröße wählen.
    Ein Screenshot der Mediathek. Auf der rechten Seite, am Ende der Spalte ist der Bereich Anzeigeeinstellungen für Anhänge hervorgehoben.
  11. Bestätigen Sie mit dem Button „In die Seite einfügen“
  12. Das Bild wurde an der gewünschten Position im Editor eingefügt.

Mehrere Bilder als Galerie einbinden

(Vergrößern)
Bildbeschriftung
(Vergrößern)
(Vergrößern)
(Vergrößern)
Bildbeschriftung

Um mehrere Bilder als Galerie einzubinden, gehen Sie wie folgt vor:

  1. Falls die gewünschten Bilder noch nicht in die Mediathek geladen wurden: Folgen Sie der Anleitung im Abschnitt Bilder und Dokumente in die Mediathek laden.
  2. Navigieren Sie auf die Inhaltsseite, auf welcher die Galerie eingebunden werden soll.
  3. Klicken Sie auf Dateien hinzufügen über der Editor-Werkzeugleiste.
  4. Die Mediathek öffnet sich. Falls Sie im Reiter „Dateien hochladen“ sind, wechseln Sie in den Reiter Mediathek
  5. Klicken Sie in der linken Navigation auf Galerie erstellen.
    Ein Screenshot der Mediathek. Am linken Rand ist der Menüpunkt Galerie erstellen an der zweiten Position hervorgehoben.
  6. Wählen Sie alle gewünschten Bilder aus, die in der Galerie eingebunden werden sollen.
  7. Klicken Sie Neue Galerie erstellen in der unteren rechten Ecke des Mediathek-Fensters.
  8. Vergeben Sie eine Beschriftung für die einzelnen Bilder.
  9. Passen Sie die Galerie-Einstellungen am rechten Rand an.
  10. Klicken Sie Galerie einfügen.
  11. Die Galerie wurde im Inhaltsbereich eingefügt.

Dokumente (z.B. PDFs) auf einer Inhaltsseite einbinden

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.
  1. Falls die gewünschten Dokumente noch nicht in die Mediathek geladen wurden: Folgen Sie der Anleitung im Abschnitt Bilder und Dokumente in die Mediathek laden.
  2. Navigieren Sie auf die Inhaltsseite, auf welcher die PDF eingebunden werden soll.
  3. Klicken Sie auf Dateien hinzufügen über der Editor-Werkzeugleiste.
  4. Die Mediathek öffnet sich. Falls Sie im Reiter „Dateien hochladen“ sind, wechseln Sie in den Reiter Mediathek
  5. Wählen Sie das Dokument aus, das eingebunden werden soll.
  6. Klicken Sie in die Seite einfügen am unteren rechten Rand der Mediathek.
  7. Das Dokument wurde korrekt verlinkt.
  8. Passen Sie gegebenenfalls den Linktext an, damit der Linktext „sprechend“ ist.
    • Negativbeispiel: „Hier“, „PDF“ oder „Dokument“.
    • Besser: In unserem Ratgeber zur Bildeinbindung (pdf) können Sie mehr erfahren.

Videos einbinden

Zwar können Videos auch über die Mediathek eingebunden werden, allerdings gibt es bessere Alternativen, um ein Video einzubinden. Gleichzeitig sparen Sie sich so wertvollen Speicherplatz auf Ihrer CMS-Instanz. Gehen Sie wie folgt vor:

  1. Laden Sie Ihr Video als öffentlichen Clip im Videoportal hoch. Hier finden Sie eine Anleitung zur Nutzung des Videoportals.

    Alternativ kann auch YouTube oder z.B. Vimeo genutzt werden. Allerdings werden YouTube-Videos erst nach Einwilligung des Nutzers dargestellt.
  2. Binden Sie das Video mithilfe unseres Videoplugins ein. Hierfür aktivieren Sie das Videoplugin in der Pluginübersicht und verwenden den Shortcode [fauvideo url="..."].
  3. Unter dem Video können Sie noch einen [divider]-Shortcode einsetzen, um mehr Weißraum zu erzeugen. Das Video wird dann an der entsprechenden Stelle angezeigt.

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