Comment personnaliser complètement la page de connexion WordPress

La page d’atterrissage WordPress n’est pas très populaire, n’est – ce pas? Ce n’est pas tant une porte de perle spectaculaire qu’une porte ennuyeuse dans la ruelle. Mais il est important de savoir comment faire entrer les utilisateurs dans la partie secrète de votre site, surtout si vous avez quelque chose de spécial. Les portes d’entrée des gens dans votre monde aident à créer des attentes et à faire connaître votre monde intérieur à leur public. La marque de la page d’atterrissage WordPress peut vous aider à améliorer le contenu protégé et le tableau de bord de gestion WordPress en informant les visiteurs qu’il ne s’agit pas d’un site WordPress ordinaire.
Dans cet article, je vais vous montrer le processus de création d’une page de connexion WordPress personnalisée. Ensuite, je vais vous montrer comment faire des changements en utilisant le code CSS et \/ ou PHP approprié pour ceux qui veulent un contrôle total ou juste changer une petite chose. Ensuite, nous vous montrerons comment utiliser branda (anciennement le plug – in Ultimate brand) pour apporter des changements qui vous permettront de personnaliser rapidement et complètement l’apparence du formulaire de connexion sans avoir à toucher de code. Nous avons aussi une courte vidéo qui détaille comment configurer branda. Restez à l’écoute ou sautez.
Contenu comment utiliser CSS et PHP pour personnaliser les différents éléments de la page de connexion: comment ajouter un CSS personnalisé à la page de connexion Éléments de connexion WordPress sélecteur CSS rapide cours CSS comment utiliser PHP pour modifier la page de connexion de l’administrateur comment utiliser branda à l’écran: logo pour personnaliser les différents éléments de la page de connexion Page d’ouverture de session formulaire d’ouverture de session cases à cocher me rappelant les messages d’erreur liens sous le formulaire d’ouverture de session WordPress rediriger l’ouverture de session personnaliser la page d’ouverture de session WordPress la page d’ouverture de session WordPress est la même que toute autre page
Votre site WordPress:
Vous pouvez modifier le style et la couleur en éditant les éléments en utilisant CSS. Vous pouvez modifier les fonctionnalités ou ajouter, soustraire et déplacer des éléments en éditant la mise en page en utilisant des crochets et des filtres en PHP. Comment ajouter un CSS personnalisé à la page d’atterrissage WordPress la page d’atterrissage WordPress n’utilise pas les feuilles de style contenues dans le thème. Cela signifie que si vous essayez d’ajouter css pour personnaliser la page de connexion à votre style de fichier. Dans le dossier sujet, les modifications ne sont pas affichées. Vous devez utiliser PHP pour ajouter vos propres styles CSS personnalisés en haut de la page de connexion.
Si vous n’avez que quelques lignes de CSS, vous pouvez créer une fonction personnalisée et utiliser le crochet de script login _ enqueue pour insérer CSS dans le titre de la page de connexion. Charger l’explication 8f5912dc5ed2138803b75b4a4e76a0b1 dans l’exemple ci – dessus, je veux supprimer le lien qui renvoie le formulaire de connexion ci – dessous. Je n’ai changé qu’une chose, mais vous pouvez personnaliser plus d’éléments entre les étiquettes . Pour charger ce CSS personnalisé, j’utilise le script login _ enqueue pour ajouter ma fonctionnalité personnalisée et tous mes CSS personnalisés à la page de connexion. Vous pouvez ajouter tout le code ci – dessus aux fonctions de fichier. Php, à l’exclusion de l’ouverture seulement <?php .

Questo è un modo semplice per aggiungere un paio di stili. Se vuoi apportare molte modifiche, ti suggerisco di creare un foglio di stile aggiuntivo nei file del tema in modo che sia più facile da gestire. Per aggiungere un foglio di stile personalizzato all'inizio della tua pagina di accesso, invece di utilizzare i tag Dans la fonction, vous utiliserez le style WP _ enqueue pour charger la Feuille de style. Chargement du contenu fdacb1b790feed115ce8172a2ee2f4e2e dans l’exemple ci – dessus, j’ai appelé le fichier CSS personnalisé qui ajoute des personnalisations à la page de connexion dans le sujet styles login. CSS. Je vais ajouter CSS à la connexion de style. CSS et moi ajouterons le code ci – dessus à mon fichier de fonctions pour le charger ci – dessus.
Voici l’apparence de la page d’atterrissage WordPress par défaut comme référence: Pas de fantaisie, pas de frisson pour personnaliser chaque élément en utilisant CSS, vous devez être capable de sce
Visez – le avec le sélecteur. En d’autres termes, vous devez connaître son nom. Voici quelques sélecteurs spécifiques pour la page de connexion et leurs contrôles:

Avez – vous trouvé l’élément à localiser? D’accord. Si vous connaissez bien CSS et que vous savez où vous pouvez aller d’ici, vous pouvez sauter cette section. Les autres, suivez – moi. Voici comment utiliser les éléments personnalisés CSS. Si vous êtes coincé, laissez – nous un message. Si vous êtes frustré et que vous voulez une solution simple, essayez branda.
Comment supprimer un élément pour cacher un élément. Si vous retournez à un lien similaire, vous pouvez utiliser display: none; Par exemple, voici comment cacher un lien vers un mot de passe manquant. Instructions de chargement 8baf5851df3d8aa69a64d65040b0fb9a comment changer la couleur de fond d’un élément, comme l’arrière – plan de la page ou l’arrière – plan du bouton, vous utiliserez la couleur de fond: # 222222; Et remplacer # 22222 par # 22222 couleur. Dans l’exemple suivant, j’utilise # 17a8e3, qui est un bleu clair. Je l’utilise aussi! – moi.
Il est important d’écraser la couleur par défaut. Si vous utilisez un sélecteur très spécifique, vous n’avez pas à l’utiliser! Important Dans certains cas, cependant, si un CSS personnalisé ne fonctionne pas, vous devrez peut – être l’ajouter.
Chargement de l’essence 52d80f1c8a5eeb0361f6bedd2e524561 si vous ajoutez une image de fond, l’image de fond: url (‘logo de connexion.png’); Et remplacer le logo de connexion. Utilisez l’URL du fichier image pour PNP. Assurez – vous que le fichier de fond est ajouté au même répertoire que la Feuille de style. Si vous utilisez la Médiathèque pour télécharger le programme, il ne fonctionnera pas. Dans l’exemple ci – dessous, vous verrez que j’ai changé l’arrière – plan gris doux de la page d’atterrissage en image BG de la page d’accueil. Jpg charger le contenu 43b5acf33693153c93a2629afb4c138a pour modifier le logo de connexion WordPress, vous utiliserez ce qui suit:
Lorsque vous chargez 2ae179a0ba12280e60e01650d552d60f comment ajouter de l’espace autour d’un projet pour ajouter de l’espace à un projet, vous devez préciser si l’espace est à l’intérieur (remplissage) ou à l’extérieur (marges) du projet. Pensez au bouton envoyer. Si vous voulez créer plus d’espace à l’intérieur du bouton de sorte que le texte à l’intérieur ait de l’espace pour respirer, et pas trop près du bord, vous devez augmenter le remplissage: 10px 10px 10px. Si vous souhaitez créer un espace en dehors du bouton afin que les autres éléments soient moins proches, vous augmentez la marge: 10px 10px 10px;
Le remplissage et la marge ont quatre valeurs. Un pour le haut, un pour la droite, un pour le bas, un pour la gauche, dans cet ordre. Par exemple, pour un élément rempli de 10px 20px 30px 40px, le haut est rempli de 10px. Il y aura 20 Px de remplissage à droite. Il y aura un remplissage de 30px en bas. Il y aura 40 Px de remplissage à gauche. Margin travaille de la même façon. Pour changer la taille et la couleur de la police, changez la taille de la police
Oubliez qu’il n’y a aucune tentative de le sélectionner, vous pouvez l’activer automatiquement. Pour toujours cocher cette case, ajoutez ce clip à la fonction. PHP: Télécharger le résumé 35449116e96eafabe5b7f27af2884fa6 comme vous pouvez le voir, css est là où il se trouve lorsqu’il s’agit de maximiser votre contrôle sur le style de page. Cependant, si vous voulez modifier la mise en page ou renommer un élément, cela devient plus difficile parce que vous devez utiliser PHP. C’est là que branda peut t’aider. Voyons comment utiliser branda pour modifier la page de connexion. Comment personnaliser la page d’atterrissage du site WordPress en utilisant branda branda peut vous aider à faire plus de personnalisation. Regardez cette vidéo et Découvrez comment utiliser branda pour une vue d’ensemble de la page d’atterrissage WordPress. Vous verrez MICAH suivre chaque étape pour avoir une bonne vue d’ensemble et savoir exactement quoi faire. Ensuite, Je détaillerai toutes les différentes options ci – dessous. Tout d’abord, vous devez installer le plug – in branda sur le site. Ensuite, vous devez activer le module d’écran de connexion personnalisé à partir du tableau de bord branda. Cliquez sur l’icône crayon pour activer le module de page d’ouverture de session personnalisé le module d’écran d’ouverture de session personnalisé est divisé en 6 modèles partiels: vous permet de modifier la disposition du contenu de la page d’ouverture de session: C’est la conception de l’emplacement où vous pouvez afficher \/ masquer des éléments ou modifier des formules ou télécharger des images personnalisées: changer les marges, les bordures, l’opacité,, Fondamentalement, la couleur de style de différents éléments: changer la redirection de couleur de n’importe quel élément ici: définir l’orientation que vous voulez que les visiteurs se connectent ou se déconnectent du CSS personnalisé: ajouter votre code lors de la création du formulaire de connexion personnalisé ou changer le Code généré par branda. Pourquoi ne pas utiliser le CSS que vous venez d’apprendre? Laissez – moi vous montrer comment personnaliser
Personnaliser l’entrée MPI pour le nom d’utilisateur et le mot de passe sur le formulaire de connexion. Vous pouvez utiliser l’ID client, le numéro de membre ou le nom du superhéros, n’importe quoi! Marquer les champs du formulaire vous pouvez personnaliser l’apparence du formulaire en utilisant branda. Allez à conception > formulaires pour changer les marges, le remplissage, les bordures, les rayons d’angle et les ombres. Vous pouvez également changer les boutons au même endroit. Réglez le rayon du bord du bouton ou Réglez l’ombre du bouton. Changer l’apparence du module pour changer la couleur du module, comme la couleur du texte, la couleur de la bordure, etc., allez à couleur > Module Notez les onglets pour changer la couleur de l’activité, du Focus et de l’état de vol stationnaire. Changez la case à cocher se souvenir de moi sur l’écran de connexion WordPress branda pour sélectionner ou masquer facilement et automatiquement la case à cocher se souvenir de moi sur le formulaire de connexion. Allez à la section contenu et ouvrez la section formulaires. Là, vous pouvez afficher ou masquer la boîte Souvenez – vous de moi. Si vous sélectionnez afficher, vous pouvez également marquer automatiquement la case à cocher. Jusqu’à ce que vous reveniez dans mes bras et que vous vous souveniez de mon message d’erreur personnalisé sur la page d’atterrissage du site WordPress, il n’y a rien de tel qu’un message d’erreur qui vous fait vous sentir comme si vous ne saviez pas ce que vous faisiez. Heureusement, branda peut vous aider à atténuer les messages d’erreur ou à les rendre plus utiles. Dans branda, allez au contenu > message d’erreur à modifier. Pour plus de clarté ou d’emphase, vous pouvez utiliser HTML dans vos messages. Conseil professionnel si vous changez le nom du champ du formulaire, changez le message d’erreur pour correspondre au style du message, et vous pouvez changer l’opacité du conteneur en allant à conception > messages d’erreur. Pour changer la couleur du message d’erreur, allez à couleur > message d’erreur. Votre attention, s’il vous plaît.
De modifie la couleur des états actifs, focalisés et en vol stationnaire. Personnaliser les liens sous le formulaire de connexion WordPress dans branda vous pouvez choisir de masquer les liens sous le formulaire de connexion personnalisé en allant au contenu sous le formulaire > liens. Vous pouvez masquer le lien inscription \/ perte de mot de passe, le lien politique de confidentialité ou le lien retour. Vous ne pouvez pas me cacher que vous pouvez utiliser branda pour ajuster la couleur des liens sous le formulaire de connexion en allant à la couleur sous le formulaire > liens Personnaliser la redirection de connexion WordPress dans branda, vous pouvez changer l’emplacement du formulaire de connexion pour rediriger l’utilisateur vers la section redirection. Modifier où les visiteurs se connectent ou se déconnectent comme vous pouvez le voir, il y a plusieurs façons de peaufiner les pages de connexion. Personnaliser l’accès au site est un moyen simple de rendre les utilisateurs heureux et de faire des déclarations. Si vous souhaitez modifier quelque chose et vous familiariser avec php et CSS, vous pouvez modifier le fichier directement. Mais si vous voulez vraiment faire quoi que ce soit, branda peut vous aider à passer au niveau suivant. Mais pourquoi s’arrêter là, les développeurs wpmu vous fournissent ce dont vous avez besoin pour tout étiqueter en blanc! C’est une touche particulièrement agréable pour un site Web personnalisé. Si vous voulez essayer branda et voir ce que nous avons ajouté après avoir passé en revue Ultimate Branding, vous pouvez télécharger le plugin gratuitement. Tu l’aimeras. Elle sera ta meilleure nouvelle amie. Avez – vous déjà essayé d’ajouter une marque à votre page d’atterrissage? Que penses – tu du nouveau plugin branda? Étiquette: Code branda de la zone administrative