Eigenen Blog mit kostenlosen Icons aufpeppen

6. April 2009 - 18:51 | Autor

verfasst von: Blog-Experiment |

Im Netz gibt es zahllose Iconsets, die kostenlos für alle zur Verfügung stehen. Das wichtigste bei einem Blog mögen die Beiträge sein, doch auch das Gesamtoutfit des Blogs ist entscheidend.

Und hier helfen kleinere Icons doch ganz entscheidend, zum einen etwas Auflockerung reinzubringen und dem Leser zum anderen schnelle Anhaltspunkte zur Orientierung an die Hand zu geben. Denn ein Icon fällt doch wesentlich schneller ins Auge als es Überschriften bei schnellen Überfliegen tun. Außerdem ist den meisten Lesern, die regelmäßig im Netz unterwegs sind, die Bedeutung der unterschiedlichen Bildsymbole auch schon so vertraut, dass sie selbst bei schnellem durchscrollen erkennen, was sich wo wiederfindet.

Bestes Beispiel ist hier sicherlich ein Icon mit dem in der Blogosphäre sehr bekannten Feed-Symbol.

Somit sind Icons also weit mehr als nur unbedeutende Spielerei.

Ich habe gestern Abend meinen Blog um verschiedene Icons ergänzt. Quellen für die Icons sind: http://www.famfamfam.com/lab/icons/silk/ und http://www.smashingmagazine.com/2008/08/27/on-stage-a-free-icon-set
Vor allem ersteres ist immens umfangreich - da dürfte für jeden was interessantes dabei sein.

Eine Vielzahl weiterer schicker Iconsets hat Dr. Web erst letztlich in einem eigenen Artikel zusammengestellt. An dieser Stelle möchte ich eine kleine Einbauanleitung bereitstellen. Natürlich gibt es wie immer viele Wege zum Ziel.

Direkt im Template

Die einfachste Methode dürfte sein, die Icons direkt in den Images-Ordner des aktiven Templates zu packen und diese dann über den Template-Quellcode einzubinden. Um das ganze in dein Template einzubinden, ist es von Vorteil, wenn du schon ein wenig mit dem Prinzip und Aufbau von Templates vertraut bist. In Kürze wird es im Rahmen der Blog-Start-Serie auch eine Anleitung zum Gestalten eines eigenen Templates geben - dann folgen ein paar mehr Details.

Das Vorgehen hier nur kurz beschrieben: über die Menüpunkte “Design -> Editor” im Administrationsbereich gelangst du an den Editor zum Bearbeiten von Templates. Suche dort die Textstelle in der Datei (oft index.php oder single.php für einzelne Artikelseiten), wo du ein Icon einfügen möchtest. Den Quelltext rundherum kannst du zunächst einmal weitestgehendst ignorieren.

Du solltest nur sicher gehen, dass du auch die richtige Stelle für dein Icon erwischt hast. Im Zweifelsfall hilft es, mittels Trial-und-Error auszutesten. Am besten aber nicht in einem aktiven Theme und vorher eine Sicherung des Themes anlegen. Für letzteres einfach den kompletten Ordner wp-content per FTP auf den heimischen Computer in ein Backup-Verzeichnis herunterladen.

Um das Icon schön vertikal mittig neben dem Text zu platzieren, kommt folgender Code zum Einsatz:

<img src="<?php bloginfo('template_directory'); ?>/images/icons/comments.png"
style="vertical-align: middle;"> Text, vor dem du das Icon einfügen willst

Das Ergebnis sieht dann z.B. wie folgt aus:

Man muss das style-Attribut natürlich nicht zwingend so direkt einbinden. Wer sich ein bißchen mit CSS auskennt, der weiß, dass es mindestens zwei Alternativen gibt. Das Ergebnis soll uns so aber vorerst genügen. Natürlich kann man die Icons auch auf gleicher Höhe neben dem Text positionieren. Für die Angabe

vertical-align: bottom;

sieht das Ergebnis folgendermaßen aus:

Analog funktioniert auch

vertical-align: top;

Die Methode oben klappt so einfach aber nicht in der Sidebar, wenn man dort auf ein widgetisierbares Template setzt. Ob du ein widgetisierbares Template einsetzt, kannst du überprüfen, indem du im Administrationsbereich im Menü “Design -> Widgets” anwählst. Dort erscheint entweder die Meldung, dass das Template keine Widgets unterstützt oder die Möglichkeit Widgets einzurichten. Wie man aber auch dort bei aktiven Widgets recht einfach Icons einbinden kann, steht im nächsten Abschnitt.

Mittels CSS-Technik

Zunächst legen wir im Template-Verzeichnis eine neue CSS-Datei namens “icons.css” an. Dazu erstellen wir die entsprechende Datei einfach ohne Inhalt auf dem heimischen PC und laden sie anschließend mit dem FTP in das gewünschte Theme-Verzeichnis des Blogs (Themes finden sich bei der aktuellen WordPress-Version unter wp-content/themes/NamedesThemes).

Anschließend arbeiten wir wie oben an den Template-Dateien weiter. In diesem Fall nehmen wir uns die style.css vor. Unter dem dort enthaltenen Kommentar, der zur automatischen Erkennung in WordPress wichtige Informationen bereitstellt und mit /* beginnt und mit */ endet folgendes ein:

@import url('icons.css');

Damit wird automatisch die Datei icons.css bei der Abfrage der CSS-Informationen mit eingebunden. Alle weiteren Angaben erfolgen nun in der icon.css. Diese sollte nach dem Hochladen ebenfalls im Bereich “Design -> Editor” zur Verfügung stehen.

Als Schablone für die einzelnen vorangestellten Icons dient uns der folgende CSS-Code:

.widget_categories h2 {
    padding-left:36px;
    background:url('images/icons/sidebar_topics.png');
    background-repeat:no-repeat;
}

Die entsprechenden Icons werden also aus dem Ordner “images/icons/” bezogen und als Hintergrundbild eingebettet. Damit der Text nicht das Bild überlappt, fügen wir mittels padding-left einen Abstand ein, der genau der Icongröße entspricht.

Im obigen Fall haben wir allerdings nur ein Icon für das Widget eingefügt, welches uns die Kategorien auflistet. Wer für weitere Widget-Titel eigene Icons einbinden will, der wird erst etwas mühsam über den Quellcode der eigenen Seite den Class-Namen für die individuellen Widgets herausfinden müssen.

<li id="recent-comments" class="widget widget_recent_comments">

Hier sind zwei Class-Angaben vorzufinden. Zum einen “widget”, das bei allen Widgets enthalten ist (somit ließe sich auch recht einfach ein Icon für alle Widgets realisieren). Entscheidend ist hier allerdings: widget_recent_comments.

In der CSS-Datei lassen sich unterschiedliche Klassen bequem über einen vorgestellten Punkt vor den Klassen-Namen ansprechen. In diesem Fall wäre das also:

.widget_recent_comments { css-Angaben; }

Und so kann das ganze dann am Ende aussehen:

Noch Fragen? Oder vielleicht sogar einen komfortableren Weg, um ans Ziel zu kommen? Gerne könnt ihr hier eure Kommentare hinterlassen.