WordPress Oturum Açma Sayfasını Nasıl Tam olarak Ayarlayabilirim
WordPress Giriş Sayfası çok dostu değil, değil mi? Bu, sokaktaki muhteşem bir inci kapısından daha sıkıcı bir kapı gibidir. Ancak kullanıcıları sitenizin gizli bölümüne nasıl başlattığınız, özellikle de özel bir şeyiniz varsa önemlidir. İnsanların dünyaya girdiği portal, beklentileri geliştirmeye yardımcı olursunuz ve içinde ne olduğunu öğrenmek için gözlerini yönlendirirsiniz. WordPress Giriş Sayfası markanızı vermek, korumalı içeriği ve WordPress yönetici kontrol panelini geliştirmenize yardımcı olabilir, ziyaretçilerinize söyleyin, bu sıradan bir WordPress sitesi değildir.
Bu yazıda, bir WordPress özel oturum açma sayfası oluşturmak için neyin gerekli olduğunu göstereceğim. Daha sonra, tam kontrol etmek isteyen veya sadece küçük bir şeyi değiştirmek isteyenler için uygun CSS ve/veya PHP kodunu kullanarak nasıl değişiklik yapacağınızı göstereceğim. Ardından, giriş formunuzun görünümünü hızlı ve herhangi bir koda dokunmadan tam olarak ayarlamanıza olanak tanıyan Branda (daha önce Ultimate markalaşma eklentisi) ile nasıl değişiklik yapılacağını tartışacağız. Ayrıca bir branda nasıl hazırlanacağını gösteren kısa bir videomuz var, bu yüzden izlemeye veya atlamaya devam edin.
CSS ve PHP’den farklı oturum açma sayfalarını ayarlama yolunu doldurun:
Giriş sayfanıza özel CSS nasıl eklenir
WordPress Giriş Elemanı CSS Seçmenleri
CSS’de kısa kurslar
PHP ile Yönetici Oturum Açma Sayfanızı Nasıl Değiştirirsiniz
Branda kullanarak farklı giriş sayfası öğeleri nasıl ayarlanır:
Logo di Layar Masuk
Latar Belakang Halaman Masuk
Gelen form
Ingat Saya Kotak Centang
Hata mesajı
WordPressSpengali Giriş Formu Girişi altındaki bağlantı
Özelleştirme WordPress Oturum Açma Sayfası WordPress Oturum Açma Sayfası, WordPress sitenizdeki diğer sayfalarla aynıdır:
CSS ile öğeleri düzenleyerek stili ve rengi değiştirebilirsiniz
PHP’deki kancaları ve filtreleri kullanarak düzeni değiştirerek işlevselliği değiştirebilir, artırabilir, azaltabilir ve öğeleri taşıyabilirsiniz.
WordPress Giriş Sayfası Giriş Sayfanıza CSS Custom nasıl eklenir WordPress, temanızla birlikte bulunan stil sayfasını kullanmaz. Bu, Oturum Açma sayfasını styles.css dosyasına tema klasörünüzde ayarlamak için CSS eklemeye çalışırsanız, değişikliklerin görünmeyeceği anlamına gelir. Özel CSS stilinizi PHP ile oturum açma sayfanızın en üstüne eklemelisiniz.
Yalnızca birkaç satır CSS varsa, özel bir işlev oluşturabilir ve CSS’yi giriş sayfasının üstüne girmek için login_enqueue_scripts’i kullanabilirsiniz.
Yükleme Çekirdeği 8F5912DC5ED2138803B75B4A4E76A0B1
Yukarıdaki örnekte, bağlantıyı gelen formun altına geri silmek istiyorum. Yalnızca bir şeyi değiştiriyorum, ancak bazı öğeleri etiketi arasındaki ayarlayabilirsiniz. Bu özel CSS’yi yüklemek için, login_enqueue_scripts kullanarak tüm özel CSS ile özel CSS ile giriş sayfasına ekledim. Yukarıdaki tüm kodları işlevinize ekleyeceksiniz.php dosyası, <? PHP açılışını hariç tutun.
Bu, birkaç stil eklemenin basit bir yoludur.Birçok değişiklik yapmak istiyorsanız, tema dosyanızda yönetilmesi daha kolay olacak şekilde ek stil sayfası yapmanızı öneririm.Oturum açma sayfanızın kafasına özel bir stil sayfası eklemek için, işlevinizde kullanmak yerine, stil sayfasını yüklemek için wp_enqueue_style kullanacaksınız.
Yukarıdaki örnekte, konumumda oturum açma sayfama ayarlar ekleyeceğim özel bir CSS dosyası style-login.css olarak adlandırılıyor.CSS’imi style-login.css’e ekleyeceğim ve yüklemek için yukarıdaki kodu işlev dosyama ekleyeceğim.
WordPress Giriş sayfası öğeleri, Referanslar için WordPress varsayılan oturum açma sayfası:
Fırfırlar olmadan, her bir öğeyi CSS ile ayarlama hissi olmadan, seçmenlerini kullanarak hedefleyebilmelisiniz. Başka bir deyişle, adı bilmeniz gerekir. Giriş sayfası ve kontrol ettikleri bazı özel seçmenler: seçmenler değiştirme
/td>
giriş#giriş giriş#user_pass
body.login div#giriş formu#loginform p.forgetgetot
Alan Beni Hatırla
body.login div#giriş p#nav a
şifrenizin bağlantı kaybı
td> body.login div# Giriş P#BackToblog A
İyi. CSS'ye alışkınsanız, buradan nereden ayrılacağınızı biliyorsunuz, böylece bu bölümün üzerinden atlayabilirsiniz. Herkes beni takip et. CSS ile öğeleri nasıl ayarlayacağınız aşağıda açıklanmıştır. Sıkıştıysanız, bize yorum bırakın. Hayal kırıklığına uğramışsanız ve kolay bir çözüm istiyorsanız, Branda'yı deneyin. Daha önce yaptığımız şeye geri bağlantı gibi öğeleri gizlemek için öğeleri nasıl silinir, ekran kullanabilirsiniz: yok; Örneğin, kayıp şifre bağlantısını nasıl gizleyeceğiniz aşağıda açıklanmıştır.
Çekirdek yükleme 8BAF5851DF3D8AA69A64D65040B0FB9ABir öğenin arka plan rengini değiştirmek için arka planı nasıl değiştirilir, örneğin sayfanın arka planı veya düğme arka planı gibi arka plan rengini kullanacaksınız:#222222; Ve #222222'yi seçtiğiniz renkle değiştirin. Aşağıdaki örnekte, açık mavi olan #17A8E3 kullanıyorum. Ayrıca varsayılan rengi değiştirmek için önemli! Çok özel seçmenler kullanıyorsanız, kullanmanıza gerek yok! Ancak bazı durumlarda, özel CSS'niz çalışmıyorsa, eklemeniz gerekebilir.
Core 52D80F1C8A5EB0361F6BEBD2E524561 içerir
Bir arka plan görüntüsü eklemek istiyorsanız, arka plan görüntüsünü kullanın: URL ('login-logo.png'); ve resim dosyası URL'nizle giriş logo.pnp'yi değiştirin. Stil sayfanızla aynı dizine bir arka plan dosyası eklediğinizden emin olun. Bir medya kitaplığı yükleyicisi kullanıyorsanız, işe yaramaz. Aşağıdaki örnekte, yumuşak gri arka planı giriş sayfasından home-bg.jpg resmine değiştirdiğimi göreceksiniz
Çekirdek Yükleme 43B5ACF33693153C93A2629AFB4C138A
WordPress logo logosunu değiştirmek için aşağıdakileri kullanacaksınız: 2AE179A0BA12280E60E01650D552D60E'nin özünü sevmek
Elementin etrafına boşluk eklenir Element'e yer eklerken, içinde (dolgu) veya dış (marj) öğesinin içinde yer almasını isteyip istemediğinizi belirlemeniz gerekir. Gönder düğmesini düşünün. Düğmede daha fazla yer açmak istiyorsanız, içindeki metnin nefes alacak alanı var ve kenarlara çok yakın değilse, dolgu dolgularını artırmalısınız: 10px 10px 10px 10px; . Düğmenin dışında bir boşluk yapmak istiyorsanız, diğer öğeler çok yakın olmayacak, marj marjını artıracaksınız: 10px 10px 10px 10px;
Dolgu ve marjın dört değeri vardır. Biri üst için, biri sağ için, biri alt ve diğeri sol için, bu sırayla. Örneğin, dolgu olan elemanlar için: 10px 20px 30px 40px:
Üst dolgu 10 piksel olacak.
Sağ tarafta 20 piksel dolgu olacak.
Altta 30 piksel dolgu olacak.
Ve sol tarafta 40 piksel dolgu olacak.
Marj aynı şekilde çalışır. Yazı tipinin boyutunu ve rengini nasıl değiştirilir Formunuzun yazı tipi yazı tipi, bağlantısı veya alanının boyutunu yazı tipi boyutu ile değiştirin: 16px; . İstediğiniz boyutta 16px değiştirin. Metnin rengini renkle değiştirebilirsiniz:#222222; , sadece #222222 değiştir.
Çekirdeği Yükleme 7BC9B9E348541EF71AADC4B5DBFA15F
Ayrıca, bir öğeye birkaç stil ekleyebileceğinizi unutmayın. Sınır sınırının nasıl değiştirilmesi bir sınırdır: 2px katı #222222; Stil Üç Sınır Parçası: 2px Katı #222222; . Önce sınırın genişliğini, daha sonra kuvveti (katı, noktalı vb.) Belirleyecek ve aşağıdaki renk örneklerini birkaç stille belirleyerek bitireceksiniz.
WordPress Oturum Açma Sayfası İşlevinizi Değiştirmek İçin Yönetici Oturum Açma Sayfanızı Nasıl Değiştirirsiniz, PHP kullanmanız gerekir. Bu işlevleri function.php dosyanıza ekleyeceksiniz. Hata mesajınızı işaretlemenin yanı sıra gelen bir hata mesajını değiştirin, bir hata mesajı değiştirmek, sitenizin güvenliğini artırmaya yardımcı olabilir. Yanlış şifre veya kullanıcı adını girerseniz, WordPress size neyi yanlış yaptığınızı söylemek için çok özel bir hata mesajını geri yükler. Bu, kullanıcılara yardımcı olur, ancak bilgisayar korsanlarına da yardımcı olur. Varsayılan hata mesajını değiştirmek için bu işlevi kullanabilirsiniz:
Yükleme Çekirdeği 06250D06F513A9D2DDBD20FFA33FA06F
Tırnak işaretindeki 'Yanlış Oturum Açma Ayrıntıları' mesajını değiştirerek mesajı ayarlayabilirsiniz. Alıntılar bile bırakın. Aktarım URL'sini değiştirin kullanıcınız girdiğinde, varsayılan olarak gerçekleşen gösterge tablosu yerine ön uçlara yönlendirebilirsiniz. Kullanıcıyı ana sayfaya yönlendirmek için Fonksiyonunuza aşağıdakileri ekleyin.php dosyası:
D31c6f8c031f656d468ea0fcbb09c148'in özünü içerir
Onay kutusuna işaretlenmemi hatırladıktan sonra, varsayılan olarak kontrol edilmediğimi unutmayın, ancak kontrol etmeyen unutkan bir kullanıcınız varsa, otomatik olarak etkinleştirebilirsiniz. Bu kutunun her zaman kontrol etmesine izin vermek için, bu snippet'i işlev olarak ekleyin.php: Core 3549116e96eafabe5b7f27Af2884fa6
Gördüğünüz gibi, sayfanızın stili üzerinde tam kontrol verirken, CSS yer. Ancak, düzeni değiştirmek veya öğenin adını değiştirmek istiyorsanız, PHP kullanmanız gerektiğinden çok daha zor hale gelir. Branda size gerçekten yardımcı olabilir. Branda kullanarak giriş sayfanızı nasıl değiştireceğinizi tartışalım.
WordPress Branda Site Giriş sayfasını ayarlamak için Branda Nasıl Kullanılır Basit ayarlamalardan daha fazlasını yapmanıza yardımcı olabilir. WordPress oturum açma sayfasını tamamen elden geçirmek için bir branda nasıl kullanılacağınızla ilgili bu videoyu izleyin. Micah'ı her adımda göreceksiniz, böylece iyi bir resim alacak ve tam olarak ne yapacağınızı bileceksiniz. O zaman size tüm farklı seçenekleri aşağıda ayrıntılı olarak göstereceğim. İlk olarak, Branda eklentisini sitenize yüklemelisiniz. Ardından, giriş ekran modülünü Branda panosundan özelleştirmeniz gerekir.
Giriş Fazının Özelleştirme Modülünün Özelleştirme Modülünü Etkinleştirmek için Kalem simgesine tıklayın Giriş ekranı 6 parçaya ayrılmıştır.
Şablon - Giriş sayfası düzenini değiştirmenizi sağlar
İçerik-öğeleri görüntüleyebileceğiniz/gizleyebileceğiniz veya kelimeleri değiştirebileceğiniz veya özel resimler yükleyebileceğiniz yer burası
Tasarım - değişim marjı, sınırlar, opaklık, temelde farklı unsurların düzenlenmesi
Renk - Buradaki herhangi bir öğenin rengini değiştirin
Özel CSS - Özel bir form oluşturduğunuzda kendi kodunuzu ekleyin veya Branda tarafından yapılan kodu değiştirin. Neden yeni öğrendiğiniz CSS'yi kullanmıyorsunuz?
Brandayı kullanarak nasıl genel ayarlamalar yapacağınızı öğreteyim. Aşağıdakileri nasıl ayarlayacağınız aşağıda açıklanmıştır:WordPress logoyu değiştir
Arka plan sayfası
Gelen form
Hatırla kutuyu kontrol et
Hata mesajı
WordPress Oturum Açma Formunun altındaki bağlantı
Transfer girer
WordPress logosu logosunu değiştirmek ve kendi logonuzu girmek, içerik bölümünü açıp logoyu ve arka plan açılışını açmak için Branda'daki WordPress logosunu değiştirin. Oradan resimleriniz başka bir yere gönderilirse resim yükleyebilir veya URL'ler girebilirsiniz. Minimum bir ekran istiyorsanız logoyu hiç silebilirsiniz.
Logonuzun genişliği 320 piksel olmalıdır. Daha büyük bir logonuz varsa, aşağıdaki bölüme bakın. Logonuzu gerçekten daha benzersiz bir şekle itmek istiyorsanız, Branda'daki tasarım bölümünü açın ve açılır logoyu açın. Oradan daha geniş bir logo tutmak için logo kabının genişliğine ayarlayabilirsiniz. Ayrıca pozisyon, opaklık, açısal yarıçap ve logo marjını da değiştirebilirsiniz.
Daha büyük bir logo veya 320 pikselden daha küçük mü? Sorun değil, sadece Branda'daki WordPress site giriş sayfasının arka planını ayarlamak için kabı ayarlayın, yumuşak gri arka planı seçtiğiniz renge değiştirebilirsiniz. Rengi değiştirmek için renk kısmını açın ve arka plan gerilme menüsünü açın.
Artık görüntüleri kullanmak için gri değil, içerik bölümüne gidecek, sonra logoyu ve arka planı açacaksınız. Oradan yeni resimler yükleyebilirsiniz. Branda ayrıca her seferinde birçok resim yükleme ve slayt şovları yapma veya rastgele görüntüler görüntüleme seçeneği sunar. Çok fazla görüntü kullanmak için, tasarıma gidin ve yapılandırmak için arka planı açın. WordPress'te nasıl giriş yapacağınızı bilmek için WordPress giriş formunu ayarlayan özel bir arka plan görüntüsü ile büyük bir etki yaratın? Alan etiket adınızı değiştirin! Branda'da, Özel Giriş Formunuzdaki Kullanıcı Adları ve Şifreler için Giriş Alanının Adını Değiştirmek İçin İçerik> Formlar. Her neyse, istemci kimliklerini, üye numaralarını veya süper kahraman isimlerini kullanabilirsiniz!
Form alanınıza bir işaret verin Formun ekranını bir branda kullanarak ayarlayabilirsiniz. Marj, dolgu, sınır, köşe yarıçapı ve gölgeyi düzenlemek için tasarım> formu girin. Aynı yerde düğmeleri de değiştirebilirsiniz. Düğme sınırı yarıçapını ayarlayın veya düğme gölgesini ayarlayın.
Metnin rengi, sınırın rengi vb. Gibi formunuzun rengini düzenlemek için formun ekranını değiştirin.
Aktif durumun rengini değiştirmek, odaklanın ve imleci işaret etmek için sekmeye dikkat edin. Branda WordPress giriş ekranında beni hatırlayan onay kutusunu değiştirmek, gelen formda hatırlayarak onay kutumu otomatik olarak kontrol etmeyi veya gizlemeyi kolaylaştırır. İçerik bölümünü açın ve Form bölümünü açın. Orada, kutumu görüntüleyebilir veya gizleyebilirsiniz. Görüntülemeyi seçerseniz, onay kutusunu otomatik olarak işaretleyebilirsiniz.
Tekrar kollarımın içinde olana kadar, WordPress sitesine girmek için bir sayfa hata mesajının özelleştirilmesi olduğumu unutmayın, ne yaptığınızı bilmediğinizi hissettiren bir hata mesajı gibi bir şey yoktur. Neyse ki Branda, hatanızı yumuşatmanıza veya daha kullanışlı hale getirmenize yardımcı olabilir. Branda'da, İçerik Aç> Değiştirilecek hata mesajları. HTML'yi netlik veya vurgu eklemek için bir mesajda kullanabilirsiniz. Kiat Pro, alanın adını değiştirirseniz, hata mesajınızı mesaj stilini değiştirmek için uygun olacak şekilde değiştirirseniz, tasarım> hatayı açarak rezervuar opaklığını değiştirebilirsiniz. İleti. Hata mesajınızın rengini değiştirmek için Renk> Hata mesajını açın. Aktif durumun rengini değiştirmek, odaklanın ve imleci işaret etmek için sekmeye dikkat edin. Bağlantıyı Branda'daki WordPress oturum açma formunun altındaki ayarlayarak, içerik> bağlantıları formun altına açarak özel oturum açma formunuzun altındaki bağlantıyı gizlemeyi seçebilirsiniz. Eksik liste/şifre bağlantısını, Gizlilik Politikası bağlantısını veya bağlantıyı tekrar gizleyebilirsiniz. Benden gizleyemezsin, giriş formunun altındaki bağlantının rengini, formun altındaki renk girerek bir branda ile ayarlayabilirsiniz. Bağlantımı Renk Branda'daki WordPress Oturum Açma Aktarımı ayarlamak için, giriş formunun kullanıcıyı yönlendirme bölümünde yönlendireceği yeri değiştirebilirsiniz. Ziyaretçilerin görebileceğiniz gibi girdikten veya çıktıktan sonra ayrılacağı yerde değiştirin, giriş sayfasını ciltlemenin birden fazla yolu var. Sitenizin girişini ayarlamak, kullanıcılarınızı memnun etmenin ve bir açıklama yapmanın kolay bir yoludur. Birkaç şeyi değiştirmek ve PHP ve CSS ile rahat hissetmek istiyorsanız, dosyalarınızı doğrudan düzenleyebilirsiniz. Ancak gerçekten dışarı çıkmak istiyorsanız, Branda giriş sayfanızı bir sonraki seviyeye getirmenize yardımcı olabilir. Ama neden orada durun, WPMU Dev size her şeye beyaz bir etiket vermek için ihtiyacınız olanı veriyor! Bu, önce sipariş edilen site için çok iyi bir dokunuş. Branda'yı denemek ve Ultimate Branding'i yeniden şekillendirdiğimizden beri ne eklediğimizi görmek istiyorsanız, eklentileri ücretsiz indirebilirsiniz. Onu seveceksin. O yeni arkadaşın olacak. Giriş sayfası markanızı vermeye mi çalışıyorsunuz? Yeni Branda eklentisi hakkında ne düşünüyorsunuz? Etiket: yönetici alanı marka marka kodlamak
