Unser „Widget“ für The Lodge in der Seitenleiste der Website (erscheint auf den meisten Seiten, einschließlich der Startseite) hat zwei Zustände. Einer für den Fall, dass ein Benutzer abgemeldet ist, und einer für den Fall, dass ein Benutzer angemeldet ist. Der Zustand für abgemeldete Benutzer enthält ein Login-Formular direkt darauf, sodass aktuelle Mitglieder einfach einsteigen können.
Wir haben früher die integrierte Funktion wp_login_form() verwendet, was für WordPress ziemlich gut ist, aber wir möchten die Kontrolle über den Markup-Code behalten. Dies ermöglicht uns, Klassen und Ähnliches hinzuzufügen, um ihn nach unseren Wünschen zu gestalten.
Es gibt jedoch eine Reihe von Situationen, in denen unser benutzerdefiniertes Login-Formular nicht funktioniert und wir die Standard-WordPress-Login-Ansicht verwenden müssen. Das heißt, was Sie sehen, wenn Sie /wp-login.php besuchen. Wenn Sie beispielsweise ein falsches Passwort eingeben, werden Sie zu dieser Seite weitergeleitet. Oder wenn Sie sich für die Website registrieren möchten (ohne Restrict Content Pro zu durchlaufen) oder sogar Ihr Passwort zurücksetzen möchten, tun Sie dies über diese /wp-login.php-Seite. Daher denke ich, es wäre am besten, diese Seite so zu gestalten, dass sie sich professionell anfühlt und nicht nur wie „irgendeine WordPress-Seite“. Außerdem können wir hier unsere Markenzeichen, nämlich unsere verschneite Hütte, verwenden.
Um die Kontrolle zu erlangen, verwenden wir in unserer functions.php-Datei ein paar WordPress „Hooks“, um eine benutzerdefinierte CSS-Datei zu laden. Das ist alles, was wir brauchen, um die Designkontrolle zu erhalten.
Den Rest der Zeit nutzen wir diese CSS-Datei, um die Login-Seite zu gestalten. Wir machen die Hütte ziemlich verschwommen, was meiner Meinung nach ein cool aussehender Effekt ist. Es sagt so etwas wie: „Die Hütte ist da hinten! Melden Sie sich an, und alles wird klar!“ Als netter Bonus können verschwommene Fotos als JPGs mit relativ niedriger Qualität eingestellt werden, was gut ist, da wir sie ziemlich groß als Hintergrundbild in voller Größe verwenden.
Warum nicht Textelemente für „The Lodge“ anstelle des Bildes verwenden? Nur weil Sie nicht mehr HTML/PHP ändern wollten?
Das Design hat den Text, der hinter den Bäumen zu verschwinden scheint. Dieser Effekt könnte meiner Meinung nach mit transparenten PNGs erzielt werden, aber dann hätten wir drei Ebenen, zusätzliche HTTP-Anfragen und eine zusätzliche Code-Komplexität. Die Art und Weise, wie es hier gemacht wurde, sieht gut aus und ist zugänglich, daher denke ich, es ist der richtige Weg.