Links und Dateien einfügen 2/4

2.3 Links einfügen

Möchten Sie ein Wort oder einen Abschnitt Ihres Textes verlinken, so markieren Sie das Wort bzw. den Bereich und klicken dann auf den Button “Link einfügen/ändern” (Nr. 3 im HTML-Editor, Nr. 10 in der oberen Leiste des Visuellen Editors).

WordPress: Einen Link einfügen

Abbildung 6: Einen Link einfügen

Im sich daraufhin öffnenden Fenster müssen Sie die URL, bzw. die Ziel-Adresse des Links eingeben. Optional ist die Angabe nach einem Titel. Falls Sie möchten, dass der Link sich in einem neuen Fenster oder Tab öffnet, müssen Sie diese Option hier auswählen.

Hinweis:
Den “Titel” eines Links nennt man auch Tool-Tipp. Er erscheint wenn man mit der Maus über den Link fährt.

Zum Abschluss müssen Sie Ihre Angaben mit einem Klick auf den Button “Link hinzufügen” bestätigen.

WordPress: Ein Link im HTML-Editor

Abbildung 7: Ein Link im HTML-Editor

WordPress: Ein Link im Visuellen ditor

Abbildung 8: Ein Link im Visuellen ditor

2.3.1 Interne Verlinkung

Falls Ihr Link auf eine Seite oder einen Artikel verweisen soll, der von Ihnen selber stammt bzw. von ihrer eigenen Website, so können Sie auf den verlinkten Text “Oder verlinke auf bestehende Inhalte” klicken. Daraufhin erscheint eine Liste aller Artikel und Seiten.

Interne Verlinkung mit WordPress

Abbildung 9: Eine interne Verlinkung einfügen

Wählen Sie dann einfach das gewünschte Ziel aus, indem Sie es anklicken. Die notwendigen Angaben werden dann automatisch im oberen Teil des Fensters eingefügt.

WordPress: Interne Verlinkung auswählen

Abbildung 10: Auf bestehenden Inhalt verlinken

Auch hier müssen Sie Ihre Angabe am Schluss mit einem Klick auf den Button “Link hinzufügen” bestätigen.

Bei einer umfangreichen Website empfiehlt es sich die hier vorhandene Suchfunktion zu nutzen um den gewünschten Artikel oder die gewünschte Seite zu finden, auf die verlinkt werden soll.

2.3.2 Links bearbeiten

Wenn Sie einen Link im Nachhinein ändern möchten, dann hängt ihre Vorgehensweise davon ab, welchen Editor Sie nutzen.

Wenn Sie den HTML-Editor nutzen müssen Sie die Anpassungen im Code selber vornehmen. Arbeiten Sie aber im Visuellen Editor, so setzen Sie den Cursor “in” den verlinkten Bereich und klicken erneut auf den Button “Link einfügen/ändern”. Es öffnet sich wieder das Fenster mit den Angaben zum Link, die Sie nun aktualisieren können.

Möchten Sie den Link komplett entfernen müssen Sie den Cursor “in” den verlinkten Bereich setzen und dann den Button “Link entfernen” (Nr. 11 in der oberen Leiste des Visuellen Editors) anklicken.

2.4 Dateien einfügen

Für das Hinzufügen von Bildern und Dateien bietet WordPress eine Symbolleiste oberhalb des Editors, unabhängig davon welchen Sie nutzen.

WordPress: Dateien hochladen bzw. einfügen

Abbildung 11: Dateien hochladen bzw. einfügen

Zur Verfügung stehen Ihnen:

  1. Bild einfügen
  2. Video hinzufügen
  3. Audiodatei hinzufügen
  4. Sonstige Medien hinzufügen

Möchten Sie in Ihren Artikel Bilder oder Dateien einfügen, so wählen Sie aus der Menüleiste (unabhängig vom genutzten Editor) den passenden Eintrag aus.
Die dahinter liegenden Dialoge sind im Prinzip alle sehr ähnlich, so dass im Folgenden nur der Vorgang “Bild hinzufügen” erläutert wird.

2.4.1 Bild hinzufügen

Klicken Sie auf den Button “Bild einfügen”, um zum entsprechenden Dialog zu gelangen.

WordPress: Ein Bild einfügen

Abbildung 12: Ein Bild einfügen

Zunächst müssen Sie auswählen, wo das Bild “liegt”, das Sie einfügen möchten. WordPress bietet Ihnen drei Möglichkeiten an:

  1. Vom Computer: Das Bild befindet sich auf Ihrer lokalen Festplatte.
  2. Von URL: Das Bild ist auf einem Server bzw. im Web gespeichert.
  3. Mediathek: Das Bild wurde schon vorher bei einem anderen Artikel oder über die Mediathek in WordPress hochgeladen und muss nur noch in den Artikel eingefügt werden.
