Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Membangun Plugin WordPress "Pencarian Berdasarkan Kategori" Kustom

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dengan semakin meningkatnya jumlah konten yang membangun di situs Wordpress Anda, pengguna Anda pasti akan perlu untuk mencari situs Anda untuk menemukan artikel bermanfaat tertentu dari perjalanan kembali. Untuk membantu mempersempit hasil pencarian, saya akan menunjukkan cara mengkode plugin yang memungkinkan pengguna untuk mencari berdasarkan kategori.

Tutorial ini termasuk screencast yang tersedia untuk anggota Tuts+ Premium.

Langkah pertama dalam pengembangan plugin kita adalah menentukan set fitur yang akan dimiliki, ditambah jumlah penyesuaian yang tersedia. Kami ingin plugin kita memiliki fitur berikut dan memungkinkan kustomisasi pengguna yang lengkap:

  1. Konfigurasi ulang pencarian berdasarkan kategori yang dipilih
  2. Daftar drop-down kategori
  3. Kemampuan untuk menyembunyikan kategori tanpa posting dari daftar
  4. Kemampuan untuk mengecualikan kategori anak dari daftar
  5. Opsi untuk menonaktifkan styling bawaan kita
  6. Kemampuan untuk mengecualikan kategori tertentu dari daftar
  7. Kemampuan untuk menggunakan nilai kustom di kotak pencarian
  8. Kemampuan untuk menggunakan nilai kustom untuk pemilihan "Di semua kategori"

Membuat Kerangka untuk Plugin

Sebelum kita bisa melakukan apapun ke plugin kita, pertama kita perlu membangun kerangka plugin agar bisa bekerja. Kita akan mulai dengan membuat folder baru di direktori "plugins" wordpress (/wp-content/plugins) dan memberi judul "search-by-category" (dengan konvensi, semua folder plugin harus semua huruf kecil dan gunakan tanda hubung pengganti spasi sehingga saat menautkan ke file di folder URL akan mudah dibaca oleh manusia). Buat file PHP baru di folder berjudul "sbc.php", file ini akan dijadikan dasar bagi keseluruhan struktur plugin kita. Isi selanjutnya, di plugin dengan info Wordpress yang dibutuhkan agar bisa tampil di panel WP-Admin kita.



Set-up halaman Options

Sekarang WordPress sedang mengenali plugin kita, kita bisa memulai perkembangan kita. Hal pertama yang perlu kita lakukan adalah mengatur sebuah halaman Options agar kita bisa membiarkan pengguna mengkonfigurasi plugin kita sesuai dengan keinginannya. Cara kerjanya adalah proses tiga langkah:

pertama kita membuat kelas untuk semua konfigurasi kita untuk beroperasi di dalam.

Kedua kita menjalankan fungsi untuk membuat halaman config.


Menyiapkan Personalisasi

Setelah kita mempersiapkan halaman konfigurasi kita, kita bisa mulai menambahkan di opsi konfigurasi kita untuk diterapkan nanti di plugin. Untuk menampilkan halaman konfigurasi kita, kita harus membuat fungsi baru yang disebut "config_page()" yang akan kita isi dengan kode bagian admin kita. Pertama kita akan melanjutkan dan menulis HTML untuk semua bagian kita.

Anda akan melihat bahwa kita telah menggunakan PHP untuk referensi variabelnya: $search_text, $focus, $hide_empty, $exclude_child, $sbc_style, dan $raw_excluded_cats (dalam fungsi "wp_category_checklist"). Kita akan membuat dan memperluas variabel-variabel ini pada langkah selanjutnya.



Screencast Penuh



Menambahkan Opsi Kita ke Database

