Vous êtes ici : Accueil | Comment personnaliser la page de connexion de WordPress ✅

Vidéo : Comment personnaliser la page de connexion de WordPress ✅



Salut les cuistots, j’espère que vous allez bien !

Aujourd’hui, dans cette nouvelle vidéo, on va apprendre à personnaliser la page de connexion à l’administration de WordPress.

Allez, c’est parti !

Alors c’est vrai que, par défaut, la page de connexion à WordPress est assez sobre, je vous la montre ici à l’écran. On a un petit logo WordPress d’ailleurs qui vous redirige sur wordpress.fr, le site de l’association francophone.

Donc, voilà, on aimerait bien changer le logo, éventuellement changer les couleurs, parce que peut-être que dans le cas de certains sites clients, on aimerait pouvoir accorder cela, avec justement la marque du client, avec la charte graphique, et même si c’est pour votre propre projet, cela peut être plus sympa d’avoir une page de connexion qui vous ressemble plutôt que d’avoir la page de connexion classique de WordPress.

Et du coup, pour vous montrer comment personnaliser tout cela, je vais vous partager une extension qui est bien pratique.

Une extension pour changer sa page de connexion

Moi je l’ai déjà installé, il ne me reste plus qu’à l’activer, elle s’appelle « Custom Login Page Customizer ».

un plugin pour customiser votre page de connexion wordpress

Donc je l’active, et là si je me déconnecte, je vois ma page toute personnalisée.

Alors, non l’extension ne l’a pas faite toute seule, je l’ai configurée avant, mais c’est pour vous montrer ce que cela peut vous donner.

j’ai changé le logo, j’ai changé l’arrière-plan, j’ai changé l’arrière-plan du formulaire, j’ai changé aussi la couleur du bouton, et là on ne voit pas très bien mais j’ai aussi changé la couleur des textes et la couleur des textes au survol.

Je vais me reconnecter pour vous montrer comment cette extension fonctionne.

Me revoilà dans l’administration, donc là une fois que l’on a activé l’extension, il faut aller dans Apparence > Login Customizer.

Là c’est un peu dommage parce qu’on a un écran avec du texte qui nous raconte un petit peu qui a conçu cette extension. Là c’est en l’occurrence la boutique de thèmes : ThemeIsle.

Au fur et à mesure des vidéos, vous apprécierez mon superbe accent anglais ! Je referme la parenthèse.

Et donc, une fois que vous êtes sur cette page, vous cliquez sur « Start Customizing! » pour pouvoir commencer la personnalisation.

Donc cela lance le personnaliseur de thème de WordPress, et là on va dans Login Customizer. Parce que juste avant là, on a les options d’autres thèmes, cela ne nous intéresse pas.

Une fois que l’on est ici, on peut personnaliser notre logo. Là j’ai mis une petite marmite, et après on peut personnaliser la taille, éventuellement une marge interne, une marge en dessous pour ajouter plus d’espace, là j’ai mis 5, on peut mettre 50 éventuellement.

Donc je vais laisser 5, c’’est pas mal.

Et comme vous pouvez le voir, cela s’actualise en direct sur la partie juste ici.

Donc le logo, l’arrière-plan, j’ai mis une couleur mais on peut éventuellement mettre une image, après c’est à vous de voir.

Là c’est pour l’arrière-plan du formulaire, donc « Form Background ».

C’est dommage que cela ne soit pas en français mais cela se trouve assez facilement parce qu’on voit les modifications en direct.

Même si vous ne comprenez pas l’anglais, vous tâtonnez et je suis sûr que vous y arriverez.

Dans Form Styling, on peut modifier la largeur du formulaire, la hauteur, donc là j’ai mis 420. Je peux éventuellement le raccourcir, pourquoi ne pas mettre 380, et donc là le formulaire sera un peu plus étroit.

Donc, la hauteur, les marges et là éventuellement une bordure, je n’en ai pas mis, j’ai juste mis un arrondi.

Je vous montrerai juste après comment j’ai fait pour mettre cet arrondi.

Après, on peut choisir comment apparaissent les champs, donc là on a mis une largeur de 100 % pour le champ « Nom d’utilisateur » et « Mot de passe ».

Après pareil, on peut mettre des marges au niveau des champs.

On peut choisir des couleurs, couleur d’arrière-plan, donc là j’ai mis blanc mais bon, si jamais j’avais envie de mettre orange, et bien je mettrai de l’orange, mais cela serait un petit peu moche, donc je vais laisser blanc.

Parce que l’idée c’est aussi que cela soit aussi élégant et agréable à remplir.

Après on a d’autres champs à personnaliser.

On a encore le style du bouton, j’ai mis le bleu de la marmite, et après vous pouvez modifier la couleur de la bordure, la couleur au survol, comme on peut le voir ici.

Après, vous choisissez vraiment les couleurs qui vous intéressent, et puis là dans Autres, vous pouvez modifier la couleur du texte, donc cela correspond à cela, et la couleur au survol, on peut voir qu’ici j’ai mis du bleu.

