Anmeldemaske in WordPress gestalten

Der Reiz einem System mit dem Verbreitungsgrat von WordPress ist der Umstand, für fast jeden Einsatzzweck ein passendes Plugin finden zu können. Gleichzeitig liegt darin aber auch eine gewisse Gefahr. Nicht immer ist die Verwendung eines Plugins notwenig, es sei denn, man möchte unbedingt mit Kanonen auf Spatzen schießen.

Den Anmeldebereich von WordPress (Login) kann man bequem über der zahlreichen Plugins dafür gestalten. Ähnlich einfach sind ein paar Zeilen in der Datei style.css des Themes — ausreichend, wenn man lediglich ein paar Dinge anpassen möchte:

  • eigenes Logo statt des WordPress Logos
  • Anpassung des Farbschemas
  • Hintergrundbild

Dazu gehört dann auch, die URL hinter dem Logo passend zu setzen.

Hook für die Anmeldemaske

Einstiegspunkt für die Veränderungen an der Anmeldemaske ist die Datei functions.php des aktiven Themes. Sofern kein Child Theme verwendet wird, sollte dies entsprechend angelegt werden. Alternativ lässt sich die angepasste Anmeldemaske auch als eigenes Plugin erstellen — mit dem Vorteil, dass die vorgenommenen Änderungen dann auch beim Wechsel des aktiven Themes erhalten bleiben.

Der veränderte Anmeldebereich

Der veränderte Anmeldebereich

Veränderungen am Anmeldebereich lassen sich über den Hook login_head von WordPress einklinken. Benötigt wird eine Funktion, die dann aufgerufen wird:

function wunschliste_custom_login() {
   echo 'rel="stylesheet" type="text/css" href="' 
  . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';
}
add_action('login_head', 'wunschliste_custom_login');

In diesem Fall wird auf den Unterordner „login“ im aktiven Theme verwiesen, in die sich eine CSS-Datei befindet. Über diese CSS-Datei lassen sich dann die Anpassungen im weiteren Verlauf vornehmen.

Anpassungen in der CSS-Datei

Der Hintergrund für die Anmeldeseite lässt sich mit wenigen Zeilen festlegen:

body.login {
 background-image: url('images/bg_login.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
}

Zur besseren Übersicht wurde innerhalb des Ordners „login“ noch ein Unterordner für Bilder angelegt.

Das Logo lässt sich auf ähnlich einfache Art und Weise verändern:

.login h1 a {
 background-image: url('images/login-logo.png');
 width: 120px;
 height: 120px;
 background-size: 120px 120px;
}

Hier wurde der bereits angelegte Unterordner für die Bildateien verwendet.

Das Prinzip bei den Veränderungen ist immer gleich. Über die richtige Selektoren werden die Standard-Einstellungen von WordPress überschrieben. Entsprechend lässt Schriftart, Farbe und Größe des Textes in der Anmeldebox anpassen:

#loginform label{
 color: #000000;
 font-weight: bold;
}

Die Transparenz der Box in Bezug auf den Hintergrund wird wie folgt geregelt:

#loginform {
 opacity: 0.7;
 filter: alpha(opacity=70); /* For IE8 and earlier */
}

Der Button zum anmelden benötigt ein paar Anweisungen mehr, zumal die verschiedenen Zuständen, in denen er sich befinden kann, berücksichtigt werden müssen:

.login .button-primary {
 background: #8BB037;
 border-color: #688821;
 text-shadow: 0 -1px 1px #222,1px 0 1px #222,0 1px 1px #222,-1px 0 1px #222;
 box-shadow: 0 1px 0 #ccc;
}

.login .button-primary:hover {
 background: rgba(139, 174, 55, 0.75);
 border-color: #688821;
 box-shadow: 0 1px 0 #ccc;
}

.login .button-primary:active {
 background: rgba(139, 174, 55, 0.75);
 border-color: #688821;
 box-shadow: 0 1px 0 #ccc;
}

