Üyelik Korumalı WordPress Siteleri İçin Bir Arama Modalı Oluşturmak

Çoğu WordPress arama eğitimi, bir header'a widget ekledikten sonra biter.

Ücretli kurslar veya özel videolar gibi kısıtlanmış içerikleriniz olduğunda bu yöntem başarısız olur. Varsayılan bir arama, özel materyallerinizin başlıklarını oturum açmamış ziyaretçilere sızdıracaktır.

Bir fitness üyelik sitesi için canlı bir arama modalı oluşturdum. Site WordPress, WooCommerce, Divi, LearnDash ve WishList Member kullanıyor.

İşte ödeme duvarınıza (paywall) saygı duyan bir arama sisteminin nasıl kurulacağı.

Mimari

Erişim duyarlı filtreleme ile birleşik bir indeks kullandım. Bunu, oturum açmamış bir kullanıcının üyelere özel bir gönderinin başlığını veya özetini asla görmemesini sağlamak için seçtim.

UI, tam ekran bir katman (overlay) açan bir ikon kullanır. Bu, mobilde yer tasarrufu sağlar ve sıkışık bir giriş çubuğundan daha temiz görünür.

Arka Uç (Backend)

Her şey, bir child theme içindeki tek bir özel REST route üzerinden çalışır.

Temel teknik kurallar:

  • Bağımlılıkları koruyun: Relevanssi gibi arama eklentileri için bir fonksiyon kontrolü kullanın. Eğer eklenti eksikse, arama sitenin bozulması yerine WordPress çekirdeğine (core) geri dönmelidir.
  • Sunucu tarafı filtreleme: Sonuçları asla JavaScript kullanarak filtrelemeyin. Bir sonucu tarayıcıda gizlerseniz, veri zaten ağ yanıtında (network response) yer alıyor demektir. DevTools kullanan herkes bunu görebilir. Veriyi, sunucu yanıtı göndermeden önce filtreleyin.
  • Önbellek hariç tutma: Arama REST route'unuzu sayfa önbelleğe almasından (page caching) hariç tutmalısınız. Eğer sonuçları önbelleğe alırsanız, bir üyenin araması bir misafire sunulabilir ve bu da özel içeriğin sızmasına neden olabilir.

Ön Uç (Frontend)

İstemci tarafında vanilla JavaScript kullanılır.

UX'in başarılı olmasını sağlayan üç şey:

  • Debounce: Bir tuş vuruşundan sonra istek göndermeden önce 250ms bekleyin. Bu, gereksiz sunucu yükünü durdurur.
  • AbortController: Kullanıcı yazmaya devam ederken önceki istekleri iptal edin. Bu, eski sonuçların yenilerinin üzerine yazılmasını önler.
  • Hata durumları: Bir fetch işlemi başarısız olursa net bir mesaj gösterin. Hiç durmayan dönen bir yükleyici (loader) kötü bir UX'tir.

Mobil Ders

Arama butonunu Divi mobil menüsüne yerleştirmeyi denedim. Tema tıklamaları engelledi (intercepted) ve butonun tıklanamaz hale gelmesine neden oldu.

Çözüm basitti: Temayla savaşmayı bırakın.

Butonu menünün içine koymak yerine, header'a bağımsız bir öğe olarak yerleştirdim. Bu, onu temanın kontrolü dışında tuttu ve dokunmayı kolaylaştırdı.

Özet

  • Erişim kontrolü sunucu tarafında gerçekleşmelidir.
  • Arama uç noktalarını (endpoints) önbelleğinizden hariç tutun.
  • İstekleri yönetmek için debounce ve AbortController kullanın.
  • XSS'i önlemek için tüm API verilerini DOM'a yerleştirmeden önce escape edin.
  • Eğer bir sayfa oluşturucu (page builder) kodunuza direnç gösteriyorsa, öğenizi içine değil, yanına yerleştirin.

Kaynak: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92