2.4.1.1 Vom Computer

Haben Sie ein Bild auf Ihrem Rechner gespeichert, das Sie in den Artikel einfügen möchten, so klicken Sie auf den Button “Dateien auswählen”. Es öffnet sich ein Windows-Fenster, in dem Sie die Datei auswählen. “Öffnen” Sie das Bild, um es in WordPress hochzuladen. Dieser Vorgang kann je nach Bildgröße ein paar Sekunden dauern.

Hinweis:
Unterstützt Ihr Browser kein Flash, so können Sie zum “Browserupload” wechseln.

Angaben zu einem hochgeladenen Bild in WordPress

Abbildung 13: Angaben zu einem hochgeladenen Bild

Nach dem Hochladen des Bildes bekommen Sie ein kleines Vorschaubild gezeigt, den Namen der Datei, die Sie hochgeladen haben, das Format der Datei (Dateityp) und den Zeitpunkt des Hochladens. Außerdem bekommen Sie die Größe des Bildes angezeigt.

Darunter müssen Sie einen “Titel” für das Bild eingeben. WordPress generiert diesen zwar automatisch, doch es empfiehlt sich oft, ihn anzupassen, damit er aussagekräftiger ist.

Im zweiten Feld “Beschreibung” geben Sie eine aussagekräftige Bezeichnung ein, denn dies ist der Inhalt des alt-Attributs, das erscheint, wenn das Bild nicht geladen werden kann.

Hinweis:
Je nach dem welche Version der deutschen Sprachdatei man nutzt, kann dieser Punkt auch Alternativtext heißen.

In der Zeile darunter können Sie eine “Beschriftung” eingeben. Diese wird als Bildunterschrift, die sog. “Caption” verwendet.

Die “Beschreibung”, die Sie im vierten Feld einfügen können, ist sichtbar, wenn das Bild Teil einer Galerie ist.

Soll das Bild verlinkt werden, so müssen Sie unter dem Punkt “URL” angeben, wohin diese Verlinkung führen soll. Sie können per Klick auf den Button “Datei-URL” die Verlinkung auf die Originaldatei oder mit dem Button “Artikel-URL” eine Verlinkung auf den Artikel einfügen. Sie können aber auch manuell einen eigenen Link einfügen.

Anschließend müssen Sie festlegen, wie das Bild in den Artikel eingebunden werden soll. Dabei geht es um die Ausrichtung und die Größe des Vorschaubildes. Wählen Sie die gewünschten Einstellungen und klicken Sie zum Abschluss auf den Button “In Artikel einfügen”.

Hinweis:
Auf die Funktion Als Artikelbild nutzen wird an späterer Stelle noch eingegangen.

Bild bearbeiten
In dem Fenster, das in Abbildung 13: Angaben zu einem hochgeladenen Bild dargestellt ist, finden Sie außerdem unterhalb des Vorschaubildes den Button “Bild bearbeiten”. Dieser führt Sie zu einer Arbeitsoberfläche, die es Ihnen ermöglicht Ihr hochgeladenes Bild rudimentär zu bearbeiten.

Bild bearbeiten mit der internen WordPress-Funktion

Abbildung 14: Bild bearbeiten mit der internen WordPress-Funktion

Sie können Ihr Bild hier beschneiden, drehen, spiegeln oder skalieren.

In den meisten Fällen empfiehlt es sich jedoch Bilder vor dem Hochladen mit einem Desktop-Bildbearbeitungsprogramm zu bearbeiten.

Hinweis:
Mehr über den sinnvollen Einsatz der Bildbearbeitungsfunktion von WordPress erfahren Sie in dem Artikel Die Bildbearbeitungsfunktion von WordPress sinnvoll nutzen.

2.4.1.2 Von URL
WordPress: Bild von einer URL einfügen

Abbildung 15: Bild von einer URL einfügen

Soll ein Bild eingefügt werden, das schon auf einem Server liegt, so wählen Sie den Punkt “Von URL” und es öffnet sich das Fenster aus Abbildung 15: Bild von einer URL einfügen.

Hier müssen Sie Angaben über die Herkunft des Bildes machen (“Bild-URL”), einen Bildtitel angeben und optional eine Beschreibung sowie eine Bildbeschreibung angeben. Sie können die Ausrichtung des Bildes bestimmen und ob es verlinkt werden soll.

