Seit WordPress 2.9 wird die Funktion “post thumbnails” bereitgestellt.  Doch schon vor dieser WordPress-Version waren Artikelbilder in vielen Themes integriert. Diese sind jedoch anderweitig eingebunden – zumeist wurden diese über  benutzerdefinierte Felder definiert.

Doch wie bekommt man die Artikelbilder aus dem benutzerdefinierten Feld in die WordPress-Funktion “post-thumbnails?

Die Frage stellt sich nämlich, wenn Ihr ein aktuelles Theme und die integrierte WordPress-Lösung verwenden möchtet. Aber auch viele Plugins und bereitgestellte Codes bauen mittlerweile auf das WordPress-Artikelbild. In diesem Zusammenhang möchte ich Euch Sergejs Artikel empfehlen: Artikelbilder in WordPress für Facebook bereithalten.

Nun könnt Ihr natürlich 198 Artikel durcharbeiten und das jeweilige Artikel-Bild festlegen, indem  den benutzerdefinierten Wert in das Feld für das Artikelbild kopiert. Aber es geht auch einfacher. Lange habe ich danach gesucht, tausende Artikel gelesen, Plugins geleckt und Anleitungen durchprobiert, bis ich heute einen Artikel mit der passenden Lösung fand: Migrating Post Thumbnails on Old WordPress Themes.

Die Vorgehensweise im Einzelnen:

• Natürlich muss (falls noch nicht geschehen),  die WordPress-Funktionalität “Artikelbild festlegen” in älteren WordPress-Themes aktiviert werden – das ist bei Perun sehr schön beschrieben und wird hier vorausgesetzt.
• Auf jeden Fall sollte die WordPress-Datenbank gesichert werden. Hierfür gibt es zahlreiche Plugins, oder Ihr benutzt den MySQL-Dumper.
• Ihr ladet Euch das Plugin von der o.g. Seite herunter  (Direktlink). Es handelt sich um eine einzelne php-Datei, die Ihr in euer WordPress-Plugin-Verzeichnis verschiebt. Aber noch nicht aktivieren!
• Bevor Ihr das Plugin aktiviert, müsst Ihr die Datei noch etwas bearbeiten. Entweder über einen geeigneten Editor (ich empfehle immer notepad++) oder direkt über die WordPress-eigene Funktion “Plugin bearbeiten”. die Markierung im nachfolgenden Bild zeigt an, welche Werte bearbeitet werden müssen.

• In Zeile 14 fügt Ihr den Namen Eures benutzerdefinierten Feldes ein – in meinem obigen Beispiel hieß das Feld “image_value.
• In Zeile 15 können wir die alten Bilder löschen (true). Solange noch Euer altes Theme im Einsatz ist und die WordPress-Artikelbilder nicht vollumfänglich eingebunden sind, solltet Ihr diesen Wert natürlich bei “false” belassen.
• Schließlich wird die auskommentierte Zeile 20 noch “scharfgeschaltet”, indem die beiden Schrägstrich // gelöscht werden.
• Zuletzt wird das Plugin aktiviert.
• Relativ schnell dürften euch die Artikelbilder zur Verfügung stehen. Überzeugt euch selbst, indem Ihr einen Artikel im WordPress-Frontend öffnet und den Eintrag “Artikelbild” kontrolliert.
• Nach getaner Arbeit könnt Ihr das Plugin wieder deaktivieren.

So, das war’s auch schon. Falls Ihr den Artikel hilfreich fandet, dürft Ihr gerne Euren Kommentar dazu abgeben.

Ähnliche Artikel

• WordPress-themes erstellen und testen

  Heute stelle ich ein Programm vor, mit dem selbst der unerfahrene Anwender kinderleicht ein eigenes WordPress-Theme erstellen...

• WordPress-Themes bearbeiten – die Dateien und deren Bedeutungen

  Adressen für kostenlose WordPress-Themes gibt es ja wie Sand am Meer. Einen schönen Überblick hab ich  hier gefunden. Dort...

• Eigene Widgets in WordPress erstellen

  Ihr wollt eigene Elemente in die Seitenleiste eures Blogs bringen? Ihr nutzt WordPress und seid noch nicht sicher wie das geht?...

Viele Anwender stellen Ihre Bilder in Online-Webalben zur Verfügung. Sie nutzen Picasa, Flickr, die Fotocommunity oder Windows-Live-Fotogalerie. Über den letztgenannten Dienst hab ich vor rund einer Woche im Artikel “25GB Online-Speicher” geschrieben. Das Schöne an Windows-Live ist, dass Ihr dort nicht nur Bildergalerien anlegen könnt, sondern den kompletten Dienst auch in den Windows-Explorer integrieren könnt. Wenn man bedenkt, dass dabei noch 25GB(!) geboten werden, ist das eine feine Sache

Heute aber geht es um die Einbindung der externen Bildergalerien in den Blog. Über das Thema hab ich schonmal einen Artikel verfasst: Drei Methoden um eine Fotogalerie im Blog einzubinden. Heute wird das etwas verfeinert. Ich stelle zwei Möglichkeiten vor, wie Ihr Fotoalben bzw. Diashows per iframe in den Blog bzw. die Homepage einbinden könnt.

Keine Angst vor dem hässlichen Wort “iframe” – es ist ganz einfach.

Inhalt:

1.) iframe (Fotogalerie) in den WordPress-Blog einbinden

1a) Fotogalerie von Fotocommunity einbinden

1b) Fotogalerie von Windows Live-Fotogalerie einbinden

1c) Picasa-Fotogalerie einbinden

1d) Flickr-Fotogalerie einbinden

2.) iframe (Fotogalerie) in einer Lightbox darstellen / aufpoppen lassen

1. Iframe – Bildergalerie im WordPress-Blog einbinden

WordPresser könnten ggf. Probleme mit den iframes haben. Wenn sich der Quellcode nicht direkt einbinden lässt, weil der Editor den eingegebenen Code abschießt, muss noch ein wenig Vorarbeit geleistet werden. Habt Ihr Euch für ein “iframe-Modul” entschieden (zu erkennen am Quelltext, der mit “iframe” anfängt), so bearbeitet Ihr zunächst Eure functions.php (was die einzelnen WordPress-Dateien bewirken, könnt Ihr in meinen WordPress-Tutorials nachlesen). Das Bearbeiten der functions.php ist natürlich nur das erste mal erforderlich. Ihr fügt folgenden Quellcode ein:

function field_func($atts) {
   global $post;
   $name = $atts['name'];
   if (empty($name)) return;
   return get_post_meta($post->ID, $name, true);
}
add_shortcode('field', 'field_func');

Im WordPress-Backend legt Ihr ein benutzerdefiniertes Feld mit einem beliebigen Namen an (hier “flickr”):

Klicken zum Vergrößern

In das Feld “Name” tragt ihr einen frei wählbaren Namen ein (z.B. flickr für eine flickr-Galerie). Bei  “Wert” fügt Ihr den Code ein, den Ihr von Eurem externen Bilderdienst erhalten habt (hierzu gleich mehr).
Das Element könnt Ihr dann in Eurem Artikel an beliebiger Stelle mit folgendem Shortcode einfügen:
[field name=flickr]
Nachfolgend stelle ich kurz da, wie Ihr an den o.g. Code bei den vier gängigsten Bilderdiensten kommt – wobei ich Euch die Windows-Live-Fotogalerie wärmstens an’s Herz lege.

1a) Diashow von der Fotocummunity einbinden

Ihr Klickt auf “meine Fotos” und dann auf “Dia-Show dieser Fotos erstellen und auf Deiner persönlichen Homepage einbetten”. Nachfolgend könnt Ihr angeben, welche Fotos eingebunden werden sollen und wie groß die Diashow sein soll. Anschließend klickt Ihr auf Slideshow-Code erstellen.  Aus dem daraufhin erscheinenden Code kopiert Ihr  die Feedadresse und fügt sie in den iframe-Code ein, den Ihr unter “Meine Fotos/ Fotohomepage / Homepage-Codes” fügt. Das auf diese Weise bearbeitete iframe-Code  fügt ihr (wie oben dargestellt) in das benutzerdefinierte Feld ein – als “Wert”. Wenn Ihr möchtet, könnt Ihr den Code auch nachträglich verändern.

Ich hab auch ein paar Bilder bei der Fotocommunity – das Ergebnis sieht dann so aus:

1b) Diashow von Windows Live einbinden

Ihr öffnet Euer Windows-Live Fotoalbum und wählt “Freigeben”. Nachfolgend erscheint der Code, den Ihr in das benutzerdefinierte Feld eingebt. Wenn Ihr Eure Windows-Live Fotogalerie auf diese Weise einbindet, erscheint ein Logo für das Fotoalbum, das dann angeklickt werden kann. Es erscheint ein neues Fenster mit der Fotogalerie. Das sieht in meinem Falle so aus:

Möchtet Ihr aber, dass die Fotogalerie direkt im Blog angezeigt wird (ohne dass sich ein neues Fenster öffnet), dann ändert Ihr die Zieladresse aus dem oben gewonnen Code. Gebt stattdessen die Adresse der Diashow an (die seht Ihr in der Adressleiste, sobald Ihr die Diashow startet). Weil ich Euch mit Diashows nicht überladen möchte, verzichte ich an dieser Stelle auf ein Beispiel. Unter 2.) Fancybox sehr Ihr den Einsatz dieser Galerie in der Fancybox.

1c) Picasa-Diashow einbinden

Hier erfahrt Ihr die Adresse der Diashow, wenn Ihr in der Picasa-Galerieansicht auf “Diashow einbinden” klickt. Im nachfolgenden Fenster könnt ihr das Erscheinungsbild optional konfigurieren (Größe, etc.).

