Share
I denna handledning guidar jag dig genom processen att skapa en vacker "Registrera" -form, med hjälp av Fancybox, jQuery och, naturligtvis, WordPress. Som du hittar är processen verkligen ganska enkel.
Låt oss först placera vår knapp högst upp på sidan och ersätta standardbeskrivningen i temat.
Registrera
Observera att href (# register-formuläret) i registret är samma ID som formuläret nedan. Vi använder också klassen ".show" för att ringa FancyBox med jQuery.
Vi behöver vår bas; låt oss skapa vår markering. Öppna header.php, och placera följande stycke där du vill.
Registrera ditt konto
Registrera dig hos oss och njut av!
Observera att jag använder displayen: ingen att dölja formuläret i början.
CSS är ganska enkelt; Jag stylar bara en snabb formdesign i PhotoShop.
Formen minus styling ser ut så här: (Observera att jag har tagit bort displayen: ingen i markeringen för att kontrollera mina stilar)
Låt oss börja börja styling vår ruta.
div # register-form width: 400px; överflöde: gömd; höjd: 230px; position: relativ; bakgrund: # f9f9f9 url (images / secure.png) no-repeat 260px 40px; font-family: Helvetica Neue, Helvetica, Arial! viktigt;
Fortsätt på, jag ska nu ställa in textinmatningarna och lägga till lite fantasi.
div # register-form input [typ = "text"] display: block; gränsen: 1px solid #ccc; marginal: 5px 20px; vaddering: 9px 4px; -moz-gränsen-radien: 4px; -webkit-border-radius: 4px; bredd: 200px; font-family: Helvetica Neue, Helvetica, Arial! viktigt; div # register-form inmatning [typ = "text"]: svep border-color: # b1b1b1; div # register-form input [typ = "text"]: fokus -moz-box-skugga: 0 0 3px #ccc; -webkit-box-skugga: 0 0 3px #ccc;
Nu ska jag ställa in knappen, lägga till ett svävarläge och ersätta standardknappen med en bild.
div # register-form input [typ = "submit"] # register bakgrund: url (images / register.jpg) no-repeat; gräns: 0; klara: båda; markör: pekare; höjd: 31px; överflöde: gömd; position: relativ; vänster: 295px; textindelning: -9999px; top: 42px; bredd: 92px; div # register-form inmatning [type = "submit"] # register: hover background-position: 0 -32px;
Slutligen lägger vi till några generella styling.
div # register-form span display: block; marginalbotten: 22px; div # register-form div.title margin-left: 15px div # register-form div.title h1, div # register-form div.title span text-shadow: 1px 1px 0px #fff div # register- form div.title h1 margin: 7px 0; p.statement position: absolute; botten: -2px; vänster: 10px; font-size: .9em; color: # 6d6d6d; textskugga: 1px 1px 0px #fff;
Voila! vi har vår form Låt oss nu gå vidare med jQuery-funktionaliteten.
Först måste vi inkludera jQuery inom WordPress. För att uppnå detta måste vi placera följande bit av kod före
tagg i header.php-filen. Kom ihåg, eftersom WordPress själv använder jQuery, vill vi inte kunna ladda den två gånger!Hämta Fancybox och placera den i din WordPress-mapp. För att organisera saker lite mer, har jag skapat en "Inkluderar" -mapp.
Öppna sedan din footer.php-fil och placera följande före slutet av märka
Och nu, låt oss ringa fancybox-metoden; klistra in det här efter koden ovan och före stängningskroppen.
Accentsconagua
jQuery (dokument) .ready (function () jQuery (". show"). fancybox ('titleShow': 'false', 'transitionIn': 'fade', 'transitionOut': 'fade');) ; Var gjort! Vår form har skapats; vi behöver slutligen bara skicka den nödvändiga WordPress-informationen för att den ska fungera korrekt.
Det finns inget fint här; vi behöver bara två WordPress-utdrag, dolda i filen wp-login.php.
Det första stycket:
Och:
Den slutliga koden ska se ut så här:
Registrera ditt konto
Registrera dig hos oss och njut av!
Observera att det är väldigt viktigt, och nödvändigt att ha user_login som ett namn och som ett ID i din textinmatning; Detsamma gäller för inmatningen av e-post. Annars fungerar det inte.
Och med det är vi färdiga!
Med en touch av kod, och några tweaks, har vi lyckats skapa en snygg "Registreringsformulär" för våra användare. Vad tror du?
