Cara Menambahkan Bilah Pencarian WordPress dengan Kode Pendek (Langkah-demi-Langkah)

Diterbitkan: 2022-02-18

Apakah Anda ingin tahu cara menambahkan bilah pencarian WordPress dengan kode pendek?

Biasanya, bilah pencarian di situs WordPress ada di menu navigasi situs atau di bilah sisi. Menggunakan kode pendek memungkinkan Anda menempatkan bilah pencarian tepat di dalam posting atau halaman.

Pada artikel ini, kami akan menunjukkan kepada Anda 2 metode tentang bagaimana Anda dapat menambahkan bilah pencarian menggunakan kode pendek ke situs WordPress Anda.

Mengapa Menambahkan Bilah Pencarian dengan Kode Pendek

Biasanya, tidak banyak tempat di mana Anda dapat menambahkan bilah pencarian.

Sebagian besar tema WordPress memungkinkan Anda menempatkan bilah pencarian sebagai widget di salah satu area widget. Anda juga dapat menampilkan bilah pencarian di sebelah menu navigasi.

Tetapi bagaimana jika Anda ingin membuat halaman yang berisi bilah pencarian?

Atau letakkan bilah pencarian di dalam artikel, sehingga pembaca Anda tidak perlu mengganggu pembacaan jika mereka ingin mencari sesuatu?

a search bar within the post's body

Saat itulah kode pendek berguna. Dengan menggunakan kode pendek, Anda bebas menambahkan bilah pencarian ke tempat mana pun dalam postingan atau halaman.

Ini berguna jika tema Anda tidak mendukung penambahan kotak pencarian dan Anda tidak ingin mengedit kode untuk menambahkannya.

Sekarang, mari kita lihat bagaimana Anda dapat menambahkan bilah pencarian ke situs Anda menggunakan kode pendek.

Cara Menambahkan Bilah Pencarian WordPress dengan Kode Pendek

Ada 2 metode untuk menambahkan bilah pencarian WordPress dengan kode pendek. Mari kita lihat masing-masing secara berurutan.

Metode 1: Menggunakan SearchWP

Cara termudah untuk menambahkan bilah pencarian WordPress dengan kode pendek adalah dengan menggunakan plugin seperti SearchWP.

SearchWP logo

Search WP adalah plugin pencarian WordPress yang paling kuat dan komprehensif. Lebih dari 30.000 pemilik situs web telah menggunakannya untuk memberikan hasil pencarian yang lebih akurat kepada pengunjung mereka.

Plugin ini tidak hanya memungkinkan Anda untuk menambahkan kotak pencarian dengan kode pendek – tetapi juga membantu Anda mendapatkan kontrol penuh atas mesin pencari WordPress.

Misalnya, menggunakan SearchWP, Anda dapat menyesuaikan urutan hasil pencarian, membuat pencarian WordPress berdasarkan konten dokumen, dan banyak lagi.

Plugin ini secara otomatis terintegrasi dengan setiap bilah pencarian yang Anda miliki di situs Anda. Jadi Anda dapat meningkatkan pencarian situs Anda segera setelah instalasi, tidak perlu coding.

Berikut adalah beberapa hal berguna lainnya yang dapat Anda lakukan dengan SearchWP:

  • Pengindeksan bidang khusus : Banyak plugin WordPress menggunakan bidang khusus untuk menyimpan data Anda. Tapi, mesin pencari WordPress asli tidak mempertimbangkannya saat mencari. SearchWP memungkinkan Anda membuat bidang khusus di situs Anda dapat dicari.
  • Pelacakan pencarian : Pernah bertanya-tanya pencarian apa yang dilakukan pengunjung di situs Anda? SearchWP memberi Anda wawasan tentang aktivitas pencarian di situs Anda dalam beberapa klik, sehingga Anda bisa mendapatkan ide konten baru dan memenuhi kebutuhan audiens Anda.
  • Integrasi WooCommerce yang Mulus : Secara default, pencarian WordPress mengabaikan detail produk WooCommerce, sehingga lebih sulit bagi pelanggan Anda untuk menemukan produk yang mereka cari. Menggunakan SearchWP, Anda dapat membuat bidang kustom WooCommerce apa pun dapat dicari, termasuk atribut produk, tag, dan ulasan.