Picasa-Diashow einbinden (klicken zum Vergrößern)

Anschließend kopiert Ihr den generierten Code und baut ihn ein – wie oben schon mehrfach beschrieben. Auch hier verzichte ich aus Performancegründen auf ein Beispiel, da bereits zwei Galerien eingebunden sind.

1d) Flickr-Fotogalerie einbinden

Ihr wählt ein Album und klickt (rechts oben) auf den Link “Diashow”. In der daraufhin erscheinenden Diashow wählt Ihr (ebenfalls rechts oben) die Option “Veröffentlichen”. Ihr kopiert den Code, der unter “HTML zum Einbetten” steht. Auch diesen Code könnt Ihr dann im Blog einbinden (wie oben mehrfach beschrieben).

2.) Fotogalerie in einer Lightbox darstellen

Das ist die ideale Lösung, wenn Ihr eine Fotogalerie in einem eigenen Fenster anzeigen wollt. Meines Erachtens eines der elegantesten Möglichkeiten, da die Besucher zum Betrachten der Diashow die Seite nicht verlassen müssen (sofern Javascript aktiviert ist).

Im Artikel “poppende Bilder” hab ich einiges über Lightbox(en) geschrieben und dargestellt: welche Möglichkeiten es gibt und wie eine Lightbox in den WordPress-Blog eingebaut wird. Ich hab mich für Fancybox entschieden, da ich das ohnehin vorhandene Framework  “jQuery” ausnutzen konnte und es recht schlank daherkommt.

Damit auch iframes in der Fancybox dargestellt werden können, muss noch ein kleines Script eingebunden werden:

<script type="text/javascript">
jQuery.noConflict();
jQuery("#tip5").click(function() {
	jQuery.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'easingIn'		: 'easeOutBack',
			'easingOut'		: 'easeInBack',
			'title'			: this.title,
			'width'			: '75%',
			'height'		: '75%',
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'iframe',
			'iframe'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});
</script>

Die Werte könnt Ihr entsprechend anpassen. Für Höhe und Breite sind auch absolute Werte erlaubt. In diesem Beispiel ist es ein relativer Wert von 75%.  Außerdem kann noch der “Aufpopp-” und “Zuklapp-” Effekt modifiziert werden.

In der dritten Zeile seht Ihr den Namen “Tip5″. Mit dieser Variablen sprechen wir die Fancybox an. die Bildergalerie wird im Blog dann wie folgt verlinkt:

<a id="tip5" href="Adresse der Diashow">Zur Diashow</a>

Wie Ihr an die Adresse kommt, hab ich unter 1a) bis 1d) ausgiebig geschrieben. Für flickr benutzt Ihr aber “nur” die URL der Slideshow. Selbstverständlich könnt ihr auch eine eigene Diashow erstellen und per iframe einbinden (siehe auch: Drei Methoden um eine Fotogalerie im Blog einzubinden).

Zuletzt möchte ich nach dieser Methode den Einsatz der Windows-Live-Fotogalerie  darstellen. Gerne hätte ich auch die anderen Bild-Dienste in der Fancybox vorgestellt. Ich hab sie allesamt ausprobiert und sie funktionieren. Jedoch möchte ich den Artikel nicht mit Skripten überladen. Es sind ohnehin schon zu viel

Zur Diashow

Hier gefällt mir besonders gut, dass der Hintergrund farblich an den Ton der Bilder angepasst wird.

Eure Meinung

Ich hoffe, Ihr könnt etwas davon gebrauchen. Vielleicht konnte ich auch dem Ein- oder Anderen helfen. Wie immer, stehe ich bei Problemen mit Rat und Tat zur Seite. Auch für konstruktive Kritik bin ich jederzeit offen.

Ich freue mich über Eure Kommentare

Foto: “Bring Farbe ins Leben!” © androm31 / PIXELIO (beschnitten)

Ähnliche Artikel

• Drei Methoden um eine Fotogalerie im Blog einzubinden

  Ihr wollt Euren Blog um eine Fotogalerie ergänzen? Kein Problem: Hier erfahrt Ihr, wie das geht. Für die Einbindung...

• Hol Dir Google Web Elements auf Deinen (WordPress-)Blog

  Präsentationen, Nachrichten, Landkarten und mehr in den Blog einbinden Wie der Googlewatchblog berichtet, hat man auf der Google...

• Artikelbilder aus älteren Themes in WordPress einbinden

  Bilder von benutzerdefinierten Feldern an WordPress Artikelbild übergeben Seit WordPress 2.9 wird die Funktion “post...

zu Hause haben wir eine Baustelle und im Blog sieht es ebenso aus: Das Theme wurde komplett neu aufgesetzt (auch wenn es äußerlich fast so aussieht als bisher). Es hakt noch an vielen Stellen und einiges muss noch optimiert werden. Doch nun ist es endlich soweit, dass ich wenigstens  mal wieder Content liefern kann.

Im Zuge der Optimierungsarbeiten überlegt ich mir auch, welcher “Lightbox-Effekt”  im Blog eingebaut werden soll. Die Frage ist durchaus berechtigt, denn Lightbox ist nicht gleich Lightbox. Oftmals ist es auch eine “Heavybox”, deshalb kommt es durchaus darauf an, dass man den “passenden” Effekt wählt.

Das t3n-Magazin ist um eine Attraktion reicher: Dort gibt es nun eine Community, bei der Ihr Fragen zu den Themen  Web 2.0, Open Source, Webentwicklung oder E-Business stellen oder beantworten könnt. So stellte ich dort vor ein paar Tagen auch eine Frage, die dankenswerterweise glänzend beantwortet wurde:

Was haltet Ihr von Lightbox-Effekten für Bilder im Blog? Alles Quatsch oder schicke Garnitur?

Welche sind bei Euch im Einsatz? Kennt Ihr empfehlenswerte Scripte?

Thomas Quensen meinte, ein Lightbox-Effekt sei besser als das große Bild auf einer neuen Seite anzuzeigen oder garnicht anzubieten. Dieser Meinung schließe ich mich vollkommen an. Jedenfalls nannte er einen Link zu einem Projekt, bei dem zahlreiche Lightbox-Effekte in einer Tabelle aufgelistet sind.

Was ist der “richtige” Lightbox-Effekt für mich?

In der o.g. Tabelle ist auch aufgelistet, welche Javascript-Dateien für die zahlreichen Lightblox-Clone jeweils erforderlich sind. Das Ganze sieht so aus (bei der Gelegenheit könnt Ihr meinen “Lightbox-Effekt gleich anschauen und Euren Senf dazu abgeben, wenn Ihr möchtet):

Lightbox-Effekte im Überblick (klicken zum Vergrößern)

Nun kommt es darauf an, ob Ihr einfach mal wild drauf los poppen wollt, oder ob Ihr Euch überlegt, welche Skripte bei Euch ohnehin aktiv sind. Denn viele Themes und Plugins erfordern für mehr oder weniger hilfreichen Schnickschnack einiges an Javascript-Power. So hatte ich vor einiger Zeit noch das WordPress-Plugin “Lightbox 2” aktiv, das neben den ohnehin vorhandenen Skripten (Lightbox.js und Lightbox-resize.js) noch 172k Prototype.js + Scriptaculous.js ludt. Das war eigentlich total unnötig, denn für andere Lightbox-Effekte war der vorhandene Blog viel besser geeignet. Meine Wahl fiel auf Fancybox, das neben dem hauseigenen Skript nur noch jquery.js benötigt, das bei mir ohnehin aktiv ist. Für Fancybox gibt es übrigens auch ein WordPress-Plugin, das allerdings entbehrlich ist. Eine weitere Beschreibung des nachfolgend vorgestellten Effekts findet Ihr bei Caschy.

Schaut am Besten mal in Eurem Blog nach, welche Javascript-Dateien mit Lightbox-Effekt und welche ohne Lightbox-Effekt geladen werden. Hierfür gibt es zahlreiche Tools und Programme, die ich im Artikel “Blogladezeiten optimieren” vorgestellt habe.

Fancybox in WordPress einbinden

Das ist eigentlich nicht so schwer und wird auf der Herstellerseite auch gut erläutert. Ich fasse das ma ganz schnell zusammen:

1.) Javascript Dateien, Stylesheets und Bilder hochladen

2.) Javascript einbinden

im Normalfall in der header.php:

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.0.pack.js"></script>

Nach “src” tragt Ihr natürlich Euren eigenen Pfad ein (aus Schritt 1). Vergewissert Euch, ob jquery.js aktiv ist – falls nicht, bindet Ihr es gleichfalls ein.

3.) Stylesheet einbinden

ebenfalls im Normalfall in der header.php:

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">

Auch hier tragt Ihr wieder Eure eigene Adresse ein. Die Stylesheet verweist u.a. auf  die Grafikdateien, die Ihr im Schritt 1 hochgeladen habt. Ggf. müsst Ihr die Datei noch bearbeiten, wenn die Grafikdateien in einem anderen Ordner gesteckt habt.

4.) “Popups” im Beitrag richtig verlinken

Damit sich der Pop-Effekt auch auswirkt, müsst Ihr die Bildverweise auch richtig verlinken.  Ihr fügt einfach das Attribut rel=”fancybox” hinzu. Das sieht dann beispielsweise so aus:

<a rel="fancybox" href="http://www.plerzelwupp.de/wp-content/uploads/2010/02/Lightbox01.png">

