Sicher ist euch schon einmal aufgefallen, dass bei Passwort geschützten Artikeln und Seiten von WordPress im Frontend automatisch ein Formular zur Passwort Abfrage erstellt wird. Leider gibt es hier kein eigenes Template dafür und es muss entsprechend mit einem Override angepasst werden. Zudem möchten wir die Passwort geschützte Seite nutzen um gleich Kundendaten zum Beispiel für den Newsletter zu sammeln. So könnt ihr ganz einfach zum Beispiel einen geschützten Händlerbereich oder ein Passwort geschütztes E-Book anbieten, das man nur via Newsletter Registrierung erhält.
Natürlich könnt ihr das direkt in die functions.php eures Themes einbauen. Die 2.te Möglichkeit ist ein kleines WordPress Plugin, das jederzeit bei Bedarf deaktiviert werden kann und auch unabhängig von Eurem Theme funktioniert. In diesem Tutorial möchten wir die 2.te Möglichkeit ansehen – also ein kleines Plugin erstellen.
Voraussetzungen
Für das E-Mail Formular nutzen wir in diesem Tutorial der Einfachheit halber das beliebte Plugin „Contact Form 7“. Daher benötigt ihr für die Anfrage per E-Mail das Plugin „Contact Form 7“. Natürlich könnt ihr auch ein beliebiges anderes Plugin oder euer eigenes Skript verwenden. Auch die Integration eines beliebigen Newsletter Tools sollte mit einer kleinen Anpassung des Skripts einfach zu erledigen sein.
Schritt1 – Plugin erstellen
Erstellt in Eurer WordPress Installation unter wp-content/plugins/ den Ordner protected-text
Innerhalb des Ordners müsst ihr die Datei protected-text.php erstellen.
Fügt folgenden Code in die protected-text.php ein:
<?php /* Plugin Name: Tutorial Password Protected Site - Changes Plugin URI: https://www.waschier-design.at Description: This plugin changes the default password protected text. Version: 1.0 Author: waschier-design Author URI: https://www.waschier-design.at */
Schritt2 – Funktion erstellen
Als nächstes erstellen wir eine Funktion zum Überschreiben der Grundfunktion. Fügt dazu folgenden Code am Ende der protected-text.php ein
function password_protected_change( $content ) {
}
add_filter( 'the_password_form','password_protected_change' );
Ihr könnt die Datei jetzt speichern und das Plugin aktivieren. Die Standard Funktion wird jetzt überschrieben. Allerdings zeigt es euch jetzt eine leere Seite an anstatt dem üblichen Passwort Formular. Daher müssen wir jetzt noch unser neues Formular anlegen.
Schritt3 – Formular in Contact Form 7
Erstellt euch Euer Wunsch Formular in Contact Form 7. Ihr könnt es auch so einstellen, dass der User als automatische Antwort einen Bestätigungslink zur E-Mail Überprüfung erhält. In diesem Link ist dann das Passwort für die Seite hinterlegt oder ihr sendet einfach ein Mail mit dem Passwort als Antwort. Hier überlassen wir das einfach einmal eurer Kreativität. Ihr benötigt den Shortcode von Eurem Kontakt Form 7 Formular. Dieser sollte in etwa so aussehen:
Error: Contact form not found.
Schritt4 – neues Formular anzeigen
Als nächstes fügen wir das Formular in unsere Funktion ein. Da viele Templates auf Twitter Bootstrap basieren haben wir das als Ausgangsbasis für unser Formular genommen. Zudem haben wir die Klassen auf unser Contact Form 7 Formular abgestimmt, damit beide Formulare dasselbe Aussehen haben. Bitte denkt daran den Shortcode von Contact Form 7 durch euren eigenen zu ersetzen. Fügt den entsprechenden Code in die Funktion „password_protected_change“
global $post;
$output = '<div class="col-xs-12 col-md-6">
<h4>Passwort geschützter Bereich</h4>
<p>Bitte gib dein Passwort ein um den Inhalt der Seite zu sehen.</p>
<form action="' . get_option( 'siteurl' ) . '/wp-login.php?action=postpass" method="post">
<div class="aq-block-aq_contact_block">
<p>
<label for="post_password">Password</label><br>
<span class="wpcf7-form-control-wrap"><input name="post_password" class="input" type="password" size="20" /></span>
</p>
</div>
<div class="aq-block-aq_contact_block">
<input type="submit" name="Submit" class="button wpcf7-form-control wpcf7-submit" value="Login" />
</div>
</form></div>';
$output.= '<div class="col-xs-12 col-md-6">
<h4>Passwort anfragen</h4>';
$output.='<p>Du hast noch kein Passwort? Dann frage jetzt um ein Passwort an um unsere Preislisten zu sehen</p>';
$output.='Error: Contact form not found.
</div>';
return $output;
FERTIG! Die fertige Datei sollte in etwa so aussehen:
<?php
/*
Plugin Name: Tutorial Password Protected Site - Changes
Plugin URI: https://www.waschier-design.at
Description: This plugin changes the default password protected text.
Version: 1.0
Author: waschier-design
Author URI: https://www.waschier-design.at
*/
function password_protected_change( $content ) {
global $post;
$output = '<div class="col-xs-12 col-md-6">
<h4>Passwort geschützter Bereich</h4>
<p>Bitte gib dein Passwort ein um den Inhalt der Seite zu sehen.</p>
<form action="' . get_option( 'siteurl' ) . '/wp-login.php?action=postpass" method="post">
<div class="aq-block-aq_contact_block">
<p>
<label for="post_password">Password</label><br>
<span class="wpcf7-form-control-wrap"><input name="post_password" class="input" type="password" size="20" /></span>
</p>
</div>
<div class="aq-block-aq_contact_block">
<input type="submit" name="Submit" class="button wpcf7-form-control wpcf7-submit" value="Login" />
</div>
</form></div>';
$output.= '<div class="col-xs-12 col-md-6">
<h4>Passwort anfragen</h4>';
$output.='<p>Du hast noch kein Passwort? Dann frage jetzt um ein Passwort an um unsere Preislisten zu sehen</p>';
$output.='Error: Contact form not found.
</div>';
return $output;
}
add_filter( 'the_password_form','password_protected_change' );
Wenn ihr alles richtig gemacht habt sollte Eure Passwort geschützte Seite dann in etwa so aussehen:
Ich hoffe euch gefällt dieses kleine Tutorial. Solltet ihr eine WordPress Seite oder einen Online Shop benötigen oder auch Hilfe mit Eurem bestehenden System benötigen, könnt ihr uns gerne kontaktieren und beauftragen.