Je vous parlais tout à l’heure de l’arrondi que j’ai pu mettre, ici, et bien, en fait on peut mettre du CSS personnalisé. Donc si vous avez des notions de CSS, vous pouvez le mettre juste ici pour pouvoir personnaliser encore plus le formulaire de connexion.

Voilà, vous pouvez reprendre ce code pour mettre un arrondi si vous le souhaitez.

Donc, une fois que tout est bon, et bien vous n’avez juste à faire « Enregistrer et Publier » et après c’est bon, ce sera fonctionnel.

Alors là, comme vous l’avez vu, on est passé par une extension pour pouvoir effectuer toutes ces personnalisations, c’est vrai que cela va beaucoup plus vite, mais par contre, si vous ne voulez pas utiliser une autre extension, il est possible de passer par le code.

Après on a juste besoin de mettre quelques petits morceaux de code dans son thème pour pouvoir modifier l’arrière-plan de la page de connexion, modifier le logo, modifier éventuellement le lien qu’on a ici, rajouter d’autres choses.

On peut mettre des messages au-dessus et en-dessous du formulaire.

On peut vraiment faire pas mal de choses lorsque l’on passe par le code.

Et même on peut aller beaucoup plus loin en termes de personnalisation de l’administration. L’administration toute entière est personnalisable lorsque là on commence un petit peu à bidouiller le code.

On peut par exemple modifier le tableau de bord de WordPress, alors je vais vous montrer cela sur mon site.

On a Tableau de bord, on peut apprendre à personnaliser ce tableau de bord, retirer des widgets ici qui ne servent à rien, rajouter des nouveaux, on peut personnaliser le menu, juste ici, on peut cacher des éléments, on peut en renommer d’autres, on peut éventuellement en ajouter de nouveaux.

On peut personnaliser aussi la barre d’administration que l’on voit ici, on peut par exemple retirer ce logo ici, on peut le laisser mais on peut éventuellement retirer.

En fait, on peut vraiment faire tout ce qu’on veut, rajouter des éléments, en retirer, en renommer.

On peut aussi modifier des choses ici, rajouter des menus. Tout cela pour aider à avoir une administration qui soit plus fonctionnelle.

Alors qu’est-ce qu’on peut faire d’autres aussi ?

On peut aller modifier les colonnes de l’administration. Les colonnes c’est cela avec la colonne titre, je n’ai pas beaucoup d’affichage. En fait, je crois que c’est déjà personnalisé.

On peut modifier la colonne titre, auteur, commentaires, dates. On peut rajouter de nouvelles colonnes, par exemple avec le nombre de mots qu’il y a dans la page ou dans l’article, on peut vraiment faire pas mal de choses.

Et même pour aller plus loin en terme de personnalisation, on peut carrément changer aussi l’apparence de l’administration.

Je ne sais pas si vous savez mais il existe des thèmes pour l’administration qu’il est possible d’activer.

Par contre, ce n’est pas des thèmes comme on installe pour modifier l’apparence publique de son site, mais ce sont des thèmes sous forme de plugin, d’extension, que l’on installe, que l’on active et qui permettent vraiment de changer l’apparence de l’administration.

Donc on ne change pas juste les couleurs, comme on peut le faire avec le jeu de couleurs lorsqu’on va dans « Général » je crois, non je raconte des bêtises, lorsqu’on va dans son profil, vous savez qu’on peut modifier les couleurs si on veut.

Là je peux remodifier pas mal de choses, c’est déjà une personnalisation mais il est possible d’aller plus loin, et bien en remodelant, en changeant vraiment la structure de l’administration et il est possible d’offrir une interface qui est vraiment, vraiment différente de ce que l’on voit par défaut.

Et il est même possible d’aller modifier le code de l’administration pour pouvoir ajouter son propre code CSS et éventuellement du code javascript, si vraiment vous êtes un peu plus avancé en terme de compétences web.

Si jamais la personnalisation de l’administration vous intéresse, sachez que j’ai réalisé une formation en vidéo pour pouvoir apprendre à personnaliser tout cela, à personnaliser tout ce que je viens de vous expliquer.

On en a pour à peu près moins de 1h30. Je vous présente une quinzaine d’extension, presque une trentaine de morceaux de codes pour pouvoir modifier l’administration à votre convenance, l’adapter pour vos clients, ou tout simplement l’adapter pour vous, pour que cela soit plus agréable à naviguer.

Si cela vous intéresse, je vous ai mis le lien dans la description de la vidéo.

Cette vidéo se termine ici, mettez-moi un pouce bleu si vous avez apprécié !

N’oubliez pas de vous abonner bien sûr.

Et puis comme je vous le disais, si vous voulez apprendre à personnaliser toute votre administration, et pas seulement l’écran de connexion, rendez-vous dans la description pour découvrir le lien vers la formation de personnalisation de l’administration de WordPress.

Merci de m’avoir suivi et je vous dis à la semaine prochaine pour une nouvelle vidéo !

Allez, Ciao !



Si vous avez apprécié cet article, inscrivez-vous à la newsletter

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 10000 personnes l'ont fait, pourquoi pas vous ?

C'est parti, je m'inscris !

70a0181e59eb555963a6f4a32734244d"""""
Partagez
Tweetez
Partagez