Damit Ihr das nicht jedes Mal machen müsst und Fancybox auch auf die vorhandenen Bildverweise anspringt, solltet Ihr noch eine passende Regel hinzufügen. Folgenden Code hab ich aus dem oben verlinkten Plugin geklaut:

<script type="text/javascript">
	jQuery(document).ready(function($){
		var select = $('a[href$=".bmp"], a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".BMP"], a[href$=".GIF"], a[href$=".JPG"], a[href$=".JPEG"], a[href$=".PNG"]');
		select.attr('rel', 'fancybox');
		select.fancybox();
	});
</script>

Das war’s auch schon. Ab sofort könnt Ihr munter drauf los poppen.

Anwendungsmöglichkeiten von Fancybox:

Die Anwendungsmöglichkeiten sind sehr vielfältig. Es kann eine kleine Bildergalerie sein, die man dann auch durchklicken kann, oder einfach nur ein Textlink sein. z.B.

Ein paar Bilder (Beispiele):

• Bild 1: Herbst
• Bild 2: Urlaub in Kambodscha
• Bild 3: Singapore von oben
• Bild 4: Mein Kamel hat AUA
• Bild 5: Plerzelwupp bei Nacht

Auch Youtube Videos können eingebettet werden:

Hier könnt Ihr beispielsweise sehen, wie es bei mir zu Hause zugeht:

plerzelwupp (Oliver) bei den Bunnies

Für Youtube Videos ergänzt Ihr ganz einfach den Code (z.B. in der header.php), der auf der Seite von Fancybox dargestellt wird und ergänzt Eure Youtube-Verlinkung mit dem Attribut id=”tip4″.

Workaround bei Problemen

Falls der Effekt bei Euch ausbleibt, dann vergewissert Euch, dass die Stylesheet-Datei und Javascript ordnungsgemäß eingebunden sind. Benutzt hierfür eines der genannten Hilfsmittel aus dem oben verlinkten Artikel.

Vergewissert Euch außerdem, dass die Bilder in der Stylesheet ordnungsgemäß verlinkt sind.

Wenn es immer noch nicht geht erhaltet Ihr mit Firebug möglicherweise die Fehlermeldung:

jQuery: “$ is not a function”

In diesem Fall ersetzt Ihr im Javascript-Code sämtliche $-Zeichen durch “jQuery” und stellt die Codezeile jQuery.noConflict(); voran. der Code für obiges Youtube-Video lautet dann wie folgt:

<script type="text/javascript">
jQuery.noConflict();
jQuery("#tip4").click(function() {
	jQuery.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'easingIn'		: 'easeOutBack',
			'easingOut'		: 'easeInBack',
			'title'			: this.title,
			'width'		: 680,
			'height'		: 495,
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'swf',
			'swf'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});
</script>

So etwas wie ein Fazit

Wenn Ihr Bilder nicht auf eine neue Seite verlinken wollt, dann sind Lightbox-Effekte unerlässlich. Für welchen Effekt Ihr Euch entscheidet, bleibt natürlich Euch überlassen. Doch sollte bei der Wahl beachtet werden, dass es von Vorteil ist, einen Effekt zu wählen, dessen Skripte ohnehin am Laufen sind (für die “Kurzleser”: Das ist oben näher erläutert).

Natürlich eigenen sich auch Plugins – es gibt jede Menge davon; für die unterschiedlichsten Blogsysteme. Doch ich denke, mit der o.g. Liste seid Ihr besser bedient. U.a. auch deswegen, weil sich die Javascript-Dateien besser steuern lassen und ggf. zusammengefügt werden können. Doch darüber schreibe ich das nächste Mal.

Benutzt Ihr eigentlich solche Effekte? Was haltet Ihr davon? Hab ich Euch ein klein wenig inspiriert? Habt Ihr Lust auf poppende Bilder in Eurem Blog? – Ich freue mich über Eure Kommentare.

Foto: “Paarungszeit” © Bernd Boscolo / PIXELIO (beschnitten)

Ähnliche Artikel

• 6 Javascript-Tipps für Deinen Blog

  Eine kleine Zusammenfassung In den vergangenen Artikeln hab ich einiges über die Optimierung des Blogs, insbesondere im Hinblick...

• Fotogalerie in den Blog einbinden

  Online Webalben Viele Anwender stellen Ihre Bilder in Online-Webalben zur Verfügung. Sie nutzen Picasa, Flickr, die...

• Drei Methoden um eine Fotogalerie im Blog einzubinden

  Ihr wollt Euren Blog um eine Fotogalerie ergänzen? Kein Problem: Hier erfahrt Ihr, wie das geht. Für die Einbindung...

Oftmals sind die Gravatare sehr schnell da – doch es kommt auch sehr häufig vor, dass der ein oder andere Gravatar mal “hängt”. Außerdem gibt es eine gewisse Abhängigkeit von der Verfügbarkeit des Gravatar-Servers.

Warum also die Gravatare nicht cachen?

Nun, die Idee ist ja nicht neu. Dazu gibt es mehrere Anleitungen und/ oder Plugins im Netz. Doch so richtig funktioniert hat nichts von alledem. Da erinnerte ich mich an Tanja, die mit Ihrem Cache-Skript so allerlei Anwendungsmöglichkeiten aufzeigte. Das Skript kann, in jeweils abgewandelter Form, für zahlreiche Cache-Lösungen herangezogen werden. Man muss nur erfinderisch sein. Ob Ihr nun Widgets cachen wollt, “related Posts” oder den ganzen Kommentarbereich – hier seid Ihr richtig!

Jedenfalls hatten wir einen Dialog und wenige Tage später wandte sich Tanja per E-Mail an mich. Sie habe eine Gravatar-Cache-Lösung und ich solle es gleich ausprobieren. Das hat allerdings nicht auf Anhieb geklappt – in einem zweistündigen Telefonat haben “wir” es dann doch zum Laufen gebracht. Über die Hintergrunde werde ich nach Vorstellung des Skripts noch eingehen. Lest Euch zuerst alles durch, bevor Ihr anfangt.

Was bedeutet denn überhaupt “Gravatar-Cache”?

Die Gravatare Eures Blogs, die anhand der E-Mail-Adresse der Kommentierenden von gravatar.com geholt werden, werden “gefangen” und auf Eurem eigenen Host (als Kopie) abgelegt. Im Standard-Zustand des nachfolgend vorgestellten Skriptes werden die Gravatare vier Wochen lang gecached. Das heißt: Ein einmal von gravatar.com geladener Gravatar in Eurem Blog wird fortan nicht mehr von gravatar.com , sondern von der Kopie auf Eurer Domain (Eurem Wenhoster) geholt. Ihr könnt Euch selbst davon überzeugen: Je nach Browser kann dies in aller Regel per Klick mit der rechten Maustaste auf einen Gravatar in meinem Kommentarbereich überprüft werden. Im Kontextmenü gibt es einen Eintrag “Grafikadresse kopieren” (Firefox), “Eigenschaften” (Internet Explorer 8), “Bild-Adresse kopieren (Opera)” oder “Bild-URL-kopieren” (Chrome 4).

Doch genug der langen Worte – schreiten wir zur Tat.

Gravatare cachen

1. Cache-Ordner anlegen

Ihr legt direkt in das Root (also in der obersten Ebene des ftp-Verzeichnisses) einen Ordner “z-cache” an. Darin legt Ihr einen weiteren Ordner “gravatar” an. Im gravatar-Ordner legt Ihr wiederum einen Ordner “images” an. Alle drei genannten Ordner bekommen die Rechte 777.

2. comments.php bearbeiten

Ihr sucht den Gravatar-Aufruf der Kommentarausgabe:

<?php echo get_avatar( $comment, 60); ?>

Dieser Aufruf sollte normalerweise in der comments.php Eures Themes stehen. Es kann jedoch auch vorkommen, dass Euer Theme etwas anders arbeitet. In meinem Fall befindet sich der Aufruf beispielsweise in der functions.php. Auch die Größe “60″ kann variieren. Möglicherweise kommen bei Euch Gravatare anderer Größe zum Einsatz (bei mir sind es 50x50px). Dazu gleich mehr. Wir fahren mit der comments.php fort – ich erinnere an die obligatorische Sicherungskopie!!!

Jedenfalls löscht Ihr die o.g. Zeile und setzt stattdessen folgenden Code ein:

<?php $teil = get_comment_author_email(); //1 Teil Cachefile
	$teil = strtolower  ($teil);
	$teil = md5($teil);
	$cachefile13 = "z-cache/gravatar/".$teil.".html";
	$cachetime13 = 40320 * 60; // 40320 = 4 Wochen
	if (file_exists($cachefile13) && (time() - $cachetime13 < filemtime($cachefile13))) {
		include($cachefile13);
		//$test = date('d.m.Y H:i', (filemtime($cachefile13) + $cachetime13));
		//echo "<!-- Cache vom ".date('j. F Y H:i', filemtime($cachefile13))." - naechster Update: $test-->";
	}
	else {
	ob_start(); ?>

		<?php $text = get_comment_author_email();
		$text = strtolower  ($text);
		$text = md5($text);
		$cachefile21 = "z-cache/gravatar/images/".$text.".png";
		$grav_img = "http://www.gravatar.com/avatar/".$text."?s=60&d=wavatar&r=G";

		ob_start();
		$fp = fopen($grav_img, "rb");
		fpassthru($fp);
		fclose($fp);
		$file = ob_get_contents();
		ob_end_clean();

		$fp = fopen($cachefile21, "wb+");
		fwrite($fp, $file);
		fclose($fp); ?>

		<img alt="" src="http://www.plerzelwupp.de/<?php echo $cachefile21;?>" height="60" width="60" />

		<?php //echo get_avatar( $comment, 60); ?>

	<?php $fp = fopen($cachefile13, 'w'); // Cache 2. Teil
	fwrite($fp, ob_get_contents());
	fclose($fp);
	ob_end_flush();
	} // Cache Endefile ?>

