Share
Dans ce tutoriel, je vais vous guider dans le processus de création d'un beau formulaire "S'inscrire", en utilisant Fancybox, jQuery et, bien sûr, WordPress. Comme vous le constaterez, le processus est très simple.
Commençons par placer notre bouton en haut de la page, en remplaçant la description par défaut dans le thème..
registre
Notez que dans le bouton de registre, le href (# register-form) est le même ID que le formulaire ci-dessous. Nous utilisons également la classe ".show" pour appeler FancyBox avec jQuery.
Nous avons besoin de notre base. Créons notre balisage. Ouvrez header.php et placez l'extrait suivant où vous le souhaitez..
Enregistrer votre compte
Inscrivez-vous avec nous et profitez!
Notez que j'utilise display: aucun pour masquer le formulaire initialement.
Le CSS est plutôt simple. Je ne fais que styler une conception de formulaire rapide dans PhotoShop.
La forme, moins le style, ressemble à ceci: (notez que j'ai supprimé l'affichage: aucun dans le balisage pour vérifier mes styles)
Commençons ensuite à coiffer notre boîte.
div # register-form width: 400px; débordement caché; hauteur: 230px; position: relative; arrière-plan: # f9f9f9 url (images / secure.png) no-repeat 260px 40px; famille de polices: Helvetica Neue, Helvetica, Arial! important;
En continuant, je vais maintenant styliser les entrées de texte, en ajoutant un peu de fantaisie.
div # entrée de formulaire de registre [type = "text"] display: block; bordure: 1px solide #ccc; marge: 5px 20px; rembourrage: 9px 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; largeur: 200px; famille de polices: Helvetica Neue, Helvetica, Arial! important; div # entrée de formulaire de registre [type = "texte"]: hover border-color: # b1b1b1; entrée div # formulaire-registre [type = "texte"]: focus -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc;
Maintenant, je vais styliser le bouton, ajouter un état de survol et remplacer le bouton par défaut par une image..
div # register-form input [type = "submit"] # register background: url (images / register.jpg) no-repeat; bordure: 0; clarifier les deux; curseur: pointeur; hauteur: 31px; débordement caché; position: relative; à gauche: 295px; retrait du texte: -9999px; en haut: 42px; largeur: 92px; div # entrée-registre-formulaire [type = "submit"] # registre: survoler background-position: 0 -32px;
Enfin, nous ajoutons un style général.
div # register-form span display: block; marge inférieure: 22px; div # formulaire-registre div.title marge-gauche: 15px div # formulaire-registre div.title h1, div # formulaire-registre div.title span texte-ombre: 1px 1px 0px #fff div # registre- forme div.title h1 margin: 7px 0; p.statement position: absolute; en bas: -2px; à gauche: 10px; taille de police: .9em; couleur: # 6d6d6d; text-shadow: 1px 1px 0px #fff;
Voila! nous avons notre formulaire. Passons maintenant à la fonctionnalité jQuery.
Premièrement, nous devons inclure jQuery dans WordPress. Pour ce faire, nous devons placer le bloc de code suivant avant le
balise dans le fichier header.php. N'oubliez pas que WordPress utilise jQuery, nous ne voulons donc pas le charger deux fois.!Téléchargez Fancybox et placez-le dans votre dossier WordPress. Pour organiser les choses un peu plus, j'ai créé un dossier "Inclut".
Ensuite, ouvrez votre fichier footer.php et placez le texte suivant avant la fin du étiquette
Et maintenant, appelons la méthode fancybox; coller ceci après le code ci-dessus et avant la balise de fermeture.
Accentsconagua
jQuery (document) .ready (function () jQuery (". show"). fancybox ('titleShow': 'false', 'transitionIn': 'fade', 'transitionOut': 'fade') ; Avaient fini! Notre formulaire a été créé. nous avons enfin besoin de passer les informations WordPress nécessaires pour le faire fonctionner correctement.
Il n'y a rien d'extraordinaire ici; nous n'avons besoin que de deux extraits WordPress, cachés dans le fichier wp-login.php.
Le premier extrait:
Et:
Le code final devrait ressembler à ceci:
Enregistrer votre compte
Inscrivez-vous avec nous et profitez!
S'il vous plaît noter que c'est vraiment important, et nécessaire, d’avoir user_login comme nom et comme identifiant dans votre saisie de texte; il en va de même pour l'entrée de courrier électronique. Sinon, ça ne marchera pas.
Et avec ça, on a fini!
Avec une touche de code et quelques ajustements, nous avons réussi à créer un superbe "formulaire d'inscription" pour nos utilisateurs. Qu'est-ce que tu penses?