Mari kita lihat bagaimana Anda dapat menggunakan SearchWP untuk menambahkan bilah pencarian dengan kode pendek dalam hitungan menit.

Langkah 1: Instal dan Aktifkan plugin SearchWP

Langkah pertama adalah mengambil salinan SearchWP Anda di sini.

Setelah selesai, buka akun SearchWP Anda dan alihkan ke tab Unduhan .

go to the downloads tab

Kemudian, tekan tombol Unduh SearchWP dan simpan file ZIP plugin ke komputer Anda.

download SearchWP

Saat unduhan selesai, salin kunci lisensi Anda, karena Anda akan membutuhkannya nanti untuk mengaktifkan plugin.

copy your license key

Setelah Anda mengunduh SearchWP dan menyalin kunci lisensi, unggah file ZIP plugin ke situs WordPress Anda.

Jika Anda memerlukan bantuan tentang cara melakukannya, lihat panduan langkah demi langkah ini tentang cara menginstal plugin WordPress.

Setelah Anda menginstal dan mengaktifkan SearchWP, langkah selanjutnya adalah memasukkan kunci lisensi Anda.

Untuk melakukannya, navigasikan ke pengaturan SearchWP dengan mengklik tombol SearchWP yang muncul di bilah atas dasbor WordPress.

go to the SearchWP settings

Kemudian, buka tab Lisensi .

go to the license tab

Rekatkan kunci lisensi plugin yang Anda salin sebelumnya ke dalam bidang lisensi dan klik Aktifkan .

activate your license

Setelah Anda mengaktifkan salinan SearchWP, Anda siap untuk melanjutkan ke langkah berikutnya.

Langkah 2: Instal dan Aktifkan Ekstensi Kode Pendek

Selanjutnya, kita perlu mengunduh ekstensi Shortcode SearchWP. Ekstensi ini memungkinkan Anda untuk menambahkan bilah pencarian dengan kode pendek ke tempat mana pun di pos atau halaman.

Anda dapat mengambilnya di halaman unduhan ekstensi Shortcodes.

Setelah Anda menavigasi ke halaman, tekan tombol Unduh ekstensi .

the shortcodes extension

Kemudian, instal dan aktifkan ekstensi dengan cara yang sama seperti plugin SearchWP.

Langkah 3: Buat Halaman untuk Bilah Pencarian Baru

Sekarang, kita perlu membuat halaman baru di mana kita akan menempatkan kotak pencarian.

Untuk melakukannya, pertama, navigasikan ke Halaman »Tambah Baru di dasbor WordPress Anda.

add a new page

Setelah Anda berada di editor halaman, tambahkan judul ke halaman Anda dan klik tombol Plus .

add a title and press plus

Cari blok HTML Kustom dan kemudian klik untuk menambahkannya ke halaman.

choose the custom html block

Kemudian, salin kode berikut dan rekatkan ke dalam blok HTML Kustom :

[searchwp_search_form engine="default" var="searchvar" button_text="Find Results"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="default" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="default"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="default"]
</div>

Kode di atas menampilkan kotak pencarian di halaman tempat Anda menambahkan kotak HTML Kustom .

Ini juga menampilkan pesan "Tidak ada hasil pencarian yang ditemukan" jika tidak ada hasil pencarian. Plus, itu juga dapat menampilkan tautan pagination jika ada lebih dari 4 hasil pencarian.

Setelah Anda menambahkan kode, klik tombol Publikasikan di kanan atas untuk menerbitkan halaman Anda.

publish the page

Sekarang mari kita pergi ke halaman baru kita dan menguji bilah pencarian yang baru saja kita tambahkan.

Langkah 4: Uji Bilah Pencarian Baru Anda

Untuk membuka halaman yang baru dibuat, klik tombol Lihat Halaman .

view the page

Seperti yang Anda lihat, bilah pencarian yang kami tambahkan dengan kode pendek sekarang berhasil ditampilkan di halaman.

the search box appears

Sekarang setelah Anda mengetahui cara termudah untuk menambahkan bilah pencarian WordPress ke halaman Anda, mari kita bicara tentang metode ke-2 di bawah ini.