• Wenn Ihr Gravatare anderer Größe verwendet, ändert Ihr die Zahl “60″ in den Zeilen 18, 31 (2x) und 33 entsprechend.

• Die Webadresse in Zeile 31 müsste Ihr auf Euren Blog umstellen.

• Die Zeilen 1-12 leiten den Cache ein, die Zeilen 35-39 schließen ihn wieder. In eventuellen Test-Szenarien löscht Ihr diese Zeilen und schaut, ob der Kern funktioniert. Beim ersten Aufruf einer Kommentarseite dauert die Ladezeit erheblich länger – ein gutes Zeichen: das Cache-Skript macht seine Arbeit. Vergewissert Euch im FTP-Verzeichnis, ob die neu angelegten Ordner gefüllt werden. Prüft außerdem nach, ob die geladenen Gravatare tatsächlich “bei Euch gehostet” sind.

Das war’s auch schon. Ab sofort müssten Eure Gravatare gecached werden! Doch erinnert euch an meine Worte: Lest erst mal weiter – insbesondere, was die Funktion fopen() betrifft.

Workaround: Mögliche Fehlerquellen erkennen

Arbeitet das Skript noch nicht richtig?

Die beiden auskommentierten Zeilen 8 und 9 sind zu Testzwecken eingerichtet. Aktiviert diese Zeilen bei den ersten Aufrufen und setzt dabei zusätzlich die Zeit in Zeile 3 auf 1 (anstatt 40320). Vergewissert Euch, ob der Cache auch funktioniert, indem Ihr nun den Quelltext öffnet und nach “cache vom….” sucht. Da müsste nun die richtige Zeit stehen.

Wenn Ihr den Cache per FTP wieder löschen wollt, empfiehlt es sich, zuvor die Caching-Funktion zu deaktivieren: Durch Auskommentieren oder Löschen der o.g. Zeilen (1-12 und 35-39). Nach dem Löschen des Caches aktiviert Ihr diese Zeilen wieder.

Die Sache mit fopen(): Es kann sein, dass Euer Hoster diese Befehle nicht unterstützt. Ob diese Funktionen bei Euch aktiviert sind erfahrt Ihr, wenn ich Euch eine kleine info.php bastelt. Dazu erstellt eine Textdatei mit folgendem Inhalt:

<?
phpinfo();
?>

Ihr speichert diese Datei dann unter info.php ab (aus die Dateiendung achten) und legt sie dann per ftp in Euer Heimverzeichnis. Mit dem Browser steuert Ihr diese Seite dann an – z.B. http://Eure-Domain/info.php

Dort sollten “allow_url_fopen” und “allow_url_include” Funktionen auf “on” stehen.

Bei mir war das zunächst nicht der Fall. Also wandte ich mich an den Kundensupport von 1&1. Nach erfreulich geringer Wartezeit erklärte mir ein kompetenter Mitarbeiter, dass diese Funktionen für externe URLs standardmäßig gesperrt ist. OK, soviel wusste ich auch. Ich wusste auch, dass diese Funktionen durch Bearbeitung der “php.ini” aktiviert werden können (bei mir war jedoch keine php.ini vorhanden – ‘dachte, ich käme nicht dran). Was ich aber nicht wusste: Bei meinem Hoster ist es erlaubt, solch eine php.ini zu erstellen. Der entsprechende Befehl zur Aktivierung der beiden Funktionen lautet:

allow_url_fopen=1
allow_url_include = on

Das Datei wird php.ini genannt und kommt sowohl in das Root, als auch in den Script-Ordner.

Wenn diese Funktionen bei Euch nicht unterstützt werden lohnt es sich auszuprobieren, ob Ihr auch eine php.ini erstellen oder eine bereits vorhandene modifizieren könnt. Ansonsten lohnt sich ein Anruf beim Hoster. Erklärt den Mitarbeitern, was Ihr vorhabt und was Ihr mit den Funktionen machen wollt. Vielleicht sind sie gnädig.

Übrigens: Falls url_fopen nicht unterstützt wird, merkt Ihr das auch, wenn statt denn Gravataren “fehlerhafte Bilder” angezeigt werden. Öffnet dazu eine der gecachten png-Dateien mit einem Texteditor (unter z-chache/gravatar/images). Dort müsste eine Fehlermeldung stehen – in der Art: Warning fopen(…Url….)…. failed to open stream: HTTP wrapper does not support writeable connections in … on line ……

Fazit

Die Ladezeiten der Artikel-Ansichten (mit Kommentaren) sind deutlich stabiler und schneller geworden. Kommt ein Besucher, dessen Gravatar bereits gecached ist, erhält beim neuerlichen Kommentieren die Cache-Version seines Gravatars. Meines Erachtens ist dieses Skript eine glänzende ALternative zu einem entsprechenden Plugin.

Vielleicht hab ich Euch ein wenig auf den Geschmack gebracht? Habt Ihr schonmal die gravatar-Ladezeiten beobachtet? Euch mit diesem Thema schon beschäftigt? Lust, das mal auszuprobieren? gerne gebe ich Hilfestellung.

Ich freue mich über Eure Kommentare

Nachtrag vom 16.02.2010

Jeffrey vom infoblog.li hat sich der Sache nun ebenfalls angenommen und das Skript noch erweitert bzw verfeinert. Die Gravatare können nun per Skript aktualisiert werden, was den Vorteil hat, das Alter der gecachten Gravatre nicht ständig auslesen zu müssen.  Das Skript könnte dann (beispielsweise über Nacht) per cronjob gestartet werden.  Jeffreys Beitrag ist hier zu lesen.

Schade nur, dass mein Hoster keine cronjobs zulässt vielleicht gibt es in dieser Hinsicht Vorschläge(?)

Ähnliche Artikel

• WordPress Hacks – WordPress beschleunigen

  Vor einiger Zeit veröffentlichte ich den Artikel WordPress-Hacks. Nun geht es weiter – einige Tricks sind neu dazu...

• Sociable: Social Bookmarks mit WordPress

  Social Bookmarks sind gem. Wikipedia "Internet-Lesezeichen, die Internet mit Hilfe einer Browser-Oberfläche von...

• WordPress Dofollow ohne Plugin

  Alle Jahre wieder geistert das Thema "nofollow" durch die Bloggosphäre. Wer nicht weiß, was follow, dofollow...

Um eins gleich vorwegzunehmen: Es geht hier nicht um xml-Sitemaps für Suchmaschinen Google & Co, sondern um eine Seitenübersicht  Eures WordPress-Blogs: Ein strukturierter Überblick Eurer Artikel, sortiert nach Kategorien. Ein toller Service für Eure Leser und Besucher.

Zunächst dachte ich, solch eine Sitemap wird ohnehin nicht geklickt, doch mittlerweile bin ich vom Gegenteil überzeugt: Die Sitemap wird geklickt! Meines Erachtens  sollte die Sitemap ein fester Bestandteil eines ordentlichen Internetauftritts sein.  Sie trägt zur Benutzerfreundlichkeit bei und schafft einen Überblick über den kompletten Blog. Wie so eine Sitemap aussieht, könnt Ihr hier sehen; wie sie erstellt wird, erfahrt Ihr im Folgenden.

Dies ist übrigens der dritte Beitrag in Folge zum Thema “xyz ohne Plugin” – irgendwie bin ich im Zuge der Serie “Blogladezeiten optimieren” in eine Art Blutrausch verfallen. Zahlreiche Plugins mussten einer händischen Methode weichen. Aber keine Angst: In den letzten beiden blogfreien Wochen hab ich genug Stoff für weitere Themen gesammelt

Lösung 1 – für Faule: Plugin

Wer es einfach und unkompliziert mag, erstellt eine Sitemap unter Zuhilfenahme eines Plugins. Empfehlenswert in diesem Zusammenhang ist das Plugin “Sitemap Generator for WordPress“. Es wird installiert wie jedes andere Plugin auch, unter Einstellungen/ DDSitemapGen modifiziert und an jeder x-beliebigen  Stelle im Blog unter Angabe des folgenden Codes zum Vorschein gebracht:

<!-- ddsitemapgen -->

Dieses Plugin war lange Zeit bei mir im Einsatz und verrichtete brav seine Dienste. Doch relativ leicht geht es auch ohne Plugin.

Lösung 2: Kategorien einzeln ausgeben

Wer nur wenige Kategorien hat, kann diese auch gezielt auslesen lassen. Dabei könnt Ihr nach folgendem Prinzip vorgehen:

Überschrift – Kategorie1

• Code zum auslesen der Kategorie 1

Überschrift Kategorie 2

• code zum Auslesen der Kategorie 2

usw……..

Bei dieser Herangehensweise erstellt Ihr für die Sitemap eine eigene Vorlage (“Template”). Am geschicktesten verwendet Ihr dafür die page.php eures Themes, kopiert diese und gebt der kopierten Datei den neuen Namen “sitemap.php”. Mit einem Editor (wie beispielsweise notepad++) bearbeitet Ihr diese Datei. Gleich am Anfang der Datei fügt Ihr folgende Zeilen ein:

<?php
 /*
 Template Name: Sitemap
 */
 ?>

