WordPress Admin Çubuğunu Özelleştirme

WordPress yönetim panelinde çalışırken en çok kullandığımız ama üzerine en az düşündüğümüz alanlardan biri admin çubuğu. Sayfanın en üstünde duran o siyah bar, aslında son derece güçlü bir araç. Hem kullanışlı hem de özelleştirilebilir bir yapısı var. Bir müşteri sitesi kurduğunuzda “neden burada gereksiz şeyler var?” diye düşünmüşsünüzdür. Ya da tam tersi, sık kullandığınız bir bağlantıya hızlı erişmek için defalarca menüde gezinmek zorunda kalmışsınızdır. İşte functions.php dosyasıyla bu çubuğu tamamen kendi ihtiyaçlarınıza göre şekillendirebilirsiniz.

Admin Çubuğu Nedir ve Neden Özelleştirmeliyiz?

WordPress admin çubuğu, hem ön yüzde (front-end) hem de yönetim panelinde (back-end) oturum açmış kullanıcılara görünen araç çubuğudur. WP_Admin_Bar sınıfı üzerine inşa edilmiştir ve wp_before_admin_bar_render ile admin_bar_menu gibi hook’lar aracılığıyla yönetilebilir.

Peki neden özelleştirme yaparız?

Müşteri siteleri için temizlik: Müşterinizin görmesine gerek olmayan WordPress logosu, güncelleme bildirimleri veya yorum kısayollarını kaldırabilirsiniz.
Geliştirici verimliliği: Sık kullandığınız sayfaları tek tıkla açmak için özel menü öğeleri ekleyebilirsiniz.
Marka tutarlılığı: Müşteriye özel bir panel deneyimi sunmak için logonuzu veya şirket adınızı ekleyebilirsiniz.
Güvenlik: Bazı varsayılan öğeler gereksiz bilgi ifşa eder; bunları kaldırmak daha temiz bir arayüz sağlar.

Tüm bu işlemler için aktif temanızın functions.php dosyasını veya bir özel eklenti kullanabilirsiniz. Ben genellikle functions.php yerine site-specific bir eklenti tercih ederim çünkü tema değişimlerinden etkilenmez ama her iki yöntem de çalışır.

Varsayılan Öğeleri Kaldırma

WordPress Logosunu Kaldırma

Admin çubuğunun sol köşesindeki WordPress logosu, WordPress.org sitesine ve bazı dahili linklere yönlendiren bir menü barındırır. Müşteri projelerinde bu logoyu kaldırmak standart pratiğimdir.

add_action( 'wp_before_admin_bar_render', 'remove_wp_logo_from_admin_bar' );

function remove_wp_logo_from_admin_bar() {
    global $wp_admin_bar;
    $wp_admin_bar->remove_menu( 'wp-logo' );
}

Bu kod wp-logo ID’li öğeyi tamamen kaldırır. Logoyla birlikte altındaki tüm alt menü öğeleri de gider.

Sık Kullanılan Öğeleri Kaldırma

Tek tek öğeleri kaldırmak için remove_node() metodunu kullanabiliriz. Önce hangi ID’lerin mevcut olduğunu bilmemiz gerekir. İşte yaygın varsayılan öğe ID’leri:

wp-logo: WordPress logosu
about: WordPress hakkında
wporg: WordPress.org linki
documentation: Dokümantasyon
support-forums: Destek forumu
feedback: Geri bildirim
site-name: Site adı menüsü
view-site: Siteyi görüntüle
updates: Güncelleme bildirimleri
comments: Yorum kısayolu
new-content: İçerik ekleme menüsü
my-account: Kullanıcı hesabı menüsü

Birden fazla öğeyi aynı anda kaldıran temiz bir fonksiyon şöyle yazılabilir:

add_action( 'admin_bar_menu', 'cleanup_admin_bar', 999 );

function cleanup_admin_bar( $wp_admin_bar ) {
    // WordPress logosu ve alt öğeleri
    $wp_admin_bar->remove_node( 'wp-logo' );
    
    // Güncelleme bildirimleri
    $wp_admin_bar->remove_node( 'updates' );
    
    // Yorum kısayolu
    $wp_admin_bar->remove_node( 'comments' );
    
    // Yeni içerik ekleme menüsü
    $wp_admin_bar->remove_node( 'new-content' );
}

Hook’un öncelik değerini 999 olarak ayarladığımıza dikkat edin. WordPress core ve eklentiler çubuğu daha düşük önceliklerle doldurur; yüksek bir öncelik değeri sayesinde tüm öğeler eklendikten sonra silme işlemi gerçekleşir.

Rol Bazlı Kaldırma

Her kullanıcının aynı arayüzü görmesi gerekmez. Örneğin editörler için güncelleme bildirimlerini gizlemek isteyebilirsiniz ama yöneticiler görebilsin.

add_action( 'admin_bar_menu', 'role_based_admin_bar_cleanup', 999 );

function role_based_admin_bar_cleanup( $wp_admin_bar ) {
    // Sadece yönetici olmayan kullanıcılar için temizle
    if ( ! current_user_can( 'manage_options' ) ) {
        $wp_admin_bar->remove_node( 'wp-logo' );
        $wp_admin_bar->remove_node( 'updates' );
        $wp_admin_bar->remove_node( 'new-content' );
        $wp_admin_bar->remove_node( 'comments' );
    }
    
    // Editörler için ekstra kısıtlama
    if ( current_user_can( 'editor' ) ) {
        $wp_admin_bar->remove_node( 'site-name' );
    }
}

Bu yaklaşım gerçek dünyada son derece kullanışlı. Müşteriniz editör rolüyle giriş yapıyor ve onun admin çubuğunu sadeleştirmek istiyorsunuz; yönetici hesabınız ise tam yetkiyle çalışmaya devam ediyor.

Özel Öğe Ekleme

Basit Bir Link Ekleme

add_node() metodu admin çubuğuna yeni öğeler ekler. En temel kullanımı şöyle:

add_action( 'admin_bar_menu', 'add_custom_toolbar_link', 999 );

function add_custom_toolbar_link( $wp_admin_bar ) {
    $args = array(
        'id'    => 'custom-site-link',
        'title' => 'Canlı Site',
        'href'  => 'https://example.com',
        'meta'  => array(
            'class'  => 'custom-toolbar-item',
            'target' => '_blank',
            'title'  => 'Canlı Siteyi Aç'
        )
    );
    $wp_admin_bar->add_node( $args );
}

add_node() metodunun parametreleri:

id: Öğeye verilen benzersiz tanımlayıcı, zorunlu
title: Çubukta görünecek metin veya HTML
href: Tıklandığında gidilecek URL
parent: Üst öğenin ID’si, alt menü oluşturmak için kullanılır
group: Öğeyi bir grup olarak işaretler
meta: class, onclick, title, target, html gibi HTML özelliklerini içerir

Açılır Alt Menü Oluşturma

Birden fazla bağlantıyı tek bir üst menü altında toplamak için önce üst öğeyi, sonra alt öğeleri ekliyoruz:

add_action( 'admin_bar_menu', 'add_custom_dropdown_menu', 999 );

function add_custom_dropdown_menu( $wp_admin_bar ) {
    // Üst menü öğesi
    $wp_admin_bar->add_node( array(
        'id'    => 'hizli-erisim',
        'title' => 'Hızlı Erişim',
        'href'  => '#',
        'meta'  => array(
            'class' => 'hizli-erisim-menu'
        )
    ) );
    
    // Alt öğe: Analytics
    $wp_admin_bar->add_node( array(
        'id'     => 'google-analytics',
        'parent' => 'hizli-erisim',
        'title'  => 'Google Analytics',
        'href'   => 'https://analytics.google.com',
        'meta'   => array( 'target' => '_blank' )
    ) );
    
    // Alt öğe: Search Console
    $wp_admin_bar->add_node( array(
        'id'     => 'search-console',
        'parent' => 'hizli-erisim',
        'title'  => 'Search Console',
        'href'   => 'https://search.google.com/search-console',
        'meta'   => array( 'target' => '_blank' )
    ) );
    
    // Alt öğe: Staging
    $wp_admin_bar->add_node( array(
        'id'     => 'staging-link',
        'parent' => 'hizli-erisim',
        'title'  => 'Staging Ortamı',
        'href'   => 'https://staging.example.com',
        'meta'   => array( 'target' => '_blank' )
    ) );
}

Bu örnek benim sürekli kullandığım bir pattern. Müşteri sitelerinde Google Analytics, Search Console ve staging ortamına tek noktadan erişim sağlamak çok pratik oluyor.

Ortam Göstergesi Ekleme

Birden fazla ortamla çalışan geliştiriciler için ortam göstergesi hayat kurtarıcıdır. Production’da mı yoksa staging’de mi çalıştığınızı her an görmeniz kritik:

add_action( 'admin_bar_menu', 'add_environment_indicator', 100 );

function add_environment_indicator( $wp_admin_bar ) {
    $site_url = get_site_url();
    
    // Ortamı URL'ye göre belirle
    if ( strpos( $site_url, 'staging' ) !== false || strpos( $site_url, 'test' ) !== false ) {
        $env_label = 'STAGING';
        $env_color = '#f39c12';
    } elseif ( strpos( $site_url, 'localhost' ) !== false || strpos( $site_url, '.local' ) !== false ) {
        $env_label = 'LOCAL';
        $env_color = '#27ae60';
    } else {
        $env_label = 'PRODUCTION';
        $env_color = '#e74c3c';
    }
    
    $style = 'background-color:' . $env_color . ';color:#fff;padding:0 10px;font-weight:bold;';
    
    $wp_admin_bar->add_node( array(
        'id'    => 'environment-indicator',
        'title' => '<span style="' . $style . '">' . $env_label . '</span>',
        'href'  => false,
        'meta'  => array(
            'title' => 'Mevcut ortam: ' . $env_label
        )
    ) );
}

Kırmızı renk production, turuncu staging, yeşil local demek. Bu renk kodlamasını bir kez alıştıktan sonra yanlış ortamda işlem yapma riskini ciddi ölçüde azaltır.

Eklentilerin Eklediği Öğeleri Kaldırma

Bazı eklentiler admin çubuğuna kendi öğelerini ekler ve bunlar çoğu zaman gereksizdir. Hangi ID’nin hangi eklentiye ait olduğunu bulmak için tarayıcı geliştirici araçlarını kullanabilirsiniz. Admin çubuğundaki öğeye sağ tıklayıp “İncele” dediğinizde ID değerini görebilirsiniz.

add_action( 'admin_bar_menu', 'remove_third_party_admin_bar_items', 999 );

function remove_third_party_admin_bar_items( $wp_admin_bar ) {
    // Yoast SEO çubuğunu kaldır
    $wp_admin_bar->remove_node( 'wpseo-menu' );
    
    // WooCommerce menüsünü kaldır
    $wp_admin_bar->remove_node( 'woocommerce-admin-bar-store-manage-orders' );
    
    // WP Rocket önbellek menüsünü kaldır
    $wp_admin_bar->remove_node( 'wp-rocket' );
    
    // Wordfence güvenlik menüsünü kaldır
    $wp_admin_bar->remove_node( 'wordfence_admin_bar_option' );
    
    // Rank Math SEO menüsünü kaldır
    $wp_admin_bar->remove_node( 'rank-math' );
}

Bu ID’ler eklenti versiyonuna göre değişebilir. Eğer kaldırmak istediğiniz öğe kaybolmuyorsa geliştirici araçlarından ID’yi tekrar kontrol edin.

Tam Kapsamlı Gerçek Dünya Örneği

Şimdi tüm bu bilgileri bir araya getirelim. Bu kod parçası, bir müşteri projesi için hazırladığım kapsamlı bir admin çubuğu özelleştirmesini temsil ediyor:

/**
 * Admin Çubuğu Özelleştirmeleri
 * Yöneticiler tam yetkiyle görür, diğer kullanıcılar sadeleştirilmiş görünüm alır.
 */

// 1. Gereksiz varsayılan öğeleri kaldır
add_action( 'admin_bar_menu', 'custom_cleanup_admin_bar', 999 );

function custom_cleanup_admin_bar( $wp_admin_bar ) {
    $is_admin = current_user_can( 'manage_options' );
    
    // Yönetici olmayanlar için kaldırılacak öğeler
    if ( ! $is_admin ) {
        $remove_items = array(
            'wp-logo',
            'updates',
            'comments',
            'new-content',
            'customize',
        );
        
        foreach ( $remove_items as $item ) {
            $wp_admin_bar->remove_node( $item );
        }
        
        // Üçüncü parti eklentiler
        $wp_admin_bar->remove_node( 'wpseo-menu' );
        $wp_admin_bar->remove_node( 'wp-rocket' );
    }
}

// 2. Müşteriye özel hızlı erişim menüsü ekle
add_action( 'admin_bar_menu', 'add_client_quick_access_menu', 999 );

function add_client_quick_access_menu( $wp_admin_bar ) {
    if ( ! current_user_can( 'edit_posts' ) ) {
        return;
    }
    
    // Ana menü
    $wp_admin_bar->add_node( array(
        'id'    => 'client-menu',
        'title' => '⚡ Hızlı Erişim',
        'href'  => admin_url(),
    ) );
    
    // Medya kütüphanesi
    $wp_admin_bar->add_node( array(
        'id'     => 'client-media',
        'parent' => 'client-menu',
        'title'  => 'Medya Yükleme',
        'href'   => admin_url( 'media-new.php' ),
    ) );
    
    // Siparişler (WooCommerce varsa)
    if ( class_exists( 'WooCommerce' ) ) {
        $pending_orders = wc_orders_count( 'pending' );
        $order_label = 'Siparişler';
        
        if ( $pending_orders > 0 ) {
            $order_label .= ' <span style="background:#e74c3c;color:#fff;border-radius:10px;padding:1px 6px;font-size:11px;">' . $pending_orders . '</span>';
        }
        
        $wp_admin_bar->add_node( array(
            'id'     => 'client-orders',
            'parent' => 'client-menu',
            'title'  => $order_label,
            'href'   => admin_url( 'edit.php?post_type=shop_order' ),
        ) );
    }
    
    // Site önizleme
    $wp_admin_bar->add_node( array(
        'id'     => 'client-preview',
        'parent' => 'client-menu',
        'title'  => 'Siteyi Önizle',
        'href'   => get_site_url(),
        'meta'   => array( 'target' => '_blank' ),
    ) );
}

// 3. Ortam göstergesi
add_action( 'admin_bar_menu', 'add_client_environment_badge', 100 );

function add_client_environment_badge( $wp_admin_bar ) {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    
    $env = wp_get_environment_type();
    
    $badges = array(
        'local'       => array( 'label' => 'LOCAL', 'color' => '#27ae60' ),
        'development' => array( 'label' => 'DEV', 'color' => '#2980b9' ),
        'staging'     => array( 'label' => 'STAGING', 'color' => '#f39c12' ),
        'production'  => array( 'label' => 'PROD', 'color' => '#e74c3c' ),
    );
    
    $badge = isset( $badges[ $env ] ) ? $badges[ $env ] : $badges['production'];
    $style = 'background:' . $badge['color'] . ';color:#fff;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:bold;';
    
    $wp_admin_bar->add_node( array(
        'id'    => 'env-badge',
        'title' => '<span style="' . $style . '">' . $badge['label'] . '</span>',
        'href'  => false,
    ) );
}

Bu kod bloğunu functions.php dosyanıza veya özel eklentinize ekleyebilirsiniz. WooCommerce’nin aktif olup olmadığını kontrol ettiği için yalnızca mağaza sitelerinde sipariş sayacını gösterir.

Admin Çubuğunu Belirli Kullanıcılar İçin Tamamen Gizleme

Bazen çubuğu kaldırmak değil, belirli roller için tamamen gizlemek istersiniz. Bunu show_admin_bar() fonksiyonuyla yapabilirsiniz:

add_action( 'after_setup_theme', 'hide_admin_bar_for_subscribers' );

function hide_admin_bar_for_subscribers() {
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        
        // Subscriber rolü için admin çubuğunu gizle
        if ( in_array( 'subscriber', (array) $user->roles ) ) {
            show_admin_bar( false );
        }
        
        // Müşteri rolü için de gizle (WooCommerce customer rolü)
        if ( in_array( 'customer', (array) $user->roles ) ) {
            show_admin_bar( false );
        }
    }
}

Bu özellikle üyelik sistemi olan sitelerde kritik. WooCommerce müşterileri ya da abonelik üyeleri admin çubuğunu görmemeli; hem görsel hem de güvenlik açısından bu daha doğru bir yaklaşım.

Admin Çubuğuna CSS ile Stil Ekleme

Bazen öğeleri kaldırmak veya eklemek yetmez, görsel iyileştirme de gerekir. admin_head ve wp_head hook’larıyla hem back-end hem de front-end için CSS ekleyebilirsiniz:

add_action( 'admin_head', 'custom_admin_bar_styles' );
add_action( 'wp_head', 'custom_admin_bar_styles' );

function custom_admin_bar_styles() {
    if ( ! is_admin_bar_showing() ) {
        return;
    }
    ?>
    <style type="text/css">
        /* Admin çubuğu arka plan rengi */
        #wpadminbar {
            background-color: #1a252f;
        }
        
        /* Hover rengi */
        #wpadminbar .ab-item:hover,
        #wpadminbar a.ab-item:hover {
            background-color: #2c3e50 !important;
            color: #ecf0f1 !important;
        }
        
        /* Özel ortam göstergesi için düzeltme */
        #wpadminbar #wp-admin-bar-env-badge .ab-item {
            background: transparent !important;
        }
    </style>
    <?php
}

Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler

Admin çubuğu özelleştirirken karşılaşılan yaygın sorunlar:

Yanlış hook önceliği: admin_bar_menu hook’unu düşük öncelikle kullanırsanız bazı eklentiler öğelerinizi ezebilir. Her zaman 999 veya daha yüksek bir değer kullanın.

Önbellek sorunu: Değişiklikler hemen görünmüyorsa önbelleği temizleyin. WP Rocket, W3 Total Cache gibi eklentiler sunucu tarafı önbelleği tutabilir.

Yanlış ID kullanımı: Bir öğeyi kaldırmaya çalışıyorsunuz ama çalışmıyor. Geliştirici araçlarıyla gerçek ID’yi kontrol edin; bazı eklentiler versiyona göre ID değiştirir.

wp_before_admin_bar_render vs admin_bar_menu: İkisi de çalışır fakat admin_bar_menu daha modern ve esnek yaklaşımdır. $wp_admin_bar nesnesini global olarak almak yerine hook parametresi olarak alırsınız.

Front-end ve back-end farkı: admin_bar_menu her ikisinde de çalışır. Sadece back-end için öğe eklemek istiyorsanız is_admin() kontrolü ekleyin.

Sonuç

Admin çubuğu özelleştirmesi, WordPress geliştirmesinde görünüşte küçük ama etkisi büyük bir konudur. Müşteri teslimlerinde temiz ve sadeleştirilmiş bir arayüz sunmak profesyonellik algısını doğrudan etkiler. Kendi geliştirici iş akışınızda ise doğru ortam göstergesi ve hızlı erişim menüleri günlük verimliliğinizi kayda değer artırır.

Yazdığım kodları kör bir şekilde kopyalayıp yapıştırmak yerine ihtiyacınıza göre uyarlayın. Her projenin farklı gereksinimleri vardır; bir e-ticaret sitesinde sipariş sayacı kritikken, bir portföy sitesinde bunun hiç önemi olmaz. functions.php dosyasına dokunmadan önce mutlaka yedek alın ve tercihen bir child theme ya da özel eklenti üzerinden çalışın. Bu şekilde tema güncellemeleri özelleştirmelerinizi silmez ve her şey temiz kalır.