WordPress giriş formu kayıtlı kullanıcıların yetkileri dahilinde kendilerine izin verilen sayfalara erişimini kotrol etmek için kullanılır. WordPress paketi içinde logo, başlıklar ve tasarım özellikleri standart bir giriş formu bulunur.
WordPress çekirdeğinde bulunan giriş formunu eklentiler ile yada basit kodlar ekleyerek özelleştirebilirsiniz. Bu makalede WordPress giriş ekranı değiştirme işlemini öncelikle temanızın function.php dosyasına yapacağınız kod eklemeleri ile devamında eklentiler nasıl yapabileceğiniz hakkında bilgiler bulabilirsiniz.
Öncelikle WordPress platformu ile yeni tanışanlar için kullanıcı giriş ekranı ve giriş işlemine kısaca göz atalım.
WordPress siteye kullanıcı girişi nasıl yapılır?
WordPress ile kurulmuş bir siteye kullanıcı girişi yapmak için kullanıcı giriş formuna erişmek gerekir. Bu adres WordPress kullanan tüm siteler için -özellikle yönlendirilmediyse- aynıdır ve https://www.webtium.com/wp-login.php adresinden erişilir. Subdomain, alt klasör yada kök dizin gibi kurulum yaptığınız yere göre biraz değişiklik gösterir. Değişmeyen tek şey oturum yönetiminin wp-login.php dosyası tarafından yönetilmesidir.
WordPress ‘i web sunucusunun kök dizinine kurduysanız, oturum açma sayfası adresi:
https://www.webtium.com/wp-login.php
WordPress’i sunucuda bir alt dizinine, örneğin /sorular dizinine kurduysanız , oturum açma sayfası adresi:
https://www.webtium.com/wp-login.php
WordPress’i sunucuda bir alt alan adı (subdomain) üzerine, örneğin dizinine kurduysanız , oturum açma sayfası adresi:
Öncelikle WordPress kullanıcı kaydına izin vermek gerekir. Bu ziyaretçiler için kayıt ve giriş adreslerinin kullanılabilir olmasını sağlar. Ardından istediğiniz sayfalara kayıt ve giriş bağlantıları yada sidabar üzerine meta widget eklemelisiniz.
WordPress standart giriş formu ve özellikleri
Başlangıçta söylediğimiz gibi WordPress standart bir giriş formu sunar. Oturum açma sayfasının üst kısmında wordpress.org adresine bağlantılı WordPress logosu ve ardından bir giriş formu bulunur.
WordPress oturum açma sayfası giriş formunda bulunan elemanlar;
- Kullanıcı adı ve Şifre için giriş alanları,
- Beni Hatırla onay kutusu. İşaretlendiyse, tarayıcınız sizi 14 gün boyunca oturum hatırlanır.
- Form verilerini göndermek için Giriş düğmesi.
- Formun altında iki bağlantı daha bulunur: Biri, şifrelerini unutan kayıtlı kullanıcılar içindir. Diğeri WordPress sitenizin ana sayfasına gider.
WordPress giriş formu üç şey yapabilir:
- Siteye giriş yapma (geçerli bir Kullanıcı Adı ve Parola doldurarak).
- Kayıtlı bir kullanıcıya bir hatırlatma şifresi gönderme ( Parolanızı mı kaybettiniz? (Link: wp-login.php?action =lostpassword ).
- Yeni kullanıcı kaydı (link: wp-login.php?action=register )
WordPress giriş sayfası özelleştirme yolları
WordPress giriş sayfası özelleştirme, WordPress eklentileri yada functions.php dosyasına basit kod eklemeleri yaparak kolayca yapılabilir. Öncelikle bu yöntemler arasındaki artı ve eksi yönlere bakarak size uygun bir yöntem seçmeniz gerekir. Bu iki yöntem arasında ne gibi farklar var ? derseniz kısaca bakalım;
Yöntemlerin karşılaştırması
Eklenti kullanmak ve kod eklemek arasındanki farklar, artılar ve eksiler bulunmaktadır. Bunları karşılaştırıp size en uygun olanı seçebilirsiniz.
Eklentiler
Eklentiler görsel düzenleme imkanı versede bir yere kadar ücretsizler. Ayrıca ne kadar fazla eklenti o kadar yavaş WordPress. Artısı ise tema değiştirsenizde özelleştirmeler kaybolmaz.
Kod ekleme
Kod ekleyerek yapılan düzenleme ücretsizdir ve yazının devamını okuyarak yaklaşık 15dk da tamamlayabilirsiniz. WordPress tema değişikliği yaparsanız yeni temanın function.php dosyasına bu değişiklikleri yeniden eklemelisiniz. Tema dosyasında bu ve benzeri değişiklikler yapıyor yada yapmayı planlıyorsanız child theme kullanmak yaptığınız değişikliklerin kaybolmasını önler.
Hatırlatmakta fayda var ; bir web sitesi yönetiyorsanız mutlaka kendinize notlar alın. Örneğin WordPress temanızda yaptığınız değişiklikleri bir dosyaya kaydedin. Bu ciddi anlamda fayda sağlar özellikle yedekten döndürme işlemlerinde bazı düzenlemeleri sıfırdan yapmanızın önüne geçer.
WordPress giriş sayfasını düzenleyebileceğiniz eklentiler yerine function.php dosyası üzerinden düzenleme yapmak isteyenler için devam edelim ve ilk olarak sayfanın en üstünden yani logodan başlayalım.
WordPress giriş sayfası özelleştirme » functions.php
WordPress giriş sayfası logosunu değiştirme
WordPress giriş sayfasında görünen logoyu görüntülemek için CSS kullanılır. WordPress giriş sayfasında bulunan WordPress logosunu kendinize ait bir logo ile değiştirmek için başlık ile ilişkili CSS stillerini değiştirmeniz gerekir. Giriş sayfasının başına CSS eklemek için login_enqueue_scripts kancasını kullanabilirsiniz, böylece kendi logonuzu görüntülersiniz. Aşağıdaki kodu temanızın function.php dosyası içine kopyalayın,
function ozel_giris_sayfasi() { ?>
<style type="text/css">
body.login {background: #1f57a0;}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {
background-image: url(https://www.webtium.com/wp-content/uploads/logo-2.png); height:58px; width:138px; background-size: 138px 58px;
background-repeat: no-repeat;}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {color: #ffffff;}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {color: #ffffff;}
</style><?php }
add_action( 'login_enqueue_scripts', 'ozel_giris_sayfasi' );
background-image: url kısmına kullanacağınız logonun URL sini girin ve logonuza en uygun yükseklik ve genişlik ölçülerini ayarlayın. Bu fonksiyon sayesinde eklediğimiz diğer CSS özelliklerinin değerlerini ayarladıktan sonra forma ait diğer görünüm özelliklerini de değiştirebilirsiniz.
WordPress giriş sayfası arka plana resim ekleme
Belki arka plan olarak bir resim kullanmak istersiniz. Bu durumda aşağıdaki kodu fonksiyondaki body.login ile başlayan satırla değiştirin ve URL ye kendi kullanmak istediğiniz resmin URL sini girin.
body.login {background-image: url( image-url-niz);background-position: center; background-repeat: no-repeat; background-size: cover;}WordPress giriş sayfası arka plan rengini değiştirme
Arka planda resim yerine bir renk kullanmak isterseniz body.login {background: #1f57a0;} satırındaki renk kodunu istediğiniz renk kodu ile değiştirip body.login {background-image: url(.. satırını silmeniz yeterlidir.
WordPress giriş sayfası logo bağlantısı ve başlığı değiştirme
WordPress giriş sayfası logonuza tıklandığında kendi sitenize erişilmesini istiyorsanız bağlantı değerlerini değiştirmeniz gerekir. Bunun için aşağıdaki WordPress kancalarını kullanabilirsiniz. Aşağıdaki iki fonksiyondan birincisi yeni logonuza tıklandığında ana sayfanıza gidilmesini, ikinci fonksiyon sayfa başlığını belirlemenizi sağlar.
function ozel_giris_sayfasi_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'ozel_giris_sayfasi_logo_url' );
function ozel_giris_sayfasi_url_title() {
return 'İstediğiniz başlığı buraya yazın';
}
add_filter( 'login_headertitle', 'ozel_giris_sayfasi_url_title' );WordPress giriş formuna ait diğer özellikleri değiştirme
Eklediğimiz ozel_giris_sayfasi() fonksiyonu ile sayfaya ait bazı diğer elemanların CSS niteliklerini değiştirebiliriz. Bunun için değiştirmek istediğiniz elamanın CSS sınıfı özelliklerini fonksiyon içerisine eklemeniz yeterli. Bu konuda yardım almak isterseniz yorum kısmına sorunuzu eklemeniz yeterli. Giriş sayfanıza isterseniz sosyal medya hesapları ile bağlanmayı da sağlayabilirsiniz.
WordPress giriş sayfası özelleştirme eklentileri
WordPress dizininde bulunan giriş sayfası özelleştirme eklentileri içerisinden istediğinizi seçerek ihtiyacınızı karşılayabilirsiniz.
Custom Login Page Customizer
Custom Login Page Customizer isimli eklenti, Codeinwp , Hardeep Asrani ve MariusG tarafından desteklenen ve en fazla yükleme sayısına sahip (80.000) olan eklentidir. Eklentiyi kurduktan sonra WordPress özelleştirme sayfasına giderek canlı ön izleme ile istediğiniz düzenlemeleri yapabilirsiniz. Logo değiştirme, form arka planı, sayfa arka planı değiştirme, form stilleri, alan ve buton stillerini ayarlama gibi düzenlemeleri kolayca yapabilirsiniz.
Customize WordPress Login Page – Custom Login, Design Login Page, Login Page Customizer
İkinci sıradaki eklentimiz ise tarafından desteklenen Customize WordPress Login Page isimli eklentidir ve 50.000 sitede ektin olarak kullanılmaktadır. Bu eklenti ile yapabilecekleriniz ise;
- Özel logo ekleme
- Arkaplan rengi değiştirme
- Arkaplan resmi değiştirme,
- Arkaplan slide ekleme,
- Login Form pozisyonu düzenleme,
- Login Form rengi,
- Login Form Colour Opacity
- Login Form font rengi,
- Login Form font boyutu,
- Login Form buton rengi,
- Login Form buton boyutu,
- Login Form arkaplanı,
- Giriş sonrası yönlendirme sayfası ayarlama,
- Form alanına sosyal medya bağlantıları ekleme,
- Social Media ikon rengi,
- Social Media ikon boyutu ayarlama.
Bu yazıda eklenti kullanmadan ve eklentiler ile WordPress giriş sayfasını özelleştirme işlemini nasıl yapabileceğimizi anlatmaya çalıştık. functions.php üzerinde yaptığınız değişiklikler sonrasında hata mesajı alırsanız yada istediğinizi tam olarak elde edemediyseniz yorum olarak ekleyebilirsiniz. Siteniz için en uygun yöntemi seçerek sizde giriş sayfanızda CSS düzenlemeleri ile ziyaretçileriniz için daha ilgi çekici görünüm elde edebilirsiniz. Giriş sayfası, 404 sayfası özelleştirmeleri gibi küçük detaylar ziyaretçilerinizi pozitif yönde etkileyebilir.