bits&pix öffnen die Trickkiste. Damit jeder reinschauen kann.
Start
Leistung
Referenzen
Tipps
    Bits
    Pix
Kontakt
Impressum
Datenschutz

Themen

 
Keywords und Description in WordPress

Transparente PNG im Internet Explorer

Routenplanung mit Google

Keywords und Description in WordPress
Oliver Dammer, Oktober 2011

 

Benutzt man WordPress als CMS und will für einzelne Seiten eigene meta-tags für Keywords und Description verwenden, kann man folgendermaßen vorgehen:

  • in WordPress bei Pages (Edit Page oder Add New, ist egal) Screen Options aufklappen und ein Häkchen bei Custom Fields machen.
  • Unter dem Edit-Fenster zeigt WordPress dann den Block: Custom Fields an.
  • Nun können mit Add New Custom Field Felder hinzugefügt werden. Jeweils mit Name und Inhalt.
    Für das Beispiel wurden zwei Felder angelegt mit den Namen: description und keywords.
  • In header.php, in der Gegend, wo auch andere meta-tags versorgt werden aber natürlich noch vor dem body-tag, folgenden PHP-Code einfügen:

 

<?php
if (get_post_custom_values('description')) {
  $inhalt = get_post_custom_values('description');
  echo '<meta name="description" content="'.$inhalt[0].'" >';
}
if (get_post_custom_values('keywords')) {
  $inhalt = get_post_custom_values('keywords');
  echo '<meta name="keywords" content="'.$inhalt[0].'" >';
}
?>

 

Der Parameter bei get_post_custom_values() ist der Name des Custom Field.

Man sollte vielleicht auch darauf achten, keine Anführungszeichen (einfach oder doppelt) in den Inhalten zu verwenden. Andernfalls den PHP-Code so anpassen, dass sie escaped werden.

 

Transparente PNG im Internet Explorer
Oliver Dammer, Mai 2008

 

Wie wahrscheinlich allgemein bekannt, machen PNG-Bilder mit Transparenz im Internet Explorer bis V6 Probleme. Es gibt unterschiedliche Möglichkeiten, die Bilder trotzdem richtig darzustellen. Als Beispiele seien genannt: pngfix und PNGBehavior.

Zur Arbeitsweise und Code herunter laden besucht bitte die Links. Ich möchte hier lediglich auf einige Probleme aufmerksam machen, die mit den scripts auftreten können. Beide verwenden den IE-Filter AlphaImageLoader, der ab IE5.5 verfügbar ist.

 

pngfix

pngfix kann man in zwei Varianten implementieren: als script, das sämtliche Bilder der Seite durchgeht und auf alle PNGs den Filter anwendet, oder gezielt für einzelne Bilder mittels "onload" im image-tag.

Bei der ersten Variante gibt es anscheinend Probleme, wenn mehrere Bilder (bei einem Versuch ca 10) auf einer Seite sind und das script schon startet wenn noch nicht alle Bilder geladen sind. Die Bilder werden dann klein dargestellt, browser und script blockieren sich gegenseitig und das Laden der restlichen Bilder dauert endlos.

Bei Variante 2 gibt es dieses Problem nicht.

 

PNGBeahvior

Hier müssen unbedingt width und height angegeben sein. Entweder im image-tag oder im css. Andernfalls werden die gefilterten Bilder nicht angezeigt.

PNGBehavior scheint etwas langsamer als pngfix zu sein. Wir verwenden momentan pngfix, filtern aber jedes Bild einzeln.

 

Routenplanung mit Google
Oliver Dammer, Mai 2008

 

Es gibt eine Vielzahl von Routenplanern im Netz. Einer der einfachsten - im Sinne von Aufruf und Benutzung - und (noch) kostenlosen ist der von Google.

Hier sind die Mindestangaben zum Route berechnen zu einem festen Zielort:

 

<form method="get" action="http://maps.google.de/" target="_blank">
<p>
Von <input name="saddr" type="text">
<input name="daddr" type="hidden" value="Marienplatz 5,80331 München,Deutschland">
zum Münchner Marienplatz <input type="submit" value="Route berechnen">
</form>

 

target="_blank" dient lediglich dazu, den Routenplaner in einem neuen Fenster/Tab zu öffnen
Das p-tag verhindert Fehlermeldungen des HTML-Validators bei DOCTYPE: strict
saddr ist die Startadresse
daddr ist die Zieladresse

Die Zieladresse soll eindeutig sein (so genau wie möglich angeben). Andernfalls wird auf der Google-Seite eine Auswahl von Zieladressen angezeigt und das macht einen schlechten Eindruck.

 

Obigen Code testen:

Von zum Münchner Marienplatz

 

Wenn auch die Zieladresse eingegeben werden soll: beim zweiten input-tag type="hidden" ersetzen durch type="text", value="..." entfernen und den restlichen Text anpassen.