Achtung:
Lassen Sie bitte Vorsicht walten, wenn Sie fremde Grafiken und Dateien einbinden, die auf anderen Servern liegen. So etwas nennt man Hotlinking und wird von den meisten Webmastern nicht gern gesehen. Wenn Sie ein Bild hotlinken, erscheint es in Ihrem Artikel. Sie haben einen zusätzlichen Inhalt, aber der Aufruf des Bildes passiert auf dem Server des anderen Webmasters. Er hat dadurch mehr Datendurchsatz auf seinem Server und je nachdem, wie oft ein Bild aufgerufen wird, hat er auch zusätzliche Kosten und der Server wird durch die zusätzlichen Anfragen belastet.
Hotlinken sollten Sie daher nur, wenn die Dateien auf ihrem Webspace liegen oder der Webmaster ihnen erlaubt hat, auf seine Bilder zu hotlinken. Manche Video- (z. B. YouTube) und Bild-Dienste (Flickr) erlauben explizit das Hotlinken der Dateien, die auf ihren Servern liegen. Ein weiterer Aspekt sind die rechtlichen Folgen. Nur weil ein Bild auf einer Website eingebunden ist, heißt das noch lange nicht, dass ein anderer Webmaster dieses Bild nutzen darf. Indem Sie ein Bild hotlinken, machen Sie es zum eigenen Inhalt und da die meisten Bilder im Internet urheberrechtlich geschützt sind, könnte das für Sie unangenehme Konsequenzen haben. In diese Falle tappen leider auch sehr erfahrene Webmaster.

2.4.1.3 Mediathek

Möchten Sie ein Bild in Ihren Artikel einfügen, das bereits in WordPress hochgeladen wurde (Menüpunkt: “Mediathek / Datei hinzufügen”), so wählen Sie die Option “Mediathek”. Hier erhalten Sie eine Übersicht über die verfügbaren Bilder.

WordPress: Bild aus der Mediathek hochladen

Abbildung 16: Bild aus der Mediathek hochladen

Um ein Bild aus der Mediathek einzufügen, klicken Sie auf den Link “Anzeigen”. Daraufhin öffnet sich ein Fenster, das dem von der Abbildung 13: Angaben zu einem hochgeladenen Bild entspricht. Überarbeiten Sie dort evtl. die Angaben und fügen Sie das Bild dann mit einem Klick auf den Button “In Artikel einfügen” ein.

Haben Sie ein Bild in Ihren Artikel eingefügt, so wird es entweder im Code angezeigt (HTML-Editor) oder wirklich so, wie es auch später für den Besucher des Blogs sichtbar ist (Visueller Editor).

WordPress: Bild im HTML-Editor

Abbildung 17: Bild im HTML-Editor

WordPress: Bild im Visuellen Editor

Abbildung 18: Bild im Visuellen Editor

2.4.2 Bilder bearbeiten

Sowohl im HTML-Editor wie auch im Visuellen Editor haben Sie nach dem Einfügen immer noch die Möglichkeit die Größe und die Positionierung des Bildes nachträglich zu ändern.

Im HTML-Editor geschieht dies über einen Eingriff im Code. So könnten Sie z. B. die Ausrichtung des Bild durch eine einfache Änderung im Code verändern:

 

Das Backend von WordPress
Listing 1: Code für ein zentriert eingefügtes Bild

 

Das Backend von WordPress
Listing 2: Code für ein linksbündig eingefügtes Bild

Möchten Sie eine Änderung der Positionierung im Visuellen Editor vornehmen, so müssen Sie mit der Maus das Bild anklicken (es aktivieren) und dann auf das erscheinende Symbol “Bild bearbeiten” klicken.

WordPress: Bild im Visuellen Editor bearbeiten

Abbildung 19: Bild im Visuellen Editor bearbeiten

Daraufhin öffnet sich ein neues Fenster, in dem Sie das Bild bearbeiten können.

WordPress: Eingefügtes Bild im Nachhinein bearbeiten

Abbildung 20: Eingefügtes Bild im Nachhinein bearbeiten

Hier können Sie nun neben der Größe und der Ausrichtung auch den Titel, die Beschreibung, die Beschriftung und die Verlinkung ändern.

Auf dem Reiter “Erweiterte Einstellungen” haben Sie noch weitere Möglichkeiten, um die Präsentation bzw. die Darstellung Ihres Bilds zu beeinflussen.

WordPress: Erweiterte Möglichkeiten zum Bearbeiten eines bereits eingefügten Bildes

Abbildung 21: Erweiterte Möglichkeiten zum Bearbeiten eines bereits eingefügten Bildes

Das aktivierte Bild können Sie mit den Anfassern zudem in der Größe ändern oder aber auch löschen ohne in den Bearbeitungsmodus zu wechseln.

Löschen Sie den Code (HTML-Editor) oder das Bild (Visueller Editor) so wird nur die Verankerung im Artikel gelöscht. Das Bild selber bleibt erhalten und kann über die Mediathek erneut eingefügt werden.

2.4.3 Bilder und Videos mit oEmbed einfügen

Wurde bei den Einstellungen der WordPress-Installation die Automatische Einbettungen aktiviert belassen (Standardeinstellung), dann können Sie Bilder und Videos auch einfügen, indem Sie lediglich die URL des betreffenden Bildes oder Videos einfügen.

