WordPress Giriş Formuna İçerik Ekleme

WordPress sitenizin giriş sayfası, ziyaretçilerinizin markanızla kurduğu ilk birebir etkileşim noktalarından biridir. Çoğu sysadmin ve WordPress yöneticisi bu sayfayı olduğu gibi bırakır, ama aslında bu alan inanılmaz derecede özelleştirilebilir bir yapıya sahip. Özellikle kurumsal sitelerde, üyelik sistemlerinde veya WooCommerce mağazalarında giriş formunun altına ek içerik eklemek hem kullanıcı deneyimini iyileştirir hem de güvenlik mesajları, promosyon bilgileri veya sosyal giriş seçenekleri gibi kritik bilgileri doğru yerde göstermenizi sağlar.

Bu yazıda functions.php dosyasını kullanarak WordPress giriş formunun altına nasıl içerik ekleyeceğinizi, hangi hook’ları kullanmanız gerektiğini ve gerçek dünya senaryolarında bu yapıyı nasıl uygulayacağınızı adım adım ele alacağız.

WordPress Giriş Sayfasının Yapısını Anlamak

WordPress’in varsayılan giriş sayfası wp-login.php dosyası tarafından üretilir. Bu dosyayı doğrudan düzenlemek kesinlikle önerilmez çünkü her WordPress güncellemesinde değişiklikleriniz kaybolur. Bunun yerine WordPress’in sağladığı action hook’larını kullanmak hem güvenli hem de sürdürülebilir bir yaklaşımdır.

Giriş sayfasıyla ilgili kullanabileceğiniz başlıca hook’lar şunlardır:

login_form: Form alanlarının hemen altına, butonun üstüne içerik ekler
login_footer: Giriş formunun tamamen bitiminden sonra, sayfanın altına içerik ekler
login_header: Giriş formunun üst kısmına, logo alanından sonra içerik ekler
login_enqueue_scripts: Giriş sayfasına özel CSS ve JavaScript yükler
login_message: Giriş formunun üstünde mesaj alanına içerik ekler

Biz bu yazıda özellikle login_form ve login_footer hook’larına odaklanacağız çünkü “formun altına içerik ekleme” ihtiyacının büyük çoğunluğu bu iki hook ile karşılanıyor.

Temel Kullanım: İlk Kod Örneği

En basit haliyle giriş formunun altına bir mesaj eklemek için şu kodu functions.php dosyanıza ekleyebilirsiniz:

// functions.php
function my_login_form_bottom_message() {
    echo '<p style="text-align:center; margin-top:15px; color:#666;">
        Hesabınız yok mu? 
        <a href="' . wp_registration_url() . '">Kayıt olun</a>
    </p>';
}
add_action( 'login_form', 'my_login_form_bottom_message' );

Bu kod, giriş butonunun hemen üstünde görünür. Eğer butona olan bu yakınlık sizi rahatsız ediyorsa ve tam olarak formun bitiminde, yani butondan sonra içerik göstermek istiyorsanız login_footer hook’unu tercih edin.

login_footer Hook’u ile Daha Fazla Kontrol

// functions.php
function my_login_footer_content() {
    // Sadece ana giriş sayfasında göster, şifre sıfırlama vb. sayfalarda gösterme
    $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'login';
    
    if ( $action === 'login' ) {
        echo '<div id="login-footer-custom" style="
            text-align: center;
            padding: 20px;
            margin-top: 20px;
            border-top: 1px solid #ddd;
            color: #555;
            font-size: 13px;
        ">';
        echo '<p>Giriş yaparken sorun mu yaşıyorsunuz? 
            <a href="mailto:[email protected]">Destek alın</a>
        </p>';
        echo '<p style="margin-top:8px;">
            <a href="/kullanim-kosullari">Kullanım Koşulları</a> | 
            <a href="/gizlilik-politikasi">Gizlilik Politikası</a>
        </p>';
        echo '</div>';
    }
}
add_action( 'login_footer', 'my_login_footer_content' );

Buradaki kritik nokta $action kontrolüdür. WordPress’in giriş sayfası wp-login.php birden fazla işlevi yerine getirir: normal giriş, şifre sıfırlama, kayıt formu vb. Bu kontrolü yapmadan kodu yazarsanız, şifre sıfırlama sayfasında da aynı içerik görünür, bu da kullanıcı deneyimini bozar.

Giriş Sayfasına Özel CSS Eklemek

İçerik eklemek yetmez, bu içeriği düzgün stillemek gerekir. login_enqueue_scripts hook’u tam bu iş için tasarlanmıştır:

// functions.php
function my_login_page_styles() {
    wp_enqueue_style(
        'my-login-custom-css',
        get_template_directory_uri() . '/assets/css/login-custom.css',
        array(),
        '1.0.0'
    );
}
add_action( 'login_enqueue_scripts', 'my_login_page_styles' );

function my_login_footer_styled() {
    $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'login';
    
    if ( $action !== 'login' ) return;
    
    echo '<div class="custom-login-footer">';
    echo '<div class="clf-links">';
    echo '<a href="' . home_url('/kayit') . '" class="clf-register-btn">Yeni Hesap Oluştur</a>';
    echo '</div>';
    echo '<div class="clf-social">';
    echo '<p>veya sosyal hesabınızla giriş yapın</p>';
    // Sosyal giriş butonları buraya gelecek
    echo '</div>';
    echo '</div>';
}
add_action( 'login_footer', 'my_login_footer_styled' );

Dış CSS dosyası kullanmak yerine inline CSS tercih ediyorsanız wp_add_inline_style de kullanabilirsiniz ama daha temiz bir yaklaşım için ayrı CSS dosyası önerilir.

Gerçek Dünya Senaryosu 1: WooCommerce Mağazası için Giriş Mesajı

E-ticaret sitelerinde giriş sayfası kritik bir dönüşüm noktasıdır. Müşterilerinizi teşvik etmek için indirim hatırlatmaları veya avantaj listesi gösterebilirsiniz:

// functions.php
function woo_login_incentive_message() {
    // Sadece WooCommerce aktifse çalış
    if ( ! class_exists( 'WooCommerce' ) ) return;
    
    $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'login';
    if ( $action !== 'login' ) return;
    
    // Aktif bir kampanya varsa göster (örnek: ACF alanından)
    $kampanya_aktif = get_option( 'woo_login_kampanya_aktif', false );
    $kampanya_mesaj = get_option( 'woo_login_kampanya_mesaj', '' );
    
    echo '<div style="
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 8px;
        padding: 16px 20px;
        margin-top: 20px;
        color: white;
        text-align: center;
    ">';
    
    echo '<p style="margin:0 0 8px 0; font-weight:bold; font-size:15px;">
        Üye Avantajları
    </p>';
    echo '<ul style="margin:0; padding:0; list-style:none; font-size:13px;">';
    echo '<li>✓ Siparişlerinizi kolayca takip edin</li>';
    echo '<li>✓ Özel üye indirimlerinden yararlanın</li>';
    echo '<li>✓ Adres bilgilerinizi kaydedin</li>';
    echo '</ul>';
    
    if ( $kampanya_aktif && ! empty($kampanya_mesaj) ) {
        echo '<p style="margin:10px 0 0 0; padding:8px; background:rgba(255,255,255,0.2); 
              border-radius:4px; font-size:12px;">' 
              . esc_html($kampanya_mesaj) . '</p>';
    }
    
    echo '</div>';
}
add_action( 'login_footer', 'woo_login_incentive_message' );

Gerçek Dünya Senaryosu 2: Kurumsal Site için Güvenlik Uyarısı

Şirket içi sistemlerde veya kurumsal WordPress kurulumlarında kullanıcılara güvenlik hatırlatmaları yapmak önemlidir:

// functions.php
function corporate_login_security_notice() {
    $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'login';
    if ( $action !== 'login' ) return;
    
    // Kullanıcının IP adresini al
    $user_ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) 
                ? sanitize_text_field($_SERVER['HTTP_X_FORWARDED_FOR']) 
                : sanitize_text_field($_SERVER['REMOTE_ADDR']);
    
    // İzin verilen IP aralığı dışındaysa uyarı göster
    $allowed_range = '192.168.1.'; // Örnek iç ağ
    $is_internal   = strpos($user_ip, $allowed_range) === 0;
    
    echo '<div style="
        border: 1px solid ' . ($is_internal ? '#4CAF50' : '#f44336') . ';
        border-radius: 4px;
        padding: 12px 16px;
        margin-top: 20px;
        background: ' . ($is_internal ? '#f1f8e9' : '#ffebee') . ';
        font-size: 12px;
        color: #333;
    ">';
    
    if ( $is_internal ) {
        echo '<strong>Güvenli Bağlantı:</strong> Kurumsal ağ üzerinden bağlanıyorsunuz.';
    } else {
        echo '<strong>Uyarı:</strong> Kurumsal ağ dışından bağlanıyorsunuz. 
              VPN kullanmanız önerilir.';
    }
    
    echo '<br><small style="color:#666; margin-top:4px; display:block;">
        IP Adresiniz: ' . esc_html($user_ip) . ' | 
        Tarih: ' . current_time('d.m.Y H:i') . '
    </small>';
    
    echo '</div>';
}
add_action( 'login_footer', 'corporate_login_security_notice' );

Gerçek Dünya Senaryosu 3: Bakım Modu Uyarısı

Sunucu bakımı planladığınızda kullanıcıları önceden bilgilendirmek son derece profesyonel bir yaklaşımdır:

// functions.php
function login_maintenance_warning() {
    // Bakım zamanını belirle (Unix timestamp)
    $bakim_zamani    = strtotime('2024-12-25 02:00:00');
    $bakim_suresi    = '2 saat';
    $simdi           = current_time('timestamp');
    $uyari_baslangic = $bakim_zamani - (24 * 3600); // 24 saat öncesinden uyar
    
    // Sadece uyarı penceresi içindeyse göster
    if ( $simdi < $uyari_baslangic || $simdi > $bakim_zamani ) return;
    
    $kalan_saat = round(($bakim_zamani - $simdi) / 3600, 1);
    
    echo '<div style="
        background: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 6px;
        padding: 14px 18px;
        margin-top: 18px;
        font-size: 13px;
    ">';
    echo '<strong>Planlı Bakım Bildirimi</strong><br>';
    echo 'Sistem ' . esc_html($kalan_saat) . ' saat sonra bakıma alınacak. ';
    echo 'Bakım süresi yaklaşık <strong>' . esc_html($bakim_suresi) . '</strong> olacak.';
    echo '<br><small style="color:#856404;">
        ' . date('d.m.Y H:i', $bakim_zamani) . ' - Sistem Ekibi
    </small>';
    echo '</div>';
}
add_action( 'login_footer', 'login_maintenance_warning' );

Kullanıcı Rolüne Göre Dinamik İçerik

WordPress’te login sonrası yönlendirme farklılaştırmak yaygın bir ihtiyaçtır. Benzer şekilde, giriş sayfasında da belirli durumları karşılayan mesajlar gösterebilirsiniz:

// functions.php
function dynamic_login_footer_content() {
    $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'login';
    if ( $action !== 'login' ) return;
    
    // URL parametresine göre bağlam mesajı göster
    $redirect_to = isset($_GET['redirect_to']) ? $_GET['redirect_to'] : '';
    
    echo '<div class="login-context-message" style="
        text-align:center;
        margin-top:20px;
        padding:15px;
        font-size:13px;
        color:#555;
    ">';
    
    if ( strpos($redirect_to, 'checkout') !== false ) {
        // Kullanıcı ödeme sayfasından yönlendirilmiş
        echo '<div style="background:#e8f5e9; padding:10px; border-radius:4px; color:#2e7d32;">';
        echo '🛒 Siparişinizi tamamlamak için giriş yapın. Sepetinizdeki ürünler sizi bekliyor!';
        echo '</div>';
    } elseif ( strpos($redirect_to, 'hesabim') !== false ) {
        echo '<div style="background:#e3f2fd; padding:10px; border-radius:4px; color:#1565c0;">';
        echo '👤 Hesap bilgilerinize erişmek için giriş yapmanız gerekiyor.';
        echo '</div>';
    } else {
        // Genel mesaj
        echo '<p>Yardıma mı ihtiyacınız var? 
            <a href="mailto:[email protected]" style="color:#0073aa;">Bize ulaşın</a>
        </p>';
    }
    
    echo '</div>';
}
add_action( 'login_footer', 'dynamic_login_footer_content' );

