WordPress giriş ekranı değiştirme işlemi ( tabii bu değiştirmeden kastım URL yapısı olarak değil, tasarım olarak ) yapmanın bir çok yolu var.

İster kodlama ile, isterseniz de eklenti ile wordpress admin girişi özelleştirme işlemini hayata geçirebilirsiniz.

İşte ben de sizlere bu yazımda wordpress giriş ekranı özelleştirme işlemini hem kodlama ile hem de eklenti aracılığı ile nasıl yapacağınızı anlattım;

>> Arka Plan Resim Ekleme
>> Logoyu Değiştirme
>> Giriş Formu Tasarımı Değiştirme
>> Logo Bağlantı Linkini Değiştirme
>> Paralanızı mı Unuttunuz Linkini Kaldırma
>> …Sitesine Geri Dön Linkini Kaldırma
>> Giriş Hata Mesajını Kaldırma
>> Yanlış Şifre Girişinde Oluşuan Sallanma Efektini Kaldırma
>> Giriş Yaptıktan Sonra Yönlendirilen Sayfayı Değiştirme
>> Beni Hatırla Seçeneğini Otomatik İşaretleme
>> Eklenti İle WordPress Giriş Ekranı Özelleştirme

Önemli:Tabii üstte sıraladığım ve yazı içerisinde anlattığım adımları uygulayabilmeniz için öncelikle hemen altta anlattığım 3 adımı tamamlamanız gerekmekte !

WordPress giriş paneli tasarımını değiştrmek için öncelikle hemen altta verdiğim adımları yerine getirmeniz gerekmekte.

1- FTP üzerinde ya da cPanel üzerinden site dosyalarınıza bağlanmalı ve tema klasörünün altında giris isimli bir klasör oluşturmalısınız.

2- Daha sonra /giris klasörü altında ozel-giris-stilleri.css isminde bir dosya oluşturmalısınız.

3- Ardından ise oluşturduğumuz bu stil dosyasını wordpress’in çağırması / işleve alması için aşağıda verdiğim kodu temanızın fucntions.php dosyasına eklemeniz gerekmekte. (bkz: funtions.php dosyasına nasıl kod eklenir )

function giris_ozel_tasarim() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/giris/ozel-giris-stilleri.css" />';
}
add_action('login_head', 'giris_ozel_tasarim');

Bu adımları tamamladıktan sonra wordpress yönetici – admin giriş sayfasını kişiselleştirme işlemlerine başlayabiliriz demektir;

WordPress Giriş Sayfasına Arka Plan Olarak Resim Ekleme ya da Rengini Değiştirmek

WordPress giriş ekranınına arka plan olarak bir resim ekleyebilir ya da var olan arkaplan rengini değiştirebilirsiniz. Bunun için hemen altta verdiğim kodu /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli still dosyasına eklemeniz yeterli olacaktır.

body.login {
 background-image: url('https://sizinsiteniz.com/arkaplanresmi.png');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
}

Tabi kod içerisinde sizinsiteniz.com kısmını, sitenizin giriş paneli kısmına eklemek istediğiniz arka plan resminin URL adresi ile değiştirmeyi unutmayın.

Eğer wp giriş paneline bir arka plan resmi eklemek değil de, sadece panelin arka plan rengini değiştirmek isterseniz de, üstteki CSS kodları içerisinde yer alan background-image satırını tamamı ile silin ve bunun yerine background-color: black; şeklinde bir kod eklemesi yapın.

#Renk seçeneği için ise black yerine istediğiniz renk ismini (ing) ya da renk kodunu yazarak ayarlayabilirsiniz.

WordPress Giriş Ekranı Özelleştirme

WordPress Giriş Logosunu Değiştirmek

Eğer wordpress giriş sayfası tasarımı değiştirme adına ilgi alanınız sadece giriş logosunu değiştirmek ise, wordpress giriş logosu değiştirmek adlı yazıma bakabilirsiniz.

Ancak ben baştan sona wordpress login sayfası özelleştirme işlemi yapacağım diyorsanız, bu düzenlemenin bir ayağı olan logo değiştirme işlemi için yine,

Hemen altta verdiğim kodu /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli still dosyasına eklemeniz yeterli olacaktır.

