WordPress Giriş Butonu Elementor Eklentisi

Elementor için giriş butonu, custom modal ve hover menülü hoş geldin durumu. AJAX tabanlı giriş sistemi ile kullanıcı dostu arayüz.

🚀 Özellikler

🔐 Giriş Sistemi

• ✅ AJAX Giriş: Sayfa yenilenmeden giriş yapma
• ✅ Custom Modal: Özelleştirilebilir giriş modal'ı
• ✅ Türkçe Hata Mesajları: Kullanıcı dostu hata mesajları
• ✅ Otomatik Cookie Yönetimi: Giriş sonrası otomatik cookie ayarlama
• ✅ Youzify Entegrasyonu: Youzify lockout bypass desteği
• ✅ wp-admin Yönlendirme Engelleme: Admin yetkisi olmayan kullanıcılar için wp-admin yönlendirmelerini engelleme

👤 Kullanıcı Arayüzü

• ✅ Hoş Geldin Durumu: Giriş yapmış kullanıcılar için hoş geldin mesajı
• ✅ Avatar Gösterimi: Kullanıcı avatar'ı gösterimi (opsiyonel)
• ✅ Hover Menü: Kullanıcı üzerine gelince açılan menü
• ✅ Dinamik Menü Öğeleri: Kullanıcı durumuna göre dinamik menü öğeleri
• ✅ Elementor İkonları: Elementor ikon desteği
• ✅ Responsive Tasarım: Mobil uyumlu arayüz

🎨 Özelleştirme

• ✅ Buton Metni: Giriş butonu metnini özelleştirme
• ✅ Hoş Geldin Ön Ek: Hoş geldin mesajı ön ekini özelleştirme
• ✅ Form Etiketleri: Form alan etiketlerini özelleştirme
• ✅ Menü Öğeleri: Menü öğelerini ekleme/düzenleme
• ✅ İkon Desteği: Menü öğeleri için ikon ekleme

🔗 Entegrasyonlar

• ✅ BuddyPress: BuddyPress profil URL desteği
• ✅ Youzify: Youzify lockout bypass
• ✅ Hat Yönetimi: Kurumsal hat bilgileri menü öğesi
• ✅ Araç Yönetimi: Şirket araç bilgileri menü öğesi
• ✅ Servis Yönetimi: Servis bilgileri ve talepler menü öğeleri
• ✅ İlan Yönetimi: İlanlarım menü öğesi

⚡ Performans

• ✅ Cache Bypass: Giriş sonrası cache bypass header'ları
• ✅ Filemtime Versiyonlama: CSS/JS dosyaları için otomatik versiyonlama
• ✅ Lazy Loading: Gerektiğinde asset yükleme

📋 Gereksinimler

• WordPress 5.0 veya üzeri
• PHP 7.4 veya üzeri
• Elementor 3.0 veya üzeri
• BuddyPress (opsiyonel - profil entegrasyonu için)
• Youzify (opsiyonel - lockout bypass için)

🔧 Kurulum

1. Eklentiyi Yükleyin

1. Bu repository'yi klonlayın veya ZIP olarak indirin
2. giris-buton-elementor klasörünü WordPress'in wp-content/plugins/ klasörüne kopyalayın
3. WordPress admin paneline giriş yapın
4. Eklentiler > Yüklü Eklentiler sayfasına gidin
5. Giriş Butonu Elementor eklentisini aktifleştirin

2. Elementor'da Kullanım

1. Elementor editöründe bir sayfa açın
2. Widget panelinde Giriş Butonu widget'ını bulun
3. Widget'ı sayfaya sürükleyip bırakın
4. Widget ayarlarını özelleştirin

📖 Kullanım

Widget Ayarları

Buton Sekmesi

• Buton Metni: Giriş butonu üzerinde görünecek metin
• Hoş Geldin Ön Ek: Giriş yapmış kullanıcılar için hoş geldin mesajı ön eki
• Avatar Göster: Kullanıcı avatar'ını göster/gizle

Form Sekmesi

• Kullanıcı Adı / E-posta: Kullanıcı adı alanı etiketi
• Parola: Parola alanı etiketi
• Giriş Butonu Metni: Form giriş butonu metni

Menü Sekmesi

• Menü Öğeleri: Hover menüsünde gösterilecek öğeler
  • Metin: Menü öğesi metni
  • URL: Menü öğesi URL'i
    • #profile# - Kullanıcı profil sayfası
    • #logout# - Çıkış URL'i
  • İkon: Menü öğesi ikonu (Elementor ikonları)

Dinamik Menü Öğeleri

Eklenti, kullanıcı durumuna göre otomatik olarak menü öğeleri ekler:

• Profil: Kullanıcı profil sayfası (/calisan/[kullanici-adi])
• Kurumsal Hat Bilgilerim: Kullanıcıya tanımlı hat varsa gösterilir
• Şirket Araç Bilgilerim: Kullanıcıya tanımlı araç varsa gösterilir
• Servisim: Kullanıcıya tanımlı servis varsa gösterilir
• Servis Taleplerim: Servis talepleri sayfası
• İlanlarım: İlanlarım sayfası (yabanciya-gitmesin eklentisi varsa)
• Çıkış: Çıkış linki

Özel Menü Öğeleri Ekleme

Diğer eklentiler, gbe_dynamic_menu_items filtresini kullanarak menü öğeleri ekleyebilir:

add_filter('gbe_dynamic_menu_items', function($items, $user) {
    $items[] = [
        'item_label' => 'Özel Sayfa',
        'item_url'   => ['url' => home_url('/ozel-sayfa/'), 'is_external' => false, 'nofollow' => false],
        'item_icon'  => ['value' => 'fas fa-star', 'library' => 'fa-solid'],
    ];
    return $items;
}, 10, 2);

🎨 Özelleştirme

CSS Özelleştirme

Eklenti kendi CSS dosyalarını yükler. Özelleştirmek için:

1. Tema'nızın style.css dosyasına özel CSS ekleyin
2. Veya child theme kullanın

CSS Sınıfları:

• .gbe-login-widget: Ana widget container
• .gbe-login-trigger: Giriş butonu
• .gbe-welcome: Hoş geldin durumu
• .gbe-avatar: Avatar container
• .gbe-menu: Hover menü
• .gbe-modal: Giriş modal'ı
• .gbe-login-form: Giriş formu
• .gbe-error: Hata mesajı container

JavaScript Hook'ları

Eklenti, JavaScript hook'ları sağlar:

// Giriş başarılı olduğunda
jQuery(document).on('gbe:login:success', function(e, data) {
    console.log('Giriş başarılı', data);
});

// Çıkış yapıldığında
jQuery(document).on('gbe:logout:success', function(e, data) {
    console.log('Çıkış başarılı', data);
});

// Modal açıldığında
jQuery(document).on('gbe:modal:open', function(e) {
    console.log('Modal açıldı');
});

// Modal kapandığında
jQuery(document).on('gbe:modal:close', function(e) {
    console.log('Modal kapandı');
});

JavaScript Değişkenleri

Eklenti, JavaScript'e şu değişkenleri sağlar:

GBE_LOGIN = {
    ajaxUrl: '/wp-admin/admin-ajax.php',
    homeUrl: 'https://example.com/',
    logoutUrl: 'https://example.com/wp-login.php?action=logout',
    nonce: 'nonce_value',
    isLoggedIn: true,
    displayName: 'Kullanıcı Adı',
    avatarUrl: 'https://example.com/avatar.jpg',
    profileUrl: 'https://example.com/calisan/kullanici-adi'
}

📁 Klasör Yapısı

giris-buton-elementor/
├── assets/                          # CSS ve JS dosyaları
│   ├── css/
│   │   └── login.css                # Frontend stilleri
│   └── js/
│       └── login.js                 # Frontend JavaScript
├── includes/                         # PHP sınıfları
│   └── class-login-widget.php       # Elementor widget sınıfı
├── giris-buton-elementor.php        # Ana eklenti dosyası
└── README.md                        # Bu dosya

🔒 Güvenlik

• ✅ Nonce kontrolü (opsiyonel - basit kullanım için kaldırılabilir)
• ✅ Veri sanitizasyonu ve doğrulama
• ✅ XSS koruması (WordPress sanitize fonksiyonları)
• ✅ IP adresi doğrulama (Youzify lockout için)
• ✅ Capability kontrolü (wp-admin yönlendirmeleri için)

🌐 Çoklu Dil Desteği

Eklenti çoklu dil desteği için hazırlanmıştır. Text domain: giris-buton-elementor

