Externe Links kennzeichnen

link_externAb heute werden externe Links bei mir mit einem extra Icon gekennzeichnet. Das erleichtert die Entscheidung den Link in einem neuen Fenster oder nicht zu öffnen ;). Außerdem weiß man so vorher schon wann man die Seite verlässt und wann nur auf eine interne Seite verwiesen wird.

Das ganze funktioniert sehr ressourcensparend mit einem CSS 3 Selektor. Die Idee dazu habe ich von den Webkrauts übernommen. Für meinen Blog aber etwas angepasst, so dass nur Links innerhalb der Posts mit dem Icon versehen werden und keine Links in der rechten Navigation. Dort sah das nicht gut aus :). Außerdem habe ich https:// URLs hinzugefügt, die wurden vorher nicht erkannt.

Der CSS-Code dafür lautet:

.chapter a[href^='http://'],
.chapter a[href^='https://'] {
    padding-right: 15px;
    background: url(images/link_extern.gif) right no-repeat;
}
.chapter a[href^='https://sjmp.de'],
.chapter a[href^='http://sjmp.de'] {
    padding-right: 0;
    background: none;
}

Damit werden zuerst alle Links die mit http:// oder https:// anfangen und innerhalb eines Elements mit der Class chapter sind, mit einem Icon am Ende des Links versehen. Dazu wird einfach durch padding-right etwas Platz geschaffen, welcher dann mit dem Hintergrundbild, welches rechts positioniert ist, wieder aufgefüllt wird. So hat man schon mal alle Links markiert, man möchte jetzt aber nur die externen am Ende wirklich markiert haben, daher setzen wir die Einstellung für Links auf die eigene Seite wieder entsprechend zurück, dies geschieht im zweiten CSS Block. Natürlich ebenfalls nur für die Klasse chapter.

Eigentlich sehr leicht, und auch für alle aktuellen Browser erkennbar. Lediglich der IE<7 tut sich noch etwas schwer damit und führt den Code nicht aus, so entsteht aber auch kein direkter Nachteil.

Zusatz:
Möchte man zum Beispiel Links auf PDF Dateien besonders kennzeichnen, kann man dies leicht ebenfalls mit CSS 3 erledigen:

/* Schreibt hinter jedem PDF 'PDF' */
a[href$=".pdf"]:after {
font-size: 10px;
color: blue;
content: " [PDF]";
}

Danke an Stefan für den Tipp.

Nachtrag:

Wer das Sociable-PlugIn nutzt kann mit:

.chapter a[href^='https://sjmp.de'],
.chapter a[href^='http://sjmp.de'],
.sociable a[href^='http://'],
.sociable a[href^='https://'] {
    padding-right: 0;
    background: none;
}

anstatt des zweiten Teils des oberen Blocks, das Verändern der Links dort verhindern.

5 Gedanken zu „Externe Links kennzeichnen

  • 28. Dezember 2008 um 17:35
    Permalink

    Dafür gibts übrigens auch ein nettes Plugin -> Link Indication, der erkennt externe Links gleich automatisch und man kann bestimmten URLs ein eigenes Icon zuweisen, wie z.B. Wikipedia. Ist ne nette Spielerei und nützlich finde ich, macht aber vom Quellcode her denk ich genau das gleiche!

    Antworten
  • 28. Dezember 2008 um 17:39
    Permalink

    Jop, habe ich bei dir gesehen, bzw danach gegoogelt ;)
    Aber ich dachte mir, nen extra PlugIn macht WordPress nur „schwerer“, daher hab ichs selber in die CSS Datei eingetragen :). Leichter ist natürlich das PlugIn :).

    Antworten
  • 30. Januar 2009 um 12:55
    Permalink

    Danke für den Artikel. Eine kleine Erweiterung habe ich noch:


    /* Schreibt hinter jedem PDF 'PDF' */
    a[href$=".pdf"]:after {
    font-size: 10px;
    color: red;
    content: " [PDF]";
    }

    Das ist ganz nett, wenn man angezeigt bekommen möchte, dass ein Link ein PDF statt einer Seite öffnet.

    :-)

    Antworten
  • 30. Januar 2009 um 13:53
    Permalink

    Das ist eine gute Erweiterung, danke, nehme ich heute Abend mit in den Artikel auf.

    Antworten
  • 23. Februar 2009 um 20:07
    Permalink

    Ich bin mit „Link Indication“ recht zufrieden =)
    Aber eine eigene Umsetzung hat natürlich auch immer ihren Reiz ;-)

    Antworten

Schreibe einen Kommentar

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

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen zum Datenschutz...

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen