WordPress'te Kolay Arama Otomatik Önerisi - Eğitim

WordPress'te otomatik öneri ile bir arama çubuğu oluşturmak şaşırtıcı derecede kolay, hızlı ve ücretsizdir. İşte nasıl yapılacağına dair eğitimimiz.

WordPress'e Otomatik Arama eklemek için neden zaman ayırmalısınız? Her şeyden önce zamandan tasarruf edeceksiniz. Blog ziyaretçileriniz, sitenizin rahatlığında aradıkları bilgilere kolay erişim sağlayarak hayatlarını kolaylaştırdığı için onu daha çok seveceklerdir. Google'ın ve diğer bilgi odaklı arama araçlarının bu tür bir özelliği kullanmasının bir nedeni var.

Not: WordPress içindeki otomatik arama, bazen " canlı ajax araması " olarak da adlandırılabilir. Ayrıca WooCommerce, WP ile aynı veritabanını kullandığından ve ürünler yalnızca özel bir gönderi türü olduğundan, bu eğitim popüler E-ticaret eklentisi için de çalışacaktır.

Neye ihtiyacınız olacak

Bir kod parçacığı yöneticisine, kopyalayıp yapıştırma özelliğine ve Canlı Arama eklentisine (depoda ücretsiz) ihtiyacınız olacak.

Şuna dikkat etmeliyiz: <?php get_search_form() ?> kullanan herhangi bir form, bu çözümle otomatik olarak çalışır ve sonraki iki adıma ihtiyaç duymaz. Bu rotayı seçerseniz, sadece bu bölüme atlayın.

Ancak pek çok tema, sayfa oluşturucu ve diğer araçlar için durum böyle değildir. Elementor ve Oxygen, WordPress tarafından sunulan bu yerleşik formu kullanmaz (böylece kullanıcıları boyut, yazı tipi ve renk açısından bunları kolayca biçimlendirebilir). Bu nedenle, Elementor, Oxygen, diğer çoğu sayfa oluşturucu ve birçok temada otomatik tamamlama özelliğine sahip bir arama çubuğu almak için aşağıda özetlenen adımları izleyin.

Yukarıdaki resimde görüldüğü gibi PHP aracılığıyla herhangi bir CSS olmadan ekleseniz bile, stilsiz bir arama formu ile kalacaksınız. Ancak - tema dosyalarınıza/şablonlarınıza erişiminiz varsa, bu, sitenizde bir arama formu almanın uygun bir yoludur . Bu, standart WordPress işaretlemesini kullanır, böylece aşağıdaki CSS'yi ayarlayabilirsiniz.

Stili ve sınıfları düzenleyebildiğiniz, özel öğeler ekleyebildiğiniz, kullanıcıları özel arama uç noktalarına gönderebildiğiniz ve daha pek çok şey için aşağıdaki yöntemi tercih ediyoruz - bu şeyi sıfırdan oluşturuyorsunuz.

PHP

İlk olarak, bu arama formunu oluşturalım. Ek girdiler, CSS sınıfları, yer tutucular ve daha fazlasını ekleyebilirsiniz. Kodu olduğu gibi tutarsanız, ilişkili CSS HTML ile birlikte çalışır. Bir web sitesini nasıl oluşturduğunuza bağlı olarak, bunu, otomatik tamamlama arama çubuğunun bitmesini VEYA 2. rotaya gitmesini istediğiniz şablonun gerçek yapısına yapıştırabilirsiniz.

Route 2, muhtemelen çoğu site sahibinin kullanacağı şeydir. Bu ham HTML ve PHP'yi kullanmak yerine, onu WordPress ile çok daha uyumlu hale getiren bir kısa koda dönüştüreceğiz. Bu şekilde, onu Gutenberg'e, istediğiniz herhangi bir sayfa oluşturucuya ve daha fazlasına yapıştırabilirsiniz. Bunu yapmanın birkaç yolu var; kolay ama ücretli bir yöntemi ve daha zor ama daha kolay bir yöntemi detaylandıracağız.

Ücretli Yol (kolay)

WordPress web sitenizdeki kodu yönetmeyi kolaylaştıran premium bir WordPress eklentisi olan Scripts Orginizer'ı alın (inceleme). Yükledikten sonra, kenar çubuğu yönetici menüsünde bulunan Komut Dosyaları Düzenleyici -> İçe Aktar'a gidin.

Bu dosyayı indirin (aşağıda belirtilen her şeyin dışa aktarımı), içe aktarın ve kısa kodu almaya atlayın.

Özel CSS bölümünde, SCORG kısmi bölümüne atlayın, bu JSON'u indirin, içe aktarın, canlı arama eklentisini yükleyin ve çalışır durumda olun.

Manuel adımları da takip edebilirsiniz. Başlamak için yeni bir giriş oluşturun:

