kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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.

    • Abstände werden mit mehrmaligem drücken der Enter-Taste erzeugt
    • Inhalte werden mit Leerzeichen eingerückt
    • Text wird lediglich fett ausgezeichnet und mit Abständen versehen um Überschriften zu erzeugen
    • Aufzählungen werden mit Gedankenstrichen erzeugt
    • Zitate werden mit kursivem Text erzeugt

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 geschriebene. 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.

Der More-Link (Weiterlesen-Link, auch More-Tag)

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-->

Häufige Frage: Warum wird der Artikel trotz vorhandenem More-Link nicht gekürzt?

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

Links einfügen

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. Auch ein Titel sollte unbedingt vergeben werden. Links auf andere Websites können in einem neuen Fenster oder Tab geöffnet werden.

Bedienfeld zum einfügen eines Links
Bedienfeld zum einfü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 »Medien 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 »Dateianhang Anzeigeeinstellungen« muss der »Link zur Medien-Datei« ausgewählt werden.

Dialog zum Upload von Medieninhalten
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.
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
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.

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.

Link

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 zu Mediendatei öffnet das Bild in einem neuen Browsertab. 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. Welche Größen das sind kann in den Einstellungen von WordPress festgelegt werden. 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
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
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
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. Diese Funktion ist bei Themes von kulturbanause® meist abgeschaltet und hat keine Auswirkung. Um eine perfekte Darstellung auf allen Displaygrößen zu gewährleisten erhöht sich die Spaltenzahl automatisch bei größeren Displays.

Galerie-Einstellungen innerhalb des Medien-Uploaders
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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.