Share
Der WordPress-Anmeldebildschirm ist gut gestaltet - er ist sauber und einfach zu bedienen und funktioniert auf allen Bildschirmgrößen gut. Aber was ist, wenn Sie eine Website für einen Kunden erstellen, der sein eigenes Logo den Benutzern anzeigen möchte, die sich anmelden? Oder wenn Sie eine MultiSite-Installation haben und möchten, dass Ihre Benutzer bei der Anmeldung Ihr Branding sehen? Glücklicherweise können Sie das Erscheinungsbild des Anmeldebildschirms ganz einfach anpassen.
Für dieses Tutorial habe ich ein Plugin dafür erstellt; Der Vorteil der Verwendung eines Plugins besteht darin, dass Sie es in jede von Ihnen entwickelte WordPress-Site ablegen und ihnen sofort etwas Branding verleihen können.
Die Schritte, die ich in diesem Tutorial demonstrieren werde, sind:
Um dieses Tutorial abzuschließen, benötigen Sie:
Am oberen Rand meines Plugins füge ich folgende Zeilen hinzu:
/ * Plugin-Name: WPTutsPlus Anpassen des Admin-Teils 1 - URI des Login-Bildschirm-Plugins: http://rachelmccollin.co.uk Beschreibung: Dieses Plugin unterstützt das Lernprogramm in wptutsplus. Es passt den WordPress-Anmeldebildschirm an. Version: 1.0 Autor: Rachel McCollin Autor URI: http://rachelmccollin.com Lizenz: GPLv2 * /
Es ist einfach, Ihr eigenes Logo oder das Logo Ihres Kunden der Anmeldeseite hinzuzufügen und Ihre WordPress-Installation sofort professioneller zu gestalten.
Accentsconagua
login_enqueue_scripts Aktionshaken:// füge ein neues Logo zur Anmeldeseite hinzu wptutsplus_login_logo () ?>
Dadurch wird Ihr Logo zum Anmeldebildschirm hinzugefügt (siehe Screenshot).
Sie können nicht nur ein Logo hinzufügen, sondern auch die Größe des Logos ändern, um andere Elemente auf dem Bildschirm zu gestalten.
Das Logo oben ist etwas zusammengedrückt, um in den vorgegebenen Bereich zu passen. Ich werde die Größe anpassen.
Bearbeiten Sie den Code in Ihrem Plugin so, dass es wie folgt lautet:
// füge ein neues Logo zur Anmeldeseite hinzu wptutsplus_login_logo () ?>
Der verwendete Höhenwert hängt vom Seitenverhältnis Ihres Logos ab. Verwenden 300px und Auto für die Hintergrundgröße Diese Eigenschaft stellt sicher, dass Ihr Logo so breit ist wie die Login-Box und dass das Seitenverhältnis beibehalten wird Höhe value bietet ausreichend Platz für Ihr Logo.
Nun sieht mein Logo so aus:
Viel besser! Aber nicht nur das Logo lässt sich in Bezug auf das Styling anpassen. Wie wäre es mit ein paar Farben??
Der gesamte auf der Anmeldeseite angezeigte Text hat die Form von Links. Daher müssen Sie die Links formatieren. Bearbeiten Sie Ihren Code erneut so, dass er wie folgt lautet:
// füge ein neues Logo zur Anmeldeseite hinzu wptutsplus_login_logo () ?>
Dies gibt mir Links, die zu meinen Logofarben passen. Die Verbindungsfarbe ist Cyan und die Schwebefarbe ist Magenta.
Hinweis: Da die Hauptfarbe meines Logos der von Blau ähnelt, funktioniert es gut für Links. Möglicherweise möchten Sie die Farbe Ihrer Links nicht ändern, wenn Ihr Logo eine andere Farbe hat, um Probleme mit der Benutzerfreundlichkeit zu vermeiden.
Das letzte Element auf dem Bildschirm ist die Schaltfläche "Anmelden", die immer noch blau ist. Lass uns das ändern. Bearbeiten Sie Ihren Code so, dass er wie folgt lautet:
// füge ein neues Logo zur Anmeldeseite hinzu wptutsplus_login_logo () ?>
Daher habe ich jetzt einen vollständig benutzerdefinierten Anmeldebildschirm. Das heißt, wenn sich meine Kunden oder Benutzer anmelden, sehen sie etwas, das mit meiner Marke übereinstimmt und die Website professioneller erscheinen lässt.
Das Anpassen des WordPress-Anmeldebildschirms ist unkompliziert und kann den Eindruck, den Ihre Site den Benutzern und Kunden beim Anmelden gibt, erheblich verändern. Durch das Anpassen des obigen Codes an Ihre Anforderungen und die Berücksichtigung Ihrer Marke können Sie in sehr wenigen Fällen einen sehr professionellen Anmeldebildschirm erstellen Zeit.
