Saran Otomatis Pencarian Mudah di WordPress - Tutorial

Diterbitkan: 2022-04-10

Membuat bilah pencarian dengan saran otomatis di WordPress ternyata sangat mudah, cepat, dan gratis. Berikut tutorial kami tentang cara melakukannya.

Mengapa Anda harus meluangkan waktu untuk menambahkan Pencarian Otomatis ke WordPress? Pertama-tama, Anda akan menghemat waktu. Pengunjung blog Anda akan lebih menyukainya karena membuat hidup mereka lebih mudah dengan menyediakan akses mudah ke informasi yang mereka cari dalam kenyamanan situs Anda. Ada alasan mengapa Google dan alat pencarian berorientasi informasi lainnya menggunakan fitur jenis ini.

Catatan: Pencarian otomatis di dalam WordPress terkadang juga disebut sebagai " pencarian ajax langsung ". Juga, karena WooCommerce menggunakan database yang sama dengan WP, dan produk hanyalah jenis posting khusus, tutorial ini juga akan berfungsi untuk plugin E-niaga yang populer.

Apa yang Anda Butuhkan

Anda memerlukan pengelola cuplikan kode, kemampuan untuk menyalin dan menempel, dan plugin Pencarian Langsung (gratis di repo).

Kita harus memperhatikan hal berikut: formulir apa pun yang menggunakan <?php get_search_form() ?> , akan secara otomatis bekerja dengan solusi ini, dan tidak memerlukan dua langkah berikutnya. Lewati saja ke bagian ini jika Anda memilih rute itu.

Namun, ini tidak berlaku untuk banyak tema, pembuat halaman, dan alat lainnya. Elementor dan Oxygen tidak menggunakan bentuk bawaan yang ditawarkan oleh WordPress ini (sehingga penggunanya dapat dengan mudah menatanya dalam hal ukuran, font, dan warna). Jadi, untuk mendapatkan bilah pencarian dengan pelengkapan otomatis di Elementor, Oxygen, sebagian besar pembuat halaman lainnya, dan banyak tema, ikuti langkah-langkah yang diuraikan di bawah ini.

Bahkan jika Anda menambahkannya melalui PHP, seperti yang digambarkan di atas, tanpa CSS apa pun, Anda akan dibiarkan dengan formulir pencarian tanpa gaya. Namun - jika Anda memiliki akses ke file/templat tema Anda, ini adalah cara yang layak untuk mendapatkan formulir pencarian di situs Anda. Ini akan menggunakan markup WordPress standar, sehingga Anda dapat menyesuaikan CSS di bawah ini.

Kami lebih suka metode berikut, karena Anda dapat mengedit gaya dan kelas, menambahkan elemen khusus, mengirim pengguna ke titik akhir pencarian khusus, dan banyak lagi - Anda membangun hal ini dari awal.

PHP

Pertama, mari kita buat formulir pencarian ini. Anda dapat menambahkan input tambahan, kelas CSS, placeholder, dan banyak lagi. Jika Anda menyimpan kode persis seperti apa adanya, CSS terkait akan bekerja bersama HTML. Bergantung pada bagaimana Anda membuat situs web, Anda cukup menempelkannya ke struktur sebenarnya dari template tempat Anda ingin bilah pencarian pelengkapan otomatis berakhir ATAU pergi ke rute 2.

Rute 2 mungkin yang akan digunakan sebagian besar pemilik situs. Alih-alih menggunakan HTML dan PHP mentah ini, kita akan mengubahnya menjadi kode pendek yang membuatnya jauh lebih kompatibel dengan WordPress. Dengan cara ini, Anda dapat menempelkannya ke Gutenberg, pembuat halaman apa pun yang Anda inginkan, dan banyak lagi. Ada beberapa cara untuk melakukan ini; kami akan merinci metode yang mudah tetapi berbayar, dan metode yang lebih sulit, tetapi lebih mudah.

Cara Berbayar (mudah)

Ambil Scripts Orginizer, plugin WordPress premium yang memudahkan pengelolaan kode di situs WordPress Anda (ulasan). Setelah menginstal, buka Script Organizer -> Impor, temukan di menu admin bilah sisi.

Unduh file ini (ekspor semua yang disebutkan di bawah), impor, dan lewati untuk mengambil kode pendek.

Impor, buka Script Organizer -> Blok Kode, dan salin kode pendek. Rekatkan di frontend tempat Anda ingin formulir pencarian pelengkapan otomatis, dan lewati ke bagian CSS khusus (klik untuk melompat ke sana).

Setelah berada di bagian CSS khusus, lewati ke bagian parsial SCORG, unduh JSON itu, impor, instal plugin pencarian langsung, dan jalankan.

Anda juga dapat mengikuti langkah-langkah manual. Untuk memulai, buat entri baru:

Sekarang, jalankan melalui yang berikut ini:

Beri judul
Aktifkan Sakelar Blok Kode: Aktif
Lokasi Skrip: Kode Pendek
Copy/Paste kode PHP/HTML dari atas.
Biarkan semua pengaturan lainnya tetap default, dan klik terbitkan

Seharusnya terlihat seperti ini setelah Anda selesai melakukannya ️.

Ambil kode pendek yang akan ditampilkan dalam entri skrip di kiri bawah editor kode, atau di halaman daftar cuplikan kode:

Ambil kode pendek ini dan masukkan di mana saja dengan Gutenberg, TINYMCE, Widget Kode Pendek Elementor, atau metode khusus kode pendek lainnya.

Sekarang menuju ke langkah kedua, dan tambahkan CSS ke situs Anda.

Jalan Bebas (sedikit lebih sulit)

Instal plugin Cuplikan Kode gratis. Unduh cuplikan kode berikut, dan impor ke situs web Anda:

Potongan Kode Pendek Pencarian Langsung JSON

File ini juga dapat diimpor ke Skrip Lanjutan (pada dasarnya merupakan versi Cuplikan Kode yang premium dan lebih mudah), dan bahkan Pengatur Skrip.

Kemudian, tambahkan pencarian dengan menggunakan kode pendek berikut di frontend Anda:

[iso_live_search]

Terlepas dari bagaimana Anda menambahkan pencarian, jika Anda menggunakan HTML dan PHP yang mendasari dari bagian ini, CSS di bagian berikutnya akan memberikan gaya yang bagus.

CSS

Jika Anda menjaga struktur dan kelas tetap utuh, cukup tambahkan CSS khusus ini ke situs web Anda untuk mendapatkan formulir pencarian yang ditata dengan baik dengan kemampuan pelengkapan otomatis.

Catatan: kode ini tidak kompatibel dengan metode <?php get_search_form() ?> untuk menyisipkan bilah pencarian. Namun, tergantung pada tema Anda, memasukkan formulir pencarian dengan cara ini berarti akan mewarisi gaya tema Anda.

#iso-searchform { posisi:relatif; } .iso-search { bantalan: 10px; padding-kanan: 50px; batas-radius: 5px; latar belakang: #f8fbff; perbatasan: 1px solid rgba(42, 140, 255, .27); garis besar: tidak ada; lebar: 100%; } .iso-search:focus { batas: 1px solid #ffb300; } .iso-search-btn { tinggi: 40px; lebar: 40 piksel; perbatasan: tidak ada; latar belakang: tidak ada; batas-radius: 5px; posisi: mutlak; atas: 0; kanan:0; } .iso-search-btn:aktif, .iso-search-btn:fokus { latar belakang: rgba(42, 140, 255, .27); }

Anda dapat menambahkan CSS ini ke utilitas pembuat halaman Anda, melalui Penampilan -> Kustomisasi -> CSS Tambahan, atau dengan menggunakan SCORG.

Kami menyarankan SCORG. Tambahkan sebagian CSS baru, tempel kode, dan publikasikan (atau impor file ini). Arahkan ke Cuplikan Kode Pendek yang dibuat pada langkah sebelumnya, buka bagian "SCSS Partials Manager" dan pilih show , cari judul parsial itu dan pilih. Perbarui itu. Sekarang, di mana pun Anda menempatkan kode pendek, CSS juga akan dimuat. Itu hanya akan memuat di mana kode pendek ditempatkan, bukan secara global , yang sangat bagus untuk kinerja.

Sekarang, yang kita butuhkan hanyalah Saus Ajaib.

Saus Ajaib (SearchWP Live Ajax Search)

Ini adalah plugin luar biasa yang dibuat oleh tim di belakang rangkaian plugin SearchWP. Ini gratis dan di repositori WordPress. Alih-alih struktur kode yang rumit, kita dapat menginstal ini dan menjalankan pencarian langsung dalam waktu kurang dari satu menit.

Buka Plugin Pencarian Langsung

Setelah terinstal, klik pada formulir pencarian yang telah Anda sisipkan dengan kode pendek, kode mentah, atau yang menggunakan sisipan PHP WordPress asli, dan Anda akan melihat perilaku berikut:

Saat surat dimasukkan ke dalam formulir, itu akan diperbarui secara otomatis dengan hasil yang relevan.

Itu saja, Anda sudah selesai! Nikmati formulir pencarian di situs WordPress Anda yang akan melengkapi pencarian pengguna secara otomatis menggunakan teknologi AJAX.

Perluas Pencarian Langsung Ini Di WordPress

SearchWP Live Ajax Search adalah plugin gratis yang memungkinkan Anda melakukan seperti namanya: menambahkan Live Ajax Search. Ini akan bekerja dengan atau tanpa koleksi premium SearchWP dan ekstensi terkait. Jika Anda tidak menggunakan SearchWP, itu akan menggunakan mesin pencari WP standar.

Pencarian WordPress standar diurutkan berdasarkan relevansi (dulu, tidak - liar!) Dengan melihat judul posting, lalu konten. Tapi ini masih Elementor, dan ada opsi yang lebih baik di luar sana. Faktanya, kami menulis artikel lain yang membahas alternatif yang lebih baik, yang dapat Anda baca di sini: Solusi Pencarian Lebih Baik Untuk WordPress

Ada banyak cara untuk meningkatkan Pencarian WordPress.

Namun, karena Live Search dibuat oleh Search WP, maka secara otomatis mesin tersebut akan menggunakan mesin tersebut jika diinstal. Search WP lebih unggul karena menyertakan kata kunci, kecocokan yang lebih akurat, pengindeksan dokumen, dukungan untuk WooCommerce, penyesuaian algoritme, dan banyak lagi. Kami sangat menyarankan untuk membangun pencarian langsung Anda dan menggunakan fitur lain dari plugin premium untuk menawarkan hasil pencarian yang lebih baik.

Jika Anda mencari alternatif untuk SearchWP, Ivory Search adalah plugin berbiaya lebih rendah yang menawarkan fitur serupa, dan LTD! Plugin Pencarian Langsung (WP Search Autocomplete) ini harus bekerja di luar kotak dengan Pencarian Gading. Anda juga dapat menggunakan mesin pencari lain; Menurut dokumen, yang perlu Anda lakukan adalah:

Tambahkan atribut berikut ke input formulir: data-swpengine="supplemental" menggantikan 'supplemental' dengan nama mesin pencari yang Anda inginkan.
Daftar FAQ

Bahkan Lebih Mudah Dengan Oksigen

Bukan rahasia lagi kami menyukai Oxygen Builder, jadi inilah cara yang lebih mudah untuk menambahkan AJAX Live Search (pelengkapan otomatis) dengan alat itu.

Catatan: Tutorial dan plugin ini tidak akan bekerja dengan Widget Formulir Pencarian Oksigen, karena seperti yang disebutkan di bagian sebelumnya, tidak menggunakan metode PHP standar untuk menyisipkan formulir pencarian, juga tidak menyertakan atribut data yang diperlukan.

Langkah mudah:

Tambahkan blok kode di mana pun Anda menginginkan formulir pencarian, rekatkan di PHP yang ditemukan di bawah ini (atau rekatkan dalam kode pendek Hidrogen yang akan membuat blok kode secara otomatis)..
Tambahkan CSS yang ditemukan di bawah ke Oxygen Global CSS, ubah sesuai keinginan (terutama warna).
Instal dan aktifkan plugin Pencarian Langsung, gratis di repo di sini.
Berjemur dalam kemuliaan pencarian langsung.

Karena kita dapat menempatkan PHP langsung di template dan halaman dengan Page Builder, kita cukup menempelkan PHP berikut ke dalam blok kode, menambahkan CSS melalui pengaturan global, dan menyebutnya malam (pastikan Anda telah menambahkan plugin pencarian langsung, ditemukan di sini).

Anda juga dapat menyalin/menempelkan Kode Pendek Hidrogen berikut (jika Anda memiliki Paket Hidrogen (diulas di sini)).

eyJzb3VyY2UiOiJodHRwczovL2RlYWxzLmlzb3Ryb3BpYy5jbyIsImNvbXBvbmVudCI6W3siaWQiOjIwMCwibmFtZSI6ImN0X2NvZGVfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoyMDAsImN0X3BhcmVudCI6MTAsInNlbGVjdG9yIjoiY29kZV9ibG9jay0yMDAtMTkiLCJvcmlnaW5hbCI6eyJjb2RlLXBocCI6Ijxmb3JtIGlkPVwiaXNvLXNlYXJjaGZvcm1cIiBhcmlhLWxhYmVsPVwiU2l0ZXdpZGVcIiBtZXRob2Q9XCJnZXRcIiBhY3Rpb249XCI8P3BocCBlY2hvIGVzY191cmwoIGhvbWVfdXJsKCAnLycgKSApOyA / PlwiPlxuICAgIDxpbnB1dCBkYXRhLXN3cGxpdmU9XCJ0cnVlXCIgY2xhc3M9XCJpc28tc2VhcmNoIHNlYXJjaC1maWVsZFwiIHR5cGU9XCJzZWFyY2hcIiBzcGVsbGNoZWNrPVwidHJ1ZVwiIHBsYWNlaG9sZGVyPVwiU2VhcmNoXCIgdmFsdWU9XCI8P3BocCBlY2hvIGdldF9zZWFyY2hfcXVlcnkoKTsgPz5cIj5cbiAgICA8aW5wdXQgY2xhc3M9XCJpc28tc2VhcmNoLWJ0blwiIHR5cGU9XCJzdWJtaXRcIiB2YWx1ZT1cIvCflI1cIj5cbjwvZm9ybT4iLCJjb2RlLWNzcyI6IiNpc28tc2VhcmNoZm9ybSB7XG5wb3NpdGlvbjpyZWxhdGl2ZTtcbn1cblxuLmlzby1zZWFyY2gge1xuXHRwYWRkaW5nOiAxMHB4O1xuXHRwYWRkaW5nLXJpZ2h0OiA1MHB4O1xuXHRib3JkZXItcmFkaXVzOiA1cHg7XG5cdGJhY2tncm91bmQ6ICNmOGZiZmY7XG5cdGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoNDIsIDE0MCwgMjU1LCAu MjcpO1xuXHRvdXRsaW5lOiBub25lO1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLmlzby1zZWFyY2g6Zm9jdXMge1xuXHRib3JkZXI6IDFweCBzb2xpZCAjZmZiMzAwO1xufVxuXG4uaXNvLXNlYXJjaC1idG4ge1xuXHRoZWlnaHQ6IDQwcHg7XG5cdHdpZHRoOiA0MHB4O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJhY2tncm91bmQ6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6IDVweDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cdHJpZ2h0OjA7XG59XG5cbi5pc28tc2VhcmNoLWJ0bjphY3RpdmUsXG4uaXNvLXNlYXJjaC1idG46Zm9jdXMge1xuXHRiYWNrZ3JvdW5kOiByZ2JhKDQyLCAxNDAsIDI1NSwgLjI3KTtcbn0ifSwibmljZW5hbWUiOiJDb2RlIEJsb2NrICgjMjAwKSIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY2xhc3NlcyI6WyJ3LWZ1bGwiXSwiY3RfZGVwdGgiOjUsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjUsIiQkaGFzaEtleSI6Im9iamVjdDo0MjIifV0sImNsYXNzZXMiOnsidy1mdWxsIjp7ImtleSI6InctZnVsbCIsInBhcmVudCI6Ik94eU1hZGVGcmFtZXdvcmsiLCJvcmlnaW5hbCI6eyJ3aWR0aC11bml0IjoiJSIsInNlbGVjdG9yLWxvY2tlZCI6InRydWUiLCJ3aWR0aCI6IjEwMCJ9fX0sImNvbG9ycyI6e319

Cukup klik salin, instal Hidrogen, dan tempel ke halaman Anda. CSS akan dimasukkan dalam blok kode.

Terakhir, gunakan CSS (diambil dari atas):

Kami menyarankan untuk memasukkan CSS ini melalui CSS Global Oxygen.

Inilah hasil akhir yang akan terlihat seperti:

Jika Anda ingin menggunakan kembali bagian ini, Anda juga bisa membuatnya menjadi bagian yang dapat digunakan kembali. Selama Anda memasang plugin Pencarian Langsung, Anda sebaiknya menggunakan bilah pencarian AJAX yang bagus untuk pengunjung Anda.

<?php get_search_form() ?>

Atau, gunakan saja kode di atas jika Anda tidak memerlukan penyesuaian lanjutan (termasuk tetapi tidak terbatas pada solusi pencarian yang lebih baik daripada pencarian inti WP). Tentu saja, karena kami dapat menggunakan kode pendek di pembuat halaman ini, Anda juga dapat mengikuti bagian atas tutorial ini yang akan memandu Anda dalam membuat kode pendek untuk digunakan di bagian depan situs web Anda.

Kesimpulan

Pada tahun 2022, memberikan pengalaman yang luar biasa kepada pengguna Anda, dan alat yang mereka butuhkan untuk mengakses konten yang mereka inginkan, menjadi lebih penting dari sebelumnya. Artikel ini menyajikan beberapa metode menginstal WordPress live Ajax search di situs web dalam waktu kurang dari 15 menit.

Ada beberapa metode yang diuraikan di sini sehingga Anda dapat memilih untuk menggunakannya pada file template tema, menghasilkan kode pendek yang kompatibel dengan pembuat halaman, dan menggabungkan lebih banyak metode. Plugin yang digunakan untuk mencapai fungsi pencarian langsung benar-benar gratis dan dirancang dengan baik.

Ada pertanyaan? Jangan ragu untuk meninggalkan mereka di bagian komentar di bawah.

Berlangganan & Bagikan

Jika Anda menyukai konten ini, berlanggananlah kumpulan berita WordPress bulanan kami, inspirasi situs web, penawaran eksklusif, dan artikel menarik.

Berhenti berlangganan kapan saja. Kami tidak melakukan spam dan tidak akan pernah menjual atau membagikan email Anda.