Admin Panelinden Logo ve Renk Değiştirme: Login Sayfası Özelleştirme
WordPress sitenizin ilk izlenimi çoğu zaman login sayfasından başlar. Özellikle müşterilerinize teslim ettiğiniz sitelerde ya da kurumsal projelerde, WordPress’in varsayılan mavi logolu giriş ekranını görmek hem profesyonellikten uzak hem de marka kimliğiyle çelişen bir görüntü oluşturur. Neyse ki functions.php dosyasına birkaç satır kod ekleyerek bu durumu tamamen değiştirebilir, login sayfasını ve admin panelini markanıza uygun hale getirebilirsiniz.
Bu yazıda sıfırdan başlayarak login sayfası özelleştirmelerini, admin paneli renk ve logo değişikliklerini adım adım ele alacağız. Gereksiz plugin yüklemeden, doğrudan kod yazarak halledeceğiz her şeyi.
Neden Plugin Değil, functions.php?
Çoğu sysadmin ve geliştirici bu tür küçük özelleştirmeler için “White Label CMS” veya “Custom Login Page Customizer” gibi pluginlere başvuruyor. Ancak her yeni plugin:
- Veritabanına ek yük bindirir
- Potansiyel güvenlik açığı oluşturur
- Güncelleme bağımlılığı yaratır
- Site hızını etkiler
Oysa functions.php dosyasına yazacağınız küçük fonksiyonlar bu işin tamamını halleder. Üstelik temayı değiştirdiğinizde bile bu kodları kolayca taşıyabilirsiniz. Child theme kullanıyorsanız zaten sorun yok, ana tema güncellemelerinden etkilenmezsiniz.
Önemli not: Tüm bu kodları child theme’inizin functions.php dosyasına eklemenizi tavsiye ederim. Ana tema dosyasını düzenlerseniz tema güncellemesiyle her şey gider.
Login Sayfası Logo Değiştirme
WordPress login sayfasında görünen o büyük mavi WordPress logosu, login_enqueue_scripts hook’u aracılığıyla değiştirilebilir. Logo değişikliği için CSS inject etmemiz gerekiyor.
function custom_login_logo() {
$logo_url = get_stylesheet_directory_uri() . '/assets/images/logo.png';
?>
<style type="text/css">
#login h1 a,
.login h1 a {
background-image: url('<?php echo esc_url( $logo_url ); ?>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 280px;
height: 80px;
display: block;
margin: 0 auto 20px auto;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'custom_login_logo' );Bu kod child theme klasörünüzdeki assets/images/logo.png dosyasını logo olarak kullanır. Logo dosyanızın boyutuna göre width ve height değerlerini ayarlamanız gerekecek. PNG formatında şeffaf arka planlı bir logo kullanmanızı öneririm, özellikle renkli arka plan uyguladığınızda çok daha iyi görünür.
Logo Linkini ve Title’ını Değiştirme
Varsayılan durumda logoya tıkladığınızda wordpress.org adresine gider. Bu hem garip hem de kullanıcı için kafa karıştırıcı. İkisini de değiştiriyoruz:
function custom_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );
function custom_login_logo_title() {
return get_bloginfo( 'name' ) . ' - ' . get_bloginfo( 'description' );
}
add_filter( 'login_headertext', 'custom_login_logo_title' );login_headerurl filtresi logo linkini, login_headertext filtresi ise hover’da görünen title attribute’ünü değiştirir. home_url() kullandığımız için site adresi ne olursa olsun doğru URL’e yönlendirir. Hardcode yazmaya gerek yok.
Login Sayfası Arka Plan ve Renk Şeması
Şimdi işi biraz daha ileri götürelim. Birçok ajans, müşteriye teslim ettiği sitelerde login sayfasını tamamen markayla uyumlu hale getiriyor. Arka plan rengi, form alanları, buton rengi, hepsini değiştirebilirsiniz:
function custom_login_styles() {
// Marka renkleri
$primary_color = '#2C3E50';
$secondary_color = '#E74C3C';
$button_color = '#3498DB';
$button_hover = '#2980B9';
?>
<style type="text/css">
/* Arka plan */
body.login {
background-color: <?php echo esc_attr( $primary_color ); ?>;
background-image: none;
}
/* Login kutusu */
#login {
padding: 30px 0 20px;
}
/* Form container */
.login form {
background: #ffffff;
border: none;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
padding: 30px 30px 20px;
}
/* Input alanları */
.login input[type="text"],
.login input[type="password"] {
border: 2px solid #e0e0e0;
border-radius: 4px;
padding: 10px 12px;
font-size: 14px;
transition: border-color 0.3s ease;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus {
border-color: <?php echo esc_attr( $button_color ); ?>;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
outline: none;
}
/* Giriş butonu */
.login .button-primary,
#wp-submit {
background: <?php echo esc_attr( $button_color ); ?> !important;
border: none !important;
border-radius: 4px !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 10px 20px !important;
width: 100% !important;
transition: background 0.3s ease !important;
}
.login .button-primary:hover,
#wp-submit:hover {
background: <?php echo esc_attr( $button_hover ); ?> !important;
}
/* "Beni hatırla" ve diğer linkler */
.login #nav a,
.login #backtoblog a {
color: rgba(255,255,255,0.8) !important;
}
.login #nav a:hover,
.login #backtoblog a:hover {
color: #ffffff !important;
}
/* Hata mesajları */
.login .message,
#login_error {
border-left: 4px solid <?php echo esc_attr( $secondary_color ); ?>;
border-radius: 4px;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'custom_login_styles' );Renk değişkenlerini fonksiyonun başında tanımladım. Müşteriden yeni bir renk talebi geldiğinde tek yerden değiştirmeniz yeterli. Bunu daha da dinamik hale getirmek istiyorsanız WordPress Customizer’a bağlayabilirsiniz ama şimdilik bu yaklaşım pratik ve hızlı.
Gerçek Dünya Senaryosu: Farklı Siteler İçin Farklı Login Sayfaları
Diyelim ki bir dijital ajans çalıştırıyorsunuz ve aynı sunucuda 15-20 müşteri sitesi barındırıyorsunuz. Her müşterinin sitesine gidip tek tek functions.php düzenlemek yerine, logo ve renkleri wp-config.php veya site ayarlarından kontrol edebilirsiniz. İşte daha esnek bir yaklaşım:
function smart_login_customizer() {
// Bu değerleri Customizer veya Options sayfasından da çekebilirsiniz
$settings = array(
'logo' => get_option( 'custom_login_logo', '' ),
'bg_color' => get_option( 'custom_login_bg', '#f0f0f1' ),
'btn_color' => get_option( 'custom_login_btn', '#2271b1' ),
'site_name' => get_bloginfo( 'name' ),
);
// Logo ayarlanmamışsa site ismini göster
$logo_css = '';
if ( ! empty( $settings['logo'] ) ) {
$logo_css = "background-image: url('" . esc_url( $settings['logo'] ) . "');
background-size: contain;
width: 280px;
height: 80px;";
} else {
// Logo yoksa site adını text olarak göster
$logo_css = "background-image: none;
width: auto;
height: auto;";
}
?>
<style>
body.login { background: <?php echo esc_attr( $settings['bg_color'] ); ?>; }
.login h1 a { <?php echo $logo_css; ?> }
#wp-submit { background: <?php echo esc_attr( $settings['btn_color'] ); ?> !important; }
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'smart_login_customizer' );Bu yaklaşımda değerler wp_options tablosunda tutuluyor. Site sahiplerine küçük bir ayar sayfası oluşturursanız teknik bilgiye gerek kalmadan kendi sitelerini özelleştirebilirler.
Admin Paneli Üst Bar Rengi Değiştirme
Login sayfasını hallettik, şimdi admin paneline geçelim. WordPress’in varsayılan siyah admin bar’ı bazı durumlarda marka rengiyle çelişebilir ya da müşteri “neden siyah?” diye sorabilir. Bunu da functions.php ile çözüyoruz:
function custom_admin_bar_color() {
if ( ! is_admin_bar_showing() ) {
return;
}
?>
<style type="text/css">
/* Admin bar ana rengi */
#wpadminbar {
background: #1a1a2e !important;
}
/* Hover durumları */
#wpadminbar .ab-item:hover,
#wpadminbar a.ab-item:hover,
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li:hover > .ab-item {
background: #16213e !important;
color: #ffffff !important;
}
/* Dropdown menüler */
#wpadminbar .menupop .ab-sub-wrapper {
background: #16213e !important;
}
/* Site adı */
#wpadminbar #wp-admin-bar-site-name > .ab-item {
color: #e94560 !important;
font-weight: 600;
}
</style>
<?php
}
add_action( 'wp_head', 'custom_admin_bar_color' );
add_action( 'admin_head', 'custom_admin_bar_color' );Hem wp_head hem de admin_head hook’larına bağladım çünkü admin bar hem frontend’de hem de backend’de görünebiliyor.
Admin Menü Sidebar Rengi ve Logo
Admin panelinin sol menüsünü de özelleştirebilirsiniz. WordPress’in varsayılan renk şemalarından birini seçmek yerine tamamen özel bir şema oluşturabilirsiniz:
function custom_admin_sidebar_styles() {
?>
<style type="text/css">
/* Sol menü arka plan */
#adminmenu,
#adminmenuback,
#adminmenuwrap {
background: #0f3460 !important;
}
/* Menü linkleri */
#adminmenu a {
color: #a8c6e8 !important;
}
/* Aktif menü öğesi */
#adminmenu .wp-has-current-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow,
#adminmenu li.current a.menu-top,
#adminmenu .wp-has-current-submenu > a.wp-menu-arrow {
background: #e94560 !important;
color: #ffffff !important;
}
/* Hover */
#adminmenu li a:hover,
#adminmenu li.wp-has-submenu > a:focus {
background: #16213e !important;
color: #ffffff !important;
}
/* Alt menü */
#adminmenu .wp-submenu {
background: #0a2744 !important;
}
#adminmenu .wp-submenu a {
color: #8fb8d8 !important;
}
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
color: #ffffff !important;
}
/* Admin logo alanı (WP logosu) */
#adminmenu #wp-admin-bar-wp-logo {
display: none;
}
/* Dashboard başlığı */
.wp-menu-name {
font-size: 13px !important;
}
</style>
<?php
}
add_action( 'admin_head', 'custom_admin_sidebar_styles' );Admin Paneli Login Footer Metni Değiştirme
WordPress login sayfasında alt kısımda “Çalıştırılıyor: WordPress” yazısı yer alır. Müşteri sitenizde bunu kendi mesajınızla değiştirmek isteyebilirsiniz:
function custom_admin_footer_text( $footer_text ) {
$site_name = get_bloginfo( 'name' );
$current_year = date( 'Y' );
return sprintf(
'© %d <strong>%s</strong> — Tum hakları saklıdır. | <a href="%s" target="_blank">%s</a> tarafından gelistirildi.',
$current_year,
esc_html( $site_name ),
'https://sizinajans.com',
'Sizin Ajans Adiniz'
);
}
add_filter( 'admin_footer_text', 'custom_admin_footer_text' );
function custom_admin_footer_version() {
return '';
}
add_filter( 'update_footer', 'custom_admin_footer_version', 11 );update_footer filtresiyle WordPress versiyon bilgisini de kaldırabilirsiniz. Güvenlik açısından WordPress versiyonunun görünür olmaması bazı durumlarda tercih edilen bir yaklaşım.
WordPress Admin Dashboard Başlığı ve Favicon
Admin panelinin browser tab’ındaki başlığı ve favicon’unu da özelleştirebilirsiniz:
function custom_admin_favicon() {
$favicon_url = get_stylesheet_directory_uri() . '/assets/images/favicon.ico';
echo '<link rel="shortcut icon" href="' . esc_url( $favicon_url ) . '" />';
}
add_action( 'admin_head', 'custom_admin_favicon' );
add_action( 'login_head', 'custom_admin_favicon' );
function custom_admin_title( $admin_title, $title ) {
$site_name = get_bloginfo( 'name' );
return $title . ' - ' . $site_name . ' Yonetim Paneli';
}
add_filter( 'admin_title', 'custom_admin_title', 10, 2 );Favicon için hem admin panelinde hem de login sayfasında aynı fonksiyonu çalıştırmak için her iki hook’a da bağladık.
Tüm Kodları Bir Arada Kullanan Tam Örnek
Prodüksiyon ortamında bu kodları daha organize bir şekilde kullanmak isteyebilirsiniz. İşte hepsini düzenli bir yapıya kavuşturmuş örnek:
/**
* Login & Admin Branding Customizations
* Bu kodlar child theme functions.php dosyasina eklenmelidir.
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
class Custom_Admin_Branding {
private $config;
public function __construct() {
$this->config = array(
'logo_path' => get_stylesheet_directory_uri() . '/assets/images/admin-logo.png',
'favicon_path' => get_stylesheet_directory_uri() . '/assets/images/favicon.ico',
'primary_color' => '#2C3E50',
'secondary_color' => '#E74C3C',
'accent_color' => '#3498DB',
'accent_hover' => '#2980B9',
'agency_name' => 'Sizin Ajansiniz',
'agency_url' => 'https://sizinajans.com',
);
$this->init_hooks();
}
private function init_hooks() {
// Login sayfasi
add_action( 'login_enqueue_scripts', array( $this, 'login_styles' ) );
add_filter( 'login_headerurl', array( $this, 'login_logo_url' ) );
add_filter( 'login_headertext', array( $this, 'login_logo_title' ) );
// Admin paneli
add_action( 'admin_head', array( $this, 'admin_styles' ) );
add_action( 'wp_head', array( $this, 'admin_bar_styles' ) );
add_action( 'admin_head', array( $this, 'favicon' ) );
add_action( 'login_head', array( $this, 'favicon' ) );
// Footer
add_filter( 'admin_footer_text', array( $this, 'footer_text' ) );
add_filter( 'update_footer', array( $this, 'footer_version' ), 11 );
}
public function login_styles() {
$c = $this->config;
?>
<style>
body.login {
background: <?php echo esc_attr( $c['primary_color'] ); ?>;
}
.login h1 a {
background-image: url('<?php echo esc_url( $c['logo_path'] ); ?>');
background-size: contain;
background-repeat: no-repeat;
width: 280px;
height: 80px;
}
#wp-submit {
background: <?php echo esc_attr( $c['accent_color'] ); ?> !important;
border-color: <?php echo esc_attr( $c['accent_hover'] ); ?> !important;
border-radius: 4px !important;
}
#wp-submit:hover {
background: <?php echo esc_attr( $c['accent_hover'] ); ?> !important;
}
</style>
<?php
}
public function login_logo_url() {
return home_url();
}
public function login_logo_title() {
return get_bloginfo( 'name' );
}
public function admin_styles() {
$c = $this->config;
?>
<style>
#adminmenu, #adminmenuback, #adminmenuwrap {
background: <?php echo esc_attr( $c['primary_color'] ); ?> !important;
}
#adminmenu li.current a.menu-top,
#adminmenu .wp-has-current-submenu > a {
background: <?php echo esc_attr( $c['accent_color'] ); ?> !important;
}
</style>
<?php
}
public function admin_bar_styles() {
$c = $this->config;
if ( is_admin_bar_showing() ) {
?>
<style>
#wpadminbar {
background: <?php echo esc_attr( $c['primary_color'] ); ?> !important;
}
</style>
<?php
}
}
public function favicon() {
echo '<link rel="shortcut icon" href="' . esc_url( $this->config['favicon_path'] ) . '" />';
}
public function footer_text() {
return sprintf(
'© %d %s | <a href="%s" target="_blank">%s</a> tarafindan gelistirildi.',
date( 'Y' ),
get_bloginfo( 'name' ),
esc_url( $this->config['agency_url'] ),
esc_html( $this->config['agency_name'] )
);
}
public function footer_version() {
return '';
}
}
new Custom_Admin_Branding();Bu sınıf tabanlı yaklaşım, tüm özelleştirmeleri tek bir yerde toplar ve yapılandırmayı kolaylaştırır. $config dizisindeki değerleri bir kez değiştirdiğinizde her şey güncellenir.
Dikkat Edilmesi Gereken Noktalar
Yukarıdaki kodları uygularken birkaç önemli noktaya dikkat etmelisiniz:
- Güvenlik: Dinamik olarak CSS’e eklenen değerleri her zaman
esc_attr()veyaesc_url()ile escape edin. Aksi takdirde XSS açığı oluşabilir.
- Cache sorunu: CSS değişiklikleriniz hemen görünmeyebilir. Tarayıcı cache’ini temizleyin ya da bir query string ekleyerek cache’i bypass edin.
- Child theme zorunluluğu: Ana tema güncellemelerinden etkilenmemek için mutlaka child theme kullanın. Ana tema
functions.phpdosyasını doğrudan düzenlerseniz her güncellemede kodlarınız silinir.
- Logo dosya boyutu: Login sayfası logosu için 200-300 KB’dan küçük, retina uyumlu (2x boyutunda) bir PNG kullanın. Büyük dosyalar login sayfasını yavaşlatır.
!importantkullanımı: WordPress admin CSS’i oldukça spesifik selector’lar kullanır. Bazen!importantkullanmak zorunda kalırsınız ama bunun bakımı zorlaştırdığını göz önünde bulundurun.
- WooCommerce uyumu: WooCommerce kuruluysa admin panel stilleri bazen çakışabilir. Özellikle sidebar rengi değişikliklerini WooCommerce admin sayfalarında test edin.
- Farklı WordPress versiyonları: Login sayfası CSS selector’ları WordPress versiyonuna göre değişebilir. Özellikle
#login h1 aile.login h1 aselector’larının her ikisini de kullanmak daha güvenlidir.
Sonuç
functions.php dosyasına eklenen bu küçük kod parçaları, WordPress sitenizin profesyonel görünümünü büyük ölçüde artırır. Özellikle müşteri projelerinde beyaz etiket (white label) bir deneyim sunmak istiyorsanız bu özelleştirmeler olmazsa olmaz.
Burada anlattığımız teknikler temel seviyede CSS enjeksiyonu ve WordPress hook sistemini kullanıyor. Daha ileri seviyede Customizer API ile entegre ederek müşterilerinize kendi admin panellerini kendi başlarına özelleştirme imkanı da tanıyabilirsiniz. Ama çoğu proje için bu yazıdaki kodlar fazlasıyla yeterli.
Özellikle sınıf tabanlı son örneği bir “branding snippet” olarak kendi toolkit’inizde saklayın. Her yeni proje başlattığınızda sadece $config değerlerini güncelleyip child theme’e kopyalamanız yeterli olacak. Yıllardır ajans işi yapan arkadaşlarımın büyük çoğunluğu bu tür hazır snippet’lerini kullanıyor, sizi de bu alışkanlığı edinmeye davet ediyorum.