Harika Bir Özel WordPress Arama Formu Oluşturmanın 3 Yolu

Yayınlanan: 2022-11-23

WordPress, dünyanın en popüler içerik yönetim sistemidir (CMS). Güçlü ve süper esnek bir araç olmasının yanı sıra kullanımı da son derece kolaydır. Web tasarımı veya kodlama deneyimi olmayan kişiler, web sitelerini yalnızca dakikalar içinde başlatmak için WordPress'i kullanabilir.

Kullanıcılar, ilgilendikleri içeriği aramak için WordPress sitenizi ziyaret edecekler. Bir arama çubuğu, bunu yapmalarına yardımcı olabilir. Sitenizde yoksa, insanların aradıkları içeriği bulması zor olacaktır. Bu hayal kırıklığı, insanların web sitenizden ayrılmasına ve başka bir yere gitmesine neden olur.

Bu olmaz!

Bu yazıda, size özel bir WordPress arama formunu web sitenize nasıl entegre edeceğinizi göstereceğiz.

  • Özel WordPress Arama Formu Nedir?
  • #1 Bir Eklenti Uygulayın
  • #2 Kodu Değiştir
  • #3 Arama Formu ve Sonuçlar Sayfasına Stil Vermek için Özel CSS Kullanın

Özel WordPress Arama Formu Nedir?

WordPress zaten yerleşik bir yerel arama işlevine sahiptir. Ancak, varsayılan arama aracı oldukça sınırlıdır ve çok “akıllı” değildir. Aramak istediğiniz içeriği her zaman bulamıyor.

Çok fazla içeriği olmayan yeni veya küçük ölçekli web sayfaları için varsayılan WordPress arama işlevi yeterlidir.

Ancak içerik veritabanınız büyüdükçe, ziyaretçilerin web sitenizde gezinmesine yardımcı olmak için daha iyi bir arama aracı kurmak önemlidir. Bir e-ticaret sitesi işletiyorsanız, iyi bir arama aracı daha da önemlidir. Potansiyel müşterilerin kendileri için doğru olan ürünlere yönlendirilmesine yardımcı olur.

Arama aracınızın sonuçları belirli bir sırada göstermesini de isteyebilirsiniz. Örneğin, en popüler makaleler veya öğeler önce. Varsayılan arama aracı bunu yapmanıza izin vermez. Bunun yerine, arama algoritmasını manuel olarak düzenlemeniz gerekecektir.

Son olarak, özel bir arama aracı web sitenizin estetiğini veya markasını yansıtacak şekilde stilize edilebilir!

pfo-özel-wordpress-arama-formu-örnek

get_search_form İşlevi Nedir?

get_search_form , web sitenizdeki arama formunu görüntüleyen bir işlevi ifade eder. Bunu, WordPress yönetici panelinizdeki Görünüm > Widget'lar sekmesinde bulabilirsiniz.

Arama formu widget'ını ve web sitenizdeki bir arama işlevine ihtiyaç duyan diğer tüm sayfaları yönetir. Bu işlev olmadan, web siteniz bir arama aracından tamamen yoksun olmak kadar iyidir.

WordPress'te Arama Formunu Özelleştirme

WordPress'te arama formunu özelleştirmek için kullanabileceğiniz birçok farklı yaklaşım vardır. Bu, kodlama beceri seviyenize ve bu görev için ne kadar zaman harcamak istediğinize bağlıdır.

#1 Bir Eklenti Uygulayın

Eklenti, özel bir WordPress arama formunu web sitenizde çalışır duruma getirmenin en kolay ve en hızlı yoludur. Örneğin Ivory Search, WordPress arama aracının işlevini geliştirmek için özel olarak oluşturulmuş ücretsiz bir eklentidir. Yeni arama formları ekleyebilir, düzenleyebilir ve farklı arama türleri gerçekleştirebilirsiniz.

Ayrıca, kısa kodlarla arama çubuğunu web sitesinde istediğiniz yere konumlandırabilirsiniz (üstbilgi, altbilgi, menü çubuğu vb.).

pfo-fildişi-arama-eklentisi

Çok fazla kodlama deneyiminiz yoksa şiddetle tavsiye ettiğimiz basit bir araçtır. Bir arama aracını kodlamak kadar çok yönlü olmasa da, temel kullanım için yeterli olmalıdır.

#2 Kodu Değiştir

WordPress sitenizin .php çekirdek dosyalarının içinde sıfırdan bir arama formu oluşturmanın iki yolu vardır: bir işlevle veya bir şablonla.