Şimdi, aşağıdakileri çalıştırın:

1. bir başlık ver
2. Kod Bloğu Anahtarını Etkinleştir: Açık
3. Komut Dosyası Konumu: Kısa Kod
4. PHP/HTML kodunu yukarıdan kopyalayın/yapıştırın.
5. Diğer tüm ayarları varsayılan olarak tutun ve yayınla'yı tıklayın.

İşiniz bittiğinde böyle görünmelidir ️.

Kod düzenleyicinin sol alt kısmındaki komut dosyası girişinde veya kod parçacığı listeleme sayfasında gösterilecek olan kısa kodu alın:

Bu kısa kodu alın ve Gutenberg, TINYMCE, Elementor Kısa Kod Widget'ı veya herhangi bir kısa koda özel yöntemle istediğiniz yere ekleyin.

Şimdi ikinci adıma gidin ve CSS'yi sitenize ekleyin.

Serbest Yol (biraz daha zor)

Ücretsiz Kod Parçacıkları eklentisini yükleyin. Aşağıdaki kod parçacığını indirin ve web sitenize aktarın:

Bu dosya ayrıca Gelişmiş Komut Dosyalarına (esas olarak Kod Parçacıklarının premium, daha kolay bir sürümü) ve hatta Komut Dosyaları Düzenleyicisine aktarılabilir.

Ardından, ön uçunuzda aşağıdaki kısa kodu kullanarak aramayı ekleyin:

Aramayı nasıl eklediğinize bakılmaksızın, bu bölümdeki temel HTML ve PHP'yi kullanırsanız, sonraki bölümdeki CSS ona güzel bir stil verecektir.

CSS

Yapıyı ve sınıfları olduğu gibi tutarsanız, otomatik tamamlama özelliğine sahip iyi tasarlanmış bir arama formu elde etmek için bu özel CSS'yi web sitenize eklemeniz yeterlidir.

Not: Bu kod, <?php get_search_form() ?> arama çubuğu ekleme yöntemiyle uyumlu değildir. Ancak, temanıza bağlı olarak, bu şekilde bir arama formu eklemek, temanızın stillerini devralacağı anlamına gelir.

Bu CSS'yi, Görünüm -> Özelleştir -> Ek CSS aracılığıyla veya SCORG kullanarak sayfa oluşturucu yardımcı programınıza ekleyebilirsiniz.

SCORG'u öneriyoruz. Yeni bir kısmi CSS ekleyin, kodu yapıştırın ve yayınlayın (veya bu dosyayı içe aktarın). Önceki adımda oluşturulan Kısa Kod Parçacığına gidin, "SCSS Partials Manager" bölümüne gidin ve show öğesini seçin, o bölümün başlığını arayın ve seçin. Güncelle onu. Şimdi, kısa kodu nereye yerleştirirseniz yerleştirin, CSS de yüklenecektir. Global olarak değil , yalnızca kısa kodun bulunduğu yere yüklenir, bu performans için harikadır.

Şimdi, tek ihtiyacımız olan Sihirli Sos.

Sihirli Sos (SearchWP Live Ajax Search)

Bu, SearchWP eklenti paketinin arkasındaki ekip tarafından yapılan inanılmaz bir eklentidir. Ücretsizdir ve WordPress deposundadır. Karmaşık kod yapıları yerine, bunu kurabilir ve bir dakikadan kısa sürede canlı bir aramayı başlatıp çalıştırabiliriz.

Kurulduktan sonra, kısa kod, ham kod veya yerel WordPress PHP eklentisini kullanan bir arama formuna eklediğiniz arama formunu tıklayın ve aşağıdaki davranışı görmelisiniz:

İşte bu, işiniz bitti! AJAX teknolojisini kullanarak kullanıcı aramalarını otomatik olarak tamamlayacak WordPress web sitenizde bir arama formunun keyfini çıkarın.

WordPress'te Bu Canlı Aramayı Genişletin

SearchWP Live Ajax Search, adından da anlaşılacağı gibi yapmanıza izin veren ücretsiz bir eklentidir: Live Ajax Search ekleyin. SearchWP ve ilgili uzantıların premium koleksiyonuyla veya onsuz çalışacaktır. SearchWP kullanmıyorsanız, standart WP arama motorunu kullanacaktır.

Standart WordPress araması, bir gönderinin başlığına ve ardından içeriğe bakarak alaka düzeyine göre (geçmişte - vahşi değildi!) sıralar. Ama bu hala Elementor ve orada daha iyi seçenekler var. Aslında, burada okuyabileceğiniz daha iyi alternatifleri tartışan başka bir makale yazdık: WordPress İçin Daha İyi Arama Çözümleri