Damit Euere WordPress auch “weiß”, dass es sich um ein Template mit dem Namen “Sitemap” handelt. Ursprünglich war das Template (eine Art “Schablone”) dazu gedacht, eine statische Seite auszugeben. Der Seiteninhalt wird in aller Regel mit dem Aufruf <?php the content(); ?> geholt. Nun wollen wir unsere Sitemap aber nicht mit Inhalten mit Content, sondern mit unserem eigenen Code füllen, deshalb löscht Ihr diese Zeile ganz einfach.

An diese Stelle kommt dann Euer Code zum Auslesen einer einzelnen Kategorie, den ich in abgewandelter Form von Frank Bültge “geklaut” habe:

<ul><h3>Beitr&auml;ge aus der Kategorie "Anleitungen"</h3>
<?php
$MyCat_Content = get_posts('numberposts=10&category=3');
$MyCat_Echo = '';

if (is_array($MyCat_Content)) {
 foreach ($MyCat_Content as $post) {
 $MyCat_Echo .= '<li><a href="' . get_permalink($post->ID) . '" title="' . $post->post_title . '">' . $post->post_title . '</a> (' . mysql2date('d. M Y', $post->post_date) . ')</li>';
 }
}
echo $MyCat_Echo;
?>
</ul>

In Zeile 1 befindet sich die Überschrift und der Name der Kategorie.

In Zeile 3 könnt hier hinter “numberposts” angeben, wieviele Artikel aus der Kategorie geholt werden sollen. In diesem Beispiel sind es die letzten 10 Beiträge – Ihr könnt aber auch beliebig mehr (oder weniger) angeben.

Wichtig ist noch die Kategorie-ID, die ebenfalls in Zeile 3 eingegeben wird. Im obigen Beispiel hat die Kategorie “Anleitungen” die ID-Nr. 3. Welche ID die jeweilige Kategorie hat, erfahrt Ihr im WordPress Frontend: Unter Artikel/ Kategorien werden Eure Kategorien aufgelistet. Wenn Ihr mit der Maus über die gewünschte Kategorie fahrt, seht Ihr in der Fußleiste die dazugehörige Adresse.  Das sieht in etwa so aus:

http://www.plerzelwupp.de/wp-admin/categories.php?action=edit&cat_ID=3

Alternativ könnt Ihr den Link auch in die Zwischenablage kopieren und an anderer Stelle ausgeben.

Das war’s auch schon. Das selbe macht Ihr dann mit den anderen Kategorien auch.

Wenn Ihr mit eurem Template fertig seid,  müsst Ihr zuguterletzt  eine statische Seite erstellen (Seite / erstellen). Diese nennt Ihr “Sitemap”. Ihr braucht hier keinen Content einzugeben. Wichtig ist nur, dass Ihr das richtige Template auswählt. Wenn Ihr alles richtig gemacht habt, müsste unter “Template” Eure Sitemap aufgelistet sein.

Das war’s auch schon! Ist doch nicht so kompliziert, oder?

Viel Spaß beim Nachmachen

Lösung 3: Sitemap komplett ausgeben lassen

Auf diese Methode möchte ich eigentlich nicht näher eingehen, denn sie wird bei obenlands.de eingehend erläutert. Die Herangehensweise ist die gleiche, jedoch mit anderem Code.

Unglücklicherweise hat das bei mir nicht zu 100% funktioniert: Die Kategorien wurden nicht vollständig ausgelesen. Das mag auch daran liegen, dass ich Kategorien im Laufe der Zeit umbenannt habe.

So etwas ähnliches wie ein Fazit

Für welche der drei Methoden Ihr Euch entscheidet könnt Ihr Euch selbst aussuchen. Wenn Ihr Euer Blog nicht über allzu viele Kategorien verfügt, könnt Ihr gerne die Methode 2 ausprobieren. Der Aufwand ist viel geringer als es zunächst aussehen mag. In wenigen Minuten verfügt Ihr über eine Sitemap. Das Ganze ohne Plugin. Wenn Ihr wollt, könnt Ihr Euch die Ausgabe auch nach Tanjas Methode cachen – das schont den Server und spart  etwas Zeit.

Wie schaut’s denn mit Dir aus? Hast Du schon eine Sitemap? Wie denkst Du darüber? Sollte eine Angeboten werden?

Wenn Ihr “nachbasteln” wollt, helfe ich (wie immer) gerne weiter, wenn es mal haken sollte. Ansonsten freue mich auf Eure Kommentare.

Foto: “Ein Herz für Bücher” © BirgitH / PIXELIO

Ähnliche Artikel

• Umfrage erstellen ohne Plugin

  Plugins ausmisten Im Rahmen der Serie "Blog-Ladezeiten optimieren" recherchierte ich auch in Richtung "Pluginfreie...

• WordPress Dofollow ohne Plugin

  Alle Jahre wieder geistert das Thema "nofollow" durch die Bloggosphäre. Wer nicht weiß, was follow, dofollow...

• 404-Fehlerseite erstellen

  Gastbeitrag von Matthias – Zentodone.eu Bei diesem Artikel handelt es sich um einen Gastartikel für Oliver, alias...

geistert das Thema "nofollow" durch die Bloggosphäre. Wer nicht weiß, was follow, dofollow oder nofollow bedeutet, kann sich gerne mal meinen früheren Artikel "follow oder nofollow – das ist hier die Frage" durchlesen – dort wird es näher beleuchtet.

Heute möchte ich darstellen, wie Ihr aus Eurem WordPress Blog in einer Minute einen nofollow-freien Blog macht – ohne Plugin! Jedoch möchte ich aufgrund von einigen Nachfragen zuvor nochmals klarstellen, dass es keinen "dofollow" Tag gibt. Lediglich durch das Fehlen des Nofollow-Tags wird ein Link quasi als "dofollow" angesehen. WordPress hat allerdings die unangenehme Eigenschaft, sämtliche Kommentarlinks mit diesem "nofollow-Tag" zu versehen. Über den Sinn und Zweck, die Vor- und Nachteile möchte ich hier nicht schreiben.

Nur eine Sache will ich hier nochmals loswerden: Bloggen ist ein Geben und ein Nehmen – deshalb wäre es schön, wenn auch Du deinen Blog auf "dofollow" setzt. Es ist ganz einfach!

Anstelle eines Plugins könnt Ihr auch selbst Hand anlegen – Der Vorteil: Wieder ein Plugin gespart   Insofern passt diese Anleitung auch in die Rubrik: Blogladezeiten optimieren.

Wo wird der nofollow-Tag gesetzt?

Da war ich mir selbst nicht so sicher, also machte ich mich auf die Volltextsuche durch die WordPress-Dateien. In den Theme-Dateien wird an unterschiedlichen Stellen die Verlinkung des Kommentierenden abgerufen (comment_author_url). Übergeben wird der Wert aus der Datei "comment-template.php" (wp-includes/comment-template.php). 

Und wie krieg ich das "nofollow" jetzt weg?

Ihr öffnet die comment-template.php im Verzeichnis wp-includes und sucht die Zeile mit folgendem Inhalt aus (standardmäßig in Zeile 148):

$return = "<a href='$url' rel='external nofollow' class='url'>$author</a>";

wie Ihr seht, wird hier das nofollow-Attribut vergeben. Den löscht Ihr ganz einfach raus und aus obiger Zeile wird:

$return = "<a href='$url' class='url'>$author</a>";

Das war's auch schon! 

Ihr glaubt mir nicht? Dann schaut doch selbst mal im Quelltext Eurer Seite nach. Mit Firefox geht das ganz einfach: Ihr markiert einen Kommentatoren-Link, klickt die Markierung mit der rechten Maustaste an und wählt "Auswahl-Quelltext anzeigen". Das macht Ihr am besten vor- und nach Eurer Änderung in der comment-template.php

Eure Meinung

Ist Euer Blog nofollow-frei? Benutzt Ihr ein Plugin? Wahr die Information hilfreich für Euch – möchtet Ihr ggf. umstellen?

Habt Ihr auch etwas zu diesem Thema geschrieben?

Gerne könnt Ihr hier auch Eure Artikel nennen.

Ich freu mich auf Eure Kommentare.

Foto: © S. Hofschlaeger / PIXELIO (modifiziert)

Ähnliche Artikel

• Sitemap erstellen – auch ohne Plugin

  Sitemap your Blog Um eins gleich vorwegzunehmen: Es geht hier nicht um xml-Sitemaps für Suchmaschinen Google & Co, sondern...

• Umfrage erstellen ohne Plugin

  Plugins ausmisten Im Rahmen der Serie "Blog-Ladezeiten optimieren" recherchierte ich auch in Richtung "Pluginfreie...

• follow oder nofollow?

  das ist hier die Frage. Schon öfter hab ich von "follow" oder "no-follow"-Links gelesen, ohne mich...

Im Rahmen der Serie "Blog-Ladezeiten optimieren" recherchierte ich auch in Richtung "Pluginfreie Zone". Das ist natürlich etwas übertrieben, denn ganz ohne Plugin geht es nicht, doch lassen sich viele Aufgaben durch Alternativen ersetzen, die das ein oder andere Plugin überflüssig werden lässt.

Als erstes musste das Kontakt-Formular-Plugin weichen. Stattdessen ist nun ein pluginfreies Kontaktformular eingebunden,  das die zugesandten E-Mails automatisch in ein Google-Spreadsheet einfügt. Bei dieser Lösung ist die Benachrichtigungsfunktion übrigens in beide Richtungen aktiviert. René liefert hierzu eine glänzende Beschreibung.

Hurra, wieder ein Plugin gespart. Nun sollte es dem nächsten an den Kragen gehen, da fiel mir "WP-Polls" in's Auge. Mit jedem Blogaufruf wurde dieses  Plugin geladen, ob es benötigt wird oder nicht. Das war umso ärgerlicher, da ich lediglich zwei Umfragen im Blog gestartet habe.  Nun, WP-Polls ist zwar durchaus praktisch und gefällig im Funktionsumfang, doch es ist auch etwas behäbig.