JavaScript ile Etkileşimli İçerik Ekleme

Sadece statik HTML değil, JavaScript ile etkileşimli elementler de ekleyebilirsiniz. Örneğin, giriş yaptıktan sonra hatırlatıcı checkbox’u:

// functions.php
function login_interactive_footer() {
    $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'login';
    if ( $action !== 'login' ) return;
    
    ?>
    <div id="login-extra-options" style="margin-top:15px; text-align:center;">
        <div id="login-help-toggle" style="font-size:13px; color:#0073aa; cursor:pointer;">
            Şifrenizi mi unuttunuz? ▼
        </div>
        <div id="login-help-content" style="
            display:none;
            margin-top:10px;
            padding:12px;
            background:#f0f6fc;
            border-radius:6px;
            font-size:13px;
            text-align:left;
        ">
            <p><strong>Şifrenizi sıfırlamak için:</strong></p>
            <ol style="margin:8px 0; padding-left:20px;">
                <li>"Şifremi Unuttum" bağlantısına tıklayın</li>
                <li>E-posta adresinizi girin</li>
                <li>Gelen e-postadaki bağlantıya tıklayın</li>
            </ol>
            <p>Sorun devam ederse: 
                <a href="mailto:[email protected]">[email protected]</a>
            </p>
        </div>
    </div>
    
    <script>
    document.getElementById('login-help-toggle').addEventListener('click', function() {
        var content = document.getElementById('login-help-content');
        var toggle  = this;
        if (content.style.display === 'none') {
            content.style.display = 'block';
            toggle.innerHTML = 'Şifrenizi mi unuttunuz? ▲';
        } else {
            content.style.display = 'none';
            toggle.innerHTML = 'Şifrenizi mi unuttunuz? ▼';
        }
    });
    </script>
    <?php
}
add_action( 'login_footer', 'login_interactive_footer' );

Tüm Fonksiyonları Bir Sınıfta Toplamak

Büyük projelerde bu kadar çok add_action çağrısı functions.php’yi dağınık hale getirebilir. OOP yaklaşımıyla tüm giriş sayfası özelleştirmelerini tek bir sınıfta toplayabilirsiniz:

// functions.php veya ayrı bir include dosyası

class My_Login_Customizer {
    
    private $action;
    
    public function __construct() {
        $this->action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'login';
        
        add_action( 'login_enqueue_scripts', array($this, 'enqueue_styles') );
        add_action( 'login_footer',          array($this, 'render_footer_content') );
        add_action( 'login_form',            array($this, 'render_form_additions') );
    }
    
    public function enqueue_styles() {
        wp_add_inline_style( 'login', $this->get_custom_css() );
    }
    
    private function get_custom_css() {
        return '
            .custom-login-wrapper {
                margin-top: 20px;
                padding: 16px;
                border-top: 1px solid #dcdcde;
                text-align: center;
                font-size: 13px;
                color: #50575e;
            }
            .custom-login-wrapper a {
                color: #0073aa;
                text-decoration: none;
            }
            .custom-login-wrapper a:hover {
                text-decoration: underline;
            }
            .login-benefit-list {
                list-style: none;
                padding: 0;
                margin: 10px 0 0 0;
            }
            .login-benefit-list li {
                padding: 3px 0;
            }
        ';
    }
    
    public function render_footer_content() {
        if ( $this->action !== 'login' ) return;
        
        echo '<div class="custom-login-wrapper">';
        $this->render_registration_link();
        $this->render_support_info();
        echo '</div>';
    }
    
    public function render_form_additions() {
        // Form içine eklenecek şeyler buraya
    }
    
    private function render_registration_link() {
        if ( get_option('users_can_register') ) {
            echo '<p>Henüz üye değilseniz: 
                <a href="' . esc_url(wp_registration_url()) . '">Kayıt Olun</a>
            </p>';
        }
    }
    