Ancak, Canlı Arama, Arama WP tarafından yapıldığından, kuruluysa otomatik olarak o motoru kullanır. Arama WP, anahtar kelime köklendirme, daha doğru eşleşmeler, belgelerin dizine eklenmesi, WooCommerce desteği, algoritma özelleştirmesi ve daha fazlasını içerdiğinden üstündür. Daha da iyi arama sonuçları sunmak için canlı aramanızı oluşturmanızı ve premium eklentinin diğer özelliklerini kullanmanızı şiddetle öneririz.

SearchWP'ye bir alternatif arıyorsanız, Ivory Search benzer özellikler sunan daha düşük maliyetli bir eklenti ve bir LTD! Bu Canlı Arama (WP Arama Otomatik Tamamlama) eklentisi, Ivory Search ile kutudan çıktığı gibi çalışmalıdır. Diğer arama motorlarını da kullanabilirsiniz; Dokümanlara göre, yapmanız gereken tek şey:

Form input şu özniteliği ekleyin: data-swpengine="supplemental" , 'supplemental' yerine istediğiniz arama motoru adını koyun.

Liste SSS'leri

Oksijenle Daha da Kolay

Oxygen Builder'ı sevdiğimiz bir sır değil, bu yüzden bu araçla AJAX Canlı Arama (otomatik tamamlama) eklemenin daha da kolay bir yolu var.

Not: Bu öğretici ve eklenti, Oksijen Arama Formu Widget'ı ile çalışmayacaktır , çünkü önceki bölümde belirtildiği gibi, standart PHP bir arama formu ekleme yöntemini kullanmaz ve gerekli veri özniteliğini içermez.

Kolay adımlar:

1. Arama formunu istediğiniz yere kod bloğu ekleyin, aşağıda bulunan PHP'ye yapıştırın (veya kod bloğunu otomatik olarak yapacak olan Hidrojen kısa kodlarını yapıştırın).
2. Aşağıda bulunan CSS'yi Oxygen Global CSS'ye ekleyin, istediğiniz gibi değiştirin (esas olarak renkler).
3. Repo'da ücretsiz Live Search eklentisini kurun ve etkinleştirin.
4. Canlı aramanın ihtişamının tadını çıkarın.

Sayfa Oluşturucu ile PHP'yi doğrudan şablonlara ve sayfalara yerleştirebildiğimiz için, aşağıdaki PHP'yi bir kod bloğuna yapıştırabilir, genel ayarlar aracılığıyla CSS'yi ekleyebilir ve bir gece olarak adlandırabiliriz (eklediğinizden emin olun). canlı arama eklentisi, burada bulundu).

Ayrıca aşağıdaki Hidrojen Kısa Kodlarını da kopyalayabilir/yapıştırabilirsiniz (Hidrojen Paketiniz varsa (burada gözden geçirilir)).

Basitçe kopyala'yı tıklayın, Hidrojen'i yükleyin ve sayfanıza yapıştırın. CSS, kod bloğuna dahil edilecektir.

Son olarak, CSS'yi kullanın (yukarıdan alınmıştır):

Bu CSS'yi Oxygen'in Global CSS'si aracılığıyla eklemenizi öneririz.

İşte nihai sonucun nasıl görünmesi gerektiği:

Bu parçayı yeniden kullanmak isterseniz, onu yeniden kullanılabilir bir parça haline de getirebilirsiniz. Canlı Arama eklentisini yüklediğiniz sürece, ziyaretçileriniz için güzel bir AJAX arama çubuğu ile gitmekte fayda var.

<?php get_search_form() ?>

Veya gelişmiş özelleştirmeye ihtiyacınız yoksa (WP'nin temel aramasından daha iyi arama çözümleri dahil ancak bunlarla sınırlı olmamak üzere) yukarıdaki kodu kullanın. Elbette, bu sayfa oluşturucuda kısa kodlar kullanabildiğimiz için, web sitenizin ön ucunda kullanmak için kısa bir kod oluşturma konusunda size yol gösterecek olan bu öğreticinin üst yarısını da takip edebilirsiniz.

Çözüm

2022'de, kullanıcılarınıza harika bir deneyim ve istedikleri içeriğe erişmek için ihtiyaç duydukları araçları sunmak her zamankinden daha önemli. Bu makale, WordPress canlı Ajax aramasını bir web sitesine 15 dakikadan kısa bir sürede yüklemenin çeşitli yöntemlerini sundu.

Burada özetlenen birden çok yöntem vardır, böylece onu tema şablonu dosyalarında kullanmayı seçebilir, sayfa oluşturucularla uyumlu kısa kodlar oluşturabilir ve daha da fazla yöntem kullanabilirsiniz. Canlı arama işlevini elde etmek için kullanılan eklenti tamamen ücretsiz ve iyi tasarlanmış.

Sorusu olan? Bunları aşağıdaki yorum bölümünde bırakmaktan çekinmeyin.