Dil dosyalarını languages/ klasörüne ekleyin veya Loco Translate gibi bir eklenti kullanın.

🐛 Sorun Giderme

Widget Görünmüyor

1. Elementor'un aktif olduğundan emin olun
2. Elementor versiyonunun 3.0 veya üzeri olduğunu kontrol edin
3. Eklentinin aktif olduğundan emin olun
4. Elementor cache'ini temizleyin

Giriş Yapılamıyor

1. JavaScript hatalarını kontrol edin (tarayıcı konsolu)
2. AJAX endpoint'inin çalıştığını kontrol edin
3. Youzify lockout durumunu kontrol edin
4. Sunucu loglarını kontrol edin

Avatar Görünmüyor

1. Avatar gösteriminin aktif olduğunu kontrol edin (widget ayarlarından)
2. Kullanıcının avatar'ının ayarlandığını kontrol edin
3. Gravatar bağlantısını kontrol edin

Menü Öğeleri Görünmüyor

1. Widget ayarlarından menü öğelerinin eklendiğini kontrol edin
2. Dinamik menü öğelerinin doğru çalıştığını kontrol edin
3. JavaScript hatalarını kontrol edin

wp-admin Yönlendirmesi

1. Kullanıcının admin yetkisi olup olmadığını kontrol edin
2. login_redirect filtresinin çalıştığını kontrol edin
3. Cache'i temizleyin

Youzify Lockout

1. Youzify'in aktif olduğunu kontrol edin
2. Lockout bypass fonksiyonunun çalıştığını kontrol edin
3. IP adresinin doğru alındığını kontrol edin

📝 Changelog

0.1.0

• İlk sürüm
• Elementor widget desteği
• AJAX giriş sistemi
• Custom modal
• Hover menü
• Avatar gösterimi
• Dinamik menü öğeleri
• Youzify lockout bypass
• wp-admin yönlendirme engelleme
• Cache bypass özellikleri

👤 Yazar

Ahmet Burak Çaylak

• Website: https://www.burakcaylak.com/

📄 Lisans

Bu proje özel bir projedir.

🤝 Katkıda Bulunma

Katkılarınızı bekliyoruz! Lütfen pull request göndermeden önce:

1. Fork edin
2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
3. Değişikliklerinizi commit edin (git commit -m 'Add amazing feature')
4. Branch'inizi push edin (git push origin feature/amazing-feature)
5. Pull Request açın

📞 Destek

Sorularınız için issue açabilirsiniz.

🔗 İlgili Kaynaklar

• WordPress Plugin Handbook
• Elementor Widget Development
• BuddyPress Documentation
• Youzify Documentation

💡 Kullanım Örnekleri

Örnek 1: Basit Giriş Butonu

1. Elementor editöründe widget'ı ekleyin
2. Varsayılan ayarları kullanın
3. Kaydedin ve yayınlayın

Örnek 2: Özelleştirilmiş Buton

1. Widget ayarlarından "Buton Metni"ni değiştirin
2. "Hoş Geldin Ön Ek"i özelleştirin
3. Avatar gösterimini açın/kapatın

Örnek 3: Özel Menü Öğeleri

1. Widget ayarlarından "Menü Öğeleri" sekmesine gidin
2. Yeni öğe ekleyin
3. Metin, URL ve ikon ayarlayın
4. #profile# veya #logout# gibi özel URL'ler kullanın

Örnek 4: Tema Entegrasyonu

// Tema header.php dosyasına ekleyin
if (class_exists('\GBE\Login_Widget')) {
    $widget = new \GBE\Login_Widget();
    $widget->render();
}

🔧 Gelişmiş Kullanım

AJAX Endpoint'leri

Eklenti şu AJAX endpoint'lerini sağlar:

• wp_ajax_nopriv_gbe_login: Giriş yapma
• wp_ajax_gbe_check_user: Kullanıcı durumu kontrolü
• wp_ajax_gbe_logout: Çıkış yapma

Filtreler

Eklenti şu filtreleri sağlar:

• gbe_dynamic_menu_items: Dinamik menü öğeleri ekleme
• login_redirect: Giriş sonrası yönlendirme kontrolü

Hook'lar

Eklenti şu hook'ları kullanır:

• wp_login: Giriş sonrası lockout temizleme
• template_redirect: URL yönlendirmeleri ve cache bypass