WordPress: Texte, Links, Bilder und Videos einbinden

Damit eure Beiträge attraktiv und erfolgreich sind, sollten verschiedene stilistische Punkte beachtet werden. Es sind oft die kleinen Details, die einen guten Beitrag von einem sehr guten Beitrag unterscheiden. Wenn euch die Handhabung des WordPress-Editors geläufig ist, könnt ihr euch damit beschäftigen, Texte zu verfassen und semantisch korrekt auszuzeichnen, Links zu setzen, Bilder hochzuladen oder Videos und andere Medieninhalte zu integrieren.

Semantik

Die semantische Auszeichnung der verschiedenen Elemente ist für die korrekte Darstellung und für Suchmaschinen von höchster Bedeutung. Eine Überschrift muss beispielsweise in WordPress auch als Überschrift ausgezeichnet werden. Es reicht nicht aus, den Text zu vergrößern und fett darzustellen, auch wenn optisch kein Unterschied erkennbar ist.
Neben der Indizierbarkeit der Website durch Suchmaschinen nutzen viele Anwender externe Dienste wie Feed-Reader oder Apps, um die Inhalte der Website zu lesen. Wenn die Semantik nicht stimmt, werden die Inhalte fehlerhaft an Drittanbieter übertragen.

Typische Fehler

Folgende Fehler werden häufig gemacht und führen zu schlechtem Quellcode. Auch in Textverarbeitungsprogrammen wie Microsoft Word sollten diese Fehler übrigens nicht begangen werden.

Korrekte Auszeichnung von Inhalten

Der Titel eines Beitrags oder einer Seite wird von den meisten Themes als <h1> (Überschrift 1) dargestellt. Im WordPress-Editor sollte daher keine Überschrift 1 verwendet werden, da sie sonst doppelt vorkommt. Bitte beginnt bei der Auszeichnung von Überschriften mit einer <h2> (Überschrift 2). Bitte beachtet, dass dieses Verhalten zwar typisch ist, aber nicht unbedingt für eure Seite zutreffen muss. Wenn ihr unsicher seid, fragt euren Webdesigner.

Fehler vermeiden

WordPress bietet im visuellen Editor alle Möglichkeiten, um Texte semantisch fehlerfrei auszuzeichnen. Die Fehler entstehen immer weil Redakteure falsche oder keine Auszeichnungen verwenden. Im Idealfall werden die Inhalte direkt in WordPress geschrieben. Das vermeidet viele Fehler.

Als unformatierten Text einfügen

Um Fehler mit vorformatiertem Text zu vermeiden bietet es sich an die Schaltfläche »Als unformatierten Text einfügen« zu verwenden. Anschließend müssen die Formatierungen zwar innerhalb von WordPress wieder nachgetragen werden, aber die Fehlerquote sinkt erheblich. Nach einem Klick auf den entsprechenden Button gibt WordPress (ab Version 3.9) folgende Information aus:

»Einfügen erfolgt jetzt im reinen Text-Modus. Inhalte werden nun als reiner Text eingefügt bis du diese Option abschaltest. Wenn du formatierte Inhalte aus Microsoft Word einfügen möchtest, versuche diese Option abzuschalten. Der Editor wird den aus Word eingefügten Text automatisch bereinigen.«

Über dieses Icon im visuellen Editor können alle in die Zwischenablage kopierten Formatierungen entfernt werden
Über dieses Icon im visuellen Editor können alle in die Zwischenablage kopierten Formatierungen entfernt werden

Sonderzeichen

Sonderzeichen können in WordPress direkt über den Editor eingefügt werden. Bitte vermeidet unbedingt falsche Sonderzeichen wie (c) anstelle von © etc.

Über dieses Icon im visuellen Editor kann eine Liste mit Sonderzeichen aufgerufen werden.
Über dieses Icon im visuellen Editor kann eine Liste mit Sonderzeichen aufgerufen werden.

Artikel werden i. d. R. mit einem kurzen Einleitungstext »angerissen«. Das Ende dieser Einleitung muss mit dem sog. »More-Tag« markiert werden. Auf Übersichtsseiten (z. B. auf der Startseite) endet der Beitrag dann an dieser Stelle und WordPress zeigt einen Weiterlesen-Link an. Wie die genaue Formulierung des Links lautet, ist abhängig vom Theme.

Mit diesem Icon im Editor fügt ihr den More-Link ein.
Mit diesem Icon im Editor fügt ihr den More-Link ein.

Der Link kann über die Text-Ansicht des Editors individuell angepasst werden. Folgender More-Link überschreibt die Standard-Formulierung:

<!--more Diesen schönen Beitrag anzeigen-->

Ihr befindet euch wahrscheinlich in der Detailansicht des Beitrags. Der Artikel wird nur auf Übersichtsseiten wie der Startseite oder Archiv-Seiten gekürzt.