Setelah halaman admin selesai dan berjalan kita bisa mulai menggunakannya untuk menambahkan opsi ke Database. Untuk melakukan ini, kita hanya akan membuat variabel sebelum "if( !class_exists('SBC_Admin' ) ) {" dan kemudian menggunakan fungsi Wordpress "add_option('entry-title', 'value')" untuk memasukkan ke dalam tabel wp_options dari DB. Berikut daftar variabel yang akan kami gunakan di plugin kita:

  • $focus - Teks default yang dilihat pemirsa dalam drop-down pilihan
  • $hide_empty - true atau false, menghapus kategori dengan 0 posting dari drop-down
  • $excluded_cats - array terpisah koma dari kategori yang dikecualikan
  • $raw_excluded_cats - array kategori yang dikecualikan
  • $search_text - Teks default di kotak pencarian dalam form
  • $exclude_child - true atau false, menghapus kategori anak dari drop-down
  • $sbc_style - true atau false, menggunakan stylesheet SBC kustom

Setelah kita mengatur default dan menambahkan ke database, kita bisa menggunakan fungsi Wordpress ''get_option('entry-title')" di fungsi config_page kita sehingga nilai-nilai kita tercermin di dalam form.


Sekarang halaman Options kita menggunakan data dari database, mari kita setup proses pembaruan. Untuk mulai kita akan memulai pernyataan if yang memeriksa apakah tombol kirim kita diset. Selanjutnya kita akan membandingkan wpnonce untuk memverifikasi bahwa pengguna mengunjungi halaman tersebut sebelum mencoba memperbarui opsi. Kemudian kita akan menjalankan pernyataan if yang lain untuk memeriksa dan memastikan saat ini diperbolehkan untuk mengubah setting dengan menjalankan fungsi WP "current_user_can('manage_options')", jika tidak bisa, maka kita akan mematikan skripnya.

Sekarang kita akan memperbarui variabel yang kita definisikan tadi dengan nilai input dari form. Karena kita menggunakan kotak centang untuk daftar kategori yang dikecualikan, cara terbaik untuk mendapatkan pengembalian yang kita inginkan darinya adalah dengan menyatakan pernyataan if lainnya dan memeriksa bahwa "post_category" (id yang diberikan ke daftar oleh fungsi WP) telah ditetapkan. Jika ada, maka kita akan mengambil bentuk mentahnya dan meletakkan kembali ke variabel "$raw_excluded_cats" dari sebelumnya sehingga kotak centang akan tetap dicentang. Kita juga akan menggunakan nilai pengembalian yang sama untuk membuat array terpisah koma untuk digunakan nanti dengan menambahkan satu nilai ekstra ke awal array (Ini adalah perbaikan untuk kesalahan di lain waktu di fungsi lain) dan kemudian implode array-nya.

Karena sifat kotak centang, mereka hanya memiliki nilai pengembalian jika dicentang, jadi kita perlu menulis tangkapan saat tidak dicentang. Untuk melakukan ini, kita akan menggunakan pernyataan if sederhana yang memeriksa apakah variabel kita kosong (karena tidak ada nilai pengembalian dari form untuk mengisinya) jika kosong, kita akan menetapkan nilainya ke "0" (false).

Sekarang langkah terakhir kita adalah memperbarui database dengan nilai baru kita menggunakan fungsi Wordpress "update_option('entry-title', 'new-value')". Kita juga akan membungkus nilai yang kita masukkan ke dalam DB dengan fungsi mysql_real_escape_string() untuk membantu mencegah injeksi SQL.


Kode kita sejauh ini:


Membuat Form

Kini setelah kita menyelesaikan semua back end dan siap untuk dikerahkan, saatnya untuk mulai menulis form front-end yang akan dilihat dan digunakan oleh semua pengunjung. Agar pengguna kita dapat menempatkan form kita di manapun di situsnya yang dia inginkan, kita akan membungkus form kita dalam fungsi baru yang berjudul "sbc()" yang ditempatkan tepat di luar deklarasi kelas kita. Byte pertama dari kode yang perlu kita tambahkan adalah menyatakan sebuah global $wp_query dan $post sehingga kita dapat memiliki akses ke fungsi tersebut jika kita menginginkannya nanti, namun untuk tujuan kita, kita tidak membutuhkannya. Langkah selanjutnya adalah untuk mendapatkan kembali nilai variabel kita dari database.

