Contact Form 7: Nicht immer CSS & JavaScript laden – Eine Anleitung für das Moka-Theme von Elmastudio

26. Jänner 2014contactform7 CSS javascript Moka Plugins WordPress

Contact Form 7 ist ein schönes WordPress-Plugin und bringt geniale (Kontakt-) Formulare auf unzählige Blogs. Dazu setzt sich allerdings im Header fest und lässt bei jeder einzelnen WordPress-Seite, jedem Blogposting auch das eigenen JavaScript und CSS laden. Das ist aber nicht wirklich notwendig. Und um die Ladezeiten, gerade für die mobilen Besucher, zu verbessern, gibt es hier eine Anleitung, um das überflüssige JavaScript und CSS nicht zu laden.

Die Anleitung ist natürlich abhängig vom verwendeten WordPress-Theme. Hier zeige ich es anhand von Moka, meinem aktuellen Theme von Elmastudio.

wp-config.php bearbeiten

Eine allgemein gehaltene Anleitung gibt es auf der Hilfeseite von Contact Form 7. Nach der muss man zuerst die Datei wp-config.php bearbeiten. Dort fügt man einfach diese beiden Zeilen hinzu (oberhalb des abschließenden Kommentars):

define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

Damit weiß WordPress, dass es das JavaScript und CSS von Contact Form 7 nicht mehr automatisch laden soll. Dies gilt natürlich für alle Seiten des Blogs. Und nun müssen wir noch die Kontaktseite definieren, auf der die beiden Dateien eben doch geladen werden sollen.

Seitenvorlage erstellen & einrichten

Nun sollen das JavaScript und CSS ja auf einer Seite eben doch geladen werden. Nämlich auf der (oder den) Seiten mit dem Kontaktformular. Dazu muss man im Header vor dem Aufruf wp_head() einige Zeilen einfügen, mit der dann JavaScript und CSS von Contact Form 7 geladen werden.

Und natürlich darf dieser Aufruf nur auf eben der Kontaktseite erfolgen. Dafür benötigt diese eine eigene, spezielle Seitenvorlage.

Ein Page-Template unter Moka erstellen

Moka liefert bereits drei Seitenvorlagen mit. Diese sieht man im WordPress-Backend, wenn man eine neue Seite erstellen oder eine bestehende bearbeiten will. Auf der rechten Seite findet sich das Kästchen Attribute. Dort ist eine Auswahlliste der Vorlagen (Template). Moka liefert mit: Front Page (für die Startseite), Full Width Page (die normale Seitenvorlage, bloß breiter) und Archive Page (für Archive, mit Tagcloud etc. voreingestellt). Theoretisch könnten wir diese Seitenvorlagen bearbeiten, doch wir würden herumpfuschen. Nach drei Monaten hätten wir diese Änderungen vergessen und würden uns wundern, was WordPress da auf einmal macht. Deshalb erstellen wir eine spezielle Seitenvorlage für das Kontaktformular.

Zu finden sind die Vorlagen nicht direkt im Theme-Ordner von Moka. Sie sind im Unterordner page-templates, also auf dem Server über diesen Pfad erreichbar: .../wp-content/themes/moka/page-templates/
Ich habe als Vorlage das Archiv-Template verwendet und dort auch den Header direkt eingefügt, der eigentlich aus der header.php geladen wird. Denn der Aufruf der Contact Form 7 – Scripte muss im Header-Bereich vor dem Aufruf wp-head() geschehen. Das ist nicht möglich, wenn der originale Header header.php aufgerufen wird. Ansonsten würden wir wieder in allen Blogseiten / Blogposts die Scripte von Contact Form 7 aufrufen.

Um die Scripte aufzurufen, muss dies vor wp-head() aufgerufen werden:
<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
?>

Basierend auf dem Original Header von Moka 1.03 habe ich nun mit dem Namen page-contact.php folgende Datei erstellt und in /wp-content/themes/moka/page-templates/ hochgeladen:

<?php
/**
* Template Name: Contact Page
* Description: An contact page template
* Displays all of the <head> section and everything up till <div id="main-wrap"> for the contact page
*
* @package Moka
* @since Moka 1.0
*/
?><!DOCTYPE html>
<html id="doc" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->

<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
?>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div id="container">
<div class="search-overlay">
<div class="search-wrap">
<?php get_template_part( 'search-main' ); ?>
<div class="search-close"><?php _e('Close Search', 'moka') ?></div>
<p class="search-info"><?php _e('Type your search terms above and press return to see the search results.', 'moka') ?></p>
</div><!-- end .search-wrap -->
</div><!-- end .search-overlay -->

<div id="sidebar-wrap">
<div id="sidebar">
<header id="masthead" class="clearfix" role="banner">
<div id="site-title">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php if ( '' != get_bloginfo('description') ) : ?>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div><!-- end #site-title -->
</header><!-- end #masthead -->

<a href="#nav-mobile" id="mobile-menu-btn"><span><?php _e('Menu', 'moka') ?></span></a>
<nav id="site-nav" class="clearfix">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'false') ); ?>
<div id="search-btn"><?php _e('Search', 'moka') ?></div>
</nav><!-- end #site-nav -->

</div><!-- end #sidebar -->
</div><!-- end #sidebar-wrap -->

<div id="main-wrap">

<div id="primary" class="site-content" role="main">

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', 'page' ); ?>

<?php endwhile; // end of the loop. ?>

</div><!-- end #primary -->

<?php get_footer(); ?>

Hat man persönliche Änderungen am Header in vorgenommen, müssen diese hier erneut eingefügt werden. Denn mit diesem Template:

header.php wird nicht geladen
Die JavaScripte von Contact Form 7 werden aufgerufen
Die CSS-Dateien werden nicht geladen, denn Moka hat bereits im eigenen Stylesheet vorgesorgt
Keine Kommentarfunktion geladen, weil ich dies auf einer Kontakt-Seite für unnötig und verwirrend halte
Noch kein Kontaktformular geladen, dies muss über eine erstellte Seite (mit dieser Seitenvorlage) erfolgen

Die Kontaktseite erstellen und Contact Form 7 einbinden

Ist die obige Datei als /wp-content/themes/moka/page-templates/page-contact.php hochgeladen, lässt sich nun einfach die eigentliche Kontaktseite erstellen. Dazu erstellt man zuerst im Admin-Bereich von WordPress das gewünschte Kontaktformular (linke Seitenleiste > Formular). Man bekommt einen Shortcode für das Formular wie [contact-form-7 id="26" title="Kontaktformular 1"].

Nun erstellt man über Seiten > Erstellen eine neue Seite. Rechts wählt man in der Auswahlbox Attribute unter Template nun Contact Page aus. Dann fügt man den Shortcode ein, gibt der Seite eine Überschrift, schreibt vielleicht noch irgendetwas hinzu und veröffentlicht die Seite.

Nun hat man eine Kontaktseite mit passendem Formular und ein restliches Blog, bei dem nicht unnötigerweise die JavaScripte und die CSS-Dateien von Contact Form 7 immer geladen werden. Fertig!