Share
I denne veiledningen vil jeg veilede deg gjennom prosessen med å lage et vakkert "Registrer" skjema, ved hjelp av Fancybox, jQuery og, selvfølgelig, WordPress. Som du finner, er prosessen egentlig ganske enkel.
Først legger vi knappen vår øverst på siden, og erstatter standardbeskrivelsen i temaet.
Registrere
Legg merke til at i registeknappen er href (# register-skjemaet) det samme ID som skjemaet under. Vi bruker også klassen ".show" for å ringe FancyBox med jQuery.
Vi trenger vår base; la oss lage vår oppmerkning. Åpne header.php, og plasser denne følgende koden hvor som helst du vil.
Registrer din konto
Registrer deg hos oss og nyt!
Merk at jeg bruker skjermbildet: ingen for å skjule skjemaet i utgangspunktet.
CSS er ganske enkelt; Jeg styler bare en rask formdesign i PhotoShop.
Skjemaet, minus styling, ser slik ut: (Merk at jeg har fjernet skjermen: ingen i markeringen for å sjekke stilene mine)
La oss begynne å style boksen vår.
div # register-form width: 400px; overløp: skjult; høyde: 230px; stilling: relativ; bakgrunn: # f9f9f9 url (images / secure.png) no-repeat 260px 40px; font-familie: Helvetica Neue, Helvetica, Arial! viktig;
Fortsetter på, jeg skal nå skrive inn tekstene, legge til litt fantasi.
div # register-form input [type = "text"] display: block; grense: 1px solid #ccc; margin: 5px 20px; polstring: 9px 4px; -moz-grense-radius: 4px; -webkit-border-radius: 4 piksler; bredde: 200px; font-familie: Helvetica Neue, Helvetica, Arial! viktig; div # register-form input [type = "text"]: svever border-color: # b1b1b1; div # register-form input [type = "text"]: fokus -moz-boks-skygge: 0 0 3px #ccc; -webkit-boks-skygge: 0 0 3px #ccc;
Nå styler jeg knappen, legger til en svingestatus, og erstatter standardknappen med et bilde.
div # register-form input [type = "submit"] # register bakgrunn: url (images / register.jpg) no-repeat; grense: 0; klare: begge; markør: pointer; høyde: 31px; overløp: skjult; stilling: relativ; venstre: 295px; tekstindeks: -9999px; top: 42px; bredde: 92px; div # register-form input [type = "submit"] # register: hover bakgrunnsstilling: 0 -32px;
Til slutt legger vi til noen generell styling.
div # register-form span display: block; margin-bunn: 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 posisjon: absolutt; bottom: -2px; venstre: 10px; font-size: .9em; color: # 6d6d6d; tekstskygge: 1px 1px 0px #fff;
Voila! Vi har vårt skjema. Nå, la oss gå videre med jQuery-funksjonaliteten.
Først må vi inkludere jQuery innen WordPress. For å oppnå dette må vi plassere følgende kodenummer før
tag i header.php filen. Husk at som WordPress selv bruker jQuery, vil vi ikke potensielt laste den to ganger!Last ned Fancybox og legg det i WordPress-mappen din. For å organisere ting litt mer, har jeg opprettet en mappe med "Inkluderer".
Deretter åpner du footer.php filen, og plasserer følgende før slutten av stikkord
Og nå, la oss ringe til fancybox-metoden; lim inn dette etter koden ovenfor og før den avsluttende kroppsmerket.
Accentsconagua
jQuery (dokument) .ready (funksjon () jQuery (". show"). fancybox ('titleShow': 'false', 'transitionIn': 'fade', 'transitionOut': 'fade');) ; Vi er ferdige! Vårt skjema er opprettet; vi må bare passere nødvendig WordPress-informasjon for å få den til å fungere skikkelig.
Det er ikke noe fancy her; Vi krever bare to WordPress-utdrag, skjult i wp-login.php-filen.
Den første koden:
Og:
Den endelige koden skal se slik ut:
Registrer din konto
Registrer deg hos oss og nyt!
Vær oppmerksom på at det er veldig viktig, og nødvendig, for å ha user_login som et navn og som en ID i tekstinngangen; Det samme gjelder for e-postinngangen. Ellers vil det ikke fungere.
Og med det er vi ferdige!
Med et snev av kode, og noen tweaks, har vi klart å bygge en flott "Register Form" for våre brukere. Hva tror du?
