Herkese merhaba. Böylece, formlar oluşturmak için birkaç öğe öğrendik. Daha büyük bir sorunu çözmek için bilgimizi birleştirmenin zamanı geldi. Sitedeki en basit giriş formunu oluşturalım. Bunu yapmak için iki alana ihtiyacımız var, imzalar oluşturup bunlara bağlarız.
İlk alan giriş içindir, ikincisi şifre içindir. Ve ikincisi ile her şey o kadar basit değil. Şu anda sadece metin girmek için bir alandır.
Tarayıcıda sonuç:
İçine girilen metnin, bu tür bir alan için alışılmış olduğu gibi, yıldızlarla değiştirilmesi için basit bir işlem yapmanız gerekir. Yani, nitelik değerini değiştirin tipüzerinde parola:
Sonuç:
Form gönder düğmesi
İyi. Formumuz neredeyse hazır. Şimdi, oluşturulmasını tamamlamak için formu göndermek için kullanılacak bir düğme oluşturmanız gerekiyor. Görev, etiket kullanılarak çözüldü tipi ile Sunmak.
Düğme üzerinde bir tür yazı olması gerekiyorsa, bu özellik kullanılarak yapılabilir. değer... Buton için bir isim belirleyip belirlememek size kalmış ancak bunu yaparsanız sunucu bu ismi ve butonun değerini alacaktır.
Kural olarak, formda her biri belirli bir eylemi gerçekleştiren birkaç düğme varsa, form gönder düğmesinin adına ihtiyaç vardır. Bu sayede tarayıcıdan butonun adını ve değerini alan sunucu, kullanıcının hangi butona bastığını ve buna göre ne yapılması gerektiğini anlar.
Sonuç olarak, formumuzun kodu aşağıdaki gibi olacaktır:
Tarayıcıda sonuç:
İadeler
kullanım
kullanım şekli
wp_login_form (array ("echo" => true, "yönlendirme" => site_url ($ _ SERVER ["REQUEST_URI"]), "form_id" => "loginform", "label_username" => __ ("Kullanıcı adı"), " label_password "=> __ (" Şifre ")," label_remember "=> __ (" Beni Hatırla ")," label_log_in "=> __ (" Oturum Aç ")," id_username "=>" user_login "," id_password "= > "user_pass", "id_remember" => "hatırla", "id_submit" => "wp-gönder", "hatırla" => true, "value_username" => NULL, "değer_hatırla" => yanlış)); $ bağımsız değişken (dize / dizi) Sonucu kontrol eden bir dizi argüman.Varsayılan: varsayılan seçenekler
$ Args parametre argümanları
Eko (mantıklı)(1) görüntüleyin veya (0) döndürün.Varsayılan: 1 yönlendirmek (hat) Yetkilendirmeden sonra aktarılacak URL.
Varsayılan: geçerli sayfa form_id (hat) kimlik etiketi özelliği
# 2 Yanlış kullanıcı adı / şifre girerken aynı sayfada bırakın
Varsayılan olarak, böyle bir forma yanlış günlükler girilirse, kullanıcı bir hata göstergesiyle ana yetkilendirme sayfasına yönlendirilecektir.
Bunu değiştirmek ve kullanıcıyı yanlış veri girse bile önceki sayfada bırakmak için wp_login_failed kancasını kullanabilirsiniz:
## Yetkilendirme formuna yanlış giriş / şifre girildiğinde kullanıcıyı aynı sayfada bırakır wp_login_form () add_action ("wp_login_failed", "my_front_end_login_fail"); function my_front_end_login_fail ($ kullanıcı adı) ($ yönlendiren = $ _SERVER ["HTTP_REFERER"]; // isteğin nereden geldiği // Yönlendiren varsa ve bu bir wp-login.php sayfası değilse if (! boş ($ yönlendiren) ) &&! strstr ($ yönlendiren, "wp-login") &&! strstr ($ yönlendiren, "wp-admin")) (wp_redirect (add_query_arg ("giriş", "başarısız", $ yönlendiren)); // yönlendirme ve bir sorgu parametresi eklemek? login = başarısız çıkış;))
# 3 WordPress kayıt formu
Kayıt formunu görüntülemek için özel bir işlev yoktur. Bu nedenle, kendi HTML kodunuz yazılarak form görüntülenebilir. Bir kayıt formu için böyle bir HTML kodu örneği:
Değişikliklerin listesi
3.0.0 sürümünden beri | tanıtıldı. |
kod wp giriş formu: wp-includes / general-template.php WP 5.3.2
true, // Varsayılan "yönlendirme" değeri, kullanıcıyı istek URI'sine geri götürür. "yönlendirme" => (is_ssl ()? "https: //": "http://"). $ _SERVER ["HTTP_HOST"]. $ _SERVER ["REQUEST_URI"], "form_id" => "loginform", "label_username" => __ ("Kullanıcı Adı veya E-posta Adresi"), "label_password" => __ ("Parola"), "label_remember" => __ ("Beni Hatırla"), "label_log_in" => __ ("Giriş"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => "wp-submit", "remember" => true, "value_username" => "", // "Değer_hatırla" öğesini varsayılan olarak true olarak ayarlayın, "Beni hatırla" onay kutusunu işaretli olarak ayarlayın. "değer_hatırla" => yanlış,); / ** * Varsayılan oturum açma formu çıktı argümanlarını filtreler. * * @since 3.0.0 * * @see wp_login_form () * * @param dizisi $ defaults Bir dizi varsayılan oturum açma formu bağımsız değişkeni. * / $ args = wp_parse_args ($ args, application_filters ("login_form_defaults", $ varsayılanları)); / ** * Giriş formunun en üstünde görüntülenecek içeriği filtreler. * * Filtre, açılış formu etiket öğesinin hemen ardından değerlendirme yapar. * * @since 3.0.0 * * @param string $ içerik Görüntülenecek içerik. Varsayılan boş. * @param dizisi $ args Oturum açma formu argümanları dizisi. * / $ login_form_top = application_filters ("login_form_top", "", $ argümanlar); / ** * Giriş formunun ortasında görüntülenecek içeriği filtreler. * * Filtre, "login-password" * alanının görüntülendiği konumun hemen ardından değerlendirme yapar. * * @since 3.0.0 * * @param string $ içerik Görüntülenecek içerik. Varsayılan boş. * @param dizisi $ args Oturum açma formu argümanları dizisi. * / $ login_form_middle = application_filters ("login_form_middle", "", $ argümanlar); / ** * Giriş formunun altında görüntülenecek içeriği filtreler. * * Filtre, kapanış formu etiketi öğesinden hemen önce değerlendirme yapar. * * @since 3.0.0 * * @param string $ içerik Görüntülenecek içerik. Varsayılan boş. * @param dizisi $ args Oturum açma formu argümanları dizisi. * / $ login_form_bottom = application_filters ("login_form_bottom", "", $ argümanlar); $ formu = " "; if ($ args [" echo "]) (echo $ form;) else (dönüş $ form;))Giriş formları forumlar, mağazalar, WordPress içeren web sitelerinde bulunabilir ve çoğunlukla internetteki her şey bir şeye erişmek için bir yerde giriş formu gerektirir. Tüm web, giriş formları ve kayıt, kayıt formları olmadan eksiktir.
HTML formları, çoğumuzun karşılaştığı ilk ve HTML yapısına stil veren uygun CSS ile olacaktır. En son HTML sürümlerinde, HTML'nin varsayılan yapı stil seçeneği olarak CSS3'ü seçmiş gibi görünüyor. Her neyse, burada bulduğunuz şey, ön uç geliştiriciler tarafından oluşturulan ve kullanımı ücretsiz olarak halka paylaşılan önceden tasarlanmış HTML, CSS formlarıdır.
Çoğu, önceden oluşturulmuş HTML doğrulama özelliklerinin yanı sıra bazı isteğe bağlı jQuery veya HTML doğrulama özelliklerine sahip olduğundan (aşağıdaki geçiş ölçerli Giriş / Kayıt formu gibi) tüm bu ücretsiz oturum açma formu şablonlarını kullanmayı deneyin.
Bu liste henüz bitmedi, yeni giriş formu tasarımları bulmakla ilgileniyorum, bu yüzden 2017'de ortaya çıktıklarında bu listeyi yeni giriş formu şablonlarıyla güncellemeye devam edeceğim. Bizi izlemeye devam edin.
Kırmızı Giriş Formu
Web siteniz için temel giriş alanları gerektiren ve ekstra programlama gerektirmeyen basit ve etkili bir giriş formu.
Zaten düz olan web siteniz için tasarlanmış düz bir giriş formu tasarımı. Bu şablonu indirin ve herhangi bir amaç için kullanın.
Müşterileriniz için hızlı oturum açmaya mı ihtiyacınız var? Endişelenmeyin, bu hoş görünümlü giriş formu, herhangi bir zorluk yaşamadan devam etmenizi sağlayacaktır. Kaynak kodunu indirin ve demoyu kontrol edin çünkü alanlara örnek bir kullanıcı adı ve şifre koyup giriş yapmayı deneyin. Aynı şekilde, çıkış animasyonunu gösteren bir çıkış düğmesi ile muhteşem görünen bir profil sayfasına yönlendirileceksiniz.
Google malzeme tasarımının düz tasarım üzerinde popüler hale gelmesiyle birlikte, bu css3 şablonunda derin ve dikkatlice gölgelenmiş bir giriş formu ve bir kayıt formu görebiliriz.
Burada, busienss web siteniz için giriş alanlarını gizleme / gösterme seçeneğine sahip başka bir mükemmel giriş formu alırsınız. İyi kodlanmış css / html / js tasarımı, mevcut site hızınızı değiştirmeden size daha iyi yükleme sağlayacaktır.
Akışkan animasyonlu Minimal Giriş Formu
İhtiyacınız olan bir resme veya bir düğmeye tıklayarak giriş bölümünü açan giriş formunun pürüzsüz bir animasyonu.
css ile Minimalist Giriş Formu
Burada, tam ekran arka planına yerleştirilmiş, şık olmayan bir giriş formu kullanıcı arabirimi bulacaksınız. İndirme dosyası, bu girişin web sitenize kolayca uygulanması için size css ve html sağlayacaktır.
Hareketli Giriş Formu
Metin alanlarında görüntülenen tıklama animasyonları, kullanıcı ve şifre simgelerinin küçük bir kayan animasyonunu görüntüleyen harikadır. Daha sonra, bir kimlik doğrulama ön yükleyicisinin yanı sıra bir hoş geldiniz bloğunu izlemek için formda oturum açabilirsiniz. Bu indirme, kendi web siteniz için bir oturum açma formu uygulamak için tüm kaynak dosyaları içerir.
Zarif Giriş
Bu, minimum koduyla site hızı üzerinde daha az etkisi olduğundan, web sitenizde görüntüleyebileceğiniz basit bir giriş formu sürümüdür.
Sakin Giriş Ekranı
Tüm sayfaya rahatlatıcı bir his veren animasyonlu arka plana sahip temiz bir giriş formu. Tüm şablonu zip formatında codepen'den indirin.
Giriş ve Kayıt Formu
Bu akıcı giriş ve kayıt formunu web sitenize kolaylıkla entegre edin. Bu indirme ile birlikte zip dosyası size css, html ve js şablonları sağlayacaktır. Ekranda kolay şifre girişi için şifre göster / gizle seçenekleriyle sosyal medya kaydı da mevcuttur.
Hesap Oluştur ile Giriş Formu
Bir fadein etkisi ile görüntülenen bir giriş formu sadece izlemek için eğlenceli. Bu etki yalnızca birkaç modern oturum açma biçiminde görülebilir. Kaydolmak veya form oluşturmak için formu değiştirmek için beni tıkla'yı kullanın.
Düz tasarımlı minimal tarzda bir giriş formu aşağıdaki bağlantıdan indirilebilir. HTML doğrulaması mevcuttur ve bu oturum açma şablonunda ayarlanmıştır.
İndirmekGiriş için Minimal Form Şablonu
E-posta için bir doğrulama yerinde ve bu şablon, süslü jquery modülleri olmayan saf css, html'dir.
İndirmekKayıt / Giriş Formu
Web sitesine giriş yapmak için tek bir form ve bir tıklama ile çevrilebilen bir kayıt, kayıt seçeneği. Kayıt alanında bazı önemli alanlar eksik olsa da, bu yine de tüm güçlü özellikleriyle daha iyi bir formdur.
İndirmekBu giriş formu, giriş bağlantısına tıklamadığınız sürece gizlenir. Bu, giriş için fazladan bir sayfadan kaçınabilen modern web sitesi için çok kullanışlı bir özelliktir. Bu güçlü giriş formu ile istediğiniz herhangi bir sayfada giriş bilgilerini görüntüleyin.
İndirmekHem PSD hem de tam kodlu HTML/CSS sürümü olarak sağlanır, böylece hemen entegre etmeye başlayabilirsiniz.
Giriş Formu (Kodlu)
Profesyonel bir giriş formu. İndirme, PSD dosyasını içeriyor ve ben de onu kodlamak istedim, bu yüzden xHTML, Js ve CSS dosyalarını da ekledim.
İndirmekBeyaz Basit Giriş Formu
Yuvarlak gönder düğmesi ve zarif odak durumları ile temiz ve basit bir giriş formu.
Basitçe Giriş Formu
Basitçe Giriş Formu, yalnızca CSS3 kullanılarak stillendirildi ve tasarlandı. Form, oldukça basit biçimlendirme kullanılarak oluşturulur ve çok temel CSS3 özellikleri kullanılarak biçimlendirilir.
İndirmekBu dersimizde dört adımda bir kayıt formu oluşturacağız: 1. Kullanıcı Adı ve Şifre Girme 2. Ad Soyad ve E-posta Adresi 3. Yaş, Cinsiyet ve Ülke 4. Genel Bilgiler
HTML
İlk olarak, her zamanki gibi, işaretlemeyi oluşturalım html... Dört bloklu bir konteynere ihtiyacımız var BÖL, her adım için bir tane.
Ana kod htmlşöyle olurdu: