Personnalisation et style du formulaire protégé par mot de passe

Récemment, un client voulait qu'une de ses pages WordPress soit protégée, pas de problème! Puis il est revenu et a dit, pouvez-vous changer le texte et le rendre meilleur? Hmm? Sûr! Voici comment?


Étape 1 Éditez votre fichier functions.php

Bon, ouvrons votre fichier functions.php et ajoutons ce bloc de code:

 ID)? rand (): $ post-> ID); $ o = '
'. __ ("CECI EST VOTRE NOUVEAU MOT DE PASSE INTRO TEXT QUI MONTRE AU-DESSUS DU FORMULAIRE DE MOT DE PASSE"). '

?Le texte supplémentaire peut aller ici? CELA MONTRERA SOUS LE FORMULAIRE

'; retourne $ o; ?>

Laissez-moi disséquer ceci très rapidement pour vous. Le code de protection par mot de passe est généré à partir d'un fichier du dossier wp-includes. "Cool", tu penses, "Je vais juste y aller et faire mes changements". Ne le fais pas! Aussi tentant soit-il, éditer le code principal est une horreur, une vérité, pas une bonne idée. Pour une raison: que se passe-t-il si vous mettez à jour WordPress? Il est anéanti? Pardon. Donc, si vous mettez ce bloc de code dans votre fichier functions.php, vous pourrez le modifier sans vous soucier de perdre les modifications apportées au formulaire lors de la mise à jour..

Comme vous pouvez le constater, j’ai ajouté des classes au formulaire lui-même, l’étiquette du formulaire, le champ du mot de passe ainsi que le bouton. Nous avons maintenant tout ce dont nous avons besoin pour l’appeler complètement avec CSS. Oh, et nous ne changeons rien dans le dossier wp-includes, nous ne respectons donc pas les règles..


Étape 2 Modifier le texte de protection par mot de passe par défaut

Le texte en majuscule ci-dessus vous montre également ce que j'ai changé? le premier ensemble de texte:

C'EST VOTRE NOUVEAU MOT DE PASSE INTRO TEXTE QUI MONTRE AU-DESSUS DU FORMULAIRE DE MOT DE PASSE

Comme vous pouvez le voir, c'était votre texte d'introduction? il disait ça:

Cet article / cette page est protégé par un mot de passe. Pour le voir, veuillez entrer votre mot de passe ci-dessous

Nous sommes maintenant en mesure de le remplacer par le texte de votre choix. Vous pouvez même tout supprimer entre ces citations et ne rien afficher du tout.


Étape 3 Modifier le libellé du champ de saisie du mot de passe

L'étiquette par défaut affichée à gauche du champ de saisie est Mot de passe. Ici, vous pouvez changer ce que vous voulez dire. Dans mon cas, je l'ai assigné à une classe qui a sorti l'étiquette en css en mettant l'affichage à aucun.

 .étiquette de passage display: none; 

Vous pouvez également changer la taille de la police, la couleur, les travaux à cette étiquette


Étape 4 Style Le champ de saisie du mot de passe

Je déteste l'apparence des formulaires, mais avec cet ajout au champ de saisie du mot de passe par défaut, je peux lui donner un aspect un peu plus "à jour". N'hésitez pas à le changer comme bon vous semble.

 

Étape 5: Styliser le bouton Soumettre

Dans le code des fonctions, j'ai ajouté une classe au bouton de soumission appelée "bouton". Je l’ai fait parce que je voulais que tous les boutons du site de mon client soient exactement les mêmes. L'uniformité dans un site est la clé. Voici le CSS que j'ai utilisé:

 .bouton couleur de fond: # 000; couleur: #fff; bordure: 0; famille de polices: Impact, Arial, sans-serif; marge: 0; hauteur: 33px; remplissage: 0px 6px 6px 6px; taille de police: 15px; curseur: pointeur; 

Pour une raison quelconque, je récupérais la flèche lorsque je passais la souris sur le bouton, alors je n’ai fait que changer le curseur pour afficher le pointeur..


Étape 6 Ajout de texte supplémentaire sous le formulaire

En fait, j’avais besoin d’ajouter une petite note pour informer les internautes que le champ du mot de passe est sensible à la casse. Pour ajouter du texte supplémentaire sous le formulaire, j’ai simplement ajouté un code de paragraphe et y ai inséré une balise de style pour styler le texte séparément. page.

Et nous avons fini!