"Contact Form 7" auf goneo-Webspace zum Laufen kriegen

Mail

Kontaktformulare sind eine gute Sache, wenn sie funktionieren. Funktionieren sie nicht, werden sie schnell zu einem Quell steten Ärgernis. Dies ist der Fall, wenn man seine WordPress-Installation auf goneo-Webspace liegen hat. goneo hat nämlich im März sein System dergestalt modifiziert, dass Mail-Skripte nur noch mit einer bei goneo angelegten Email-Adresse funktionieren. Dies ist eine Reaktion auf das erhöhte Spam-Aufkommen.

Möchte man dann - so wie ich - seinen Blog mit dem ganz ausgezeichneten PlugIn "Contact Form 7" ausstatten, wird das nicht von Erfolg gekrönt sein, auch wenn bei Testläufen immer die Meldung "Email wurde erfolgreich versandt." erscheint. Man muss dem Skript also irgendwie seine bei goneo angemeldete Email-Adresse mitteilen.

Dies kann man einerseits sicherlich im PlugIn selbst machen, was kompliziert ist und genau bis zum nächsten Update hält, oder man geht den Weg über die php.ini. Letztere Möglichkeit beschreibe ich im folgenden, wobei mod_rewrite aktiviert sein muss, was auf dem goneo-Webspace problemlos möglich und generell empfehlenswert ist.

Also dann: Nehmen wir an, unser Kontaktformular ist über den URL "http://www.meine-homepage.tld/kontaktformular/" im WordPress-System erreichbar. Dann müssen wir kurz gesagt nur eine Kopie der php.ini mit den entsprechenden Anpassungen in das Verzeichnis "/kontaktformular/" laden und schon funktioniert alles.

Dafür brauchen wir als erstes das Verzeichnis "/kontaktformular/". Da wir mod_rewrite benutzen, existiert dieses Verzeichnis nicht. Wir legen es aber einfach an, indem wir auf der root-Ebene unserer WordPress-Installation (dort, wo die Ordner wp-admin, wp-content und wp-includes liegen) einen Ordner erstellen und "kontaktformular" nennen. In diesen kopieren wir die "index.php"-Datei von der root-Ebene und modifizieren sie im Text-Editor der Wahl folgendermaßen:

Aus Zeile 17…

require('./wp-blog-header.php');

wird…

require('../wp-blog-header.php');

Nicht wundern, es wurde wirklich nur ein Punkt hinzugefügt.

Als nächstes brauchen wir eine Kopie der php.ini, um "Contact Form 7" unsere Email-Adresse mitteilen zu können. Um diese in den Ordner "kontaktformular" zu kopieren, legen wir im Ordner eine PHP-Datei an und nenne sie "copyini.php". In diese fügen wir folgenden Code-Schnippel ein:

PHP
<?php
$cfg=get_cfg_var('cfg_file_path');
if (copy($cfg,'./php.ini')) {
    echo "Kopieren erfolgreich"; }
else {
    echo "Kopieren fehlgeschlagen"; }
?>

Danach gehen wir in den Browser und rufen das Skript auf, indem wir "http://www.meine-homepage.tld/kontaktformular/copyini.php" in die Adresszeile eintippen. Nun sollte im Browser-Fenster die Zeile "Kopieren erfolgreich" erscheinen. Das bedeutet, dass eine Kopie der php.ini im Ordner "kontaktformular" angelegt wurde.

Nun schmeißen wir die Datei copyini.php weg und nehmen uns die php.ini vor. Einfach im Text-Editor der Wahl öffnen und die Zeile 630

sendmail_path = /usr/local/sbin/sendmail -t -i

durch folgende ersetzen:

sendmail_path = /usr/local/sbin/sendmail -t -i -f mail@meine-homepage.tld

Nun noch speichern und fertig ist die Laube!

Ich möchte allerdings noch einmal darauf hinweisen, dass sich diese Anleitung nur auf WordPress-Installationen bezieht, die auf goneo-Webspace liegen. Solltet ihr bei einem anderen Hoster sein und Probleme haben, kann ich euch nur das Support Forum nahe legen.