Setelah kita melakukannya, kita dapat membuat variabel lain yang disebut "$list" dengan nilainya menjadi fungsi WP wp_dropdown_categories($settings) (baca lebih lanjut tentang fungsi ini di sini). Variabel "$settings" adalah tempat sebagian besar penyesuaian kita diterapkan.

Sekarang dropdown form sudah dikonfigurasi, kita bisa membuat variabel lain, "$form" yang akan menyimpan HTML form kita melalui hypertext preprocessor. kemudian kita akan meng-echo variabel $form baru kita.


Menambahkan Styling Kustom

Sebelumnya kita memberikan pengguna sebuah pilihan untuk menggunakan styling kustom kita untuk form ini. Jika mereka membiarkan opsi ini diaktifkan di menu pengaturan, kita perlu menambahkan stylesheet ke header. Cara termudah untuk melakukannya adalah dengan membuat pernyataan if baru yang memeriksa variabel "$sbc_style" kita menjadi true (dalam kode kita: 1). Di dalam pemeriksaan itu, kita akan menambahkan fungsi baru "style_insert()" yang meng-echo URL ke stylesheet kita. Juga di dalam if (tapi di luar fungsinya), kita akan menulis dalam tindakan baru untuk "wp_head" untuk menambahkan ke fungsi "style_insert()" kita.

Sedangkan untuk styling kita, buat file baru bernama sbc-style.css isilah dengan:


Di Safari Anda akan melihat bahwa segitiga standar di bawah hilang dari kotak dropdown kita, ini karena kita menggunakan -khtml-appearance: none di dropdown untuk menghentikan safari dari memaksakan tema "snow" kepadanya. cara untuk memperbaikinya adalah dengan menggunakan karakter HTML untuk mensimulasikan segitiga, dan kebetulan ada yang sangat mirip yang disebut "∇  Nabla". Kita akan menggunakan kombinasi spasi, non-breaking-spaces, dan nabla ini dalam pengaturan drop-down untuk memperbaiki masalah ini.



Mengembalikan Hasil Pencarian

Begitu form kita siap, kita akhirnya bisa mulai mendapatkan hasil pencarian yang ingin kita berikan kepada pengunjung kita. Untuk memulai, kita akan membuat fungsi baru yang disebut return_only_selected_category(), dimana kita akan membuat pernyataan if baru yang memeriksa bahwa tombol submit pencarian kita telah ditetapkan. Di dalamnya kita perlu menciptakan $wp_query global baru. Selanjutnya kita akan mengambil pengembalian kategori yang dipilih dan memasukkannya ke dalam variabel yang disebut $desired_cat. Jika pengguna memilih opsi untuk semua kategori, kita perlu menjalankan pemeriksaan untuk nilai "*" dan mengatur ulang ke "".

Sekarang kita perlu membuat variabel lain, $excluded, yang nilainya adalah fungsi WP get_categories(). Kita akan menambahkan 2 argumen untuk fungsi ini. Pertama adalah "hide_empty=false" agar semua kategori dimasukkan ke dalam daftar, dan yang kedua adalah "exclude={$desired_cat}" sehingga setiap kategori yang kategori pengguna ingin melihat posting darinya dihapus dari daftar.

Setelah variabel itu ditetapkan, akhirnya kita bisa membuatnya sehingga hanya posting dari kategori yang dipilih akan muncul di hasilnya. Untuk efek ini, kita akan mengubah Query Vars agar Wordpress menghapus posting dari setiap kategori yang kita cantumkan (dan kebetulan saja kita memiliki variabel yang penuh dengan kategori untuk dikecualikan).

Dengan menambahkan tanda hubung di depan daftar kategori, kita memberi tahu Wordpress untuk menghapusnya dari kueri. Metode yang sangat efektif untuk kita. Sekarang satu-satunya yang tersisa untuk dilakukan adalah menambahkan filter WP baru untuk "pre_get_posts" menambahkan fungsi baru kita.


Cara Memasukkan Form Kita


Kode Akhir Kita

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.