Metode 2: Mengedit File Functions.php

Ini adalah metode yang cukup kompleks. Ini membutuhkan pengetahuan tingkat lanjut tentang WordPress dan melibatkan membuat perubahan pada kode tema.

Perhatikan bahwa jika Anda membuat kesalahan saat mengedit kode, Anda dapat merusak situs Anda.

Jadi, jika Anda bukan pengguna yang paham teknologi atau belum pernah mengedit file tema WordPress sebelumnya, kami sarankan untuk tetap menggunakan metode pertama. Anda dapat mengambil salinan SearchWP Anda di sini.

Dengan SearchWP, Anda dapat dengan aman menambahkan bilah pencarian dengan kode pendek hanya dalam beberapa klik. Tidak diperlukan pengkodean.

Langkah 1: Buat Tema Anak

Langkah pertama adalah membuat tema anak dari tema yang sedang Anda gunakan di situs Anda.

Perlu penyegaran tentang cara melakukannya? Jangan ragu untuk melihat panduan ini tentang cara membuat tema anak WordPress.

Tema anak mewarisi tampilan, file, kode, dan fitur tema induk.

Sangat penting untuk membuatnya jika Anda akan membuat perubahan pada kode tema WordPress karena beberapa alasan.

Pertama, Anda dapat menyesuaikan tema anak tanpa mengubah tema induk. Ini memastikan bahwa situs Anda akan tetap ditampilkan dengan benar bahkan jika Anda membuat kesalahan saat mengedit kode.

Selain itu, setiap perubahan yang Anda buat pada tema induk akan hilang segera setelah Anda memperbaruinya. Membuat perubahan pada tema anak memungkinkan Anda memperbarui tema induk tanpa risiko kehilangan perubahan.

Setelah Anda membuat tema anak, mari lanjutkan ke langkah berikutnya.

Langkah 2: Edit File Functions.php

Setelah Anda membuat dan mengaktifkan tema anak, navigasikan ke Appearance » Theme Files Editor di dashboard WordPress Anda.

edit theme files

Kemudian, temukan file functions.php di panel kanan dan klik di atasnya.

open functions php file

Tambahkan kode berikut ke bagian paling akhir dari file functions.php :

add_shortcode('wpbsearch', 'get_search_form');

Berikut adalah tampilannya di situs demo kami saat mengedit file functions.php tema anak GeneratePress:

add the code

Setelah selesai, tekan tombol Perbarui File .

update the functions php file

Sekarang kita perlu membuat halaman baru di mana kita akan menampilkan bilah pencarian menggunakan kode pendek.

Langkah 3: Buat Halaman Bilah Pencarian Baru

Untuk membuat halaman baru, navigasikan ke Halaman »Tambah Baru di dasbor WordPress Anda.

add a new page

Kemudian, cukup tempel kode pendek berikut ke halaman:

[wpbsearch]

Ini adalah bagaimana seharusnya terlihat:

paste a shortcode

Setelah selesai, klik Publish di kanan atas.

publish the page with a shortcode

Sekarang kami ingin memeriksa apakah bilah pencarian muncul.

Langkah 4: Uji Bilah Pencarian Baru Anda

Untuk melihat halaman yang baru saja Anda terbitkan, klik Lihat Halaman .

view the page with a shortcode

Seperti yang Anda lihat, kami berhasil menambahkan bilah pencarian menggunakan kode pendek.

search bar appears with the 2nd method

Pada artikel ini, Anda mempelajari 2 metode cara menambahkan bilah pencarian WordPress dengan kode pendek.

Jika Anda bukan pengguna yang paham teknologi dan ingin menambahkan bilah pencarian dengan kode pendek hanya dalam beberapa klik, Anda dapat memilih metode pertama. Anda dapat mengambil salinan SearchWP Anda di sini.

Apakah Anda ingin memengaruhi hasil pencarian WordPress? Lihat tutorial langkah demi langkah ini tentang cara memprioritaskan hasil pencarian tertentu di WordPress.

Apakah Anda ingin WordPress mempertimbangkan konten file PDF saat melakukan pencarian? Maka Anda akan terbantu dengan cara membuat indeks WordPress dan mencari panduan file PDF.