Habe über den Blog von Elke das plugin Link Indication wieder für mich entdeckt. Damit lassen sich diese niedlichen Grafiken neben Links im Content per CSS darstellen. Bereits definiert sind CSS-Klassen für allgemeine externe Links, für Links zu Wikipedia, zu WordPress, ftp-Links, mailto-Links sowie interne Links.
Natürlich hat mir dies nicht gereicht und so habe ich noch ein paar Klassen definiert, und zwar für Twitter-Links, Facebook-Links, Links zu amazon und die Klasse für interne Links habe ich neu definiert. Der Code der CSS-Datei im plugin-Verzeichnis sieht nun wie folgt aus:
/* For Link Indication plugin */
a.liexternal { padding-right: 12px; background: url(images/link-icon_external.gif) no-repeat right; }
a.liwikipedia { padding-right: 13px; background: url(images/link-icon_wikipedia.gif) no-repeat right; }
a.liwp { padding-right: 16px; background: url(images/link-icon_wordpress.png) no-repeat right; }
a.liftp { padding-right: 13px; background: url(images/link-icon_ftp.png) no-repeat right; }
a.limailto { padding-right: 18px; background: url(images/link-icon_mail.gif) no-repeat right; }
a.lipdf { padding-right: 12px; background: url(images/link-icon_pdf.png) no-repeat right; }
a.lizip { padding-right: 12px; background: url(images/link-icon_zip.png) no-repeat right; }
a.liamazon { padding-right: 12px; background: url(images/amazon.gif) no-repeat right; }
a.liintern { padding-right: 12px; background: url(images/liintern.gif) no-repeat right; }
a.litwitter { padding-right: 12px; background: url(images/litwitter.gif) no-repeat right; }
a.lifacebook { padding-right: 12px; background: url(images/lifacebook.gif) no-repeat right; }
In den Einstellungen des plugins sieht der Bereich für die Link-Typen wie auf dem Screenshot aus. Selbstverständlich darf nicht vergessen werden die Grafiken für die einzelnen Klassen auf den Webspace in das Verzeichnis /wp-content/plugins/link-indication/images zu laden. Außerdem ist es wichtig die eigene url aus dem Feld Blog URLs (your internal URLs) zu löschen, damit die internen Links auch wirklich so angezeigt werden wie in der neuen CSS-Klasse definiert.
Ist das nun einfach nur eine nette Spielerei um den Blog Design technisch ein wenig auf zu werten oder birgt dieses plugin wohl möglich einen Mehrwert für den Leser, der nun leichter zwischen den einzelnen Linkarten unterscheiden kann? Wie seht ihr das?
02. November 2009 um 21:06
Ich habe bei mir direkt im CSS definiert das bestimmte Links bestimmte Grafiken mitkriegen, da spart es das Plugin. :-)
02. November 2009 um 21:09
Wie definierst du denn z.B. das für alle Links zu amazon ein bestimmtes Icon angezeigt wird? Das würde mich interessieren. Das ftp, bestimmte Dateiendungen wie z.B. mp3 oder auch pdf über CSS ohne plugin zugeordnet werden können ist mir klar, aber bestimmte Domains?
02. November 2009 um 21:25
Ich habe das auch allerdings habe ich nur die voreingestellten Icons weil ich die anderen per CSS nicht zum laufen gebracht habe :redface:
Magst du mir nicht deinen Ordner zippen und schicken *augenklimper* :wink:
02. November 2009 um 21:27
@ Antje: Bitte keine sexuelle Belästigung, schon gar nicht mit deinen schönen Augen! Werde mich sofort an die Arbeit machen :wink: Hab ich denn ne E-Mail Adresse von dir ?
02. November 2009 um 21:28
Ganz einfach:
a[href^="http://www.amazon.de"], a[href^="http://amazon.de"]
{
padding-left: 16px;
background-image: url(‘pfad/zum/bild.jpg’);
background-repeat: no-repeat;
background-position: 0 0.28em;
}
In diesem Falle ist das Icon dann wie bei mir im Blog links, also vor dem Link. Anders wird es das Plugin auch nicht machen, nur das dann eben och das PHP-Script laufen muss, schreibt man es direkt ins CSS, dann eben nicht.
02. November 2009 um 21:30
Nochwas: Als erstes immer externe Links:
a[href^="http:"], a[href^="https:"]
und danach dann die Einzelfälle (Wiki, Amazon, etc.) bis hin zur eigenen Domain für die internen.
02. November 2009 um 21:32
@ Schrottie: Cool! Ich wusste nicht wie die Syntax aussehen muss – danke dir für diesen hilfreichen Tipp!
02. November 2009 um 21:33
Ich will mal auf deine Mehwertfrage zurück kommen. Ich selber nutze das Plugin auch und finde es schon Praktisch zu sehen. Also auch beim lesen in anderen Blogs.
grüße
Duergy
02. November 2009 um 21:35
@ Duergy: Das ist schön zu hören!
02. November 2009 um 22:06
EIN Augenklimpern ist bei dir schon sexuelle Belästigung :lol: jesses du bist aber leicht zu haben :mrgreen:
Ich danke dir :cool:
02. November 2009 um 23:53
Ansich für manche Links eine gute Sache, da ich aber Plugins nicht so mag werd ich es mal mit Schrottie´s Methode machen. Danke :-)
03. November 2009 um 06:49
@ Antje: Das heißt ja nicht das ich leicht zu haben bin nur weil du mich sexuell belästigst, wobei ich zugeben muss das ich es bei dir nicht als Belästigung auffassen würde :wink:
So, nu is aber gut :smile: :mrgreen:
03. November 2009 um 06:51
@ Markus: Bitte! Überlege auch schon die Methode vom Schrottie anzuwenden. Da hat man ein plugin gespart :wink:
03. November 2009 um 09:58
Und um Schrotties Variante (die ich auch schon länger nutze) zu ergänzen:
ZIPs, PDFs & andere Dateiendungen erwischt man mit
a[href$=".zip"]etc. (also mit $ statt ^), und wenn’s drum geht, dass etwas irgendwo im Link steht, muss der * ran:a[href*="search.yahoo"]passt dann auch auf de.search,yahoo.com etc.(Funktioniert übrigens nicht im IE6, aber der ist eh ‘ne Krankheit. ;) )
05. November 2009 um 20:26
Das Plugin hatte ich auch mal im Einsatz und fand es ansich auch nicht schlecht. Als ich aber gesehen hatte, wie es die Ladezeiten meiner Webseite in den Keller gezogen hat musste es leider auch wieder weichen.
14. November 2009 um 22:08
Das Plugin habe ich schon vor längerer Zeit wieder abgeschaltet. Nicht, dass ich es nicht schön gefunden habe. Aber irgendwann war ein Link dann für mich doch ein Link. Keine Ahnung, ob die Leser in diesen Kennzeichnungen ein Mehrwert sehen.
15. November 2009 um 09:12
@ hombertho: Die Ladezeiten meines Backend ssind enorm. Wie ich Gestern geschrieben habe hatte ich das plugin Twitter Tracke in Verdacht. Nach der Deaktivierung besserten sich die Ladezeiten auch – doch leider nur kurzzeitig. Werde also jetzt mein CSS modifizieren um auch dieses plugin abzuschalten.
Hoffe, das es dann wieder geht mit den Ladezeiten.
Pingback: Icon Work — instant-thinking.de
[MARKED AS SPAM BY ANTISPAM BEE]
I never thought I would agree with this opinion, but I’m starting to see things differently.
[ Nein, auch Links zu Pornoseiten mit Teenies haben hier keine Chance! Vielleicht solltest du das erst mal (ein)sehen! ]
Hi,
scheinbar hast du es ja seitdem wieder deaktiviert? Ich finde, es hat durchaus einen Mehrwehrt. Da ich viel über Open Source und Android schreibe, kam gleich ein Icon für den Android-Market hinzu. Es ist optisch wie auch informativ definitiv ein Mehrwert!
Wenn euch die Ladezeiten stören – Warum nicht einen Bugreport erstellen? Mit meinem Caching-Plugin merke ich jedenfalls nichts von längeren Ladezeiten im Frontend.