.login .button-primary:focus {
 background: rgba(139, 174, 55, 0.75);
 border-color: #688821;
 box-shadow: 0 1px 0 #ccc;
}

Die Farben für die Checkbox, mit der festlegen kann, dass WordPress sich die Anmeldedaten merkt, muss ebenfalls angepasst werden:

input[type=text]:focus, input[type=password]:focus,input[type=checkbox]:focus {
 border-color: #8BB037;
}
input[type=checkbox]:checked:before {
 color: #8BB037;
}

Sobald man sich erfolgreich abgemeldet hat, erscheint über der eigentlich Anmeldebox eine Nachricht mit einem blauen Streifen auf der linken Seiten. Auch dieser wird neu eingefärbt:

.login .message {
 border-left: 4px solid #8BB037;
}

Als letzte Anpassung in der CSS-Datei wird schließlich noch der Link „zurück zum Block“ ausgeblendet:

p#nav , #backtoblog{
 display: none;
}

Alle für den Anmeldebereich verwendeten Selektoren findet man innerhalb der WordPress Installation in der Datei login.css, die sich im Pfad wp-admin/css/ befindet.

URL für das Logo

Wiederum in der Datei functions.php des Themes werden über zwei Filter, login_headerurl und login_headertitle die URL hinter dem Logo sowie der Titel der URL angepasst:

function wunschliste_login_logo_url() {
   return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'wunschliste_login_logo_url' );

function wunschliste_login_logo_url_title() {
   return 'Wunschliste von Thomas Boley';
}
add_filter( 'login_headertitle', 'wunschliste_login_logo_url_title' );

Statt der URL zur Starseite der eigenen WordPress Installation kann auch eine andere URL übergeben werden.

Anpassungen als Plugin

Um die vorgenommenen Änderungen als Plugin umzusetzen, sind nur wenige Änderungen notwendig. Zunächst wird im Verzeichnis wp-content/plugins/ von WordPress ein neuer Ordner erstellt. In diesen Ordner kann der gesamte Ordner „login“ aus dem aktuellen Theme kopiert werden.

Anschließend wird eine neue PHP-Datei in Ordner des Plugins erzeugt. In diesem Fall würde der Ordner für das Plugin „wunschlogin“ und die PHP-Datei „wunschlogin.php“ heißen. Damit WordPress diese Datei auch als Plugin erkennt, ist ein entsprechender Kopf in den ersten Zeilen erforderlich:

<?php
/*
Plugin Name: Wunschliste Anmeldefenster
Plugin URI: https://www.wildbits.de
Description: Plugin zur Anpassung des Anmeldefensters auf der Seite von wunschliste.thomas-boley.de
Version: 1.0
Author: Thomas Boley
Author URI: http://thomas-boley.de
License: GPLv2 or later
*/

function wunschliste_custom_login() {
   echo 'rel="stylesheet" type="text/css" href="' 
   . plugin_dir_url( __FILE__ ) . '/login/custom-login-styles.css" />';
}
add_action('login_head', 'wunschliste_custom_login');

function wunschliste_login_logo_url() {
   return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'wunschliste_login_logo_url' );

function wunschliste_login_logo_url_title() {
   return 'Wunschliste von Thomas Boley';
}
add_filter( 'login_headertitle', 'wunschliste_login_logo_url_title' );

?>

Der Progammcode aus der functions.php wurde fast 1:1 übernommen. Die einzige Anpassunt ist der geänderte Pfad in der Funktion wunschliste_custom_login(). Statt wie bisher den Pfad über get_bloginfo('stylesheet_directory') auszulesen, wurde die URL zum Plugin verwendet. Dazu nutzt man den Befehl plugin_dir_url(__FILE__)(vgl. dazu den entsprechenden Eintrag im Codex).

Zusammenfassung

Mit ein paar Zeilen PHP und etwas CSS lässt sich das Anmeldefenster von WordPress an die eigenen Bedürfnisse anpassen. Alle vorgenommen Änderungen lassen sich dabei auch als eigenes kleines Plugin realisieren.

3 Kommentare

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.