WordPress Login und Registrierung mit eigenem Design (Teil 2)

Weitere Anpassungen der Login- und Registrierungs-Seite werden nun hauptsächlich mit Hilfe zusätzlicher CSS-Angaben vorgenommen, die in diesem Beispiel alle innerhalb der Funktion "design_login_styles" notiert werden.

Dadurch werden die Einträge in der functions.php jedoch sehr umfangreich und es wäre viel übersichtlicher, alle Funktionen, die der Gestaltung der Login- und Registrieruns-Seite dienen, in eine gesonderte Datei auszulagern. Dies ist in WordPress leicht möglich, die Datei kann aber nicht in den selben Ordner eingefügt werden, in dem sich bereits die functions.php befindet, sondern kommt stattdessen in den Plugin-Ordner (.../wp-content/plugins/) und wird somit selbst zu einem kleinen Plugin.

In diesem Beispiel erhält die ausgelagerte Datei, die alle Funktionen zur Anpassung der Login- und Registrierungs-Seite enthalten soll, den Dateinamen "design_login.php". Damit es im Plugin-Ordner übersichtlicher aussieht, wird dort noch ein Unterordner erstellt, z.B. mit dem Namen "design-login", in dem sich dann die ausgelagerte Datei befinden soll. Der vollständige Dateipfad für die ausgelagerte Datei lautet dann: .../wp-content/plugins/design-login/design_login.php.

Die Datei muss außerdem noch mit <?php beginnen (wobei <?php wirklich ganz oben in der ersten Zeile stehen muss!). In der letzten Zeile muss dann noch ?> stehen!

Die vollständige Datei "design_login.php" sieht dann vorläufig so aus:

<?php
/*
Plugin Name: Design Login-Seite
Description: Eigenes Plugin zur Anpassung der Login- und Registrierungs-Seite
Version: 1.0
Author: Name
*/

//CSS-Angaben einbinden
function design_login_styles() {
echo '<style type="text/css">
body.login div#login{width:100%;padding:0;margin:0}
body.login div#login h1{display:none}                                                                   
p{font-size:1.2em;font-weight:700}
p#p-login-top{background-color:blue}
p#p-login-middle{background-color:green}
p#p-register-middle{background-color:green} 
p#p-login-bottom{background-color:red}
</style>';
}
add_action('login_head', 'design_login_styles');

//Text oberhalb des Login-Formulars
function design_login_before() {
echo '<p id="p-login-top">Dieser Text wird oberhalb des Login-Formulars dargestellt</p>';
}
add_action('login_message', 'design_login_before');

//Text in der Mitte des Login-Formulars
function design_login_middle() {
echo '<p id="p-login-middle">Dieser Text wird in der Mitte des Login-Formulars dargestellt</p>';
}
add_action('login_form', 'design_login_middle');

//Text unterhalb des Login-Formulars
function design_login_footer() {
echo '<p id="p-login-bottom">Dieser Text wird unterhalb des Login-Formulars dargestellt</p>';
}
add_action('login_footer', 'design_login_footer');

//Text in der Mitte des Registrierungs-Formulars
function design_register_middle() {
echo '<p id="p-register-middle">Dieser Text wird in der Mitte des Registrierungs-Formulars dargestellt</p>';
}
add_action('register_form', 'design_register_middle');
?>

Im Admin-Bereich von WordPress (auch "Dashboard" oder "Backend" genannt) ist die Datei nun links in der Menüleiste unter "Plugins" zu finden. Die oberen Kommentar-Zeilen in der Datei "design_login.php" (in diesem Beispiel sind es die Zeilen 2 bis 7) dienen der Beschreibung im Admin-Bereich, wie in der folgenden Abbildung zu sehen ist:

Unter "Author:" (Kommentar-Zeile 6 in der Datei "design_login.php") sollte dann der eigene Name, bzw. Vor- und Zuname eingetragen werden. Dann noch ein Klick auf "Aktivieren" und schon ist das selbstgeschriebene Plugin aktiv und die Login-Seite sieht... naja, noch ziemlich bescheiden aus. Das soll sich aber nun ändern:

In einem ersten Schritt wird das Plugin so verändert, dass das Eingabeformular eine maximale Breite von 300px bekommt und zentriert dargestellt wird. Der Text im unteren Textabsatz (rot) soll auch zentriert sein. Außerdem soll der Bereich für Hinweistexte, z.B. wenn man sich abgemeldet hat oder auch für eventuelle Fehlermeldungen, eine maximale Breite von 500px haben, einen roten Rahmen bekommen und auch zentriert werden.

Das Ergebnis soll dann so aussehen:

Dazu werden die beiden Funktionen "design_login_styles()" und "design_login_footer()" folgendermaßen ergänzt, erweitert oder einfach ausgetauscht.

//CSS-Angaben einbinden
function design_login_styles() {
echo '<style type="text/css">
body.login div#login{width:100%;padding:0;margin:0}
body.login div#login p.message,body.login div#login div#login_error{border:1px solid #ff0000;webkit-box-shadow:none;box-shadow:none;margin:20px auto 20px auto;width:auto;height:auto;max-width:500px;}
body.login div#login h1{display:none}
body.login div#login form#loginform{margin:0 auto 0 auto;width:auto;height:auto;max-width:300px;}
p{font-size:1.2em;font-weight:700}
p#p-login-top{background-color:#9999ff}
p#p-login-middle{background-color:#99ff99}
p#p-register-middle{background-color:#99ff99} 
div#login-footer{padding:30px 0 30px 0;background-color:#ff9999}
div#login-footer p#p-login-bottom{text-align:center}
</style>';
}
add_action('login_head', 'design_login_styles');

//Text unterhalb des Login-Formulars
function design_login_footer() {
echo '<div id="login-footer"><p id="p-login-bottom">Dieser Text wird unterhalb des Login-Formulars dargestellt</p></div>';
}
add_action('login_footer', 'design_login_footer');

« zurück zu Teil 1

weiter zu Teil 3 »


 

Galerien / Präsentationen...

city001-sidebar

link-icon002 Galerien-Übersicht...

Kategorien

Alle Artikel

(Inhaltsverzeichnis)

link-icon002 alphabetisch geordnet...

link-icon002 nach Datum geordnet...

soziale Netzwerke...

"Cogniclip" ist auch auf folgenden sozialen Netzwerken vertreten:

Cogniclip auf Twitter Cogniclip auf Google+
 

Per RSS Beiträge abonnieren:

RSS-Feed von Cogniclip
 

Kalender

Juli 2017
M D M D F S S
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930
31