Notre «widget» pour The Lodge dans la barre latérale du site (s'affiche sur la plupart des pages, y compris la page d'accueil) a deux états. Un pour quand un utilisateur est déconnecté et un autre quand un utilisateur est connecté. L'état déconnecté a un formulaire de connexion directement dessus afin que les membres actuels aient un moyen facile de se connecter.
Nous utilisions auparavant la fonction intégrée wp_login_form (), ce qui est plutôt cool pour WordPress, mais nous voulons avoir un certain contrôle sur le balisage. Cela nous permettra d'ajouter des classes et autres, de le styliser comme nous le souhaitons.
Il existe cependant un certain nombre de situations dans lesquelles notre formulaire de connexion personnalisé ne fonctionnera pas et nous devrons utiliser la vue de connexion WordPress par défaut. Autrement dit, ce que vous voyez lorsque vous visitez /wp-login.php. Par exemple, si vous soumettez un mot de passe incorrect, vous serez redirigé vers cette page. Ou si vous souhaitez vous inscrire sur le site (sans passer par Restrict Content Pro), ou même réinitialiser votre mot de passe, vous le ferez via cette page /wp-login.php. Je pense donc que ce serait mieux si nous stylions cette page de manière à ce qu'elle ressemble, vous savez, à une opération professionnelle plutôt qu'à "un site WordPress". De plus, nous pouvons utiliser notre matériel de marque ici, à savoir notre cabine enneigée.
Pour avoir le contrôle, nous utilisons quelques «hooks» WordPress dans notre fichier functions.php afin de charger un fichier CSS personnalisé. C'est tout ce dont nous avons besoin pour maîtriser la conception.
Nous passons le reste du temps à utiliser ce fichier CSS pour personnaliser la page de connexion. Nous rendons la cabine plutôt floue, ce qui est un effet cool je pense. Cela dit en quelque sorte: «La cabine est là-bas! Connectez-vous et tout deviendra clair! ». En prime, les photos floues au format JPG.webp peuvent être définies sur une qualité assez basse, ce qui est bien, car nous les utilisons plutôt grandes comme image d'arrière-plan pleine page.