Aber es geht ja auch ohne WP-Polls (oder ähnlichen Plugins) – und zwar auch hier wieder mit Google Text und Tabellen. Im Folgenden möchte ich beschreiben, wie das funktioniert und was dabei zu beachten ist.

Google Formular für Umfrage nutzen

Wir loggen uns bei Google-Text und Tabellen ein und erstellen ein neues Formular.

Wir landen im Bearbeitungsmodus für Formulare. Das vorgegeben Formular können wir gleich mal per Klick auf den Mülleimer löschen. Stattdessen legen wir ein neues Formular an.

Nun kommt es darauf an, welchen Formulartyp wir erstellen wollen. Unter "Element hinzufügen" treffen wir unsere Wahl. Für eine Umfrage eignen sich die Typen
1.) Auswahlfrage 2.) Ankreuzen 3.) Aus einer Liste wählen 4.) Skala 5.) Gitter

Damit Ihr gleich einen Überblick habt, was die verschiedenen Umfragetypen bewirken, hab ich hier mal einen Screenshot zusammengestückelt:

Das Erstellen dieser Formulare ist relativ selbsterklärend. Die Auswahlfrage (1.) sieht im Editor folgendermaßen aus:

Pflichtfragen werden übrigens mit einem Sternchen versehen und entsprechend gekennzeichnet.

Habt ihr Eure Umfrage erstellt, könnt Ihr noch eine Bestätigungstext eingeben, der nach dem Voten erscheint -  à la "Vielen Dank, dass Du abgestimmt hast, Deine Stimme wurde gezählt".

Außerdem gibt es unter "Bestätigung bearbeiten" noch die Option "Antwortzusammenfassung allen anzeigen".  Ist diese Option aktiviert, wird den Votern nach der Stimmangabe das derzeitige Umfrageergebnis angezeigt. Wollt Ihr das Umfrageergebnis in einem Standard-Kuchendiagramm darstellen, so aktiviert diese Option. Das ist die einfachste Möglichkeit. Wollt Ihr  aber Euer eigenes Diagramm basteln (Balken, Säulen, punkte, Linien, bunt, einfarbig, usw.), so lasst Ihr diese Option deaktiviert. Doch dazu später mehr.

Nach  Klick auf "In Webseite/Blog einbinden" erhaltet Ihr  jedenfalls den Code (iframe), den Ihr dann in Eurem Blog einbaut. Im iframe-Code könnt Ihr dann noch die Breite des Frames den Bedürfnissen Eures Blogs anpassen.

Live sieht das dann so aus – Ihr dürft gerne Voten Wie oben schon erwähnt, werden auch die Ergebnisse des Votings nach Klick auf  "siehe vorherige Antworten" in einem Standard-Kuchendiagramm dargestellt

Wo werden die Daten der Abstimmung gesammelt?

Tatsächlich steckt hinter dieser Umfrage bzw dem Formular eine Google-Tabelle, die Ihr natürlich auch aufrufen könnt. Diese Tabelle wird automatisch mit dem Formular erstellt und Ihr könnt Sie vom Dashboard (Google Text- und Tabellen) aufrufen. Hier ist ein Screenshot der Tabelle des obigen Formulars:

Eigenes Diagramm für Umfrageergebnisse erstellen

Der Gedanke, der dahinter steckt ist folgender: Ihr erstellt eine Umfrage, lasst das Ergebnis aber nicht anzeigen (die Option "Antwortzusammenfassung allen anzeigen" ist deaktiviert!). Stattdessen erstellt Ihr ein Diagramm Eurer Wahl, füttert es mit den Daten der o.g. "Google-Tabelle" und blendet dieses zusätzlich ein. Am besten Ihr erstellt eine Hilfstabelle in einem weiteren Tabellenblatt, in dem Ihr die Ergebnisse des Original-Tabellenblattes tabellarisch auswertet. Aus der Hilfstabelle wird dann das Diagramm erstellt, das Ihr freigebt und einbettet. Zur Verdeutlichung ein Screenshot:

Wie Ihr seht, genügt eine einfache "COUNTif-Abfrage" (analog Excels "Zählenwenn"): Zähle mir, wie oft der Begriff aus Zelle A2 in der Spalte B des anderen Tabellenblatts vorkommt.

Aus dieser Tabelle klöppelt Ihr dann Euer Diagramm. Die Möglichkeiten sind beinahe unendlich. Auf die Schnelle hab ich für obiges Beispiel ein Balkendiagramm erstellt und eingebunden:

Sogar Gadgets sind möglich, die auf der Google-Startseite angezeigt werden. Diese Gadgets könnt Ihr auch im Blog einbinden. Es ist natürlich alles Spielerei; hier jedenfalls das Ergebnis der obigen Umfrage als "Anzeigetafel". Diese Gadgets werden aktualisiert, sobald die Seite neu geladen wird.

Eure Meinung

habt Ihr vielleicht schon mit der obigen Umfrage kund getan. Ich freue mich aber auch über Kommentare

Wer noch mehr Spielereien mit Google-Spreadsheets ausprobieren möchte, dem sei auch mein früherer Artikel empfohlen: Wikipedia-Tabellen in Google Spreadsheet importieren und in Google-maps darstellen.

Ähnliche Artikel

• Sitemap erstellen – auch ohne Plugin

  Sitemap your Blog Um eins gleich vorwegzunehmen: Es geht hier nicht um xml-Sitemaps für Suchmaschinen Google & Co, sondern...

• WordPress Dofollow ohne Plugin

  Alle Jahre wieder geistert das Thema "nofollow" durch die Bloggosphäre. Wer nicht weiß, was follow, dofollow...

• 404-Fehlerseite erstellen

  Gastbeitrag von Matthias – Zentodone.eu Bei diesem Artikel handelt es sich um einen Gastartikel für Oliver, alias...

Mach Deinem Blog Beine

Im Web findet man so allerlei mehr oder weniger hilfreiche Plugins (für WordPress), die die Ladezeiten durch Caching und/oder Kompression beschleunigen sollen. Viele davon hab ich auch geleckt, doch keins hat mir geschmeckt. Immer wieder machten diese Werkzeuge an anderer Stelle Probleme, indem irgendwelche Bugs um Backend auftauchten. Doch dabei ist es garnicht so schwer, so einiges an Performance herauszuholen. Ganz ohne Plugin. Naja, fast zumindest – doch dazu später mehr

Ein paar weitere Tipps, um mehr Performance aus Eurer WordPress herauszuholen findet Ihr übrigens im früheren Beitrag WordPress-Hacks.

Immer wieder las ich vom neuen Feature “Webseiten-Leistung“, das in Google-Webmaster-Tools integriert ist. Nun hab ich mich endlich mal drangetraut und mich mit der Sache näher beschäftigt. Mit der Einführung des Tools ist der Verdacht nämlich nicht ganz von der Hand zu weisen, dass Google die Performance  als Kriterium bei der Beurteilung von Webseiten heranzieht. Aber vielleicht täusche ich mich da auch. Jedenfalls sind schnellere Ladezeiten auch ohne Google von erheblichem Vorteil.

Hier, im ersten Teil, möchte ich zunächst etwas über die Vorüberlegungen, die Analysewerkzeuge und einer manuellen gzip-Kompression der größten Ressourcenfresser berichten. Durch die Kompression konnte ich den Blog um einige hundert Kilobyte entschlacken. Natürlich befindet sich auch im derzeitigen Zustand noch genügend Ballast auf der Startseite, doch es ist ein Abwägen von Design, Funktion und Nüchternheit. Letztlich kann Ladezeitenoptimierung auch “Verzicht” bedeuten. Deshalb war die erste Maßnahme, die Anzahl der Artikel-Vorschauen zu reduzieren. Auch die rechte Seitenleiste wurde entschlackt. Meines Erachtens soll die Startseite einen groben Überblick und keinen Content liefern. Ein paar Eyecatcher, eine kurze Vorstellung. Der Rest ist über die Kategorie-Ansichten, der Sitemap, den statischen Seiten, dem Archiv und der Suchfunktion zu finden.

Google Page Speed

Google wartet nicht nur mit dem Lab-Dienst “Website-Leistung” auf, es gibt auch ein dazugehöriges Firefox-Plugin “Page Speed“, das als Aufsetzer zu Firebug eingesetzt wird. Letzteres ist also Voraussetzung für Page Speed.  Ebenfalls ein Aufsetzer zum bereits verlinkten “Firebug” ist das Anlaysetool YSlow. Beides Plugins sind erstklassige Helferlein bei der Analyse und der manuellen Optimierung des Blogs und unerlässlich für unser weiteres Vorgehen . Zusätzlich könnt Ihr Euch den beiden Web-Analysetools “Is my blog working?” und “Pingdom Tools” bedienen. Die Funktionsweise und Zweck des letztgenannten Dienstes wird  bei Hombertho glänzend erläutert. Darauf werde ich in den nächsten Teilen näher eingehen.

Sind die genannten Plugins installiert, wird  Firebug um folgende Karteikarten ergänzt:

Wenn Ihr PageSpeed zum ersten Mal auf Euren (nicht optimierten) Blog loslasst, kann es sein, dass die Ernüchterung groß ist. Die Ergebnisse werden als Ampel ausgegeben (wie hoffentlich auch bald bei den Lebensmitteln):

• Rot: hier besteht (nach Ansicht von Google) Optimierungsbedarf
• Gelb: nicht ganz optimals – Einstellung ggf. überprüfen
• Grün: Alles OK

