WordPress Giriş Sayfanızı Özelleştirin

WordPress büyük bir platformdur ve birçok özellik sağlar. Sizde kendi isteklerinize göre blogunuzun Admin giriş sayfasını özelleştirebilirsiniz.

Bende bugün wordpress giriş sayfasını özelleştirme hakkında bir eğitim yazısı paylaşmayı düşündüm. Sizde isterseniz bu makaleyi okuduktan sonra arka plan rengi, metin rengi ve hatta varsayılan logoyu dahi değiştirebilirsiniz.

WordPress Giriş Sayfası Nasıl Özelleştirilir?

Giriş sayfamızı özelleştirmek için 2 dosyayı düzenleyeceğiz. Bunlar:

1. wp-login.php
2. login.css

NOT: wp-login.php dosyası “wp-admin” dizini içindedir. login.css dosyası ise “wp-admin/css/” dizini içerisindedir.

Dosyaları düzenlemek için ise FTP hesabınıza erişmelisiniz.

1- Logoyu ve Linki Değiştirme

Giriş sayfanız için yapmanız gereken ilk şey varsayılan logoyu değiştirmek. Ancak gerekli değişiklikleri yapmak için hosting hesabınıza erişmeniz gerekiyor.

Öncelikle,” wp-admin” dizini altındaki wp-login.php dosyasını açın ve aşağıdaki kodu bulun:

<div id="login"><h1><a href="<?php echo apply_filters('login_headerurl', 'http://wordpress.org/'); ?>" title="<?php echo apply_filters('login_headertitle', __('Powered by WordPress')); ?>"><?php bloginfo('name'); ?></a></h1>

Burada wordpress.org yerine kendi blogunun linki ekle ve kaydet.

Sırada logomuzu hosta yüklemek gerekiyor. 310×70 px boyutundaki logoyu hosta yükleyin ve yüklediğiniz dizini unutmayın. Şimdi wp-admin/css/ içerisindeki login.css dosyasını açın ve aşağıdaki kodu bulun:

h1 a {
background: url(../images/logo-login.gif) no-repeat top center;
width: 326px;
height: 67px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}

Sonra ../images/logo-login.gif yerine hosta yüklediğiniz logo dosyanızın yolunu yazın ve kaydedin.

2- Giriş Formunu Özelleştirme

Login.css dosyasında değişiklik yaparak istediğiniz görünümü sağlayabilirsiniz. Örneğin ben giriş kutusunun arka planını değiştirdim. Bunu yapmak için login.css dosyasındaki aşağıdaki kodu bulun:

form{margin-left: 8px;padding: 16px 16px 40px 16px;font-weight: normal;

Bunu şu kodlarla değiştirin:

form{margin-left: 8px;padding: 16px 16px 40px 16px;font-weight: normal;-moz-border-radius: 11px;
-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 5px;background: #99CCFF;border: 1px solid #FFF;-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;box-shadow: rgba(200,200,200,1) 0 4px 18px;}

İşte bu kadar. Sizde kendi zevkinize göre farklı kombinasyonlar oluşturabilirsiniz. Kolaylıklar dilerim.