.login h1 a {
 background-image: url('https://wpmavi.com/wp-content/uploads/2017/05/logo-wpmavi.png');
 background-size: 269px;
 width: 269px;
 height:60px;
}

Not:Kod içerisinde yer alan resim URL adresini değiştirmek istediğiniz logo URL adresi ile değiştirmeyi unutmayın.

Logonuzun yükseklik ve genişlik ayarlarını ise yine kod içerisinde bulunan background-size, width ve height değerlerini değiştirerek ayarlayabilirsiniz.

Logo resminizin orjinal genişliği ve yüksekliği ne ise bu değerleri de o şekilde ayarlarsanız, logonun en net hali ile görünmesini sağlamış olursunuz. ( background-size ile width yani genişlik aynı olmalı )

WordPress Giriş Formunun Tasarımını Değiştirme

Şimdi ise wordpress giriş ekranı özelleştirme adına biraz da giriş formunun tasarımında biraz değişiklik yapalım isterseniz. Benim github üzerinden bulduğum css kodları şu şekilde;

Sizin yapmanız gereken ise altta verdiğim kodları /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli still dosyasına eklemek olacak.

Aşağıdaki kod giriş formu üzerinde yer alan metni daha koyu hale getirecek ve butonların köşesini biraz daha yuvarlar hale getirecektir;

.login label {
 font-size: 12px;
 color: #555555;
 }

.login input[type="text"]{
 background-color: #ffffff;
 border-color:#dddddd;
 -webkit-border-radius: 4px;
 }

.login input[type="password"]{
 background-color: #ffffff;
 border-color:#dddddd;
 -webkit-border-radius: 4px;
 }

Şimdi ise giriş formunda yer alan butonları daha ince, uzun ve biraz daha açık renkli mavi yapmak için şu kodları da ekliyorum;

.login .button-primary {
 width: 120px;
 float:right;
 background-color:#17a8e3 !important;
 background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
 background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
 background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
 background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
 background: -o-linear-gradient(top, #17a8e3, #17a8e3);
 background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
 color: #ffffff;
 -webkit-border-radius: 4px;
 border: 1px solid #0d9ed9;
 }

.login .button-primary:hover {
 background-color:#17a8e3 !important;
 background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
 background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
 background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
 background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
 background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
 background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
 color: #fff;
 -webkit-border-radius: 4px;
 border: 1px solid #0d9ed9;
 }

.login .button-primary:active {
 background-color:#17a8e3 !important;
 background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
 background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
 background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
 background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
 background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
 background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
 color: #fff;
 -webkit-border-radius: 4px;
 border: 1px solid #0d9ed9;
 }

WordPress Giriş Ekranı Logo Bağlantı Adresini Değiştirme

WordPress varsayılan olarak wordpress giriş panelinde yer alan logoyu wordpress.org’a linkler. Şimdi biz ise wordpress admin girişi özelleştirme adına bu logoyu kendi sitemizin ana sayfasına linkleyeceğiz;

Bunun için ise hemen altta verdğim kodu functions.php dosyanıza ekleyin. Lütfen dikkat edin. Bu kodu css dosyasına değil, functions.php dosyasına ekliyoruz;

function wpmavi_giris_logo_url() {
 return get_bloginfo( 'url' );
 }
add_filter( 'login_headerurl', 'wpmavi_giris_logo_url' );

function wpmavi_giris_logo_url_baslik() {
 return 'Site İsmi';
 }
add_filter( 'login_headertitle', 'wpmavi_giris_logo_url_baslik' );

Tabii kod içerisinde yer alan Site İsmi kısmını site isminiz ile değiştirmeyi unutmayın. Bu isim resmin üzerine mouse ile gelindiğinde resim alt metni olarak çıkacaktır.

Giriş Ekranı Parolanızı mı Unuttunuz Linkini Kaldırma

Eğer WordPress giriş ekranı değiştirme işlemi sırasında “parolanızı mı unuttunuz” linkini de kaldırmak isterseniz, hemen altta verdiğim kodu /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli still dosyasına eklemeniz yeterli olacaktır;

p#nav {
 display: none;
}

Sitesine Geri Dön Linkini Kaldırma