Wenn da zwei oder mehr “rote Ergebnisse” ausgespuckt werden, habt Ihr durchaus Spielraum nach oben

In den nächsten Artikeln möchte ich darüber berichten, wie ich die Analysen gedeutet habe und wie ich vorgegangen bin. Dabei bin ich mir recht sicher, dass auch für Euch etwas Brauchbares dabei ist.

Wie bereits angedeutet, fange ich im ersten Teil mit der unschönen Page-Speed Meldung an:

Enable gzip Kompression

Compressing the following resources with gzip could reduce their transfer size by about two thirds

Ist der Punkt grün, braucht Ihr heute nicht weiterlesen, ist er gelb oder rot, so dürfte es Euch vielleicht interessieren, wie ich vorgegangen bin. Die Ausgabe bei YSlow ist übrigens ähnlich. Jedoch hat mir bei Page-Speed besser gefallen, dass auch gleich angezeigt wurde, um welches Volumen es bei den einzelnen Dateien geht.

Komprimierungsmöglichkeiten:

Bevor wir beginnen, legen wir eine Sicherung an, damit wir unsere Schritte im Zweifelsfall rückgängig machen können. Zusätzlich sei erwähnt, dass das Thema “Blogladezeiten” sehr heiß diskutiert wird. Nicht alle Vorschläge und Plugins führen zum richtigen Ziel. Letztendlich kostet es etwas Geduld und Spielerei, bis es zu einer gesunden Mischung kommt. Einige Überlegungen und Vorschläge sind nachfolgend aufgeführt.

1. Seitenausgabe mit Plugin komprimieren

Zur Komprimierung von Dateien und der Blogausgabe gibt es unzählige Möglichkeiten und Plugins. In diesem Zusammenhang möchte ich auf Sergejs Plugin für die Komprimierung der Beiträge  verweisen. Hier wird die Kompression der Seitenausgabe einem php-Script überlassen. Das ist vor allem dann zu empfehlen, wenn der eigene oder Shared-Host-Server keine eigene Komprimierung unterstützt. Auf gidnetwork.com könnt Ihr dann testen, ob das genannt Plugin fruchtet. Jedoch komprimiert dieses Tool keine Javascript- oder CSS-Dateien, sondern nur die Seitenausgabe.

2. Dateien serverseitig komprimieren

Wenn Euer Server das externe Erweiterungsmodul mod_deflate unterstützt, könnt Ihr auch so vorgehen wie Perun. In seinem lesenswerten Artikel beschreibt er die Möglichkeit, die verschiedenen Dateitypen serverseitig komprimieren zu lassen. Hierzu ergänzt Ihr Eure .htaccess-Datei mit folgendem Codeschnipsel:

Für mod_deflate:

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

Für mod_gzip: (gefunden bei samaxes.com)

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Kim Hübel behandelte die gleiche Thematik, wie ich soeben per pingback und tweet feststellte. Auch dort gibt es einen mehrteiligen Beitrag zum Thema – Hingehen, Lesen!

Welche Dateitypen komprimiert werden sollen, könnt Ihr selbst festlegen. Allerdings ist auch hier zu beachten, dass der Server bei jeder Datei-Anfrage komprimieren muss, was summa summarum nicht immer einen Vorteil bei der Ladezeit bringen muss. Je nach Auslastung des Servers könnte sich das auch negativ auswirken (z.B. beim shared hosting). Letztendlich müssen die Dateien beim Empfänger auch noch dekomprimiert werden. Doch es ist unbedingt einen Versuch wert.

Unterstützt Euer Server kein mod_deflate oder mod_gzip, werdet Ihr nach Bearbeitung der .htaccess den Blog nicht mehr erreichen können. Es wird ein “500-Error” ausgegeben. Halb so tragisch – durch erneutes Bearbeiten der Datei ist alles wieder beim Alten. Das mit der Sicherungskopie sagte ich schon, oder?

Wer auf Nummer sicher gehen will, bastelt sich eine kleine php-Datei mit folgendem Inhalt:

<?
phpinfo();
?>

Ladet diese per ftp auf den Blog und ruft diese Datei mit dem Browser auf und informiert Euch bei der Ausgabe Eurer php-Umgebung.

3. Dateien per ob_gzhandler komprimieren

Eine weitere, halbmanuelle Möglichkeit, Dateien per php komprimieren zu lassen, wird bei phpperformance.de beschrieben. Dies wäre eine Alternative, falls das mit dem mod_deflate bzw mod_gzip nicht funktioniert. Hierzu werden die zu komprimierenden Dateien mit einem Code ergänzt. Wer sich nicht durch sämtliche Dateien durchhangeln möchte, kann das auch automatisch generieren lassen. Der Autor des o.g. Beitrags liefert hierzu auch eine schöne Lösung. Sinngemäß wird eine Datei mit dem ob_gzhandler-Code erstellt, deren Inhalt per .htaccess-Befehl an den Anfang der gewünschten Dateien gestellt wird. Es ginge aber auch per Stapelverarbeitung auf dem heimischen Rechner – so hab ich das ausprobiert.

4. CSS-Dateien als php ausgeben und komprimieren

Eine weitere Komprimierungsmethode besteht darin, CSS-Dateien in php-Dateien umzuwandeln, die dann per gzip komrimiert werden können. Das hab ich bei markensysteme.de gefunden und es hat mir ganz gut gefallen: Die Stylesheet-Dateien werden durch einem kleinen Code (am Anfang und am Ende der Datei) ergänzt und in eine php-Datei umbenannt. Die Header.php (bzw. der Verweis auf die css-Datei) muss natürlich auch auf die neu erstellte php-Datei verweisen und entsprechend abgeändert werden.

5. Code-Kompression

Diese Komprimierungsmethode lässt sich eigentlich mit allen anderen genannten Methoden kombinieren. Denn hier werden keine Dateien komprimiert, sondern deren Inhalt (Code). Hierzu gibt es verschiedene Kompressions-Generatoren.

Google Page-Speed hat entsprechende Code-Kompressoren für CSS- und js-Dateien bereits eingebaut:

Bild 3: Minify CSS- and Java-Script (Klicken zum Vergrößern)

Ihr kopiert Euch den Inhalt der “minified version” und ersetzt den Originalinhalt der jeweiligen Datei. Zum dritten Mal erinnere ich daran, vorher alles zu sichern. Im oberen Beispiel wären zwar nur 512 bytes (2 %) gespart, es gab allerdings auch ganz andere Kaliber von mehreren KB. übrigens hab ich (im obigen Beispiel) einige css-Dateien in einer einzigen zusammengefasst (test.css). Doch dazu mehr in den nächsten Teilen.

An dieser Stelle soll auch Sergejs “Code-Compressor” nicht unerwähnt bleiben. Er komprimiert js- und css-Dateien wahlweise in “basic” oder “powerfull”.

Es gibt daneben noch zahlreiche weitere Kompressoren  – doch die beiden sollten eigentlich genügen.

6. Dateien manuell komprimieren

Kommen wir zu letzten Kompressionsmethode, die ich hier vorstellen wollte. Das werde ich nun etwas ausführlicher tun, denn das ist die Methode, für die ich mich entschied. Die Methode im Schnelldurchlauf: Ihr komprimiert Eure Dateien selbst – z.B. Javascript Dateien – erstellt quasi Eure eigene gzip-Dateien und stellt diese auf dem Server bereit. Hinzu kommen ein paar Codezeilen in der .htaccess, die dafür sorgen, dass die gzippte Datei ausgegeben wird, sofern verfügbar. Diese Methode hat den Vorteil, dass Ihr:

• wisst, was geschieht
• die Originaldateien ebenfalls auf dem Server bleiben (zur Sicherheit)
• Weder Server noch php Komprimierungsarbeit leisten müssen.

Diese Methode hat den Nachteil, dass jede Datei händisch bearbeitet werden muss und geänderte Dateien (z.B. nach einem Update) nachgepflegt werden müssen. Das klingt im Moment recht erschütternd, ist jedoch viel weniger Aufwand als man glauben mag. Auch hier war Google Page Speed und YSlow behilflich. Sie zeigten mir die größten Sünder an. Nur Dateien ab einem gewissen Einsparungspotential ab ca 5kb hab ich optimiert. Das Beispiel auf Bild 4 zeigt, wie ein Bloggerkollege fast 300KB Transfergröße einsparen könnte. Der Screenshot ist einem anderen Blog entnommen,  bei mir waren es sogar fast 400KB (zwischenzeitlich optimiert).

Mit dem größten Klopper fangen wir nun an. Durch Komprimierung der Datei prototype.js könnten fast 84KB gespart werden. Wir laden die Datei per ftp auf dem heimischen Rechner und komprimieren diese mit 7-zip.

Als Komprimierungsmethode wählen wir GZip  – als Stärke hab ich “Maximum” ausgewählt:

Die neu erstellte (komprimierte) Datei hat nun die Dateiendung “gz”. Aus Kompatibilitätsgründen benennen wir die Dateiendung in “jgz” um. Also: “prototype.js.jgz”.

Diese Datei laden wir dann auf den Server – gleicher Ort wie die Ursprungsdatei.

Damit der Server auch die gezippte (und nicht die Originaldatei) ausgibt, muss die Datei .htaccess noch folgendermaßen ergänzt werden:

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType "text/javascript" .js.jgz
AddEncoding gzip .jgz

Es wird geprüft, ob eine gepackte Version vorliegt. Ist dies der Fall, wird dies anstelle der Originaldatei ausgegeben – gefunden bei tutorialajax.com.

