Canlı Arama Eklemenin En Kolay Yolu

Yayınlanan: 2023-04-21


En iyi AJAX arama WordPress eklentisini mi arıyorsunuz?

AJAX destekli canlı aramayı WordPress'e eklemek, sitenizin kullanıcı deneyimini (UX) iyileştirmenin ve içerik keşfedilebilirliğini artırmanın harika bir yoludur.

Bu gönderide, tamamen kodsuz bir çözüm kullanarak WordPress'te AJAX aramasını nasıl kuracağınızı adım adım öğreneceksiniz.

Aslında, sitenizin AJAX arama işlevinin nasıl çalıştığını hassaslaştırmak için işlevlere erişmeye devam ederken, yalnızca birkaç dakika içinde çalışmaya başlayabilirsiniz.

Tek yapmanız gereken:

  1. Otter Blocks eklentisini kurun.
  2. AJAX WordPress arama kutunuzun görünmesini istediğiniz yere Arama bloğunu ekleyin ve Canlı Arama geçişini etkinleştirin.
  3. AJAX canlı arama işlevini, sayfaları değil yalnızca blog gönderilerini arayacak şekilde yapılandırmak gibi gerektiği gibi özelleştirin.
Otter Bloklarında canlı arama için Arama Kutusu.

Doğrudan öğreticiye atlamak istiyorsanız, bu atlama bağlantısını tıklayabilirsiniz.

Aksi takdirde, AJAX aramanın nasıl çalıştığına ve AJAX arama WordPress işlevini kurmanın farklı yollarından bazılarına hızlı bir genel bakışla başlayacağız.

WordPress için AJAX araması nedir?

Muhtemelen günlük olarak canlı arama işlevini kullanacaksınız. Örneğin, tüm büyük arama motorları ve YouTube gibi video siteleri bu tür bir özellik sağlar.

Arama kutusuna yazmaya başlarsınız ve anında önerilen sorguların (veya önerilen sonuçların) bir listesini görürsünüz; sayfa yüklemeye gerek yoktur.

YouTube'un canlı arama işlevini kullanarak arama.

WordPress'in kendi arama çubuğu olsa da varsayılan olarak AJAX kullanmaz. Bunun yerine, kullanıcılar kutuya bir arama terimi girer, enter'a basar ve sonuçların olduğu yeni bir sayfa yüklenir.

WordPress.org web sitesindeki senkronize arama işlevi.

Sitenize canlı arama eklemek için bir eklentinin yardımına ihtiyacınız olacak, bu yazının konusu da bu.

WordPress'te canlı AJAX aramasının faydaları

UX'i geliştiren sunabileceğiniz her şey sitenize değer katacaktır. Ancak, WordPress için canlı AJAX araması, kullanıcılarınıza özel bir şey verebilir:

  • Kullanıcıların ihtiyaçlarını "kendi kendilerine karşılamaları" için bir yol sağlayabilirsiniz. Tüm sitenizi aramanın ve doğru sayfayı bulmanın hızlı bir yolunu bulacaklar.
  • Etkileşimli öğeler, siteniz ve kullanıcılar arasında daha güçlü bir bağlantı sağlayabilir. Bunun nedeni, alakalı arama sonuçlarını daha hızlı ve fazladan düğme tıklamasına gerek kalmadan sağlayabilmenizdir.
  • Canlı AJAX aramasının başka HTTP istekleri yapması veya başka sayfaları yüklemesi gerekmediğinden, sayfa yükleme sürelerini de minimumda tutabilirsiniz.

Canlı arama için manuel kodlama çözümü neden en iyisi olmayabilir?

AJAX'ın JavaScript kullandığı göz önüne alındığında, programlama dilini kullanarak "kendi çözümünüzü oluşturmayı" düşünebilirsiniz.