Nachtrag:

Der Sicherheit halber solltet ihr zum Schluss noch den Zugriff auf auf die php.ini-Datei über den Browser per .htaccess unterbinden. Das geht mit folgendem Code-Schnipsel, der in besagte .htaccess-Datei eingetragen werden muss:

.htaccess
<Files php.ini>
   order allow,deny
   deny from all
</Files>

Weiterführende Links:

Bild: The slot for the mail next to the front door also has the doorbell button on it. von Samuraijohnny unter CC-Lizenz

  • Twitter
  • Facebook
  • del.icio.us
  • MisterWong.DE
  • Yigg
  • MySpace
  • StumbleUpon
  • Webnews.de
  • LinkArena
  • Technorati
  • Digg

Geschrieben am 11. Juni 2009 • 11 Kommentare

Wie man dem Internet Explorer 6 Herr wird

Der IE6 kann zurecht als Schmutzfleck auf dem Browser-Markt bezeichnet werden. Und hartnäckig ist er obendrein auch, jedenfalls solange auf den Firmenrechnern der Welt Windows XP läuft. Und solange dies so ist, muss man beim Erstellen einer Website darauf Rücksicht nehmen. Allerdings muss Cross-Browser-Kompabilität auch in Zeiten des Internet Explorer 6 kein Grund sein, sich graue Haare stehen zu lassen.

Jedenfalls nicht, solange man "nur" einfache Seiten in HTML/CSS schreibt. Es gibt lediglich ein paar Dinge, auf die man achten muss, und schon sieht die Welt gleich viel freundlicher aus.

  1. Weg mit der XML-Deklaration!
  2. Den "Double-Margin-Bug" unterbinden
  3. Das "hasLayout-Konzept" berücksichtigen
  4. hr-Tags immer umschließen
  5. "text-align: center" für zentrierte Layouts
  6. Die :hover-Pseudoklasse für alle Elemente verfügbar machen
  7. Finger weg von Attribut-Selektoren
  8. Vorsicht bei Hover-Effekten in Verbindung mit Hintergrund-Grafiken
  9. "iepngfix" für PNGs mit Alpha-Transparenz
  10. Fazit

Weg mit der XML-Deklaration!

Solange euer HTML-Dokument mit der Zeile <?xml version="1.0" encoding="utf-8"?> anfängt, fällt der IE6 in den Quirks-Modus und das Box-Modell wird falsch berechnet. Das hat zur Folge, dass margin-, padding- und border-Angaben im Stylesheet nicht mit in die Breite bzw. Höhe eines Block-Elements einfließen.

Den "Double-Margin-Bug" unterbinden

Weist man einem Block-Element die Eigenschaft float: left zu, verdoppelt der IE6 den Außenabstand nach links. Analog läuft es mit float: right. Dies kann einem jedes Layout verhageln. Unterbinden lässt sich dies, indem man dem gefloateten Element die Eigenschaft display: inline zuweist. Klingt absurd, hilft aber.

Das "hasLayout-Konzept" berücksichtigen

hasLayout ist eine proprietäre Eigenschaft von Microsoft und kann true oder false sein. Viele Darstellungsfelder im IE6 gehen auf diesen Eigenschaft zurück. Man geht also auf Nummer Sicher, wenn man mit width-Angaben im Stylesheet nicht knausert, wodurch das Element auf hasLayout = true gesetzt wird.

hr-Tags immer umschließen

hr-Elemente haben im IE6 immer einen Rand, daher muss man sie mit div-Tags umschließen und das hr-Tag selbst im Stylesheet auf display: none setzen.

HTML
<div class="hr">
	<hr />
</div>
CSS
.hr {
   /* hier das styling */
}

.hr hr {
   display: none
}

"text-align: center" für zentrierte Layouts

Will man sein Layout zentrieren, so wie ich das hier gemacht habe, weist man dem Inhaltscontainer einfach im Stylesheet die Eigenschaft margin: 0 auto zu und schon sitzt das Ding mittig. Außer natürlich im IE6.

Hier gibt es allerdings einen schönen Workaround: Einfach dem body-Tag text-align: center zuweisen, dadurch wird der Inhaltscontainer zentriert. Dem Inhaltscontainer wiederum weist ihr die eigentliche, auf der Website gewünschte Textausrichtung zu.

CSS
body {
   text-align: center
}

#wrap {
   text-align: left
}

Die :hover-Pseudoklasse für alle Elemente verfügbar machen

:hover ist eine sogenannte Pseudoklasse und funktioniert im IE6 nur in Verbindung mit dem a-Element. Dies kann nervig sein, wenn man z.B. einen Button mit einem Hover-Effekt versehen möchte, was der Benutzbarkeit einer Website ja durchaus zuträglich sein kann.

Für diesen Fall empfiehlt sich der "Whatever:hover"-Hack. Sobald dieser eingebunden ist, kann man die :hover-Klasse auf alle Elemente anwenden.

Achtung: Funktioniert nur bei aktiviertem JavaScript!

Finger weg von Attribut-Selektoren

Mit Attribut-Selektoren hat man bspw. die Möglichkeit einzelne input-Elemente in einem Formular über input[type=text] oder input[type=submit] anzusprechen und zu stylen. Eine tolle Einrichtung in CSS, die im Internet Explorer 6 leider nicht funktioniert. Man kommt also nicht umhin, althergebrache ID's oder Klassen zu vergeben, wenn man diese Elemente ansprechen möchte.

Vorsicht bei Hover-Effekten in Verbindung mit Hintergrund-Grafiken

Besonders bei Hover-Effekten empfiehlt es sich eigentlich, auf sogenannte CSS-Sprites zurück zu greifen, um Verzögerungen beim Laden der Hover-Grafik zu vermeiden. CSS-Sprites bedeutet, dass man alle Grafiken in eine Datei steckt und beim Hover-Effekt keine neue Grafik lädt, sondern lediglich die Hintergrundposition des CSS-Sprites ändert.

Eine geniale Lösung - außer für den IE6. Dieser speichert Grafiken nicht im Cache, so dass die große CSS-Sprite-Grafik jedes mal neu geladen werden muss, was den Hover-Effekt noch holperiger als bei der Standard-Lösung macht. Das bedeutet, dass man für den IE6 ein Extra-Stylesheet anlegen muss, in dem man die Hover-Effekte auf althergebrachte Weise mit Einzelgrafiken definiert.

"iepngfix" für PNGs mit Alpha-Transparenz

Der IE6 unterstützt von Hause aus keine Alpha-Transparenz bei PNGs, weshalb der eigentlich transparente Bereich in einem "dekorativen" grau erstrahlt. Allerdings ist das kein Grund zu verzagen, gibt es doch den "iepngfix". Diesen - genauso wie den "Whatever:hover"-Hack - in die Website einbinden, und schon bereiten PNGs keine Probleme mehr.

Achtung: Funktioniert nur bei aktiviertem JavaScript!

Fazit

Berücksichtigt man diese Dinge, kann man schon von Vornherein eine Menge Unheil verhindern, ohne dass man von Beginn an seine Zeit mit dem IE6 verschwendet. Ich als Apple-User baue meine Seite komplett im Firefox und erst zum Schluss schmeiße ich "Parallels Desktop" an und begutachte die Seite im Internet Explorer. Klingt mutig, ist aber kein Problem, wenn man den IE6 von Anfang an im Hinterkopf hat.

Sollte ich etwas wichtiges vergessen haben, bin ich über einen Hinweis in den Kommentaren dankbar. Ansonsten wünsche ich weiterhin viel Spaß(?) beim Arbeiten mit dem Internet Explorer 6.

PS: Auch interessant ist der Beitrag über den Umgang mit dem IE6 von Dirk Jesse.

  • Twitter
  • Facebook
  • del.icio.us
  • MisterWong.DE
  • Yigg
  • MySpace
  • StumbleUpon
  • Webnews.de
  • LinkArena
  • Technorati
  • Digg

Geschrieben am 7. Juni 2009 • 4 Kommentare