Cara termudah untuk Menambahkan Pencarian Langsung
Diterbitkan: 2023-04-21Mencari plugin WordPress pencarian AJAX terbaik?
Menambahkan pencarian langsung yang diberdayakan AJAX ke WordPress adalah cara yang bagus untuk meningkatkan pengalaman pengguna (UX) situs Anda dan meningkatkan kemampuan konten untuk ditemukan.
Dalam posting ini, Anda akan mempelajari langkah demi langkah cara menyiapkan pencarian AJAX di WordPress menggunakan solusi yang sepenuhnya bebas kode.
Bahkan, Anda dapat aktif dan berjalan hanya dalam beberapa menit, sambil tetap memiliki akses ke fungsionalitas untuk menyempurnakan fungsi pencarian AJAX situs Anda.
Yang perlu Anda lakukan hanyalah:
- Instal plugin Blok Otter.
- Tambahkan blok Pencarian di mana Anda ingin kotak pencarian AJAX WordPress Anda muncul dan aktifkan tombol Pencarian Langsung.
- Sesuaikan fungsi pencarian langsung AJAX sesuai kebutuhan, seperti mengonfigurasinya untuk hanya mencari posting blog tetapi bukan halaman.
Jika ingin langsung ke tutorialnya, bisa klik link jump ini.
Jika tidak, kami akan mulai dengan ikhtisar singkat tentang cara kerja pencarian AJAX dan beberapa cara berbeda untuk menyiapkan fungsionalitas WordPress pencarian AJAX.
Apa itu pencarian AJAX untuk WordPress?
Anda mungkin akan menggunakan fungsi pencarian langsung setiap hari. Misalnya, semua mesin pencari utama dan situs video seperti YouTube menyediakan jenis fitur ini.
Anda mulai mengetik di kotak telusur dan langsung melihat daftar kueri yang disarankan (atau hasil yang disarankan) – tidak perlu memuat halaman.
Meskipun WordPress memiliki bilah pencariannya sendiri, WordPress tidak menggunakan AJAX secara default. Sebagai gantinya, pengguna memasukkan istilah pencarian di dalam kotak, tekan enter, dan halaman baru dengan hasil dimuat.
Untuk menambahkan pencarian langsung ke situs Anda, Anda memerlukan bantuan plugin, yang merupakan inti dari posting ini.
Manfaat pencarian AJAX langsung di WordPress
Apa pun yang dapat Anda perkenalkan yang meningkatkan UX akan menawarkan nilai ke situs Anda. Namun, pencarian AJAX langsung untuk WordPress dapat memberi pengguna Anda sesuatu yang istimewa:
- Anda dapat menyediakan cara bagi pengguna untuk "melayani sendiri" kebutuhan mereka. Mereka akan memiliki cara cepat untuk menelusuri seluruh situs Anda dan menemukan laman yang tepat.
- Elemen interaktif dapat memberikan koneksi yang lebih besar antara situs Anda dan pengguna. Ini karena Anda dapat memberikan hasil pencarian yang relevan lebih cepat, dan tanpa perlu klik tombol tambahan.
- Anda juga dapat meminimalkan waktu pemuatan halaman, karena pencarian AJAX langsung tidak perlu membuat permintaan HTTP lebih lanjut atau memuat halaman lain.
Mengapa solusi pengkodean manual untuk pencarian langsung mungkin bukan yang terbaik
Mengingat bahwa AJAX menggunakan JavaScript, Anda dapat mempertimbangkan solusi "memutar sendiri" menggunakan bahasa pemrograman.
Ini adalah ide bagus secara teori, tetapi tidak akan menjadi metode terbaik untuk menambahkan pencarian AJAX langsung ke WordPress. Inilah alasannya:
- Pertama, Anda hanya dapat membuat solusi yang sebaik keahlian Anda. Jika Anda tidak memiliki pengetahuan JavaScript tingkat ahli, ini akan terlihat di hasil.
- Selain itu, Anda juga perlu mengetahui tentang struktur file WordPress, struktur template, dan banyak lagi. Ada banyak roda penggerak yang membentuk roda WordPress.
- Bahkan jika Anda memiliki keterampilan yang diperlukan untuk membuat kode solusi pencarian langsung, Anda juga memerlukan waktu dan uang untuk mengembangkan dan menerapkannya. Ini bisa sulit didapat, terutama jika pengembangan bukan pekerjaan utama Anda.
- Jika Anda perlu memecahkan masalah solusi manual Anda, ini dapat menghabiskan lebih banyak waktu, uang, dan sumber daya Anda. Anda bisa menggigit lebih dari yang bisa Anda kunyah.
Sebaliknya, ada cara yang lebih baik untuk menerapkan fungsionalitas yang tepat di dalam WordPress: plugin. Mari kita lihat bagaimana ini bekerja selanjutnya.
Gunakan plugin WordPress pencarian AJAX sebagai gantinya
Bagi kebanyakan orang, menggunakan plugin WordPress pencarian AJAX adalah opsi yang jauh lebih baik.
Meskipun ada banyak plugin WordPress pencarian AJAX untuk dipilih, tidak semuanya dibuat sama. Misalnya, beberapa plugin terbatas dalam hal opsi gaya atau mengontrol konten yang akan dicari.
Oleh karena itu, kami akan menggunakan plugin Otter Blocks untuk tutorial ini.
Seperti namanya, Otter Blocks adalah kumpulan elemen untuk Editor Blok WordPress asli.
Dalam hal fungsionalitas pencarian AJAX, fitur yang paling relevan adalah blok Pencarian.
Ini memungkinkan Anda memilih jenis posting mana yang akan dicari dan menyesuaikan sepenuhnya desain kotak pencarian Anda. Anda dapat menambahkannya ke bagian mana pun dari situs Anda, termasuk postingan, halaman, sidebar, dan lainnya.
Di luar fungsi WordPress pencarian AJAX, Otter Blocks memberi Anda beberapa cara tambahan untuk membumbui tata letak dan desain Anda:
- Anda dapat menambahkan tajuk dengan tingkat penyesuaian yang lebih besar daripada yang Anda dapatkan secara default.
- Ada opsi untuk membuat bagian responsif yang menyertakan penyesuaian lanjutan dan ruang untuk enam kolom.
- Anda dapat menambahkan animasi yang memukau seperti efek Lottie dan kartu flip.
- Jika Anda menjual produk melalui situs Anda, Otter Blocks menyertakan tabel harga, kemampuan untuk menerapkan tombol "tambahkan ke troli", jam kerja, dan banyak lagi.
Faktanya, Otter Blocks menyediakan fungsionalitas tambahan untuk semua Block yang ditawarkan – bahkan yang asli. Misalnya, Anda dapat mengatur kondisi visibilitas, CSS khusus, dan lainnya dari antarmuka Editor Blok biasa.
Cara menggunakan Blok Otter untuk menambahkan pencarian AJAX langsung ke WordPress
Anda hanya memerlukan beberapa langkah untuk menyiapkan Blok Otter untuk menambahkan pencarian AJAX langsung ke WordPress. Mari kita mulai dengan proses instalasi:
- Instal dan aktifkan Otter Blocks
- Aktifkan pencarian AJAX langsung untuk WordPress dalam pengaturan Otter Blocks
- Tweak pengaturan untuk menyempurnakan pengalaman pencarian di ujung depan situs Anda
1. Instal dan aktifkan Otter Blocks
Pertama, Anda harus menginstal Otter Blocks dan mengaktifkannya untuk situs web Anda. Ada banyak cara untuk melakukan ini, tetapi kami akan mengulangi apa yang sudah ada di artikel kami yang lain di blog ThemeIsle.
Ini akan menunjukkan kepada Anda cara menginstal Otter Blocks versi gratis dan premium. Namun, untuk posting ini, Anda memerlukan versi premium karena ini memberi Anda fungsi pencarian langsung.
2. Aktifkan pencarian AJAX langsung untuk WordPress dalam pengaturan Otter Blocks
Setelah Anda menginstal plugin, gunakan penyisip blok untuk menambahkan blok Pencarian dari Otter Blocks.
Setelah Anda melakukan ini, itu akan menambahkan bidang formulir dan tombol ke tata letak halaman Anda.
Ini mengimplementasikan fungsi pencarian inti, tetapi ini bukan pencarian AJAX langsung di WordPress.
Dalam pengaturan defaultnya, ini akan bertindak seperti pencarian WordPress pada umumnya.
Untuk mengaktifkan fitur WordPress pencarian AJAX, aktifkan sakelar Aktifkan Pencarian Langsung di sidebar kanan:
3. Tweak pengaturan untuk menyempurnakan pengalaman pencarian di ujung depan situs Anda
Setelah Anda memiliki fungsi pencarian langsung di situs Anda, Anda dapat memperbaikinya dengan beberapa cara.
Tentu saja, ada sejumlah opsi kosmetik dan UX.
Misalnya, Anda dapat mengubah posisi tombol, apakah Anda menggunakan label untuk kotak pencarian, dan menyesuaikan warna, animasi, dan batas untuk bagian pencarian:
Dari sana, Anda juga dapat memberi pencarian batasan tempat untuk mencari di situs Anda dengan memilih jenis posting mana yang akan dicari.
Untuk ini, Anda akan menggunakan kotak Cari Masuk di sidebar kanan:
Ini memungkinkan Anda untuk menambahkan "entitas" di mana Anda ingin pencarian beroperasi.
Misalnya, Anda dapat memilih untuk hanya mencari di dalam konten postingan Anda, atau di antara produk toko Anda.
Jika Anda membiarkan kolom ini kosong, Otter Blocks akan mencari seluruh konten situs Anda.
Siapkan fungsi WordPress pencarian AJAX hari ini
Jika Anda dapat memberikan interaktivitas yang lebih besar di situs web Anda, ini dapat diterjemahkan menjadi UX yang lebih baik secara keseluruhan. Pencarian AJAX langsung di WordPress adalah cara yang fantastis untuk menawarkan kepada pengguna kemampuan untuk menemukan apa yang mereka butuhkan secara real time.
Namun, WordPress tidak menawarkan ini secara default. Sebagai gantinya, Anda dapat menggunakan Blok Otter untuk menambahkan ini ke situs Anda. Tidak ada kode yang terlibat, dan Anda mendapatkan lebih banyak fungsi daripada hanya pencarian AJAX langsung.
Sementara Otter Blocks adalah plugin gratis, versi premium menyediakan kemampuan untuk mengatur pencarian AJAX langsung di WordPress, di antara opsi lainnya.
Apakah Anda masih memiliki pertanyaan tentang cara mengatur pencarian langsung AJAX di WordPress? Tanyakan kepada kami di komentar di bawah!