Personnalisez votre page de connexion WordPress avec le plugin de connexion personnalisé YITH

La meilleure chose à propos d’un site Web WordPress est la facilité avec laquelle il est personnalisable. Il n’est pas nécessaire d’avoir des tonnes d’argent pour le faire, ou des compétences en codage, ou du temps. Il vous suffit de télécharger et d’installer un thème gratuit ou un plugin, et le site Web aura un aspect différent ou bénéficiera de nouvelles fonctionnalités.

Vous pouvez le faire pour chaque page de votre site Web. Même la page de connexion, qui est si facilement prise pour acquise, peut être modifiée pour refléter le nouveau design de votre site Web. Quand vous verrez à quel point il est facile de le changer, vous vous demanderez probablement pourquoi vous ne l’avez pas fait auparavant. Voyons comment vous pouvez utiliser la page de connexion personnalisée YITH ou l’un des meilleurs plugins WordPress de connexion personnalisée. Cela permettra à quiconque de se connecter facilement à votre site WordPress .

Pourquoi voudriez-vous créer une page de connexion personnalisée WordPress ?

La page de connexion WordPress par défaut semble simple et réduite aux éléments nus. Il comporte deux champs, un logo, un bouton, quelques liens et une case à cocher. Voici à quoi ça ressemble :

Il n’y a rien de mal avec cette page. Cela rend la connexion à WordPress très simple – il n’y a presque rien que vous puissiez faire de mal ici car tout est facile à comprendre.

Mais c’est une occasion manquée. À tout le moins, vous devriez pouvoir afficher votre propre logo sur la page de connexion. Cela ne ferait pas de mal si vous pouviez afficher autre chose – une mascotte, par exemple – ou jouer avec les couleurs, un peu, ou avec les polices.

Que pouvez-vous faire avec la connexion personnalisée YITH ?

Le plug-in YITH Custom Login peut vous aider à modifier l’apparence de la page de connexion de votre site Web. Après avoir installé le plugin, il changera l’apparence de votre page de connexion WordPress pour ressembler à ceci :

La page de connexion ne restera pas comme ça si vous ne le souhaitez pas. Il s’agit de l’apparence par défaut que vous obtenez après l’installation et l’activation du plugin, mais vous pouvez la modifier. Vous pouvez, par exemple, modifier la couleur d’arrière-plan de la page ou définir une image pour l’arrière-plan.

Vous pouvez également échanger la mascotte perroquet avec la vôtre si vous en avez une. La page est prête pour votre logo et vous pouvez jouer avec les champs de nom d’utilisateur et de mot de passe pour modifier leur apparence et leur étiquetage. Fondamentalement, ce plugin vous donne le contrôle sur tous les éléments importants de la page de connexion. Regardons-le de plus près.

réglages généraux

Avant de plonger dans les paramètres généraux du plugin, assurons-nous d’abord que vous savez comment trouver le plugin. Vous devriez trouver l’option "apparence" dans le menu principal, et cliquer sur "écran de connexion" en dessous :

Une fois que vous avez fait cela, vous passerez aux options du plugin et vous verrez que l’onglet des paramètres généraux est le premier à partir de votre gauche.

L’onglet des paramètres généraux est l’endroit où vous effectuez deux choses importantes : activez le plug-in de connexion personnalisé et définissez l’image de votre mascotte. Les paramètres sont aussi simples qu’ils le paraissent, du moins jusqu’à ce que vous arriviez au point où vous n’êtes pas satisfait de la position de votre mascotte – et il y a de fortes chances que vous ne le soyez pas.

Passons en revue les options de cette page une par une.

• Activer la connexion personnalisée : une fois le plugin installé, cette option sera cochée par défaut. Si, à un moment donné, vous souhaitez revenir à la page de connexion par défaut, il vous suffit de décocher cette case.
• Afficher l’image de la mascotte : il s’agit de la case à cocher si vous souhaitez qu’une mascotte apparaisse sur votre page de connexion personnalisée. Lorsque la case est décochée, la mascotte ne sera pas visible.
• URL de l’image de la mascotte : la mascotte du perroquet est définie par défaut et vous n’avez pas à la modifier si vous ne le souhaitez pas. Si vous souhaitez le modifier, la meilleure façon de le faire serait d’ajouter l’image (format .png, environ 140x185px) à la médiathèque, puis de simplement mettre un lien vers celle-ci dans ce champ.
• CSS personnalisé : c’est le champ dans lequel vous modifiez la position de la mascotte. C’est la chose la plus compliquée que vous puissiez faire dans l’onglet des paramètres généraux.

Si vous n’êtes pas satisfait de l’apparence de la mascotte, vous devez l’ inspecter et fouiller dans le code jusqu’à ce que vous trouviez les valeurs qui définissent sa position :

Vous n’aurez qu’à jouer avec les valeurs "top" et "right". Si vous avez besoin d’aide pour déterminer quels paramètres vous conviennent le mieux, essayez peut-être ceux-ci pour commencer :

#login img.mascotte {
position:absolute;
right:-122px;
top:62px;
}

Lorsque vous les modifiez, vous devez copier tout le code dans le champ CSS personnalisé. N’oubliez pas d’enregistrer les modifications une fois que vous avez terminé.

Paramètres d’arrière-plan

L’onglet des paramètres d’arrière-plan vous permet d’ affiner l’apparence et le comportement de l’arrière-plan. Voici ce qui vous attendra lorsque vous basculerez sur cet onglet :

• Image d’arrière-plan: Le champ où vous placez le lien vers une image d’arrière-plan si vous prévoyez d’en utiliser une.
• Couleur d’arrière-plan: vous aurez quelques options pour choisir la couleur d’arrière-plan, vous pouvez donc choisir l’apparence de votre page de connexion WordPress personnalisée même si vous n’utilisez pas d’image d’arrière-plan.
• Répétition d’ arrière-plan : vous obtenez les options standard pour que l’image d’arrière-plan se répète horizontalement, verticalement ou ne se répète pas du tout.
• Position d’arrière-plan: cette option vous permet de définir la position de l’image d’arrière-plan — vous avez des positions en haut et en bas et des alignements à gauche, à droite et au centre.
• Attachement d’arrière-plan: Vous avez deux comportements à choisir pour votre image d’arrière-plan: elle peut soit être fixe et toujours apparaître sur la page, soit elle peut défiler et se déplacer avec elle.

Ce sont toutes des choses assez standard pour définir des arrière-plans. Ajoutez ou non votre propre image, jouez avec différentes combinaisons de position d’image d’arrière-plan et répétez, choisissez une belle couleur ou combinez les deux – c’est entièrement à vous de décider. Comme toujours, n’oubliez pas d’enregistrer les modifications que vous souhaitez conserver.

Paramètres des logos

L’une des meilleures utilisations du plugin YITH Custom Login consiste à ajouter votre propre logo à la page du plugin au lieu du logo WordPress. Dans l’onglet Options de logo, vous trouverez les options suivantes.

• Image du logo : C’est ici que vous choisissez l’image que vous utiliserez pour votre logo.
• Couleur d’arrière-plan : si vous téléchargez un logo au format .png, vous pouvez choisir la couleur qui s’affiche sous votre logo.
• Largeur et hauteur du logo : Vous pouvez choisir la taille de votre logo sur la page de connexion.

Ces quatre options sont tout ce dont vous avez besoin pour définir votre logo sur la page de connexion personnalisée YITH. Après avoir effectué les ajustements souhaités, n’oubliez pas de cliquer sur le bouton "Enregistrer les options" avant de continuer.

Paramètres du formulaire

Le champ de formulaire permet la personnalisation la plus approfondie de l’ensemble du plugin. Il existe trois groupes d’options sous cet onglet :

• Les paramètres généraux du formulaire : c’est là que vous définissez la largeur du conteneur et choisissez les espaces réservés pour le nom d’utilisateur et le mot de passe.
• Paramètres de typographie : vous pouvez choisir séparément la police, la taille, le style et la couleur du texte dans les champs, du texte général et du texte du bouton d’envoi. Vous pouvez également choisir la couleur du texte du bouton d’envoi au survol.
• Paramètre de couleur : vous pouvez personnaliser les couleurs des arrière-plans et des bordures des champs dans différentes situations : lorsque vous vous concentrez dessus, lors de la soumission ou lorsque vous les survolez.

Si vous souhaitez que les champs du formulaire soient aux couleurs du logo de votre entreprise, c’est ici que vous pourrez tout paramétrer. Assurez-vous simplement que toute modification que vous souhaitez conserver est enregistrée avant de fermer l’onglet.

Enveloppons-le !

Votre site Web WordPress peut être aussi beau et intéressant, ou aussi dépouillé et simple, que vous le souhaitez. C’est la grande personnalisation qui fait de la création d’un site Web dans WordPress une expérience si enrichissante. Ainsi, lorsque vous pensez à peaufiner votre site Web, ne pensez pas que vous êtes coincé avec la même page de connexion WordPress. Avec le plug-in YITH Custom Login, vous pouvez ajouter une nouvelle page de connexion, puis la personnaliser en fonction de votre vision ou de l’identité visuelle et du style de votre entreprise.