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

İmera

Emektar üye
Katılım
28 Mart 2019
Mesajlar
100
Beğeniler
0
#1
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
 

Bu konuyu okuyan (Kullanıcı: 0, Ziyaretçi: 1)

Benzer konular


Yasal uyarı

İçerik sağlayıcı paylaşım sitelerinden biri olan wabbuz.com T.C.K 20.ci Madde ve 5651 Sayılı Kanun'un 4.cü maddesinin (2).ci fıkrasına göre ve kullanıcıların sisteme kayıt olurken kabul ettikleri kurallar çerçevesinde tüm kullanıcılar yaptıkları paylaşımlardan sorumludur.

Wabbuz.com hakkında yapılacak tüm hukuksal Şikayetler buradan iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 1 (Bir) Hafta içerisinde tarafımızca gereken işlemler yapılacak ve tarafınıza dönüş sağlanacaktır.

İstatistikler

Konular
2,160
Mesajlar
2,214
Kullanıcılar
99
24 saatte açılan konu
0
24 saatte yazılan mesaj
0
Son 30 günde kaydolan üye
8
Son üye
smmturk
Üst Alt