WordPress Login-Seite anpassen (ohne Plugin)

In diesem Beitrag erfahren Sie, wie Sie Ihre WordPress Login-Seite anpassen können.
Und das ohne weiteres Plugin.

Wir meinen damit, dass Sie kein separates Plugin benötigen, nur um Ihre Anmeldeseite anzupassen.

Jedes Plugin macht Ihre Website langsamer und ist ein potenzielles Sicherheitsrisiko (falls es nicht ordnungsgemäß programmiert wurde).

Daher sollten Sie immer darauf achten, die Anzahl der aktiven Plugins so niedrig wie möglich zu halten.

Sie benötigen für diese Anpassung kein Plugin, Sie können es sich aber deutlich angenehmer machen.

Nämlich mit dem Premium-Plugin WPCodeBox*.

Falls Sie es wirklich ernst meinen mit Ihrer WordPress-Website oder sogar mehrere WordPress-Websites betreuen oder entwickeln, werden Sie früher oder später ein Plugin benötigen, um auf einfache Weise Codeschnipsel bzw. Code-Snippets einzufügen*.

Einige der beliebtesten kostenlosen Code-Snippet-Plugins für WordPress sind folgende:

• Code Snippets
• WPCode (ehemals Insert Header and Footers by WPBeginner)
• Head Footer Code Manager

WPCodeBox wird Ihnen die Arbeit definitiv erleichtern, da es viele großartige Funktionen mitbringt, wie zum Beispiel einen eigenen Cloud-Speicher für Ihre Snippets.

Aber fangen wir an!

WordPress Login-Seite über functions.php anpassen

Um die WordPress Anmelde-Seite zu ändern, müssen Sie folgenden Code in die functions.php Ihrer WordPress-Website eingeben:

function my_adminpage() { ?>
    <style type="text/css">
        body.login {
            background-image: url(/ihrordner/ihrbild.png)!important; /* Hier fügen Sie den Link zu Ihrem gewünschten Hintergrundbild Ihrer Login-Seite ein */
            width: 100%;
            height: auto;
            background-repeat:no-repeat; 
            background-size:cover; /* Hiermit sagen Sie dem Bild an die Fenstergröße angepasst */
        }
        
        .login h1 a {
            background-image: url(/ihrordner/ihrbild.png)!important; /* Hiermit passen Sie das Logo der Login-Seite an */
            background-size: auto;
            width: 120px; 
            height: 120px;
        }
		
        .language-switcher label .dashicons {
            color: #fff!important; /* Hiermit können Sie die Farbe des Sprachen-Logos ändern  */
        }

        .login #backtoblog a, .login #nav a {
            color: #fff!important; /* Hiermit ändern Sie die Schriftfarbe im unteren Bereich */
        }
        
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_adminpage' );

Code für WPCodeBox

Hierfür klicken Sie auf “New Snippet” und wählen bei Type “PHP” aus.
Dies sollte aber schon in der Standard-Einstellung ausgewählt sein, sodass Sie keine weiteren Anpassungen vornehmen müssen.

Hier müssen Sie lediglich ein <?php an den Anfang setzen, damit es funktioniert.

<?php 

function login_background() { ?>
    <style type="text/css">
        body.login {
            background-image: url(/ihrordner/ihrbild.png)!important;
            width: 100%;
            height: auto;
            background-repeat:no-repeat;
            background-size:cover;
        }
        
        .login h1 a {
            background-image: url(/ihrordner/ihrbild.png)!important;
            background-size: auto;
            width: 120px; 
            height: 120px;
        }
		
        .language-switcher label .dashicons {
            color: #fff!important;
        }

        .login #backtoblog a, .login #nav a {

            color: #fff!important;
        }
        
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_adminpage' );

Fazit

So kann dann zum Beispiel eine individuelle Login-Seite aussehen.

Hier sollten Sie natürlich immer darauf achten, was für ein Hintergrundbild Sie nutzen, und dementsprechend die Farben anpassen.

Sie sehen, dass unser Logo bei diesem Hintergrund schlecht sichtbar ist.
Aber es soll ja lediglich als Beispiel dienen.

Erstellen Sie vielleicht sogar im Kundenauftrag Websites, ist dies eine großartige Möglichkeit, der Kundenwebsite einen individuelleren Touch zu verpassen und sich von Ihren Mitbewerbern abzuheben.

Der Kunde sieht sein Logo und einen schönen Hintergrund und freut sich so bei jeder Anmeldung über die individuelle Gestaltung.

Aber auch Ihrer eigenen Website kann dieses Vorgehen einen ganz eigenen Schliff verpassen.