Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress Widgets
Code

Membuat Widget Anda Sendiri Menggunakan Berbagai API WordPress: Pendahuluan

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Widget adalah cara yang rapi untuk memberi pemilik situs beberapa kendali atas tampilan (dan terkadang fungsionalitas) dari situs WordPress mereka. Dalam seri ini, kita akan membuat beberapa widget WordPress yang berguna dengan menggabungkan Widgets API dengan API eksternal lainnya.

Serial ini akan terdiri dari tutorial berikut:

  1. Sebuah Pendahuluan
  2. Widget Related Posts
  3. Widget Login
  4. Widget FAQ
  5. Widget Posting Paling Populer dengan Integrasi Google Analytics
  6. Widget Alamat Fisik dengan Integrasi Google Maps
  7. Kesimpulan

Dalam tutorial ini, saya akan memperkenalkan WordPress Widgets API dengan membuat(ulang) widget teks sederhana. Kami akan membedah dan memeriksa berbagai fungsi yang membentuk widget sehingga bisa memahami bagaimana widget WordPress bekerja pada umumnya.

Widget ini juga akan berfungsi sebagai dasar pada apa yang akan kita bangun saat membuat widget lain di bagian selanjutnya dari serial ini.

Widget WordPress

Widget WordPress menambahkan konten dan fitur ke area sidebar atau widgetized dari tema Anda. Widget dirancang untuk memberikan cara sederhana dan mudah digunakan untuk memberi desain dan kontrol struktural pada tema WordPress kepada pengguna tanpa mengharuskan mereka mengetahui cara mengkode.

Kebanyakan widget WordPress menawarkan kustomisasi dan pilihan seperti formulir untuk diisi, gambar opsional dan fitur penyesuaian lainnya.

Memeriksa Kelas Widget

Cara termudah untuk membuat widget WordPress adalah dengan mewariskan kelas WP_Widget. Dengan cara ini Anda bisa menggunakan fungsi bawaan untuk memperbarui widget, menampilkan widget, dan membuat antarmuka admin untuk widget.

Untuk memahami bagaimana widget bekerja, kita akan membuat dan memeriksa widget kosong. Kita kemudian akan menentukan setiap fungsi yang membentuk widget sehingga melihat bagaimana mereka bekerja sama untuk membuat widget yang bekerja.

Definisi Widget Kita



Fungsi Terperinci

Mari kita lihat masing-masing fungsi secara lebih rinci:

__construct()

Fungsi ini mendaftarkan widget dengan WordPress

widget()

Fungsi ini bertanggung jawab atas tampilan front-end widget. Ini menampilkan isi widget

update()

Memproses opsi widget pada penyimpanan. Gunakan fungsi ini untuk memperbarui widget Anda (pilihan). Fungsi ini mengambil dua parameter:

  1. $new_instance - Nilai hanya dikirim untuk disimpan. Nilai-nilai ini akan datang dari formulir yang didefinisikan dalam metode form()
  2. $old_instance - Nilai-nilai yang tersimpan sebelumnya dari database

Pastikan untuk membersihkan semua nilai-nilai yang diberikan pengguna di sini. Nilai-nilai yang dikirim oleh pengguna harus selalu disterilkan sebelum dikirim ke database

form()

Metode/funsgi form() digunakan untuk menentukan formulir widget back-end - yang Anda lihat di panel widget di dashboard Formulir ini memungkinkan pengguna untuk mengatur judul dan opsi lainnya untuk widget-nya.

Fungsi ini mengambil parameter sebagai berikut:

  • $instance - Nilai-nilai yang tersimpan sebelumnya dari database

Membuat Widget Kita

Untuk membuat widget kita, kita akan mengikuti langkah-langkah berikut:

  • Menentukan apa yang kita buat
  • Mendaftarkan widget kita dengan WordPress
  • Membangun formulir back-end
  • Menyimpan nilai ke database
  • Menentukan Display front-end
  • Mendaftarkan widget-nya

Apa yang Kita Buat?

Seperti yang telah kami sebutkan sebelumnya, kita membuat widget teks sederhana yang memungkinkan pengguna memasukkan judul dan beberapa teks acak yang kemudian akan menjadi keluaran di front-end situs web mereka dimana widget ditempatkan.

Constructor Widget

Constructor memungkinkan kita untuk menginisialisasi widget kita dengan menimpa kelas induk (kelas WP_Widget standar).



Dalam kode di atas, kita memanggil fungsi construct kelas WP_Widget induk dan menyampaikan argumen yang berikut ini:

  • Base ID - Pengenal unik untuk widget. Harus dalam huruf kecil. Jika dibiarkan kosong sebagian dari nama kelas widget akan digunakan.
  • Name - Ini adalah nama untuk widget yang ditampilkan di halaman konfigurasi (di dashborad).
  • Dan sebuah array (opsional) yang berisi nama kelas dan deskripsi. Deskripsi ditampilkan pada halaman konfigurasi (di dashboard WordPress).

Membangun Formulir Back-end

Formulir back-end akan terdiri dari dua field – field judul dan field textarea. Berikut adalah screenshot dari formulirnya yang akan terlihat di panel Widgets:

Our widgets back-end configuration form

Formulir konfigurasi back-end widget kitaUntuk menghasilkan formulir di atas, kita akan memulai dengan HTML murni dan kemudian mengganti beberapa nilai atribut dengan beberapa variabel dan ekspresi PHP. Berikut ini adalah kode HTML untuk membuat dua field:



Untuk beralih dari kode ini ke kode akhir untuk fungsi form(), kita perlu membuat beberapa atribut di atas dinamis - yaitu, name, id dan label untuk atributnya (yang harus sesuai dengan id dari HTML yang labelnya adalah untuknya). Kita juga akan mengganti nilai field teks dan konten field textarea dengan nilai dinamis dari database jika sudah tersimpan.

Inilah kode kita akhirnya:



Kode di atas mengakses dan menetapkan nilai-nilai yang tersimpan sebelumnya dari database ke dua variabel - $title dan $message. Kita kemudian menggunakan esc_attr() untuk mengkodekan nilai yang dikembalikan dan untuk menghindari perusakan kode kita. Kita kemudian echo atribut $title menjadi atribut nilai dari field teks dan echo $message sebagai isi field textarea.

Dalam kode di atas, Anda akan melihat dua metode yang mungkin baru bagi Anda - get_field_id() dan get_field_name().

  • get_field_id() – Mengambil nama field sebagai argumen dan membangun atribut id untuk digunakan dalam field form(). Ini memastikan bahwa id bidang yang dikembalikan itu unik
  • get_field_name() – Mengambil nama field sebagai argumen dan membangun atribut nama untuk digunakan dalam field form(). Ini memastikan bahwa nama field yang dikembalikan itu unik.

Tag label atribut for diberi kode untuk meng-echo nilai id dari elemen yang mereka beri label.

Class widefat digunakan untuk memastikan bahwa field widget Anda memiliki tampilan yang sama seperti field lainnya di seluruh dashboard WordPress.


Memperbarui Widget Kita (Pilihan)

Untuk memperbarui widget kita, kita akan menulis kode yang sesuai dalam metode update. Inilah kode kita:


Fungsi di atas membutuhkan dua parameter - $new_instance dan $old_instance

  • $new_instance adalah array yang berisi setting baru (instance dari widget ini) yang baru saja dimasukkan oleh pengguna melalui formulir backend yang kita definisikan dalam fungsi form().
  • $old_settings adalah array yang berisi pengaturan yang lama. Ini adalah nilai-nilai yang saat ini tersimpan dalam database.

Fungsi update() mengembalikan array pengaturan untuk menyimpan atau false untuk membatalkan penyimpanan.

Pada kode di atas, kita menetapkan $old_instance ke variabel $instance dan mengganti kunci judul dan pesan dengan nilai dari $new_instance. Dengan mengembalikan array yang baru dan diperbarui, kita secara efektif memperbarui pengaturan widget kita.

Fungsi strip_tags() menghapus tag HTML dan PHP dari string yang dikirimkan ke dalamnya. Kita menyertakan fungsi ini untuk menghindari situasi di mana pengguna tema Anda gagal menutup tag yang dimasukkan melalui formulir back-end, sehingga situs Anda rusak (tidak di-render dengan benar).

Mendefinisikan Front-End

Fungsi widget() bertanggung jawab atas tampilan front-end widget. Dibutuhkan dua parameter - $args dan $instance.

$args adalah sebuah array yang dilewatkan ke fungsi register_sidebar() saat menentukan area sidebar/widgetised dimana widget ditempatkan. Ini ditemukan di file functions.php Anda. Berikut adalah contoh deklarasi sebuah register_sidebar():

Sample register_widget declaration

Contoh deklarasi register_widgetArray berisi definisi tag pembuka dan penutup untuk widget itu sendiri dan untuk judul widget.

$instance adalah array yang berisi pengaturan untuk instance widget tertentu. Pengaturan ini akan diambil dari database.

Kita menggunakan tag yang disebutkan di atas dalam kode widget akhir di bawah ini:


Pada kode diatas, akhirnya kita bisa mengkode front-end widget kita. Widget kita hanya mengeluarkan sebuah judul dan beberapa pesan yang bebas (teks). Kode melakukan hal itu dan membungkus widget itu sendiri dan judul widget di dalam tag pembuka dan penutup yang didefinisikan di functions.php untuk area widget khusus (sidebar) dimana widget ditempatkan.

Kita mengenalkan fungsi extract() yang mungkin tidak biasa bagi beberapa orang. Fungsi ini mengambil array asosiatif dan mengembalikan kuncinya sebagai variabel. Ini memungkinkan kita untuk meng-echo $before_widget bukan $args['before_widget'], sehingga menyederhanakan kode kita sedikit.

Hasil akhir di situs web sebenarnya akan terlihat seperti ini:

Our text widget on an actual site

Mendaftarkan Widget

Widget harus terdaftar di WordPress setelah di definisikan sehingga tersedia di panel widget di dashboard WordPress kita.

Kode Ahir

Untuk menjaga hal-hal tetap sederhana bagi pengguna akhir widget kita, kita akan membungkus kode widget kita di plugin WordPress sehingga mudah diinstal.

Ini juga akan memungkinkan kita untuk menyimpan semua kode yang akan kita buat sepanjang serial dalam satu file.

Berikut adalah kode akhirnya:


Kesimpulan

Dalam tutorial ini, kami memperkenalkan serial - Membuat Widget WordPress Anda Sendiri Menggunakan Berbagai API. Kita melihat lebih dalam tentang apa adanya, bagaimana cara kerjanya dan cara membuatnya.

Tujuan dari tutorial ini adalah untuk memberikan pengenalan yang menyeluruh terhadap Widgets API dan untuk menyediakan widget dasar dimana widget lainnya dalam serial ini dapat dibuat.

Di bagian selanjutnya dari serial ini, kita akan membuat widget posting terkait. Sementara itu, jangan ragu untuk meninggalkan pertanyaan atau komentar apapun pada formulir di bawah ini.

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.