Telefon: +49 (0)2821 - 7203 - 151

WordPress: „Contact Form 7“- Optimierung

Viele kennen sicher das Kontaktformular-Plugin „Contact Form 7 “ von Takayuki Miyoshi.
Mit Hilfe des Plugins können spielend leicht mehrere Kontaktformulare individuell erstellt und in WordPress-Seiten eingebunden werden.

Ein Nachteil des WordPress-Plugins ist, dass permanent auf allen WordPress-Seiten und -Artikeln zwei Javaskript-Dateien und ein Cascading Stylesheet eingebunden werden obwohl diese nur auf den entsprechenden Seiten bzw. Artikeln benötigt werden, auf denen man das Kontaktformular nutzt. Dies hat natürlich den Nachteil, dass unnötige HTTP-Abfragen auf allen Seiten ausgeführt werden.

Takayuki Miyoshi – Entwickler des Plugins – hat jedoch auch hierbei an WordPress-Nutzer gedacht und stellt mit einer Konstante innerhalb seines Plugins die Möglichkeit dar, die Ausgabe der Javaskript-Dateien und des Cascading Stylesheet vollständig abzuschalten.

Dadurch haben wir die Möglichkeit, die benötigten Javaskript-Dateien und das Cascading Stylesheet, die das „Contact Form 7“-Plugin benötigt, ausschließlich auf den entsprechenden Kontaktseiten einzubinden.

Wir möchten euch anhand eines kurzen Code-Schnippsel zeigen, wie Ihr mit minimalem Aufwand die Verwendung von „Contact Form 7“ optimieren könnt und auf eurer WordPress-Webseite drei HTTP-Abfragen einsparen könnt.

Als Vorbereitungsmaßnahme – damit unser kleiner Code-Schnippsel funktioniert – müsst ihr in der wp-config.php eurer WordPress-Installation folgende zwei Konstanten einfügen:

define ('WPCF7_LOAD_JS', false); // Added to disable JS loading
define ('WPCF7_LOAD_CSS', false); // Added to disable CSS loading

Idealerweise fügt Ihr diese Konstanten direkt unter define('WP_DEBUG', false); ein.
Mit diesen beiden Konstanten in der wp-config.php teilen wir dem „Contact Form 7“-Plugin mit, dass die Javaskript-Dateien und das Cascading Stylesheet im Theme nicht geladen werden sollen.

Jedoch benötigen wir die Javaskript-Dateien und das Cascading Stylesheet zumindest auf den entsprechenden Kontaktseiten. Fügt dazu in der functions.php eures aktiven Themes folgenden Code-Schnippsel ein:

/**
 * Contact Form 7
 *
 * Load the Stylesheets and JavaScript Files only on Pages with Contact Forms
 */
function bt_cf7_eneque() {
	if ( is_page('contact') or is_page('kontakt') ) {
		if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
			wpcf7_enqueue_scripts();
			wpcf7_enqueue_styles();
		}
	}	
}
add_action( 'wp_print_scripts', 'bt_cf7_eneque', 100 );

Mit dieser kleinen Funktion teilen wir WordPress mit, dass die Skripte und das Cascading Stylesheet für „Contact Form 7“ nur auf den Seiten „Contact“ bzw. „Kontakt“ geladen werden.

Heißen bei euch die Seiten anders oder nutzt Ihr mehrere Kontaktformulare auf eurer Seite, erweitert folgende stelle um weitere „is_page()“ Anweisungen:

if ( is_page('contact') or is_page('kontakt') or is_page('anfrage') ) {

CSS3: Runde Ecken mit CSS

Mit CSS3 kommen viele neue und standardisierte Features für die Erstellung von Webseiten ins Spiel, die dem Webdesigner und Programmierer neue und einfache Möglichkeiten bieten.

Bisher gab es nur zwei Methoden zur Einbindung von runden Ecken.

Einmal über eine Grafikdatei, die als Hintergrund mittels CSS geladen wurde oder aber mit Hilfe von internen CSS Regeln der Browser-Hersteller, wie z.B. -moz-border-radius.

Letztere Variante möchte ich hier kurz näher erläutern.

Über die browserspezifischen CSS Regeln kann man innerhalb der CSS Eigenschaften definieren, die nur der angesprochene Browser interpretieren kann und entsprechend ausgibt. Dies hat natürlich zur Folge, dass andere Browser die entsprechenden Befehle nicht richtig auslesen, weshalb man für diese wiederum andere eigene Regeln nutzen muss. Hier ein kleines Beispiel:

.abgerundet {
   -moz-border-radius:10px; /* Firefox */ 
   -webkit-border-radius:10px; /* Safari, Chrome */ 
   -khtml-border-radius:10px; /* Konqueror */
}

Wie Sie sehen haben wir drei Eigenschaften für Runde Ecken definiert. Diese drei Eigenschaften sind unter anderem für „Firefox“, „Google Chrome“, „Safari“ etc.. Außen vor bleibt hierbei der „Internet-Explorer“.

Die neusten Versionen der Browser beherrschen jedoch die CSS3 Eigenschaft „border-radius“, sogar der „Internet-Explorer“ ab Version 8. Mit diesem Befehl hat man die Möglichkeit, runde Ecken mit nur einer Regel zu definieren.

   border-radius: WERT1 WERT2 WERT3 WERT4;

Dadurch ist es uns nun möglich, mit nur einer Eigenschaft, runde Ecken für unsere Webseite oder Box zu generieren. border-radius lässt vier Werte zu, mit denen wir dem Browser mitteilen können, welche Ecke des Containers wir abrunden wollen.

Beispiel:
Möchten wir nur die obere linke Ecke mit einer 20px starken Abrundung versehen, so nutzen wir die border-radius Eigenschaft wie folgt:

   border-radius: 20px 0 0  0;

Wir haben So aber auch die Möglichkeit festzulegen, dass nur die beiden oberen Ecken abgerundet werden sollen.

   border-radius: 20px 20px 0 0;

Mit dieser Anweisung in der CSS erreichen wir, dass die beiden oberen Ecken abgerundet werden, die beiden unteren aber ihren Normalzustand beibehalten.

Wenn wir nun alle Ecken mit der gleichen Rundung versehen möchten, so benutzen wir border-radius einfach nur mit einem Wert.

   border-radius: 20px;

Im übrigen lassen sich mit dem Befehl border-radius nicht nur Borders, sondern auch jegliche andere Arten von Containern beeinflussen.

Warum Validität nicht alles aussagt

Man liest häufig davon, dass Webseiten (x)HTML valide sein müssen, um bei Google besser bewertet zu werden. Ganz richtig ist dies so nicht. Natürlich sollte eine moderne Webseite möglichst den aktuellen Standards entsprechen. Daraus folgt allerdings nicht zwangsläufig, dass eine Webseite hundertprozentig valide sein muss.

Ein exzellentes Beispiel ist der CSS Validator des W3C, dieser prüft im Standard nur CSS 2.1 Eigenschaften. Verwendet man bei seiner Programmierung jedoch CSS3 Eigenschaften, um z.B. mittels opacity einen transparenten Bereich zu definieren, bewertet der CSS Validator die Webseite als nicht valide.

Nicht valide? Dann darf man es doch gar nicht verwenden, um eine moderne Webseite zu erstellen die zugleich für Suchmaschinen optimiert werden soll, oder?

Falsch, denn opacity ist eine CSS3 Eigenschaft und wird von den modernen Browsern, wie Firefox oder Opera, bereits Unterstützt. CSS3 wird inzwischen auch vom CSS Validator anerkannt. Dies muss jedoch bei der Validierung des Stylesheets angegeben werden. Das Ranking in den Suchmaschinen wird zudem nicht beeinträchtigt, wenn man die modernen CSS Eigenschaften verwendet.

Und wie sieht es mit HTML aus?

Bei HTML verhält es sich ähnlich. Der HTML Validator der W3C prüft HTML anhand des Doctypes der im HTML-Kopf (dem sogenannten Head) angegeben ist. Aufgrund der Angaben im Header werden die Kriterien für die Validierung festgelegt.

Verwendet man aber in seinem Dokument, z.B. „WAI-ARIA“ Standard, um seine Dokumente benutzerfreundlicher zu gestalten, wird die Programmierung vom Validator nicht als Valide anerkannt. Dies rührt daher, dass der „WAI-ARIA“ Standard noch kein implementierter Standard des W3C ist. Dieser Standard wird aber ebenfalls von allen modernen Webbrowsern unterstützt oder zumindest ignoriert. Das W3C weiß um dieses Manko des Validators und bemüht sich darum, das Problem zu beheben.
Dies könnte aber noch eine Weile dauern und so sollten sich Freelancer, Agenturen und auch seriöse SEOs darum bemühen, den Mythos der hundertprozentigen Validierung aus der Welt zu schaffen und Kunden zu vermitteln, das Validität nicht alles ist.

Was also tun?

Sollte man wegen des Mankos der W3C Validatoren auf modernes Webdesign nach neuesten Standards verzichten?
Die Antwort lautet: Nein. Die neuen Browser unterstützen zum größten Teil die neuen Spezifikationen für xHTML und CSS und haben zudem weitere Standards wie „WAI-ARIA“ längst implementiert. Modernes und flexibles Webdesign sollte daher nicht unter den Altlasten der Validatoren leiden und von jedem Programmierer unterstützt werden.

Zudem ermöglichen viele neue CSS3 Eigenschaften weitere effektive Maßnahmen zur Optimierung der Performance von Webseiten. So ist es z.B. mit CSS3 möglich, runde Ecken, Text-Schatteneffekte und weitere Designfeinheiten zu realisieren, ohne dass hierzu eine Grafik geladen und gerendert werden muss. Die kürzere Ladezeit schafft zwei Vorteile, von denen Besucher und das Ranking der eigenen Webseiten profitieren.

Nehmen wir z.B. an, dass man Überschriften mit einem Text-Schatten bestücken möchte. Nach den alten Standards war dies nur mit einer Grafik möglich, die beim Laden der Webseite erst noch abgefragt werden musste. Versierte Webdesigner haben die Grafik in der Regel per CSS als Hintergrundbild geladen und den Text durch den Befehl „text-indend: -9999px“ ausgeblendet.
Durch die CSS3 Eigenschaft „text-shadow“ kann man sich jedoch das Laden einer Grafik ersparen, da der Browser selbstständig den programmierten Schatteneffekt hinzufügen kann.

Geht man davon aus, dass eine kleine Firmen-Webseite zumeist mindestens sechs Seiten hat, in der alle Hauptüberschriften mittels Grafik ersetzt werden, so spart sich der Besucher sechsmal das Laden einer Grafik. Dadurch sinkt die Ladezeit der Webseite, was gleichzeitig den unnötigen Verbrauch von Traffic reduziert.

Ein geringer Traffic ist z.B. für Smartphonebesitzer, die Ihre Webseite mit dem Handy oder Tablet-PC aufrufen, von entscheidenden Vorteil, da in diesen Bereichen vielfach eine Begrenzung des Transfervolumens herrscht. Die Webseite öffnet sich deutlich schneller im Smartphone und der User muss beim Besuch Ihrer Webseite nicht so große Datenpakete abrufen.

Lassen Sie sich also nicht von dem Mythos, dass Webseiten valide sein müssten um in Suchmaschinen ranken zu können, in die Irre führen. Moderne Webseiten, die mit xHTML und CSS3 erstellt werden, haben keinen Nachteil bei der Positionierung in den Suchmaschinen, bieten jedoch erhebliche Vorteile.

UPA -Webdesign mit neuem Internetauftritt

Unser Webdesign Team hat sich in den letzten drei Monaten intensiv damit beschäftigt, den Webauftritt des UPA-Webdesign Teams neu zu planen und zu überarbeiten.

Ziel der neuen Webpräsenz ist es, näher am Kunden zu sein und neue Märkte zu erschließen.

Unsere individuellen Leistungen aus unserer breiten Produktpalette werden umfassend vorgestellt. Zudem möchten unsere Mitarbeiter vom Webdesign Team und der AdWords Abteilung die Kundenbindung intensivieren, wozu in Zukunft in dem dazu extra angelegten Blog aktuelle Informationen, Anleitungen und Codes veröffentlicht werden.

Unter anderem erwartet Sie z.B. eine Anleitung unserer Webdesign Abteilung für den richtigen Umgang mit dem kostenlosen Open Source System „WordPress“. Sie erfahren, wie Sie ganz einfach Ihre Inhalte pflegen oder weitere Seiten in Ihrer Webseite anlegen können. Unser AdWords Team wird Ihnen außerdem im Blog aktuelle News zu „Google AdWords“ sowie hilfreiche Ratschläge zur Kontenoptimierung und Kostensenkung zur Verfügung stellen.

Wir freuen uns auf die Aufgaben, die mit der neuen Internetpräsenz auf uns zukommen und hoffen, unsere Kunden auf diese Weise noch besser beraten und informieren zu können.

Ihr UPA-Webdesign Team