Bu teoride iyi bir fikir, ancak WordPress'e canlı AJAX araması eklemek için en iyi yöntem olmayacak. İşte nedeni:

  • İlk olarak, yalnızca becerileriniz kadar iyi bir çözüm oluşturabilirsiniz. Uzman düzeyinde JavaScript bilginiz yoksa, bu sonuçlarda görünecektir.
  • Ek olarak, WordPress'in dosya yapısı, şablon yapısı ve çok daha fazlası hakkında da bilgi sahibi olmanız gerekir. WordPress'in çarkını oluşturan birçok çark var.
  • Canlı bir arama çözümünü kodlamak için gerekli becerilere sahip olsanız bile, onu geliştirmek ve uygulamak için zamana ve paraya da ihtiyacınız olacak. Bunu başarmak zor olabilir, özellikle de geliştirme birincil işiniz değilse.
  • Manuel çözümünüzde sorun gidermeniz gerekirse bu, zamanınızı, paranızı ve kaynaklarınızı daha fazla tüketebilir. Çiğneyebileceğinden daha fazlasını ısırıyor olabilirsin.

Bunun yerine, WordPress'te doğru işlevselliği uygulamanın daha iyi bir yolu var: eklentiler. Şimdi bunun nasıl çalıştığına bir göz atalım.

Bunun yerine bir AJAX arama WordPress eklentisi kullanın

Çoğu insan için bir AJAX arama WordPress eklentisi kullanmak çok daha iyi bir seçenektir.

Aralarından seçim yapabileceğiniz çok sayıda AJAX arama WordPress eklentisi olsa da, hepsi eşit yaratılmamıştır. Örneğin, stil seçenekleri veya hangi içeriğin aranacağını kontrol etme söz konusu olduğunda bazı eklentiler sınırlıdır.

Bu nedenle, bu eğitim için Otter Blocks eklentisini kullanacağız.

Adından da anlaşılacağı gibi, Otter Blocks, yerel WordPress Blok Düzenleyicisi için bir öğeler koleksiyonudur.

AJAX arama işlevselliği açısından en ilgili özellik Arama bloğudur.

Hangi gönderi türlerinde arama yapacağınızı seçmenize ve arama kutunuzun tasarımını tamamen özelleştirmenize olanak tanır. Yazılar, sayfalar, kenar çubukları ve daha fazlası dahil olmak üzere sitenizin herhangi bir yerine ekleyebilirsiniz.

AJAX arama WordPress işlevselliğinin ötesinde, Otter Blocks size mizanpajlarınızı ve tasarımınızı renklendirmek için birkaç ekstra yol sunar:

  • Varsayılan olarak alacağınızdan daha fazla özelleştirme düzeyine sahip başlıklar ekleyebilirsiniz.
  • Gelişmiş özelleştirme ve altı sütunluk alan içeren duyarlı bir bölüm oluşturma seçeneği vardır.
  • Lottie efektleri ve hareketli kartlar gibi çarpıcı animasyonlar ekleyebileceksiniz.
  • Siteniz üzerinden ürün satıyorsanız, Otter Blocks fiyatlandırma tabloları, "sepete ekle" düğmelerini uygulama yeteneği, çalışma saatleri ve çok daha fazlasını içerir.

Aslında Otter Blocks, sunulan tüm Bloklar için ek işlevsellik sağlar - yerel olanlar bile. Örneğin, tipik Block Editor arayüzünden görünürlük koşullarını, özel CSS'yi ve daha fazlasını ayarlayabilirsiniz.

WordPress'e canlı AJAX araması eklemek için Otter Blocks nasıl kullanılır?

WordPress'e canlı AJAX araması eklemek için Otter Blocks'u ayarlamak için yalnızca birkaç adıma ihtiyacınız olacak. Kurulum işlemi ile başlayalım:

  1. Otter Blocks'u kurun ve etkinleştirin
  2. Otter Blocks ayarlarında WordPress için canlı AJAX aramasını etkinleştirin
  3. Sitenizin ön ucundaki arama deneyimini hassaslaştırmak için ayarları değiştirin

