WordPress: „Contact Form 7“- Optimierung

Geschrieben von am 11. Mai 2012 um 10:52 Uhr in Webdesign 0

Optimierung des Contact Form Plugins in WordPress

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') ) {