Heute möchte ich euch mal kurz erklären wie man in WordPress ein Wort oder Bild verlinken kann. Eigentlich ist das dank dem Visuellen Editor so einfach wie in Word. Aber es gibt Orte in WordPress wo kein so ein Editor eingebaut ist (zum Beispiel in der Kategorieansicht auch in WooCommerce)
Verlinken mit Visuellen Editor
- Man öffnet die Seite den Beitrag und sucht das Wort welches man verlinken will aus und markiert es
- Danach klickt man auf den Ketten-Button und schon öffnet sich ein neues Fenster
Hier fügt man dann unter URL die korrekte URL ein und zwar den ganzen URL – also inkls http: usw. – Sobald man fertig ist, einfach auf Link hinzufügen und schon ist das Wort verlinkt.
Kleiner Tipp
Wenn die verlinkte Seite innerhalb der eigenen Webseite liegt und es noch im Sinn der Userführung ist, dann kann man einfach den normalen Link setzen. Wenn aber die verlinkte Seite extern ist, dann sollte man das Kästchen „Öffne Link in einem neuen Tab“ aktivieren.
Verlinken von Hand
Wenn man ein Link von hand setzen muss, dann benützt man den HTML Code, aber auch das ist nicht wirklich kompliziert.
- Hier sucht man sich das Wort aus das man verlinken möchte (Oder schreibt zuerst den Text fertig) und merkt sich die URL auf die man verlinken möchte.
- Dann sieht das ganze etwa so aus
- Ein Link von Hand setzt man so – in dem man das Wort das verlinkt werden möchte mit einem TAG (so eckige Klammern) – davor und danach – eingefasst wird
1
[ a href="https://www.chefblogger.me">Chefblogger</a ]
In diesem Beispiel wird das Wort Chefblogger mit der www.chefblogger.me Url verlinkt. Ihr müsst jetzt eigentlich nur noch die URL ersetzen und bei euch einfügen und abspeichern.
- Wenn ihr ein Link innerhalb der Seite verlinken wollt – also auf einen Artikel oder Seite – dann sieht der Code so aus wie bereits oben gezeigt
1
[ a href="https://www.chefblogger.me">Chefblogger</a ]
Solltet ihr aber extern verlinken wie zB auf eine andere Webseite dann, macht es sinn, dass ihr den Link in einem neuen Tab Feld/ neue Seite in eurem Browser öffnet – dafür erweitert ihr den Befehl mit target=“_blank“
1
[ a href="http://www.google.ch" target="_blank">Google</a ]
- So könnte dann das Ganze aussehen:
Und dann könnt ihr die Seite ganz einfach abspeichern und dann im Frontend testen/anschauen
Bild verlinken
Wenn man ein Bild verlinken möchte, ist es am einfachsten wenn man kurz ohne Visuellen Editor arbeitet und das ganze direkt coded.
- Ein Bild link sieht immer so ähnlich aus
1
[ img src="http...." ]
je nachdem können noch weitere Befehle eingebaut sein, aber die könnt ihr einfach ignorieren. Wichtig ist das ein Bild immer von einem < und > eingerahmt ist.
- Wenn ihr so ein Bild verlinken müsst, könnt ihr es ebenfalls wie oben beschrieben verlinken
1
[ a href="https://www.chefblogger.me">Chefblogger</a ]
- Aber dann sieht das ganze halt so aus
1
[ a href="https://www.chefblogger.me"><img src="http...."></a ]
- Wenn der Link in einem neuen Fenster geöffnet werden soll, dann sieht der Code dann so aus
1 2 3
[ a href="https://www.chefblogger.me" target="_blank" ] <img src="http...."> </a>
P.S diese [] Klammern in <> umwandeln
Ihr seht, ein Wort verlinken ist eigentlich eine ganz einfache Sache. Kann man den visuellen Editor verwenden, dann ist es nur eine sache von 3 Klicks und sonst muss man ein wenig „coden“. Aber auch dies ist nicht wirklich kompliziert.
5***** Sterne, besser kann man es nicht beschreiben.
LG vom Niederrhein
Derk
hoi Derk – freut mich wenn ich dir helfen konnte 🙂