Fonksiyonlu

Add_filter kancasını kullanarak varsayılan WordPress arama aracını özel bir araçla değiştirebilirsiniz. functions.php dosyanızda, yığına aşağıdaki kodu ekleyin:

 işlev custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="özel-form"><label class="screen-reader-text" for="s">' . __( 'Arama:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'.esc_attr__( 'Ara' ) .'" />
</div>
</form>';
dönüş $formu;
}

add_filter('get_search_form', 'özel_arama_formu', 40);

Bu kodun yaptığı, özel formunuzu add_filter kancası sayesinde varsayılan WordPress arama aracının yerini alacak olan $form değişkeninde depolamaktır.

$form değişkeninin değerindeki etiketleri, metinleri, kimlikleri ve diğer öğeleri düzenleyerek yukarıdaki kodu daha da özelleştirebilirsiniz.

Şablonlu

functions.php dosyasını değiştirecek durumda değilseniz, arama formu için bir şablon kullanmak da bir alternatiftir. Özel bir WordPress arama formu oluşturun, ardından ana dizininize searchform.php olarak ekleyin. WordPress otomatik olarak varsayılan yerine özel arama formunu kullanacaktır.

Bunu yapmak için, tercih ettiğiniz IDE'yi açın ve yeni bir dosya oluşturun. "searchform.php" olarak adlandırın. Aşağıdaki kodu düzenleyiciye yapıştırın:

 <?php
/* Özel arama formu */
?>
<form role="search" method="get" action="<?php echo esc_url(home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="giriş grubu">
<input type="search" class="form-control border-0" placeholder="Ara" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
</div>
</form>

Yukarıdaki kodu tercihinize göre değiştirin!

#3 Arama Formu ve Sonuçlar Sayfasına Stil Vermek için Özel CSS Kullanın

Artık özel arama işlevinizi hazır ve çalışır hale getirdiğinize göre, sıradaki kısım onu ​​biçimlendirmek. Varsayılan görünüm, sıradan Sans Serif yazı tiplerindeki beyaz metin kutularıyla oldukça sıkıcı.

Bunu değiştirmek istiyorsanız, yapabileceğiniz en iyi şey birkaç CSS kodu satırıdır.

Bu CSS kodu şablonu, WordPress temalarının büyük çoğunluğuyla uyumludur. WordPress yönetici paneliniz aracılığıyla kopyalayıp yapıştırmanız yeterlidir.

 .Arama Formu {
yazı tipi ailesi: arial;
yazı tipi boyutu: 16px;
arkaplan:#ace5e3;
renk:#ffffff;
kenarlık:1px katı #61c3c0;
dolgu: 10 piksel;
yükseklik:90 piksel;
genişlik:600 piksel;
}

.Arama Sonuçları {
yazı tipi ailesi:arial;
yazı tipi boyutu: 16px;
arkaplan:#ace5e3;
renk:#000000;
kenarlık:1px katı #61c3c0;
dolgu: 10 piksel;
genişlik:600 piksel;
}

Kod içindeki değişkenleri beğeninize göre değiştirin. Yazı tipini, yazı tipi boyutunu, arka plan rengini, kenarlığı vb. seçebilirsiniz. Kodda değiştirmek istemediğiniz herhangi bir öğe varsa, o satırı silin.

Örneğin, arama formunuzun yazı tipi ailesini değiştirmek istemiyorsanız, “font-family:arial;” ifadesini silin. astar.

Bugün Kendi Özel WordPress Arama Formunuzu Oluşturun!

Çoğu kişi, bir eklenti tarafından oluşturulan basit bir arama formuyla idare edebilir. Ancak, kodlama konusunda biraz daha ustaysanız ve gelişmiş özellikleri sitenizin arama formuna entegre etmek istiyorsanız, yukarıdaki kod şablonları yararlı olabilir.

Özel bir WordPress arama formu, oldukça basit bir özelliktir, ancak web sitenizi daha kullanıcı dostu hale getirmede süper etkilidir. Özel alan WordPress işlevine göre bir form araması, daha fazla ziyaretçi çekmenize, onları müdavimlere ve - bir e-ticaret sitesi işletiyorsanız - ücretli müşterilere dönüştürmenize yardımcı olabilir.

Burada akıllı WooCommerce ürün araması ekleme hakkında daha fazla bilgi edinebilirsiniz.

Bu kılavuzun yararlı olduğunu ve bunu okuduğunuzda özel arama formunuzu zaten hazır ve çalışır hale getirmiş olacağınızı umuyoruz!