Comment personnaliser la page de connexion WordPress

Vous cherchez un moyen facile de modifier votre page de connexion? On te couvre. Dans cet article, nous vous montrerons plusieurs façons de personnaliser et de rendre la page d’atterrissage WordPress plus élégante. Quelle est la page de connexion WordPress? Comme son nom l’indique, la page de connexion WordPress est la page sur laquelle vous devez entrer votre nom d’utilisateur et votre mot de passe pour vous connecter et accéder au tableau de bord WordPress. Selon le type d’utilisateur et les permissions, vous pouvez accéder aux différentes parties du tableau de bord. La plupart des sites Web conservent la page d’atterrissage par défaut parce qu’elle n’est généralement pas visible pour les visiteurs. Cependant, pour prendre le contrôle total de votre site et le rendre plus sûr, vous devriez personnaliser la page de connexion.
Pourquoi changer la page de connexion? La page de connexion WordPress par défaut semble très simple et nécessaire. De plus, il peut s’agir d’une page d’atterrissage pour n’importe quel site. Pas de personnalisation. Cependant, si vous regardez la page d’atterrissage de la célèbre marque optinmonster, vous verrez ce qui suit: La page de connexion est entièrement personnalisée et vous pouvez immédiatement dire qu’elle appartient à optinmonster. Il y a de nombreuses raisons pour lesquelles vous devriez personnaliser votre page d’atterrissage WordPress. Par exemple, si vous utilisez un magasin de commerce électronique ou un site d’abonnement, une page d’atterrissage personnalisée est une bonne idée. L’acheteur doit se connecter à son compte pour effectuer la transaction ou accéder aux droits d’abonnement, de sorte que la visualisation de la page d’ouverture de session par défaut peut ne pas sembler professionnelle. De même, si vous avez un programme de syndication, il est bon d’éditer la page de connexion et de la personnaliser.
De plus, en personnalisant votre page de connexion, vous pouvez rendre votre site plus sûr contre les attaques de pirates informatiques. Il existe de nombreuses façons de personnaliser la page de connexion de wo
La presse. Vous pouvez impressionner les utilisateurs en ajoutant votre propre logo, nom de marque, couleur de marque et même texte. La plupart des sites ne le sont pas, donc avec un peu d’effort, vous vous démarquerez de la plupart des sites. Voyons maintenant les différentes façons d’éditer la page de connexion. Comment personnaliser votre page d’atterrissage WordPress il existe trois façons principales de personnaliser votre page d’atterrissage:
En programmant l’utilisation du plug – in avec le constructeur de page, regardons chacune des méthodes ci – dessous pour choisir la méthode la plus appropriée pour vous. 1) Édition de la page de connexion à l’aide du plugin il existe de nombreux plugins qui peuvent personnaliser la page de connexion WordPress. Les meilleurs sont: My logon Topic (Limited Custom) Custom logon page Custom (High Custom) CSS Hero (Private Custom plug – in) wpforms (module plug – in with advanced features) seedprod (Complete SOLUTION FOR LOGON page) dans ce tutoriel, nous utiliserons le thème my logon and Custom logon page custom. Examinons le processus étape par étape.
1.1) Thème mon logon thème mon logon est un plugin gratuit pour créer des pages de logon personnalisées dans WordPress. Vous pouvez faire correspondre le style du site à la page de connexion sans utiliser d’autres clips CSS. Tout d’abord, installez et activez le plug – in. Dans le tableau de bord WordPress, allez au plugin > Ajouter un nouveau plugin, recherchez le plugin et installez – le. Une fois activé, vous verrez les paramètres du plug – in sur le côté gauche. Les principales configurations que vous verrez sont: Login régulier pour enregistrer les escargots sous ces options, vous verrez quelques sous – configurations. Theme my login n’inclut pas beaucoup d’options personnalisées, mais elles sont suffisantes pour ceux qui veulent apporter des changements de base.
Faites défiler vers le bas jusqu’à la section Slug et vous verrez tous les liens permanents disponibles
Ou utilisez l’un des modèles. Alternativement, vous pouvez contrôler les différentes options et créer la page de connexion exactement comme désiré. Pour ce tutoriel, nous changerons le logo, la couleur et ajouterons une image de fond. Lorsque vous êtes satisfait de la conception, sauvegardez la mise à jour. De plus, vous pouvez ajouter du code CSS ou JavaScript personnalisé à la page de connexion, ce qui est une option très intéressante pour les personnes ayant des compétences en programmation. Ainsi, si vous examinez maintenant le Front End, vous verrez votre page de connexion WordPress personnalisée. Pour plus d’informations sur l’édition du plug – in de page de connexion, voir cet article.
Comme vous pouvez le voir, il est facile d’éditer la page de connexion en utilisant le plug – in. Cependant, si vous savez comment programmer, vous devrez peut – être le personnaliser au niveau du Code. 2) personnalisation programmatique de la page d’atterrissage WordPress si vous ne souhaitez pas installer des outils tiers et coder la solution, vous pouvez modifier la page d’atterrissage de manière programmatique. Vous pouvez coller le code dans un fichier de fonctions. Thème PHP ou utilisation de plug – ins spécifiques au site. Pour cette démonstration, nous utiliserons le plug – in de fragment de code. Remarque: Si vous prévoyez modifier le fichier de fonctions. Php avant de commencer, nous vous recommandons de créer une sauvegarde complète du site et de créer des sous – thèmes.
Tout d’abord, installez et activez le fragment de code sur votre site Web. Examinons maintenant l’exemple de code que vous pouvez utiliser. Quadlayers _ login logo () {? > # Connectez – vous à H1 a. Connectez – vous à {background picture: url ( https:\/\/www.example.com\/image.png ); Hauteur: 100 Px; Largeur: 300px; Dimensions de fond: 300px 100px; Répétition de fond: aucune répétition; Remplir le fond: 10px;} Copiez l’URL du fichier et collez – le dans votre code. Par exemple, le Code final pour l’utilisation de l’image ci – dessus est: quadlayers _ login logo () {? > # Connectez – vous à H1 a. Connectez – vous à l’image {s
En bas: URL http:\/\/demo-inc.local\/wp-content\/uploads\/2021\/07\/logo-wpf.png ); Hauteur: 100 Px; Largeur: 300px; Dimensions de fond: 300px 100px; Répétition de fond: aucune répétition; Remplir le fond: 10px;} Ajoutez un nouveau Code, collez le Code et activez le fragment. Maintenant, utilisez la fenêtre de navigation anonyme pour vérifier la page de connexion et vous verrez le nouveau logo. Si vous Revérifiez le Code, vous verrez qu’il y a un peu de CSS qui lui donne un certain style. Vous pouvez supprimer le code si vous le souhaitez <?php } add_action('login_enqueue_scripts', 'quadlayers_login_logo'); Se dai una rapida occhiata al codice, vedrai che stiamo aggiungendo un logo con determinate dimensioni. Vedrai anche che c'è un collegamento. Questo è l'URL del tuo logo, quindi assicurati di modificare l'URL di conseguenza per visualizzare il tuo logo. Come trovare l'URL di un'immagine Trovare l'URL di un'immagine è abbastanza semplice. Dopo aver caricato l'immagine sul tuo sito web, apri la Libreria multimediale e seleziona l'immagine. Sul lato destro, vedrai l'URL dell'immagine. Et ajoutez le code CSS suivant à la Feuille de style du sujet ou au programme personnalisé Connectez – vous à H1 a. Connectez – vous à {background picture: url ( http:\/\/demo-inc.local\/wp-content\/uploads\/2021\/07\/logo-wpf.png ); Hauteur: 100 Px; Largeur: 300px; Dimensions de fond: 300px 100px; Répétition de fond: aucune répétition; Remplir le fond: 10px;} N’oubliez pas que vous devez modifier le code CSS au besoin. Les classes que vous devez traiter sont: # login h1 a et. Connectez – vous à H1 a nous avons modifié avec succès le logo WordPress, mais l’url du logo pointe toujours vers le domaine WordPress. Organisation. Cependant, vous pouvez facilement le modifier en ajoutant un petit script PHP au fichier de fonctions. Php ou utilisez un fragment de code. Utilisez le plug – in fragment pour créer un nouveau fragment de code et collez le code suivant. Quadlayers _ login logo URL () Function {Home URL (); Ajouter un filtre (‘login _ header’, ‘quadlayers login logo URL’); Quadlayers _ login logo URL Title () Function {return \
Dico. Vous pouvez utiliser de nombreux constructeurs de page, mais dans ce tutoriel, nous utiliserons seedprod. Seedprod est un outil gratuit qui vous permet de créer des pages d’atterrissage de haute qualité. Si vous souhaitez utiliser son modèle, vous aurez besoin d’une version Premium à partir de 39,50 $par an. Une fois le plug – in activé, vous devez vérifier la clé de licence. Cela vous permettra d’accéder à tous les modèles par défaut. Une fois la clé validée, allez à la page seedprod > et sélectionnez l’option login page. Vous verrez tous les modèles d’accès disponibles à l’écran. Vous pouvez sélectionner l’un de ces modèles prédéfinis ou en créer un nouveau à partir de zéro. Pour ce tutoriel, nous sélectionnerons l’un des modèles. Lorsque vous sélectionnez un modèle, nommez – le. Ensuite, vous serez redirigé vers le constructeur de page. Sur le côté gauche, vous verrez tous les éléments disponibles pour modifier la page de connexion, et sur le côté droit, vous verrez un aperçu de la page. Pour ajouter un élément et personnaliser la page de connexion, il suffit de faire glisser l’élément de la colonne de gauche et de le placer dans l’assistant d’aperçu. Par défaut, le modèle de connexion que nous avons sélectionné est livré avec une image de fond, un formulaire de connexion et un peu de texte. Vous pouvez modifier l’un de ces éléments en cliquant dessus. Par exemple, pour modifier le formulaire de connexion, sélectionnez – le et vous verrez les options de configuration dans le panneau de gauche. Une fois la page éditée, Publiez – la. Maintenant, vérifiez la page avant et vous verrez la nouvelle page de connexion personnalisée. Assurez – vous d’ajouter l’url de la page au menu WordPress ou au Widget de la barre latérale afin que les utilisateurs puissent se connecter avec la nouvelle URL. La plupart des plug – ins de création de page WordPress ont cette fonctionnalité, donc vous devriez être en mesure de le faire indépendamment des outils que vous utilisez.
It (WP Management). Une autre option intéressante pour améliorer la sécurité du site est de limiter les tentatives d’accès. Par défaut, WordPress permet un accès illimité aux tentatives, donnant aux pirates une bonne chance d’accéder à votre site. Comme il n’y a pas d’option intégrée pour limiter les tentatives d’accès, nous devons utiliser des plug – ins tiers. Dans cette section, nous vous montrerons comment limiter les tentatives de connexion en limitant les tentatives de rechargement. Tout d’abord, installez et activez le plug – in sur votre site Web. À gauche, vous verrez les options de configuration du plug – in. Ouvrez – le, vous serez redirigé vers le tableau de bord du plug – in, et vous verrez que nous n’avons pas échoué les tentatives de connexion. Pour améliorer l’efficacité du plug – in, nous allons apporter quelques modifications aux paramètres, puis aller à l’onglet paramètres. Faites défiler vers le bas dans la section paramètres de votre application et vous verrez ce qui suit: Le plug – in est livré avec une configuration de base. La configuration actuelle indique qu’après les quatre mauvaises combinaisons de nom d’utilisateur et de mot de passe ci – dessous, le plug – in bloquera l’IP de l’utilisateur pendant les 20 prochaines minutes. Si l’IP obtient quatre blocs consécutifs, le temps de blocage est porté à 24 heures. Vous pouvez modifier la configuration pour répondre à vos besoins. Lorsque vous êtes satisfait des modifications, sauvegardez les paramètres. C’est tout. Maintenant, vous recevrez une notification dans le tableau de bord du plug – in lorsque quelqu’un entre une mauvaise combinaison de nom d’utilisateur et de mot de passe sur la page de connexion. L’utilisateur verra également un message d’erreur à l’avant de la tentative restante. C’est un bon moyen de protéger votre site WordPress contre les pirates informatiques et les attaques violentes. Bonus: comment modifier les messages d’erreur par défaut nous avons vu plusieurs options pour rendre votre site plus sûr. Mais il reste encore beaucoup à faire. Laissez – nous être vous.
Tende ou mot de passe. Une autre façon d’ajouter un code de vérification à la page de connexion personnaliser la page de connexion est d’ajouter un code de vérification. C’est une bonne solution pour ceux qui veulent améliorer la sécurité d’accès et se tenir à l’écart des robots. Vous pouvez ajouter un code de vérification au niveau du Code ou en utilisant un plug – in dédié. Pour cette démonstration, nous utiliserons un plug – in, mais pour plus d’informations, consultez notre guide complet sur la façon d’ajouter un code de vérification à votre connexion woocommerce. Dans cette section, nous utiliserons recaptcha de bestwebsoft, un excellent plug – in de code de vérification gratuit. Tout d’abord, installez et activez le plug – in à partir du tableau de bord WordPress. Ensuite, allez à la console d’administration Google recaptcha et complétez l’inscription en remplissant les informations requises. Vous devez sélectionner le type de code de vérification à utiliser. Dans notre exemple, nous utiliserons le recaptcha V2 le plus courant. Ensuite, copiez la clé du site et la clé et collez – les dans les paramètres recaptcha dans le tableau de bord WP. Assurez – vous de sélectionner la même version du Code de vérification que la version précédente. Ensuite, sélectionnez la page pour voir le Code de vérification, enregistrez les paramètres et c’est terminé! Votre site sera maintenant plus sûr. Pour une description plus détaillée, consultez le guide complet de ce lien. Conclusion dans l’ensemble, la modification de la page d’atterrissage est nécessaire pour les sites membres, les magasins de commerce électronique et les sites ayant des succursales. De plus, étant donné le nombre d’attaques contre la page d’atterrissage, vous devriez la personnaliser pour améliorer la sécurité du site. Dans ce guide, nous avons vu plusieurs façons de personnaliser la page de connexion WordPress. Si vous voulez quelque chose de simple et rapide, la méthode plug – in est le meilleur choix. Personnaliser la page de connexion personnaliser a de nombreuses fonctionnalités et est facile à utiliser. D’un autre côté,