WordPress Login und Registrierung mit eigenem Design

Um die Inhalte einer Webseite zu verwalten, die mit “WordPress” erstellt wurde, muss man sich ins Backend der Webseite einloggen. Standardmäßig sieht die Login-Seite von WordPress ziemlich schlicht aus. Meistens stört das nicht weiter, es sei denn, die Besucher der Webseite sollen die Möglichkeit haben, sich dort zu registrieren, um sich anschließend mit Benutzername und Passwort einloggen zu können.

Dies kann vom Betreiber der Webseite gewünscht sein, wenn dieser beispielsweise das Kommentieren der Beiträge nur für registrierte Nutzer erlauben möchte oder wenn bestimmte Bereiche der Webseite nur registrierten Nutzern zugänglich gemacht werden sollen.

Da wäre es dann angebracht, sowohl die Login-Seite, als auch die Registrierungs-Seite neu zu gestalten. Für diese Aufgabe gibt es für WordPress viele Plugins, es geht aber auch mit ein paar Funktionen, die leicht in die Datei “functions.php” des jeweiligen WordPress-Themes eingefügt werden können und einigen zusätzlichen CSS-Angaben.

Hierzu ein erstes Beispiel:

Um einen Text oder auch anderen HTML-Inhalt (z.B. Links, Bilder, DIV-Container,...) oberhalb des Login-Formulars einzufügen, braucht man nur die folgende Funktion in die functions.php einzufügen:

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

Um einen Text oder auch anderen HTML-Inhalt in der Mitte des Login-Formulars einzufügen (genauer gesagt unterhalb des Eingabefeldes für das Passwort), braucht man folgende Funktion, die wieder in die functions.php eingefügt werden kann:

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

Um einen Text oder auch anderen HTML-Inhalt unterhalb des Login-Formulars einzufügen, braucht man folgende Funktion in der functions.php:

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

Hinweis: Mittlerer Bereich des Registrierungs-Formulars!

Während der Text oder anderer HTML-Inhalt, der oberhalb und unterhalb des Login-Formulars eingefügt wird, auch oberhalb und unterhalb des Registrierungs-Formulars erscheint, klappt das für den mittleren Bereich nur im Login-Formular, nicht jedoch im Registrierungs-Formular. Speziell für den mittleren Bereich des Registrierungs-Formulars braucht man dann folgende Funktion für die functions.php:

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

Die bisher gezeigten Funktionen fügen nur einfache Textabsätze ein, die mit den HTML-Tags <p> ... </p> umklammert sind. Die HTML-Tags können aber auch CSS-Angaben enthalten (Inline-Styles), z.B.:

echo '<p style="background-color:blue">Dieser Text wird... </p>';

Das Ergebnis sieht dann erst einmal so aus, wie in der folgenden Abbildung und ist (noch) nicht besonders ansprechend:

In dieser Abbildung sind die drei eingefügten Textabsätze mit Hilfe von wenigen CSS-Angaben jeweils unterschiedlich eingefärbt. Für umfangreichere Anpassungen der einzelnen Elemente, wenn beispielsweise der obere Textabsatz, der in diesem Beispiel blau eingefärbt ist, ganz nach oben hin verschoben werden und die gesammte Breite der Seite einnehmen soll, dann werden schon wesentlich mehr CSS-Angaben benötigt. Diese könnten in eine externe CSS-Datei ausgelagert werden.

Noch besser ist es, die zusätzlichen CSS-Angaben einfach in eine weitere Funktion eingzufügen, sodass die CSS-Angaben dann direkt im head-Bereich der Seite erscheinen, was wieder einen zusätzlichen Geschwindigkeitsvorteil hinsichtlich der Ladezeiten bringt.

Die folgende Funktion, die auch wieder in die functions.php eingefügt werden kann, sorgt dafür, dass die Textabsätze zunächst einmal alle eine Schriftgröße von "1.2em" erhalten und in Fettschrift dargestellt werden. Die Hintergrundfarben werden jedoch für jeden Textabsatz einzeln vergeben.

function design_login_styles() {
echo '<style type="text/css">                                                                   
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');

In dieser Funktion erhalten die einzelnen Textabsätze ihre Hintegrundfarben, indem sie über ihre ID`s angesprochen werden, die jedoch noch in den jeweiligen Funktionen für die betreffenden Textabsätze notiert werden müssen.

Für den Textabsatz, der oberhalb des Login-Formulars erscheinen soll, würde die Funktion dann so aussehen:

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

Nun wird das Logo entfernt und der obere Textabsatz (blau) wird ganz nach oben hin verschoben und nimmt die gesammte Breite der Seite ein.

Dazu können zwei weitere CSS-Angaben in die Funktion für die CSS-Angaben eingefügt werden, sodass diese Funktion dann so aussieht:

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

Das Ergebnis:

 

weiter zu Teil 2 »


 

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