    private function render_support_info() {
        $support_email = get_option('admin_email');
        echo '<p>Destek: 
            <a href="mailto:' . esc_attr($support_email) . '">' 
            . esc_html($support_email) . '</a>
        </p>';
    }
}

new My_Login_Customizer();

Güvenlik Notları ve Best Practices

Bu hook’larla çalışırken dikkat etmeniz gereken birkaç önemli nokta var:

Kullanıcı verilerini her zaman escape edin: esc_html(), esc_url(), esc_attr() gibi fonksiyonları kullanmayı ihmal etmeyin. Kullanıcıdan veya URL’den gelen her veriyi sanitize etmeden doğrudan echo’lamak XSS açıklarına yol açar.

Nonce kullanımı: Eğer giriş sayfasına form ekliyorsanız mutlaka wp_nonce_field() kullanın.

$action kontrolünü atlamamak: wp-login.php birden fazla işlev yapar. Şifre sıfırlama, kayıt, logout işlemleri sırasında gereksiz içerik göstermemek için $action değerini kontrol edin.

Performans: login_footer hook’u içinde ağır veritabanı sorguları çalıştırmaktan kaçının. Bu sayfa her giriş denemesinde yüklenir.

functions.php yerine plugin kullanımı: Eğer bu özelleştirmeler temanızdan bağımsız olmalıysa, bunları küçük bir site-specific plugin içine almanız daha iyi bir pratiktir. Tema değişikliğinde özelleştirmeler kaybolmaz.

Child theme zorunluluğu: Eğer bir hazır tema kullanıyorsanız bu kodları kesinlikle child theme’in functions.php dosyasına yazın. Ana tema güncellemelerinde tüm değişiklikleriniz uçup gidebilir.

Sık Yapılan Hatalar

Yanlış hook adı kullanmak: login_footer hook’u wp_footer değildir. wp_footer ana site için çalışır, giriş sayfasında değil.

Sadece HTML yazmak: echo veya print kullanmayı unutup doğrudan PHP dosyasına HTML yazmak bu hook bağlamında çalışmaz.

SSL kontrolü yapmamak: Kurumsal senaryolarda HTTPS üzerinden bağlanılıp bağlanılmadığını is_ssl() fonksiyonuyla kontrol edip buna göre uyarı gösterebilirsiniz.

Mobil uyumu göz ardı etmek: Giriş sayfasına eklediğiniz içeriklerin responsive olduğundan emin olun. WordPress’in varsayılan giriş sayfası zaten mobile-first tasarımlıdır, eklediğiniz elementlerin bu yapıyı bozmamasına dikkat edin.

Sonuç

WordPress giriş sayfasını functions.php üzerinden özelleştirmek, çoğu sysadmin’in fark etmediği ama etki alanı oldukça geniş bir yetenektir. login_form, login_footer ve login_enqueue_scripts hook’larını doğru kombinasyonda kullandığınızda, kullanıcı deneyimini ciddi ölçüde iyileştirebilir, güvenlik mesajları iletebilir, WooCommerce entegrasyonları kurabilir ve kurumsal bildirimleri doğru kitleye doğru zamanda gösterebilirsiniz.

Temel prensip her zaman aynı: WordPress’in sağladığı hook sistemini kullanın, wp-login.php dosyasını elle değiştirmeyin ve kullanıcı verilerini her koşulda sanitize ve escape edin. Bu üç kuralı aklınızda tuttuğunuz sürece giriş sayfanızı hem güvenli hem de işlevsel biçimde genişletebilirsiniz.

Özellikle çok kullanıcılı WordPress ağlarında (WordPress Multisite) veya büyük WooCommerce mağazalarında bu tür küçük ama etkili özelleştirmeler, kullanıcıların sitenize olan güvenini ve memnuniyetini doğrudan etkiler. Kod yazmaya başlamadan önce hangi hook’un hangi durumda tetiklendiğini test etmek için geçici error_log() çağrıları kullanabilir, log dosyanızı takip ederek davranışı gözlemleyebilirsiniz.

WordPress Giriş Formunun Altına İçerik Ekleme