3 Cara Membuat Formulir Pencarian WordPress Kustom yang Bagus

WordPress adalah sistem manajemen konten (CMS) paling populer di dunia. Selain menjadi alat yang kuat dan sangat fleksibel, alat ini juga sangat mudah digunakan. Orang-orang tanpa pengalaman dalam desain web atau pengkodean dapat menggunakan WordPress untuk memulai situs web mereka hanya dalam hitungan menit.

Pengguna akan mengunjungi situs WordPress Anda untuk mencari konten yang mereka minati. Bilah pencarian dapat membantu mereka melakukannya. Jika situs Anda tidak memilikinya, orang akan kesulitan menemukan konten yang mereka cari. Frustrasi ini menyebabkan orang meninggalkan situs web Anda dan pergi ke tempat lain.

Itu tidak akan berhasil!

Pada artikel ini, kami akan menunjukkan cara mengintegrasikan formulir pencarian WordPress khusus ke situs web Anda.

• Apa itu Formulir Pencarian WordPress Kustom?
• #1 Terapkan Plugin
• #2 Modifikasi Kode
• #3 Gunakan CSS Kustom untuk Menata Formulir Pencarian dan Halaman Hasil

Apa itu Formulir Pencarian WordPress Kustom?

WordPress sudah memiliki fungsi pencarian bawaan di dalamnya. Namun, alat pencarian default sangat terbatas dan tidak terlalu "pintar". Itu tidak selalu menemukan konten yang ingin Anda cari.

Fungsi pencarian default WordPress cukup untuk halaman web baru atau skala kecil yang tidak memiliki banyak konten.

Namun seiring berkembangnya basis data konten Anda, menginstal alat pencarian yang lebih baik penting untuk membantu pengunjung menavigasi situs web Anda. Jika Anda menjalankan situs e-niaga, alat pencarian yang bagus bahkan lebih penting. Ini membantu mengarahkan pelanggan potensial ke produk yang tepat untuk mereka.

Anda mungkin juga ingin alat pencarian Anda menampilkan hasil dalam urutan tertentu. Misalnya, artikel atau item yang paling populer terlebih dahulu. Alat pencarian default tidak memungkinkan Anda melakukan itu. Sebagai gantinya, Anda harus mengedit algoritme pencarian secara manual.

Last but not least, alat pencarian khusus dapat disesuaikan dengan gaya untuk mencerminkan estetika atau merek situs web Anda!

Apa Fungsi get_search_form?

get_search_form mengacu pada fungsi yang menampilkan formulir pencarian di situs web Anda. Anda dapat menemukannya di tab Appearance > Widgets di panel admin WordPress Anda.

Ini mengatur widget formulir pencarian dan halaman lain di situs web Anda yang memerlukan fungsi pencarian. Tanpa fungsi ini, situs web Anda sama saja dengan tidak memiliki alat pencarian sama sekali.

Cara Menyesuaikan Formulir Pencarian di WordPress

Ada banyak pendekatan berbeda yang dapat Anda gunakan untuk menyesuaikan formulir pencarian di WordPress. Itu tergantung pada tingkat keterampilan pengkodean Anda dan berapa banyak waktu yang Anda bersedia habiskan untuk tugas ini.

#1 Terapkan Plugin

Plugin adalah cara termudah dan tercepat untuk mengaktifkan dan menjalankan formulir pencarian WordPress khusus di situs web Anda. Ivory Search, misalnya, adalah plugin gratis yang dibuat khusus untuk meningkatkan fungsi alat pencarian WordPress. Anda dapat menambah dan mengedit formulir pencarian baru dan melakukan berbagai jenis pencarian.

Plus, dengan kode pendek, Anda dapat memposisikan bilah pencarian di mana pun Anda inginkan di situs web (seperti di header, footer, bilah menu, dll.).

Ini adalah alat sederhana yang sangat kami rekomendasikan jika Anda tidak memiliki banyak pengalaman pengkodean. Meskipun tidak serbaguna seperti pengkodean alat pencarian, itu harus cukup untuk penggunaan dasar.

#2 Modifikasi Kode

Ada dua cara untuk membuat formulir pencarian dari awal langsung di dalam file inti .php situs WordPress Anda: baik dengan fungsi atau dengan template.

Dengan Fungsi

Anda dapat mengganti alat pencarian WordPress default dengan yang khusus dengan menggunakan pengait add_filter . Di file functions.php Anda, tambahkan kode berikut ke tumpukan:

 fungsi custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' .home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( 'Mencari:' ) . '</label>
<input type="text" value="' .get_search_query() .'" name="s" />
<input type="submit" value="'.esc_attr__( 'Search' ) .'" />
</div>
</bentuk>';
return $bentuk;
}

add_filter( 'get_search_form', 'custom_search_form', 40 );

Apa yang dilakukan kode ini adalah menyimpan formulir kustom Anda di dalam variabel $form , yang akan menggantikan alat pencarian WordPress default berkat pengait add_filter .

Anda dapat menyesuaikan lebih lanjut kode di atas dengan mengedit label, teks, ID, dan elemen lain dalam nilai variabel $form .

Dengan Templat

Jika Anda tidak ingin memodifikasi file functions.php , alternatifnya adalah menggunakan templat untuk formulir pencarian. Buat formulir pencarian WordPress khusus, lalu tambahkan sebagai searchform.php di direktori utama Anda. WordPress akan secara otomatis menggunakan formulir pencarian khusus daripada default.

Untuk melakukan ini, buka IDE pilihan Anda dan buat file baru. Beri nama “searchform.php” . Rekatkan kode berikut ke dalam editor:

 <?php
/* Formulir pencarian khusus */
?>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="input-group">
<input type="search" class="form-control border-0" placeholder="Search" 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>
</bentuk>

Ubah kode di atas sesuai keinginan Anda!

#3 Gunakan CSS Kustom untuk Menata Formulir Pencarian dan Halaman Hasil

Sekarang setelah fungsi pencarian khusus Anda aktif dan berjalan, bagian selanjutnya adalah menatanya. Tampilan default cukup membosankan dengan kotak teks putih dalam font Sans Serif run-of-the-mill.

Jika Anda ingin mengubahnya, taruhan terbaik Anda adalah melalui beberapa baris kode CSS.

Template kode CSS ini kompatibel dengan sebagian besar tema WordPress. Cukup salin dan tempel melalui panel admin WordPress Anda.

 .formulir pencarian {
font-family:arial;
ukuran font:16px;
latar belakang:#ace5e3;
warna: #ffffff;
perbatasan:1px solid #61c3c0;
padding:10px;
tinggi:90px;
lebar:600px;
}

.Hasil Pencarian {
font-family:arial;
ukuran font:16px;
latar belakang:#ace5e3;
warna:#000000;
perbatasan:1px solid #61c3c0;
padding:10px;
lebar:600px;
}

Ubah variabel dalam kode sesuai keinginan Anda. Anda dapat memilih font, ukuran font, warna latar belakang, batas, dan sebagainya. Jika ada elemen dalam kode yang tidak ingin Anda ubah, cukup hapus baris tersebut.

Misalnya, jika Anda tidak ingin mengubah jenis font formulir pencarian Anda, cukup hapus "font-family:arial;" garis.

Buat Formulir Pencarian WordPress Kustom Anda Sendiri Hari Ini!

Kebanyakan orang dapat bertahan dengan formulir pencarian sederhana yang dihasilkan oleh sebuah plugin. Tetapi jika Anda sedikit lebih mahir dalam pengkodean dan ingin mengintegrasikan fitur-fitur canggih ke dalam formulir pencarian situs Anda, maka template kode di atas terbukti bermanfaat.

Formulir pencarian WordPress khusus adalah fitur yang cukup sederhana, namun sangat efektif dalam membuat situs web Anda lebih ramah pengguna. Pencarian formulir berdasarkan fungsi WordPress bidang khusus dapat membantu Anda menarik lebih banyak pengunjung, mengonversinya menjadi pelanggan tetap, dan—jika Anda menjalankan situs e-niaga—menjadi pelanggan berbayar.

Anda dapat mempelajari lebih lanjut tentang menambahkan pencarian produk WooCommerce pintar di sini.

Kami harap panduan ini bermanfaat dan Anda sudah mengaktifkan dan menjalankan formulir pencarian khusus saat Anda membaca ini!