Voraussetzung dafür ist, dass der Dienst, bei dem das Bild oder das Video präsentiert wird, oEmbed unterstütz.

Web-Hinweis:
Mehr zu oEmbed können Sie auf der Website oembed.com erfahren.

Unterstützt wird oEmbed z. B. von Flickr und YouTube. Möchten Sie also ein YouTube-Video in einen Artikel einbinde, genügt es die URL des Videos einzufügen – unabhängig davon welchen Editor sie nutzen.

In WordPress ein Video mit oEmbed einfügen

Abbildung 22: Ein Video mit oEmbed einfügen

2.4.4 Galerien erstellen

Möchten Sie in einen Artikel mehrere Bilder in einer Galerie – also zusammenhängend – einfügen, so müssen Sie die gewünschten Bilder zuerst in WordPress hochladen und mit den gewünschten Angaben versehen (Titel, Beschreibung etc.) ohne sie in den Artikel einzufügen. Daraufhin wird Ihnen in der Übersicht der neue Link “Galerie (n)” angezeigt.

Eine Galerie in WordPress einfügen

Abbildung 23: Eine Galerie einfügen

Hier können Sie zunächst die Reihenfolge der Bilder festlegen. Dies geht am einfachsten per Drag & Drop bzw. Klicken & Ziehen. Sortieren Sie Ihre Bilder einfach, indem Sie sie an ihre gewünschten Plätze ziehen.

Nun können Sie entscheiden, womit die einzelnen Vorschau- bzw. Miniaturbilder verknüpft bzw. verlinkt sein sollen. “Bilddatei” bedeutet, dass die Bilder, wie bei Vorschaubildern üblich, mit ihrem eigenen Original verlinkt sind. Die Option “Anhang-Seite” öffnet eine Galerieseite, auf der auch die Beschreibung des Bildes, die Sie evtl. eingefügt haben, sichtbar ist sowie das folgende und das vorangehende Bild in der Galerie.

Die Sortierung der Bilder können Sie frei bestimmen. “Menüreihenfolge” in Verbindung mit “Aufsteigend” bedeutet hierbei, dass das in der Liste unterste Bild als erstes gezeigt wird. Sie können aber auch eine Sortierung nach “Titel” oder “Datum/Zeit” oder “Zufällig” wählen.

Die Galerie kann zudem mit einer unterschiedlichen Anzahl von Spalten dargestellt werden. Sie können zwischen 1 bis 9 Spalten wählen.

Haben Sie alle Einstellungen getätigt, müssen Sie auf den Button “Galerie einfügen” klicken, um sie in Ihren Artikel einzufügen.

Anmerkung:
Die Galerie wird im Editor nur symbolisch dargestellt und nicht mit ihren einzelnen Bildern. Diese sind erst im eigentlichen Artikel zu sehen.

2.4.4.1 Mehrere Galerien

Falls Sie mehrere Galerien in einem Artikel einfügen möchten, geht dies nur unter zu Hilfenahme von Code.

 

oder

 

Die Zahlen stehen dabei für die ID des jeweiligen Bildes. Diese erscheint in der Statusleiste des Browsers, wenn man in der Medienübersicht mit der Maus über das entsprechende Bild fährt. Man lädt also, wie gehabt alle Bilder hoch und ergänzt dann den Code

mit den entsprechenden IDs der gewünschten oder nicht gewünschten Bilder.

Web-Hinweis:
Mehr zum Thema Galerien und WordPress erfahren Sie auch auf unserer Website zum WordPress-Buch.

2.5 Im Vollbilmodus arbeiten

Sowohl mit dem Visuellen wie auch mit dem HTML-Editor können Sie in den Vollbildschirm-Modus wechseln.

Hier finden Sie eine Oberfläche vor, die Ihnen das Konzentrieren auf das Wesentliche, also auf den Inhalt Ihres Textes, erleichtern soll. Dafür werden alle nicht benötigten Elemente ausgeblendet. Wenn Sie auch auf den Einsatz der Maus verzichten bzw. diese nicht bewegen reduziert sich der Inhalt Ihres Bildschirmes auf nichts anderes als auf den Text, den sie gerade verfassen.

Der Vollbildmodus bei WordPress

Abbildung 24: Vollbildmodus

So.

Das war eine ganze Menge und im nächsten Teil wird es dann um die einzelnen Module im Bereich der Artikelerfassung gehen und was sie einem für Möglichkeiten eröffnen.

Über Denis

I am Denis. I am a proud single father of my beloved child. And I have an adorable dog. Honesty is what matters to me. Taking care of my business in my belongings as a success. My persistence is for all, who wants to be on such ride. Exchanging is, you and me, to find the right way to make money. Taking response that is the way how I am, as so is my team.

Die Kommentarfunktion ist geschlossen.