Links werden über die entsprechende Schaltfläche eingefügt. Zunächst muss der Text markiert werden, der verlinkt werden soll. Anschließend reicht ein Klick auf das Icon »Link einfügen«.

Icon zum Einfügen von Links. Wenn der Link bereits vorhanden ist, kann über dieses Icon der Link bearbeitet werden.
Icon zum Einfügen von Links. Wenn der Link bereits vorhanden ist, kann über dieses Icon der Link bearbeitet werden.

Im nun erscheinenden Pop-Up wird das Linkziel angegeben.

Bedienfeld zum Einfügen eines Links

Für weitere Optionen wie die unbedingt zu empfehlende Vergabe eines Titels klickt ihr auf das Zahnrad. Das Pop-Up erweitert sich, Links auf andere Websites können in einem neuen Fenster oder Tab geöffnet werden.

Erweiterte Optionen zum HInzufügen eines Links.

Um einen Link zu entfernen, muss der entsprechende Textabschnitt zunächst markiert werden. Anschließend reicht ein Klick auf die Schaltfläche »Link entfernen«.

Über dieses Icon können Links in markierten Textpassagen entfernt werden.
Über dieses Icon können Links in markierten Textpassagen entfernt werden.

Dateien einfügen

Wenn Dateien eingefügt werden sollen, beispielsweise ein PDF-Dokument, reicht ein Klick auf »Dateien hinzufügen«. Die Cursor-Position bestimmt dabei, an welcher Stelle der Link später erstellt wird. Nachdem die Datei ausgewählt und hochgeladen wurde, wird die Mediathek angezeigt. Auf der rechten Seite kann unter »Titel« der verlinkte Text formuliert werden. Im Abschnitt »Anzeigeeinstellungen für Anhänge« muss der »Link zur Medien-Datei« ausgewählt werden.

Dialog zum Upload von Medieninhalten

Dateien in neuem Fenster öffnen

Wenn Dateien in einem neuen Fester bzw. Browser-Tab geöffnet werden sollen, sind zwei Schritte notwendig. Nachdem der Link zur Medien-Datei in den Beitrag eingefügt wurde, muss der Link angeklickt werden. Über den Button »Link einfügen« kann der Link editiert werden.

Bilder einfügen

Der Dateiname der Grafik sollte Stichwörter enthalten. Die Wörter müssen mit Minus getrennt werden (nicht mit _Unterstrich!). Beispiel: wiese-sonne.jpg ist viel besser als DCM2200.jpg und ebenfalls besser als wiesesonne01.jpg.

Medienuploader von WordPress. Bitte vergesst nicht, die Angaben auf der rechten Seite auszufüllen

Wenn Bilder in einen Beitrag eingefügt werden sollen, muss zunächst der Cursor an entsprechender Stelle positioniert werden. Anschließend klickt ihr auf »Dateien hinzufügen« oder zieht die Grafik per Drag & Drop in den Editor-Bereich.

Seit WordPress 3.9 könnt ihr ein Bild per Drag & Drop in den Beitrag ziehen. Es wird automatisch in der Mediathek abgelegt

Es öffnet sich die Mediathek, in die per Drag and Drop oder per Dateiupload die Grafik hochgeladen werden kann. Nachdem die Datei hinzugefügt wurde, erscheinen auf der rechten Seite Detailinformationen. Hier müssen einige Angaben gemacht werden:

Titel

Titel des Bildes. Auf Anhang-Seiten wird der Titel häufig als Überschrift verwendet (abhängig vom Theme).

Beschriftung

Das ist die sichtbare Bildunterschrift. Sie sollte möglichst kurz ausfallen.

Alternativtext

Der Alternativtext sollte den Inhalt des Bildes beschreiben. Der Alternativtext hilft sehbehinderten Menschen und Suchmaschinen bei der Identifikation des Inhalts. Der Alternativtext ist zwingend notwendig!

Beschreibung

Detaillierte Beschreibung des Bildes auf der Bild-Detailseite (sofern vorhanden).

Ausrichtung

Am Abschnitt »Ausrichtung« wird festgelegt, ob das Bild zentriert, links- oder rechtsbündig dargestellt wird.

In diesem Abschnitt kann festgelegt werden, was passieren soll, wenn das Bild angeklickt wird. Wenn das Bild nicht anklickbar sein soll, wird kein Link verwendet. Andernfalls könnt ihr eine Ziel-URL angeben, um auf eine bestimmte Adresse im Internet zu verlinken. Ein Link zur Mediendatei öffnet das Bild in einem Modal Screen (Overlay). Eine Verlinkung zur Anhang-Seite öffnet das Bild auf einer Bild-Detailseite. Der Webdesigner des WordPress-Themes hat die Möglichkeit, diese Anhang-Seite individuell zu gestalten und ergänzende Informationen zum Bild (z.B. die Größe, das Dateiformat oder die Beschreibung) anzuzeigen. Wie die Anhang-Seite aussieht, ist abhängig vom Theme.