1. Su Samuru Bloklarını kurun ve etkinleştirin

WordPress panosundaki WordPress Eklenti Dizini ekranı.

Öncelikle, Otter Blocks'u yüklemeniz ve web siteniz için etkinleştirmeniz gerekir. Bunu yapmanın pek çok yolu var, ancak ThemeIsle blogundaki diğer makalemizde bulunanları tekrarlayacağız.

Bu size Otter Blocks'un hem ücretsiz hem de premium sürümlerini nasıl kuracağınızı gösterecektir. Ancak, bu gönderi için, size canlı arama işlevi sağladığı için premium sürüme ihtiyacınız olacak.

2. Otter Blocks ayarlarında WordPress için canlı AJAX aramasını etkinleştirin

Eklentiyi yükledikten sonra, Otter Blocks'tan Arama bloğunu eklemek için blok yerleştiriciyi kullanın.

Yerleşik Blok Düzenleyici işlevini kullanarak Ajax Arama WordPress Bloğunu bulma.

Bunu yaptıktan sonra, sayfa düzeninize bir form alanı ve bir düğme ekleyecektir.

Bu, temel arama işlevini uygular, ancak bu, WordPress'te canlı AJAX araması değildir.

Varsayılan kurulumunda, tipik WordPress aramasının yaptığı gibi davranacaktır.

AJAX arama WordPress özelliğini etkinleştirmek için sağ taraftaki kenar çubuğunda Canlı Aramayı Etkinleştir geçişini açın:

Otter Blocks içindeki kenar çubuğundaki Live AJAX Search WordPress işlevi.

3. Sitenizin ön ucundaki arama deneyimini iyileştirmek için ayarları değiştirin

Sitenizde canlı arama işlevine sahip olduğunuzda, onu çeşitli şekillerde hassaslaştırabilirsiniz.

Tabii ki, bir dizi kozmetik ve UX seçeneği var.

Örneğin, arama kutusu için bir etiket kullanıp kullanmadığınızdan düğme konumunu değiştirebilir ve arama bölümü için renkleri, animasyonları ve kenarlıkları değiştirebilirsiniz:

Kenar çubuğunda ek özelleştirme seçenekleriyle Su Samuru Blokları arama bölümü.

Oradan, hangi gönderi türlerinde arama yapacağınızı seçerek aramaya sitenizde nereye bakılacağının sınırlarını da verebilirsiniz.

Bunun için sağ kenar çubuğundaki Arama Kutusunu kullanacaksınız:

Otter Bloklarında canlı arama için Arama Kutusu.

Bu, aramanın çalışmasını istediğiniz yere "varlıklar" eklemenizi sağlar.

Örneğin, yalnızca gönderinizin içeriğinde veya mağazanızın ürünleri arasında arama yapmayı seçebilirsiniz.

Bu alanı boş bırakırsanız, Otter Blocks sitenizin tüm içeriğini arayacaktır.

AJAX arama WordPress işlevini bugün kurun

Web sitenizde daha fazla etkileşim sağlayabilirseniz, bu her yerde daha iyi bir UX'e dönüşebilir. WordPress'te canlı AJAX araması, kullanıcılara ihtiyaç duydukları şeyi gerçek zamanlı olarak bulma olanağı sunmanın harika bir yoludur.

Ancak, WordPress bunu varsayılan olarak sunmaz. Bunun yerine, bunu sitenize eklemek için Otter Blocks'u kullanabilirsiniz. Herhangi bir kod içermez ve canlı AJAX aramasından çok daha fazla işlevselliğe sahip olursunuz.

Otter Blocks ücretsiz bir eklenti olsa da premium sürüm, diğer seçeneklerin yanı sıra WordPress'te canlı AJAX araması kurma olanağı sağlar.

WordPress'te AJAX canlı aramanın nasıl kurulacağı hakkında hala sorularınız mı var? Aşağıdaki yorumlarda bize sorun!