Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Gyors tipp: Egy díszes WordPress regisztráció forma készítése Scratchből

by
Length:ShortLanguages:

Hungarian (Magyar) translation by Bózsó Péter (you can also view the original English article)

Ebben a bemutatóban, tanácsokat fogok adni egy gyönyörű "regisztráció" forma készítésének folyamatán, Fancybox, jQuery, és természetesen WordPress használatával. Ahogy látni fogod, a folyamat meglehetősen egyszerű.

1. lépés A jelölés

Először, helyezzünk el egy gombot az oldal tetején, az alapértelmezett leírás áthelyezésével a témában.

Észreveszed, hogy a regisztráció gombban, a href (#register-form) ugyanaz, mint a forma lentebb. Továbbá használjuk a ".show" osztályt FancyBox hívására jQueryvel.

Szükség van az alapunkra; készítsük el a jelölésünket. Nyisd meg a header.php-t, és helyezd el a következő töredéket bárhol ahol szeretnéd.

Jegyezd meg, hogy display:none-t használok, hogy alapvetően elrejtsem a formát.


2. lépés, CSS

A CSS inkább egyszerű; Én csupán stílizálok egy rövid formatervezést PhotoShopban.

A forma, mínusz a stílus, így néz ki: (jegyezd meg, hogy kivettem a display:none-t a jelölésben hogy ellenőrizzem a stílusaimat)

Kezdjük el stílizálni a dobozunkat.

Folytatásképp, stílizálni fogom a szöveg bemeneteket, egy kis díszességet hozzáadva.

Most, stílizálni fogom a gombot, lebegő állapotot hozzáadva, és kicserélve az alapértelmezett gombot egy képpel.

Végül, hozzáadunk egy kis általános stílust.

Voila! megvan a formánk. Most, menjünk tovább a jQuery funkcionalitással.


3. lépés, jQuery

Először, el kell helyeznünk a jQueryt WordPressen belül. Hogy elérjük ezt, el kell helyeznünk a következő kóddarabot a <head> címke elé a header.php fájlon belül. Emlékezz, ahogy a WordPress hasznosítja a jQueryt, nem akarjuk potenciálisan betölteni kétszer!

Töltsd le a Fancyboxot és helyezd el a WordPress mappádban. Hogy egy kicsit jobban szervezzük a dolgokat, készítettem egy "Tartalmak" mappát.

Ezután, nyisd meg a footer.php fájlodat, és helyezd el a következőt a </body> címke vége előtt.

És most, hívjuk a fancybox módszert: illeszd be ezt a fenti kód után és a záró body címke előtt.

Kész vagyunk! A formánk el lett készítve, végül csak át kell mennünk a szükséges WordPress információkon, hogy megfelelően működővé tegyük.


4. lépés, WordPress

Semmi díszes nincs itt; csak két WordPress töredéket igénylünk, elrejtve a wp-login.php fájlban.

Az első töredék:

És:

Az utolsó kódnak így kell kinéznie:

Kérlek jegyezd meg, hogy ez nagyon fontos, és szükséges, hogy a user-login meglegyen névként és egy ID-ként a szöveg bemenetedben; ugyanez igaz az email bemenetre. Egyébként, ez nem fog működni.

És ezzel, kész vagyunk!

Következtetés

Egy kód érintéssel, és néhány csípéssel, sikerült egy jól kinéző "Regisztrációs formát" építenünk a felhasználóinknak. Mit gondolsz?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.