Share
În acest tutorial, vă voi îndruma prin procesul de realizare a unui frumos "Registru", folosind Fancybox, jQuery și, desigur, WordPress. După cum veți descoperi, procesul este foarte simplu.
Mai întâi, să plasăm butonul nostru în partea de sus a paginii, înlocuind descrierea implicită în temă.
Inregistreaza-te
Observați că în butonul de înregistrare href (# register-form) este identic cu formularul de mai jos. De asemenea, folosim clasa ".show" pentru a apela FancyBox cu jQuery.
Avem nevoie de baza noastră; sa ne creem marcajul. Deschideți header.php și plasați acest fragment următor oriunde v-ați dori.
Înregistrați-vă contul
Înscrieți-vă cu noi și bucurați-vă!
Rețineți că folosesc afișarea: nici una pentru a ascunde inițial formularul.
CSS este destul de simplă; Pur și simplu am designat un design rapid în formularul PhotoShop.
Forma, minus stilul, arată astfel: (rețineți că am eliminat afișarea: nici una în marcaj pentru a verifica stilurile mele)
Haideți să începem să ne designăm caseta.
div # registru-form lățime: 400px; overflow: ascuns; înălțime: 230px; poziție: relativă; fundal: # f9f9f9 url (imagini / sigure.png) no-repeat 260px 40px; font-family: Helvetica Neue, Helvetica, Arial! important;
Continuând, voi incepe stilul intrărilor de text, adăugând unele fantezie.
div # intrare în formă de registru [type = "text"] display: block; frontieră: 1px solid #ccc; margine: 5px 20px; padding: 9px 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; lățime: 200px; font-family: Helvetica Neue, Helvetica, Arial! important; div # intrare în formă de registru [type = "text"]: hover border-color: # b1b1b1; div # intrare în formă de registru [type = "text"]: focalizare -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc;
Acum, voi stil butonul, adăugând o stare de hover și înlocuirea butonului implicit cu o imagine.
div # înregistrare-formular de intrare [tip = "trimite"] # înregistra background: url (images / register.jpg) no-repeat; frontieră: 0; clar: ambele; cursor: pointer; înălțime: 31px; overflow: ascuns; poziție: relativă; stânga: 295px; text-indent: -9999px; top: 42px; lățime: 92px; div # înregistrare-formular de intrare [tip = "trimite"] # registru: hover background-position: 0 -32px;
În cele din urmă, adăugăm un stil general.
div # registru-formă span afișare: bloc; margin-bottom: 22px; div # registru-formă div.title span text-shadow: 1px 1px 0px #fff div # registru-formă div.title span form div.title h1 marja: 7px 0; p. declarație poziție: absolută; jos: -2px; stânga: 10px; font-size: .9em; Culoare: # 6d6d6d; text-shadow: 1px 1px 0px #fff;
Voila! avem forma noastră. Acum, să mergem mai departe cu funcționalitatea jQuery.
În primul rând, trebuie să includem jQuery în WordPress. Pentru a realiza acest lucru, trebuie să plasăm următoarea bucată de cod înainte de
în fișierul header.php. Rețineți, deoarece WordPress în sine utilizează jQuery, nu vrem să îl încărcăm de două ori!Descărcați Fancybox și plasați-o în dosarul dvs. WordPress. Pentru a organiza lucrurile un pic mai mult, am creat un dosar "Include".
Apoi, deschideți fișierul footer.php și plasați următoarele înaintea sfârșitului etichetă
Și acum, să sunăm metoda fancybox; lipiți-o după codul de mai sus și înainte de eticheta de închidere a corpului.
Accentsconagua
jQuery (document) .ready (functie () jQuery (".show") .Fancycybox ('titleShow': 'false', 'transitionIn': 'fade' ; Au fost efectuate! Forma noastră a fost creată; în cele din urmă trebuie doar să treacă informațiile necesare WordPress pentru ao face să funcționeze corect.
Nu este nimic fantezie aici; avem nevoie doar de două fragmente WordPress ascunse în fișierul wp-login.php.
Primul fragment:
Și:
Codul final ar trebui să arate astfel:
Înregistrați-vă contul
Înscrieți-vă cu noi și bucurați-vă!
Rețineți că este foarte important, și necesar, pentru a avea user_login ca un nume și ca un ID în introducerea textului; același lucru este valabil și pentru intrarea de e-mail. În caz contrar, nu va funcționa.
Și cu asta, am terminat!
Cu o notă de cod și câteva corecții, am reușit să construim un "Formular de înscriere" excelent pentru utilizatorii noștri. Tu ce crezi?