Abschließend bewundert Ihr das positive Ergebnis, indem Ihr Eure Seite neu ladet und eine erneute Page Speed-Analyse startet. Das könnt Ihr dann nach und nach mit den Dateien machen, bei denen sich das Einsparpotential lohnt. Bei mir waren das gerade mal ca 8 Dateien und es ist ja auch sehr schnell erledigt. Ist der Page-Speed-Haken “grün”, könnt Ihr aufhören – entsprechend ist es auch bei YSlow.

Fazit

Dargestellt hab ich sechs Kompressionsmethoden – jede hat Ihre Daseinsberechtigung. Ob und für welche Kompressionsmethode Ihr Euch entscheidet, bleibt Euch überlassen.

Erwartet keine Wunder: Kompression ist nicht alles – es gibt zahlreiche weitere Faktoren, doch dazu mehr im nächsten Teil.

Wie bereits erwähnt, kann sich Kompression auch nachteilig auswirken. Sucht Euch etwas aus, probiert, spielt und testet. So wie ich das auch (für die Startseite) getan habe. Doch seid vorgewarnt: Es geht nie zu Ende

Wenn Euch der Artikel gefallen hat und etwas interessantes für Euch dabei war, dürft hier hier gerne Euren Senf abgeben. Welche Erfahrungen habt Ihr denn gemacht? Kommt eine der Komprimierungsmöglichkeiten für Euch in Frage? Ist Euer Blog optimiert?

Foto: “Hand und Fuß” © Albrecht E. Arnold / PIXELIO

Ähnliche Artikel

• 6 Javascript-Tipps für Deinen Blog

  Eine kleine Zusammenfassung In den vergangenen Artikeln hab ich einiges über die Optimierung des Blogs, insbesondere im Hinblick...

• WordPress Hacks – WordPress beschleunigen

  Vor einiger Zeit veröffentlichte ich den Artikel WordPress-Hacks. Nun geht es weiter – einige Tricks sind neu dazu...

Hallo, liebe Leser von 'Plerzelwupps Erfahrungen'. Ausnahmsweise schreibt hier nicht Oliver, sondern Martin vom Loft 75. Als Urlaubsvertretung freue ich mich sehr, heute Euer Gastautor zu sein. Ich hoffe, dieser Artikel gefällt Euch und ich würde mich sehr freuen, wenn Ihr auch mal bei mir vorbeischaut. Viel Spaß beim Lesen!

Weihnachten, Ostern, Sommer, Herbst, Winter, Halloween

es gibt so viele spezielle Anlässe, an denen etablierte Social Networks und Hersteller-Seiten und natürlich auch Google ihr Logo wechseln – warum denn nicht auch Euer Blog?

Dabei kann das ganz einfach gehen, denn oftmals genügt es ja, das Titel-Logo (den Header) auszutauschen, schon ist die Optik eine ganz andere! Und mit Eurem Autorensystem, z.B. WordPress, ist das recht schnell erledigt. Aber auch Nutzer von Blogger.com oder anderen kostenlosen Blogging-Plattformen können das. Und das ist ganz easy - schaut mal!

Das Logo

Irgendwo habt Ihr ja sicher ein Seitenlogo (auch "Header" genannt) in Eurem Blog eingebaut, ganz oben auf der Seite. Prima! Das verändern wir jetzt, um Euer Weblog jahreszeiten- und event-tauglich zu machen. Was man dafür braucht? Das beschreibe ich Euch jetzt mal kurz.

Das Grafikprogramm

Einige von Euch benutzen sicherlich Photoshop, andere The Gimp (kostenlos), Paint.NET (kostenlo) oder vielleicht PhotoFiltre und ich benutze PhotoImpact. Aber das ist egal, denn wir brauchen eine Datei, die im nativen Format des Grafikprogramms gespeichert ist. Also kein JPG oder PNG, sondern ein Format, welches das Manipulieren von Objekten zulässt.

Wie bitte..?

Okay, Kommando zurück, ich beschreibe das mal gaaanz einfach. Also: Ihr benutzt ein Grafikprogramm, um Eure Logos zu entwerfen und Eure Fotos zu optimieren. Welches das ist, wisst Ihr selbst am besten Wenn Ihr vorhabt, später am Logo oder am Bild noch etwas nachträglich zu verändern, dann speichert Ihr das Ganze in dem Format, das Euer Grafikprogramm vorschlägt. Bei GIMP ist das XCF, bei Photoshop PSD und bei PhotoImpact ist es das UFO-Format. Wenn Ihr die Grafik, die Ihr gerade manipuliert, in diesen Formaten speichert, dann können jederzeit Änderungen vorgenommen werden.

Okay, und jetzt?

Jetzt beginnt der kreative Teil der Übung. Ladet Euer Blog- oder Webseiten-Banner in das Grafikprogramm und schaut selbst, was man daraus machen kann. Z.B. die Schriftart ändern oder das Logo austauschen, vielleicht auch die Farben anpassen. Es soll den Besucher der Seite auf jeden Fall auf positive Weise aufmerksam machen und einfach die eigene Seite oder das Blog aufwerten. Eine gute Idee ist zunächst, die Schriftart auszutauschen – also statt der normalen "Logo-Schriftart" eine zu nehmen, die sich der entsprechenden Jahreszeit oder dem Fest anpasst. Massenweise schöne Fonts gibt es bei DAFONT oder in dieser Kollektion des Smashing Magazine. Einfach eine Schriftart aussuchen, im System installieren und im Grafikprogramm die normale Logo-Schriftart dadurch ersetzen.

Und nun vielleicht noch ein verändertes Logo?
Kein Problem, hier  wird jeder fündig. Einfach mit den neu installierten Schriftarten und den Logos "spielen", bis das Ergebnis gefällt. Dieses dann im Format des Grafikprogramms speichern (s.o.) und zusätzlich als webtaugliche Grafik, also im PNG- oder JPG-Format.

Das neue Logo in die Seite einbauen

So, jetzt haben wir uns z.B. ein weihnachtliches Seitenlogo gebastelt und möchten, dass es auch im Blog verwendet wird. Da gehen wir wie folgt vor:

1. herausbekommen, wie das bisherige Logo heißt (Dateiname). Dazu ganz einfach einen rechten Mausklick auf das Seitenlogo setzen und "Eigenschaften" aus dem Kontextmenü wählen. Schon haben wir Name und Speicherpfad des Seitenlogos.
2. Das FTP-Programm starten, das Ihr normalerweise verwendet (z.B. FileZilla) und zum Speicherpfad navigieren, in dem das Logo gespeichert ist. Oder im Falle von blogger.com-Usern die Seitenvorlage aufrufen und per Klick das Logo auswählen. In beiden Fällen WICHTIG: das bestehende Logo auf dem eigenen Computer speichern, damit es nicht verloren geht!
3. das alte Logo gegen das neue austauschen.

So, fertig!

Und noch mal in Kurzfassung

• Mittels Grafikprogramm des Vertrauens eine neue Logodatei erstellen bzw. die alte verändern
• Darauf achten, dass die Veränderungen in einem Dateityp geschehen, der ein nachträgliches Ändern ermöglicht.
• Grafiken, Icons und neue Schriftarten findet man zuhauf im WWW – einfach das Gewünschte herunterladen und in das neue Logo einbauen.
• Neues Logo im gewünschten Format speichern, also JPG oder PNG
• Bestehende Logo-Datei gegen die neue austauschen und die bisherige sichern

Weitere Tipps und Ideen

Ich habe mir im Laufe des Schreibens Gedanken darüber gemacht, ob man den Vorgang des Logo-Austauschs nicht automatisiert vornehmen lassen kann, z.B.: "in meinem Blog soll zwischen dem 20.12. und dem 26.12. das normale Seitenlogo gegen das Weihnachts-Logo ausgetauscht werden. Danach bitte wieder das normale Logo verwenden." Es gibt sicher eine Möglichkeit, dies zu realisieren, aber ich habe bisher kein PlugIn gefunden, das diese Aufgabe meistert.

Cindy von der Blogwiese wechselt mittels PHP-Code ihr Seitenlogo je nach Tageszeit und in den Kommentaren findet man auch einen Hinweis darauf, wie das geht. Vielleicht weiß jemand Rat?

Selbstverständlich habe ich auch den Header in meinem Blog angepasst – allerdings ganz sparsam, indem ich eine andere Schriftart benutzt habe als sonst und einen kleinen Satz dazu geschrieben habe.

Natürlich kann man auch noch andere Blog-Elemente austauschen – z.B. könnte man die gesamte Farbgestaltung per CSS umstellen und so die eigene Seite komplett umstylen. Auch Schneefall ist im Winter eine gute Idee, z.B. wenn man über einzelne Links fährt. Ein tolles Archiv mit Tipps & Tricks zu JavaScripten, die dies per Einbau in die eigene Seite realisieren, findet Ihr bei bei JSwelt.

So, und nun viel Vergnügen beim kreativen Austoben!

Foto: "4 Jahreszeiten" © Anne Wurster / PIXELIO

Ähnliche Artikel

• Wie nutzt Ihr Euer Mobiltelefon?

  Gastbeitrag von Alex workablogic.de Hallo liebe Leser. Aus der Reihe "Urlaubsvertretung für plerzelwupp"...

• Gastautoren gesucht

  Ruhm und Ehre winken Liebe Besucher, Leser und Blogger-Kollegen, im Wonnemonat "November" steht mein wohlverdienter...

• Für mehr Farbe im Bloggerland

  Gastbeitrag von Retropa Da der liebe Plerzelwupp-Oliver bekanntlich in Südostasien weilt und es sich hoffentlich gut gehen...