Share
In deze tutorial zal ik je begeleiden bij het maken van een mooi "Registreren" -formulier, met behulp van Fancybox, jQuery en, natuurlijk, WordPress. Zoals u zult zien, is het proces echt vrij eenvoudig.
Laten we eerst onze knop boven aan de pagina plaatsen en de standaardbeschrijving in het thema vervangen.
Registreren
Merk op dat in de register knop, de href (# register-vorm) dezelfde ID is als het onderstaande formulier. We gebruiken de klasse ".show" ook om FancyBox te bellen met jQuery.
We hebben onze basis nodig; laten we onze markeringen maken. Open header.php en plaats dit volgende fragment waar u maar wilt.
Registreer je account
Meld je aan en geniet ervan!
Merk op dat ik display gebruik: geen om het formulier in eerste instantie te verbergen.
De CSS is vrij eenvoudig; Ik ontwerp alleen een snel formulierontwerp in PhotoShop.
De vorm, minus de vormgeving, ziet er als volgt uit: (merk op dat ik de weergave heb verwijderd: geen in de opmaak om mijn stijlen te controleren)
Laten we beginnen met het stylen van onze box.
div # register-vorm width: 400px; overloop verborgen; hoogte: 230 px; positie: relatief; achtergrond: # f9f9f9 url (images / secure.png) no-repeat 260px 40px; font-family: Helvetica Neue, Helvetica, Arial! belangrijk;
Ik ga nu verder met het intypen van de tekstinvoer en wat fanciness.
div # register-formulierinvoer [type = "tekst"] weergave: blok; border: 1px solid #ccc; marge: 5px 20px; opvulling: 9px 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; breedte: 200 px; font-family: Helvetica Neue, Helvetica, Arial! belangrijk; div # register-formulierinvoer [type = "tekst"]: hover border-color: # b1b1b1; div # register-formulierinvoer [type = "tekst"]: focus -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc;
Nu zal ik de knop stylen, een hover-status toevoegen en de standaardknop vervangen door een afbeelding.
div # register-formulierinvoer [type = "submit"] # register background: url (images / register.jpg) niet-herhalen; rand: 0; beiden opschonen; cursor: pointer; hoogte: 31 px; overloop verborgen; positie: relatief; left: 295px; text-indent: -9999px; top: 42px; width: 92px; div # register-formulierinvoer [type = "submit"] # register: hover background-position: 0 -32px;
Ten slotte voegen we een algemene stijl toe.
div # register-vorm span display: block; margin-bottom: 22px; div # register-formulier div.title margin-left: 15px div # register-vorm div.title h1, div # register-vorm div.title span text-shadow: 1px 1px 0px #fff div # register- vorm div.title h1 margin: 7px 0; p.statement position: absolute; bodem: -2px; left: 10px; font-size: .9em; color: # 6d6d6d; text-shadow: 1px 1px 0px #fff;
Voila! we hebben onze vorm. Laten we nu verder gaan met de functionaliteit van jQuery.
Ten eerste moeten we jQuery opnemen in WordPress. Om dit te bereiken, moeten we het volgende stuk code plaatsen vóór de
tag in het bestand header.php. Onthoud dat, aangezien WordPress zelf jQuery gebruikt, we het niet potentieel twee keer willen laden!Download Fancybox en plaats het in je WordPress-map. Om dingen een beetje meer te organiseren, heb ik een map "Inclusief" gemaakt.
Open vervolgens uw footer.php-bestand en plaats het volgende vóór het einde van de label
En laten we nu de fancybox-methode noemen; plak dit na de bovenstaande code en vóór de afsluitende body-tag.
Accentsconagua
jQuery (document) .ready (function () jQuery (". show"). fancybox ('titleShow': 'false', 'transitionIn': 'fade', 'transitionOut': 'fade');) ; Werden gedaan! Onze vorm is gemaakt; we moeten tenslotte gewoon de nodige WordPress-informatie doorgeven om het goed te laten functioneren.
Er is hier niets speciaals; we hebben slechts twee WordPress-fragmenten nodig, verborgen in het bestand wp-login.php.
Het eerste fragment:
En:
De definitieve code zou er zo uit moeten zien:
Registreer je account
Meld je aan en geniet ervan!
Let op dat het zo is heel belangrijk, en noodzakelijk, om user_login als een naam en als een ID in je tekstinvoer te hebben; hetzelfde geldt voor de e-mailinvoer. Anders werkt het niet.
En daarmee zijn we klaar!
Met een vleugje code, en enkele aanpassingen, zijn we erin geslaagd om een geweldig "Registreren Form" voor onze gebruikers te bouwen. Wat denk je?