Größe

Im Abschnitt »Größe« können verschiedene Standard-Größen für Bilder ausgewählt werden. In den Einstellungen von WordPress kann festgelegt werden, welche Größen zur Verfügung stehen. Innerhalb des Medien-Uploaders werden nur die Größen zur Auswahl gestellt, die der Bildabmessung entsprechen. WordPress vergrößert Grafiken nicht über ihre tatsächliche Abmessung hinaus.
Die besten Ergebnisse erhaltet ihr, wenn das Bild bereits vor dem Upload mit einem Programm wie Photoshop auf die korrekte Größe beschnitten und im korrekten Dateiformat gespeichert wurde. Wenn ihr eine kostenlose, webbasierte Lösung für das Beschneiden von Fotos sucht, schaut euch einmal iPiccy an.

Nachdem alle Angaben zum Bild gemacht wurden, kann das Bild in den Editor eingepflegt werden. Wenn das Bild nachträglich gelöscht oder editiert werden soll, reicht ein Mouse-Over über dem Bild. Es erscheinen dann entsprechende Bearbeitungs-Icons.

YouTube, Vimeo, Twitter, Soundcloud etc.

In WordPress können dank einer Technologie namens oEmbed diverse prominente Dienste unkompliziert eingebunden werden. U.a. können YouTube-Videos, Tweets, Spotify-Songs oder Slideshare-Präsentationen eingebunden werden. Dazu muss jeweils nur die URL zum entsprechenden Inhalt in der visuellen Ansicht des Editors eingetragen werden. Eine vollständige Liste aller unterstützten Dienste findet ihr hier.

YouTube, Video, Twitter & Co. können in WordPress über einen Link in einen Beitrag integriert werden
Screenshot des Beitrags, wenn ein YouTube-Link gepostet wurde

Bildergalerien

Mit WordPress können unkompliziert Bildergalerien erstellt und verwaltet werden. Um eine Bildergalerie zu erzeugen, müssen zunächst die gewünschten Bilder hochgeladen werden (Medien hinzufügen). Innerhalb der Mediathek findet ihr auf der linken Seite den Menüeintrag »Galerie erstellen«. Es öffnet sich eine weitere Seite, in der die gewünschten Bilder per Klick ausgewählt werden können. Achtet darauf, auf der rechten Seite für jedes Bild die Meta-Daten korrekt einzutragen!

Upload-Dialog für eine Galerie

Nachdem alle Bilder ausgewählt wurden, klickt ihr auf den Button »Erstelle eine neue Galerie«.

Auf der nächsten Seite legt ihr fest, in welcher Reihenfolge die Bilder erscheinen und was passieren soll, wenn der Besucher ein Bild anklickt. Wie bei normalen Bildern sollte hier die Option »Link zur Anhang-Seite« gewählt werden. Die Reihenfolge der Bilder kann per Drag and Drop eingestellt werden. Alternativ setzt ihr den Haken bei »Zufällige Sortierung«. Dann werden die Bilder bei jedem Seitenaufruf neu gemischt.
Die Anzahl der Spalten bestimmt, in wie viele Spalten (und folglich auch Zeilen) die Galerie aufgebaut wird.

Galerie-Einstellungen innerhalb des Medien-Uploaders

Wenn alle Einstellungen gesetzt wurden, wählt ihr den Button »Galerie einfügen«. WordPress fügt die Galerie dann in den Beitrag ein und zeigt im visuellen Editor einen Platzhalter an. Per Mouse Over über den Platzhalter kann die Galerie editiert oder gelöscht werden.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 4 Kommentare

  1. bigjuergo
    schrieb am 25.05.2018 um 07:48 Uhr:

    kann ich bilder auf einen bestimmten blog eintrag verlinken?

    Antworten
    • Jonas Hellwig
      schrieb am 27.05.2018 um 08:40 Uhr:

      Du könntest direkt auf die Bilddatei verlinken (Rechtsklick > Bild in neuem Tab öffnen … ).

      Antworten
  2. beni
    schrieb am 03.04.2018 um 21:30 Uhr:

    hey, kann man bei wp auch bilder von einer anderen seite einbinden, wenn man keinen webspace mehr hat?

    Antworten
    • Jonas Hellwig
      schrieb am 06.04.2018 um 11:01 Uhr:

      Hallo Beni, du kannst Bilder von einer anderen URL einbinden. Schau mal hier im Screenshot, dort siehst du links »von URL einbinden«. Dann betreibst du allerdings Hotlinking.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →