WordPress Tipps: Bilder, Videos und andere Dateien einfügen und optimal bearbeiten

In unserem Beitrag zur Funktion und zur Benutzung des WordPress Texteditors haben wir am Ende den Punkt „Medien hinzufügen“ angesprochen. Die Beiträge können um Bilder, Videos, Audiodateien und vieles mehr ergänzt werden, um diese anschaulicher und lebendiger zu gestalten bzw. den Beiträgen noch etwas mehr Struktur zu verleihen. Gleiches gilt natürlich auch für die Erstellung von Seiten in WordPress. Wie Ihr Bilder hinzufügt, haben wir bereits im oben genannten Beitrag geschrieben. Es gibt jedoch darüber hinaus zahlreiche Bearbeitungsmöglichkeiten, die wir Euch im heutigen Artikel vorstellen möchten. Außerdem zeigen wir Euch, was Ihr in puncto Dateibezeichnung und Dateigröße beachten solltet…

WordPress Dateien einfügen – immer klar kennzeichnen!

Egal, welche Datei man einbinden möchte: Es ist wichtig, ihr eine sinnvolle, aussagekräftige Dateibezeichnung zu geben. Das ist einerseits für Google wichtig, andererseits für die Besucher. Beide können die Inhalte einer Datei à la „trampolin-kinder.jpg“ wesentlich besser zuordnen als eine Bezeichnung wie „DCM458.jpg“.

Weitere Hinweise zur Dateikennzeichnung:

  • nur Kleinbuchstaben
  • keine Umlaute/Sonderzeichen verwenden
  • Worttrennung mit Bindestrich, nicht mit Unterstrich

Achtet zudem darauf, dass die Datei nicht zu groß ist, um die Ladezeit nicht unnötig zu strapazieren. Bilder sollten nicht größer als 200 KB sein. (Tipps zur Performance Optimierung Eurer Webseite)

Bearbeitungsmöglichkeiten für Bilder

Statt ein Einzelbild einzufügen, habt Ihr auch die Möglichkeit, eine Galerie zu erstellen:

1. Klickt nach dem Weg über „Datei hinzufügen“ und den Upload der gewünschten Bilder links oben auf „Galerie erstellen“.

2. Wählt alle Bilder aus, die in der Galerie auftauchen sollen.

3. Klickt „Erstelle eine neue Galerie“ an.

Im Fenster, das sich anschließend öffnet, könnt Ihr noch die Anzahl der Spalten und die Reihenfolge ändern. Anschließend könnt Ihr die Galerie in den Beitrag einfügen.

Bearbeitungen innerhalb der Mediathek

Wichtig sind hier vor allem die Auszeichnungen bei Titel, Beschriftung und Alternativtext. Sie helfen Suchmaschinen bei der Erkennung der Bildinhalte:

Titel

Er ist nicht sichtbar für den Besucher, jedoch wichtig für die Mediathek-Verwaltung.

Alternativtext

Dieser Text gibt die Inhalte für das alt-Attribut an. Kann die Datei aus irgendeinem Grund nicht angezeigt werden, erscheint der alt-Text. Wichtig ist das auch für Sehbehinderte, da dieser Text vom Screenreader ausgelesen wird.

Bildunterschrift

Das ist die einzige Bild-Kennzeichnung, die der Besucher Eurer Seite sieht. Sie ist wichtig, um das Bild richtig zuordnen zu können, sofern es sich nur auf einen Teilaspekt des Beitrags bezieht.

Unter diesen Auszeichnungen gibt es weitere Bearbeitungsmöglichkeiten zur Anzeige des Bilds:

Ausrichtung

Sie zeigt das Bild im Verhältnis zum Text, also z.B. zentriert oder links vom Text.

Link zur

Mit dieser Einstellung entscheidet Ihr, wo der Besucher beim Klick auf das Bild hingelangt.

Die Auswahl beinhaltet:

  • Medien-Datei: Original-Bild öffnet sich
  • Anhang-Seite: separate Unterseite öffnet sich
  • Benutzerdefinierte URL: Individuelle URL kann festgelegt werden, auf die das Bild verweisen soll
  • Keine: Datei ist nicht anklickbar

Größe

Die besten Bildergebnisse erhaltet Ihr, wenn Ihr das Bild bereits vor dem Hochladen in der Größe anpasst (möglichst unter 200 KB). Ihr könnt trotzdem in der Mediathek nachträglich Anpassungen der Bildgröße vornehmen. Zur Auswahl stehen jedoch nur Standardgrößen (Miniatur, Mittelgroß, Vollständige Größe) und auch nur die, die zur Bildabmessung passen.

Bearbeitungen im Text

In der Regel entspricht das eingefügte Bild im Text noch nicht der gewünschten Gesamtoptik. Daher gibt es hier noch weitere Anpassungsmöglichkeiten. Diese erreicht Ihr, wenn Ihr in das Bild klickt und dann auf den Bearbeitungs-Stift geht. Ihr könnt das Bild übrigens nach dem Anklicken auch noch über die Anknüpfungspunkte vergrößern oder verkleinern.

Folgende Bearbeitungsoptionen stehen Euch anschließend unter Bild-Details zur Verfügung:

Die oberen Felder entsprechen den Bild-Anpassungen in der Mediathek, z.B. Bildunterschrift, Ausrichtung und Bildgröße. Weiter unten folgen „Erweiterte Optionen“, die jedoch nur für erfahrene WordPress-Nutzer geeignet sind:

Bildtitel-Attribut: Der Inhalt wird im HTML als title-Attribut dem Bild zugeordnet und wird für den Besucher sichtbar, wenn er mit der Maus über das Bild fährt.

Bild-CSS-Klasse: Die Zuordnung zu einer Klasse ermöglicht z.B. die Anpassung des Bildes mit Schatten oder Konturen.

Linkbeziehung: Entspricht dem rel-Tag in HTML und ermöglicht Angaben zur Beziehung zum Linkziel, z.B. mit dem Wert „nofollow“ (Suchmaschinen-Bot soll dem Link nicht folgen).

Unter dem Bild gelangen Sie über „Original bearbeiten“ zu weiteren Anpassungsmöglichkeiten. Sie können das Bild…

  • …drehen oder spiegeln
  • …beschneiden
  • …skalieren

PDF in WordPress einfügen

Das Einfügen von PDF-Dateien funktioniert im Prinzip wie beim Einfügen von Bildern, d.h. Ihr geht den folgenden Weg:

Datei hinzufügen → Datei hochladen → Titel und Beschreibung vergeben → Einfügen

Unter Anzeigendarstellung wählt Ihr „Link zur Mediendatei“ aus.

Videos in WordPress einfügen

Beim Video einfügen habt Ihr drei Optionen:

1. Video von externer Plattform einfügen, z.B. Youtube

Videoplattformen machen es den Nutzern sehr leicht, Videos einzubinden. Bei Youtube befindet sich unter dem Video der Hinweis „Teilen“. Nach dem Klick öffnen sich weitere Funktionen, von denen Ihr „Einbetten“ auswählt. Es erscheint ein Einbettungscode, den Ihr kopiert und an die gewünschte Stelle im Beitrag (in der HTML-Ansicht) einfügt.

2. Eigenes Video vom Rechner in die Mediathek aufnehmen

Hier funktioniert das Einfügen im Grunde genommen wie bei Bildern: Ihr klickt auf „Datei hinzufügen“ und „Datei auswählen“, wählt anschließend die Datei von Eurem Rechner aus und ladet sie hoch.

Unten rechts müsst Ihr im Dropdown-Menü noch den Punkt „Eingebundener Medien-Player“ auswählen. Jetzt müsst Ihr nur noch wie bei Bildern das Video „In den Beitrag einfügen“.

Beachtet bei dieser Methode: Das Video liegt auf Eurem eigenen Server, statt wie beim Einbetten auf dem Server der Videoplattform. Dabei wird natürlich eine Menge Speicherplatz benötigt, was die Ladezeit der gesamten Seite negativ beeinflussen kann.

3. Video per Plugin in WordPress einbinden

Es gibt zahlreiche WordPress Plugins zum Einbinden von Videos. Sie unterscheiden sich teilweise sehr stark in ihrem Funktionsumfang. Welches Ihr wählt, ist also in erster Linie davon abhängig, was Ihr am Video anpassen möchtet. Für Video-Galerien ist z.B. das Plugin Video Gallery empfehlenswert.

Ein sehr häufig genutztes Plugin für Videos ist der JW Player. Das Einfügen der Videos funktioniert mit dem Player folgendermaßen:

  1. Nachdem Ihr das Plugin heruntergeladen, aktiviert und installiert habt, findet Ihr in der Mediathek den Button „Insert JW Player“.
  2. Über den Button wählt Ihr die Videodatei aus. Dann bestätigen Sie, dass Ihr das Video hinzufügen möchtet und der Player bettet das Video ein.

4 Kommentare  |  Kommentar schreiben

4 Kommentare zu “WordPress Dateien einfügen – einfach Videos, Bilder & PDF hinzufügen

Nick Freund #

Geschrieben am 23. November 2020 um 12:57 Uhr

Danke für diesen tollen Blog Artikel! Bin gespannt wo das noch hinführt und wie es weitergeht. LG. Nick

Marcel El-Ghori (webgo GmbH) #

Geschrieben am 30. November 2020 um 10:05 Uhr

Lieber Nick,

herzlich gerne! Wir freuen uns sehr darüber, dass Dir unsere WordPress Tipps zum Thema Dateibezeichnungen, Bildoptimierungen und Medien im Allgemeinen weiterhilft!

Liebe Grüße
Dein webgo Social Team

Folien #

Geschrieben am 7. März 2022 um 15:02 Uhr

Das sind wirklich tolle Tipps, danke für die unermüdliche Arbeit, die hier auf der Webseite geleistet wurde.

Lg Emma

Marcel El-Ghori (webgo GmbH) #

Geschrieben am 4. April 2022 um 07:39 Uhr

Liebes Folien Team,

herzlichen Dank für das liebe Feedback!

Liebe Grüße
Marcel vom webgo Social Team

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert