WordPress’te Özel CSS Ekleme: wp_add_inline_style Kullanımı

Tarafındankomut
0 Comments

WordPress tema geliştirirken ya da bir müşteri sitesi üzerinde çalışırken “şu elemana şu stili ekleyeyim” dediğinizde aklınıza gelen ilk şey muhtemelen doğrudan CSS dosyasını düzenlemek oluyor. Ama bu yaklaşım, özellikle tema güncellemelerinde tüm değişikliklerinizi silip süpürüyor. İşte tam bu noktada wp_add_inline_style() fonksiyonu devreye giriyor ve hayatınızı ciddi ölçüde kolaylaştırıyor.

wp_add_inline_style Nedir ve Neden Kullanmalısınız?

wp_add_inline_style(), WordPress’in enqueue sistemine entegre bir şekilde çalışan ve belirli bir stil dosyasına bağlı inline CSS eklemenizi sağlayan bir fonksiyondur. Yani “bir CSS handle’ına bağlı olarak, o dosya yüklendikten hemen sonra bu CSS kurallarını da ekle” diyorsunuz WordPress’e.

Neden bunu kullanmalısınız? Çünkü:

  • Tema güncellemelerinden etkilenmez: Child theme veya functions.php üzerinden yönettiğiniz için ana tema güncellendiğinde kaybolmaz
  • Koşullu yükleme imkanı: Sadece belirli sayfalarda, belirli kullanıcı rollerinde ya da belirli koşullarda CSS yükleyebilirsiniz
  • Dinamik değerler: PHP değişkenlerini, veritabanından gelen renk kodlarını ya da seçenek değerlerini direkt CSS’e dahil edebilirsiniz
  • Performans dostu: İnline stil, harici dosya isteği oluşturmaz
  • WordPress standartlarına uygun: Doğrudan etiketi basmak yerine resmi API’yi kullanmış olursunuz

Temel Kullanım Sözdizimi

Fonksiyonun yapısı oldukça basit:

wp_add_inline_style( string $handle, string $data );

$handle: CSS stilini bağlamak istediğiniz stil dosyasının handle adı. Bu handle daha önce wp_enqueue_style() veya wp_register_style() ile kaydedilmiş olmalıdır.

$data: Eklemek istediğiniz ham CSS kodu. Burada etiketleri kullanmıyorsunuz, sadece CSS kurallarını yazıyorsunuz.

Fonksiyon başarılıysa true, başarısızsa false döndürür.

İlk Örnek: Temanın Ana Stiline CSS Ekleme

En temel senaryo şu: Mevcut temanın ana stil dosyasına ek CSS kuralları eklemek istiyorsunuz.

function mytheme_custom_inline_styles() {
    // Önce hangi handle'a bağlanacağımızı belirleyelim
    // Çoğu temada ana stil 'style' handle'ı ile kayıtlıdır
    wp_add_inline_style( 'style', '
        .site-header {
            background-color: #2c3e50;
            padding: 20px 0;
        }
        .site-title a {
            color: #ecf0f1;
            font-size: 28px;
        }
        .main-navigation a {
            color: #bdc3c7;
            transition: color 0.3s ease;
        }
        .main-navigation a:hover {
            color: #ffffff;
        }
    ' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_inline_styles' );

Burada dikkat edilmesi gereken nokta: wp_enqueue_scripts hook’una bağlanıyorsunuz çünkü bu action çalıştığında WordPress stil sistemi hazır durumda oluyor.

Dinamik Değerler ile Kullanım: Tema Seçenekleri

Gerçek gücünü gösteren senaryo ise şu: Müşteriniz WordPress Customizer üzerinden renk seçiyor, siz de bu rengi dinamik olarak CSS’e yansıtıyorsunuz.

function mytheme_dynamic_color_styles() {
    // Customizer'dan veya options tablosundan renk değerini çek
    $primary_color   = get_theme_mod( 'primary_color', '#3498db' );
    $secondary_color = get_theme_mod( 'secondary_color', '#2ecc71' );
    $font_size       = get_theme_mod( 'body_font_size', '16' );

    // CSS kurallarını değişkenlerle oluştur
    $custom_css = "
        :root {
            --primary-color: {$primary_color};
            --secondary-color: {$secondary_color};
        }
        body {
            font-size: {$font_size}px;
        }
        .btn-primary {
            background-color: {$primary_color};
            border-color: {$primary_color};
        }
        .btn-primary:hover {
            background-color: {$secondary_color};
            border-color: {$secondary_color};
        }
        a {
            color: {$primary_color};
        }
        a:hover {
            color: {$secondary_color};
        }
    ";

    wp_add_inline_style( 'mytheme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'mytheme_dynamic_color_styles' );

Bu yaklaşım özellikle müşteriye özelleştirme yetkisi verdiğiniz projelerde çok işe yarıyor. Customizer üzerinden seçilen her renk, font boyutu ya da özel değer anında CSS’e yansıyor.

WooCommerce ile Entegrasyon

WooCommerce kullanıyorsanız, WooCommerce’in kendi enqueue ettiği stillere inline CSS ekleyebilirsiniz. Bu, özellikle WooCommerce’in varsayılan görünümünü değiştirmek istediğinizde kullanışlı.

function mytheme_woocommerce_custom_styles() {
    // WooCommerce'in ana stil dosyası 'woocommerce-general' handle'ını kullanır
    // Ayrıca 'woocommerce-layout' ve 'woocommerce-smallscreen' da mevcut

    $button_color    = get_option( 'woo_button_color', '#e74c3c' );
    $button_hover    = get_option( 'woo_button_hover_color', '#c0392b' );
    $price_color     = get_option( 'woo_price_color', '#27ae60' );

    $woo_css = "
        .woocommerce a.button,
        .woocommerce button.button,
        .woocommerce input.button,
        .woocommerce #respond input#submit {
            background-color: {$button_color};
            color: #ffffff;
            border-radius: 4px;
            padding: 12px 24px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .woocommerce a.button:hover,
        .woocommerce button.button:hover {
            background-color: {$button_hover};
            color: #ffffff;
        }
        .woocommerce .price {
            color: {$price_color};
            font-size: 1.4em;
            font-weight: 700;
        }
        .woocommerce .product-title {
            font-size: 1.1em;
            line-height: 1.4;
        }
        .woocommerce ul.products li.product .price {
            color: {$price_color};
        }
    ";

    wp_add_inline_style( 'woocommerce-general', $woo_css );
}
add_action( 'wp_enqueue_scripts', 'mytheme_woocommerce_custom_styles' );

Sayfa Bazlı Koşullu CSS Yükleme

Bazen sadece belirli sayfalarda özel stiller uygulamak istersiniz. Bunu is_page(), is_single() ya da başka koşul fonksiyonlarıyla birleştirebilirsiniz.

function mytheme_conditional_page_styles() {
    // Ana stil handle'ına bağlanıyoruz
    $style_handle = 'mytheme-main-style';

    // İletişim sayfası için özel stiller
    if ( is_page( 'iletisim' ) ) {
        $contact_css = "
            .contact-form-wrapper {
                max-width: 680px;
                margin: 0 auto;
                padding: 40px;
                background: #f8f9fa;
                border-radius: 8px;
                box-shadow: 0 2px 20px rgba(0,0,0,0.08);
            }
            .contact-form-wrapper input,
            .contact-form-wrapper textarea {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e0e0e0;
                border-radius: 4px;
                font-size: 15px;
                transition: border-color 0.3s;
            }
            .contact-form-wrapper input:focus,
            .contact-form-wrapper textarea:focus {
                border-color: #3498db;
                outline: none;
            }
        ";
        wp_add_inline_style( $style_handle, $contact_css );
    }

    // Blog arşiv sayfası için
    if ( is_archive() || is_home() ) {
        $archive_css = "
            .post-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 30px;
            }
            .post-card {
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .post-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            }
        ";
        wp_add_inline_style( $style_handle, $archive_css );
    }

    // Tekil ürün sayfası (WooCommerce)
    if ( is_product() ) {
        $product_css = "
            .single-product .product-images-wrapper {
                position: sticky;
                top: 20px;
            }
            .single-product .summary {
                padding-left: 40px;
            }
        ";
        wp_add_inline_style( $style_handle, $product_css );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_conditional_page_styles' );

Kullanıcı Rolüne Göre CSS Uygulama

Yönetici görseller, üyeler farklı arayüz, misafirler başka bir görünüm istiyorsanız:

function mytheme_role_based_styles() {
    $handle = 'mytheme-main-style';

    // Giriş yapmış kullanıcılar için
    if ( is_user_logged_in() ) {
        $user        = wp_get_current_user();
        $user_roles  = $user->roles;

        // Yönetici rolü
        if ( in_array( 'administrator', $user_roles ) ) {
            $admin_css = "
                .admin-only-section {
                    display: block !important;
                }
                .edit-shortcut {
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    font-size: 12px;
                    color: #e74c3c;
                    border: 1px dashed #e74c3c;
                    padding: 2px 8px;
                    border-radius: 3px;
                    margin-left: 8px;
                }
            ";
            wp_add_inline_style( $handle, $admin_css );
        }

        // Subscriber veya üye rolü
        if ( in_array( 'subscriber', $user_roles ) || in_array( 'member', $user_roles ) ) {
            $member_css = "
                .members-only-content {
                    display: block !important;
                }
                .membership-badge {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    padding: 3px 10px;
                    border-radius: 20px;
                    font-size: 11px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }
                .locked-content {
                    display: none;
                }
            ";
            wp_add_inline_style( $handle, $member_css );
        }
    }

    // Giriş yapmamış ziyaretçiler
    if ( ! is_user_logged_in() ) {
        $guest_css = "
            .member-only-section {
                display: none;
            }
            .login-prompt-banner {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 16px;
                background: #fff3cd;
                border: 1px solid #ffc107;
                border-radius: 6px;
                margin: 20px 0;
                font-weight: 500;
            }
        ";
        wp_add_inline_style( $handle, $guest_css );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_role_based_styles' );

Özel Post Type için CSS Yönetimi

Özel post tipleriniz varsa, onlara özel stiller tanımlamak da çok kolay:

function mytheme_custom_post_type_styles() {
    $handle = 'mytheme-main-style';

    // Portfolio custom post type
    if ( is_singular( 'portfolio' ) ) {
        $portfolio_css = "
            .portfolio-hero {
                min-height: 60vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background-size: cover;
                background-position: center;
                position: relative;
            }
            .portfolio-hero::before {
                content: '';
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.45);
            }
            .portfolio-hero-content {
                position: relative;
                z-index: 1;
                text-align: center;
                color: #ffffff;
            }
            .portfolio-hero-title {
                font-size: clamp(2rem, 5vw, 4rem);
                font-weight: 800;
                margin-bottom: 16px;
            }
            .portfolio-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 20px;
            }
            .portfolio-tag {
                background: rgba(255,255,255,0.2);
                backdrop-filter: blur(10px);
                padding: 4px 14px;
                border-radius: 20px;
                font-size: 13px;
                color: white;
                border: 1px solid rgba(255,255,255,0.3);
            }
        ";
        wp_add_inline_style( $handle, $portfolio_css );
    }

    // Hizmetler custom post type listesi
    if ( is_post_type_archive( 'hizmet' ) ) {
        $service_css = "
            .hizmet-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 24px;
            }
            @media (max-width: 768px) {
                .hizmet-grid {
                    grid-template-columns: 1fr;
                }
            }
            .hizmet-card {
                text-align: center;
                padding: 40px 24px;
                border: 1px solid #e8ecef;
                border-radius: 12px;
                transition: all 0.3s ease;
            }
            .hizmet-card:hover {
                border-color: #3498db;
                box-shadow: 0 10px 30px rgba(52, 152, 219, 0.15);
            }
            .hizmet-icon {
                width: 64px;
                height: 64px;
                margin: 0 auto 20px;
                background: #ebf5fb;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        ";
        wp_add_inline_style( $handle, $service_css );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_post_type_styles' );

Medya Sorguları ve Duyarlı CSS Ekleme

Responsive tasarım değişiklikleri için de inline style kullanabilirsiniz:

function mytheme_responsive_inline_styles() {
    // Seçenek tablosundan mobil için özelleştirilmiş değerler al
    $mobile_font_size  = get_option( 'mobile_font_size', '14' );
    $tablet_breakpoint = get_option( 'tablet_breakpoint', '768' );
    $mobile_breakpoint = get_option( 'mobile_breakpoint', '480' );

    $responsive_css = "
        /* Tablet görünümü */
        @media screen and (max-width: {$tablet_breakpoint}px) {
            .site-header .navigation-menu {
                display: none;
            }
            .hamburger-menu {
                display: flex;
            }
            .hero-section {
                padding: 60px 20px;
                text-align: center;
            }
            .hero-title {
                font-size: 2rem;
            }
            .content-sidebar-wrapper {
                flex-direction: column;
            }
            .sidebar {
                width: 100%;
                margin-top: 40px;
            }
        }

        /* Mobil görünümü */
        @media screen and (max-width: {$mobile_breakpoint}px) {
            body {
                font-size: {$mobile_font_size}px;
            }
            .container {
                padding: 0 16px;
            }
            .hero-title {
                font-size: 1.6rem;
            }
            .feature-grid {
                grid-template-columns: 1fr;
            }
            .footer-columns {
                flex-direction: column;
                gap: 30px;
            }
        }
    ";

    wp_add_inline_style( 'mytheme-main-style', $responsive_css );
}
add_action( 'wp_enqueue_scripts', 'mytheme_responsive_inline_styles' );

Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler

Handle doğruluğu kritik: En sık yapılan hata, var olmayan ya da henüz register edilmemiş bir handle kullanmak. Eğer handle kayıtlı değilse fonksiyon false döndürür ve CSS hiç eklenmez. Tema stilinizin handle’ını bulmak için wp_styles()->registered dizisini inceleyebilir ya da tema kaynak koduna bakabilirsiniz.

// Handle'ların listesini debug için kontrol etmek
function debug_registered_styles() {
    if ( current_user_can( 'administrator' ) && isset( $_GET['debug_styles'] ) ) {
        global $wp_styles;
        echo '<pre>';
        print_r( array_keys( $wp_styles->registered ) );
        echo '</pre>';
    }
}
add_action( 'wp_print_styles', 'debug_registered_styles' );

XSS güvenliği: Dinamik CSS değerleri kullanırken mutlaka sanitize işlemi yapın. Kullanıcıdan gelen renk değerleri için sanitize_hex_color(), genel metinler için sanitize_text_field() kullanın.

// Güvenli dinamik CSS örneği
function mytheme_safe_dynamic_styles() {
    $raw_color   = get_option( 'site_accent_color' );
    $safe_color  = sanitize_hex_color( $raw_color );

    // Geçersiz renk gelirse varsayılan kullan
    if ( empty( $safe_color ) ) {
        $safe_color = '#3498db';
    }

    $css = "
        .accent-element {
            color: {$safe_color};
        }
    ";

    wp_add_inline_style( 'mytheme-style', $css );
}
add_action( 'wp_enqueue_scripts', 'mytheme_safe_dynamic_styles' );

Çift tırnak ve tek tırnak yönetimi: CSS değerleri içinde content: "" gibi çift tırnak kullanıyorsanız PHP string yapınızı buna göre düzenleyin. Heredoc veya Nowdoc sözdizimi bu durumlarda işinizi kolaylaştırır.

Çıktı konumu: wp_add_inline_style() eklediği CSS’i bağlandığı handle’ın hemen sonrasına koyar. Yani içindeki stil dosyanızın hemen ardından görürsünüz bunu.

Admin Panel için Inline Style Ekleme

Frontend değil admin paneli özelleştiriyorsanız admin_enqueue_scripts hook’unu kullanın:

function mytheme_admin_custom_styles( $hook ) {
    // Sadece belirli admin sayfalarında çalıştır
    if ( 'post.php' !== $hook && 'post-new.php' !== $hook ) {
        return;
    }

    // WordPress'in admin stil handle'ına bağla
    wp_add_inline_style( 'wp-admin', '
        .wp-editor-area {
            font-family: "Georgia", serif;
            font-size: 16px;
            line-height: 1.8;
        }
        #postdivrich {
            background: #fefefe;
        }
        .edit-post-header {
            background: #1a1a2e;
        }
        #adminmenu .wp-has-current-submenu .wp-submenu-head,
        #adminmenu .wp-menu-open .wp-submenu-head {
            background: #16213e;
        }
        .notice-success {
            border-left-color: #27ae60;
        }
    ' );
}
add_action( 'admin_enqueue_scripts', 'mytheme_admin_custom_styles' );

Gerçek Dünya Senaryosu: ACF Renk Alanından CSS Üretme

Advanced Custom Fields kullanıyorsanız, sayfa bazlı renk seçicilerden dinamik CSS üretebilirsiniz:

function mytheme_acf_dynamic_page_styles() {
    if ( ! function_exists( 'get_field' ) ) {
        return;
    }

    // ACF alanlarından değerleri çek
    $page_bg_color    = get_field( 'page_background_color' );
    $hero_text_color  = get_field( 'hero_text_color' );
    $cta_button_color = get_field( 'cta_button_color' );
    $section_padding  = get_field( 'section_padding' );

    // Değerler yoksa varsayılanları kullan
    $page_bg_color    = $page_bg_color    ? sanitize_hex_color( $page_bg_color )    : '#ffffff';
    $hero_text_color  = $hero_text_color  ? sanitize_hex_color( $hero_text_color )  : '#1a1a1a';
    $cta_button_color = $cta_button_color ? sanitize_hex_color( $cta_button_color ) : '#3498db';
    $section_padding  = $section_padding  ? absint( $section_padding )              : 80;

    $dynamic_css = "
        .page-template-custom body {
            background-color: {$page_bg_color};
        }
        .page-hero-title,
        .page-hero-subtitle {
            color: {$hero_text_color};
        }
        .page-cta-button {
            background-color: {$cta_button_color};
        }
        .content-section {
            padding-top: {$section_padding}px;
            padding-bottom: {$section_padding}px;
        }
    ";

    wp_add_inline_style( 'mytheme-main-style', $dynamic_css );
}
add_action( 'wp_enqueue_scripts', 'mytheme_acf_dynamic_page_styles' );

Sonuç

wp_add_inline_style() fonksiyonu, WordPress geliştirmede CSS yönetimini hem profesyonel hem de sürdürülebilir bir hale getiriyor. Doğrudan dosya düzenlemek yerine bu yöntemi benimsediğinizde güncelleme kaygısı yaşamıyor, dinamik değerler enjekte edebiliyor ve koşullu stil yükleme ile gereksiz CSS yükünden kurtuluyorsunuz.

Özellikle şu senaryolarda bu fonksiyon sizi gerçekten kurtarır: Müşterinin Customizer üzerinden renk değiştirebildiği projeler, ACF alanlarından çekilen sayfa bazlı özelleştirmeler, kullanıcı rolüne göre değişen arayüzler ve WooCommerce görünüm düzenlemeleri.

Tek dikkat etmeniz gereken şey doğru handle adını kullanmak ve dinamik değerleri mutlaka sanitize etmek. Bu iki kuralı aklınızda tuttuğunuz sürece wp_add_inline_style() WordPress projelenizdeki en güvenilir CSS yönetim aracınız haline gelecek.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir