WordPress Giriş Ekranı Özelleştirme Giriş Ekranı Değiştirme

1 Aralık 2020 0 Yorum

WordPress giriş ekranı tasarımını değiştirme işlemi yapmanın bir çok yolu var.

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


Bu yazımda WordPress giriş ekranı özelleştirme işlemini hem kodlama ile hem de eklenti aracılığı ile nasıl yapacağınızı öğrenebilirsiniz;

  • Arka Plan Resim Ekleme
  • Logoyu Değiştirme
  • Giriş Formu Tasarımı Değiştirme
  • Logo Bağlantı Linkini Değiştirme
  • Parolanızı mı Unuttunuz Linkini Kaldırma
  • Sitesine Geri Dön Linkini Kaldırma
  • Giriş Hata Mesajını Kaldırma
  • Yanlış Şifre Girişinde Oluşan 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 Hatırlatma: Üstte sıralanan ve yazı içerisinde anlatılan adımları uygulayabilmeniz için öncelikle hemen altta anlatılan 3 adımı tamamlamanız gerekmektedir.


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

  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 gerekmektedir.
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şlayabilirsiniz.

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

WordPress giriş ekranına arka plan olarak bir resim ekleyebilir ya da var olan arkaplan rengini değiştirebilirsiniz. Bunun için hemen altta verdiğim kodu /giriş klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli stil 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ş Sayfası

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ıya bakabilirsiniz.

Ancak 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 verilen kodu /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli stil 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ız.

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

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;

Yapmanız gereken ise altta verilen kodları /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli still dosyasına eklemek olacaktır.

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 ekleyebilirsiniz;


.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 ise wordpress admin girişi özelleştirme adına bu logoyu kendi sitemizin ana sayfasına linkleyebileceksiniz;


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

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' );

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 verilen kodu /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli stil 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 verilen kodu yine /giris klasörü altında oluşturduğunuz ozel-giris-stilleri.css isimli stil 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 verilen 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ş ekranı ö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şılan 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 anlatılan 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.
  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

Etiketler: , , , , , , , ,