Sitenize giriş yapmak isteyen kullanıcılar … sitesine geri dön linkini kullandıklarında sitenizin ana sayfasına yönlenecektir. Ancak ben wordpress giriş sayfası değiştirme işleminde tamamen sade ve temiz bir görünüm istiyorum diyorsanız,

Altta verdiğim kodu yine /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli still dosyasına ekleyerek, bu linki de kaldırabilirsiniz;

p#backtoblog {
 display: none;
}

Giriş Hata Mesajını Kaldırma / Değiştirme

WordPress giriş kısmında yanlış bir kullanıcı adı ya da şifre girdiğinizde wordpress otomatik olarak “Hata: kullanıcısı için girilen parola geçersiz.” şeklinde bir mesaj verecektir.

Bu mesajı değiştirmek isterseniz de hemen altta verdiğim kodu functions.php dosyanıza, içerisindeki mesajı istediğiniz gibi değiştirerek eklemeniz yeterli olacaktır;

function yeni_hata_mesaji()
{
 return 'hatalı kullanıcı ya da şifre, ama hangisi söylemem.';
}
add_filter('login_errors', 'yeni_hata_mesaji');

Yanlış Girilen Şifrede Oluşan Giriş Sayfası Sallanma Efektini Kaldırma

WordPress giriş sayfanızda şifreyi ya da kullanıcı adını yanış girdiğinizde giriş formu girilen bilgilerin hatalı olduğunu sallanma efekti ile gösterir.

WordPress giriş paneli tasarımı değiştirme adına bu efekti de kaldırmak isterseniz eğer, alttaki kodu functions.php dosyanıza eklemelisiniz;

function giris-efekt-kaldirma() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'giris-efekt-kaldirma');

Giriş Yaptıkan Sonra Yönlendirilen Sayfayı Değiştirme

WordPress giriş sayfasını değiştirme adına yapmak isteyebileceğiniz bir başka değişiklik ise, giriş yapan kullanıcıyı wordpress’in varsayılan olarak yöneldirdiği admin paneline değil de, sitenizin ön yüzüne, yani ana sayfanıza yönlendirmek olabilir.

Alttaki kodu functions.php dosyanıza eklediğinizde ise sitenize admin kullanıcısı dışında giriş yapan tüm kullanıcılar başlangıç paneline değil de, direkt sitenizin ana sayfanıza yönlenir;

function admin_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
return home_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "admin_login_redirect", 10, 3);

Beni Hatırla Seçeneğini Otomatik İşareti Olarak Kullanıcının Karşısına Getirme

WordPress giriş ekrnaı özelleştirme adına yapabileceğiniz bir diğer değişiklik de “beni hatırla” seçeneğini otomatik işaretli olarak giriş yapan kullanıcının karşısına getirmek olabilir.

Bunun içinse altta paylaştığım kodu functions.php dosyanıza eklemek yeterli olacaktır.

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Eklenti İle WordPress Giriş Ekranı Özelleştirme

Yukarıda kodlama ile anlattığım wordpress giriş paneli tasarımı değiştirme işleminin uygulaması size zor geldiyse eğer, bu wordpress giriş ekranı özelleştirme işlemini eklenti ile de yapmanız mümkün.

1-Bunun için öncelikle Custom Login Page Customizer eklentisini yükleyin ve etkin hale getirin. ( bkz: eklenti nasıl yüklenir )

2-Ardından Admin Paneli >> Görünüm >> Özelleştir >> Login Customizer sekmesine gidin.

Bu sekmede karşınıza alttaki resimde olduğu gibi bir ekran çıkacaktır. İşte bu seçeneklerden logo değiştirme, arka plan resmi ya da rengi değiştirme, butona, yazılara still verme gibi wordpress admin girişi özelleştirme adına bir çok işlemi yapabilirsiniz.

WordPress Admin Giriş Paneli Özelleştirme

Umarım WordPress Giriş Ekranı Özelleştirme: Giriş Ekranı Değiştirme başlıklı yazımı yararlı bulmuşsunuzdur. Teşekkürlerinizi, yazımı sosyal mecralarda paylaşarak gösterebilirsiniz. Bu benim için fazlasıyla yeterli olacaktır.