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

Membuat Halaman Administrasi WordPress Kustom, Bagian 1

by
Read Time:10 minsLanguages:
This post is part of a series called Creating Custom WordPress Administration Pages.
Creating Custom WordPress Administration Pages, Part 2

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

Pada serial sebelumnya, saya memberikan panduan mendalam untuk bekerja dengan WordPress Settings API. Bagi yang baru mengenal WordPress atau yang telah menggunakan alat lain seperti The Customizer untuk menangani berbagai pilihan, mungkin itu adalah sesuatu yang tidak harus Anda gunakan dalam pengembangan tema atau plugin Anda.

Sebagaimana dinyatakan dalam Codex:

Settings API, ditambahkan di WordPress 2.7, memungkinkan halaman admin yang berisi form pengaturan untuk dikelola secara semi-otomatis. Ini memungkinkan Anda menentukan halaman pengaturan, bagian dalam halaman dan field di dalam bagian.

Saya tidak berpikir itu adalah sesuatu yang perlu dipelajari, tapi itu adalah sesuatu yang seharusnya Anda ketahui ada dan tahu bagaimana bekerja dengannya jika Anda merasa perlu memperkenalkan halaman pilihan ke dalam area administrasi WordPress.

Ini adalah API yang kuat, meskipun agak rumit, yang memberi kita banyak fungsi. Pada akhirnya, ini memungkinkan kita melakukan banyak pekerjaan di sisi server dan bekerja minimal di sisi klien.

Tapi bagaimana dengan saat kita bekerja dengan solusi khusus untuk klien dan kita memerlukan fleksibilitas sedikit lebih banyak daripada yang disediakan Settings API? Misalnya, katakanlah kita perlu membuat plugin yang akan memiliki halaman pengaturan namun memerlukan seperangkat pilihan yang lebih fleksibel dan fungsi validasi yang disesuaikan?

Dalam kasus tersebut, itu mungkin untuk menulis halaman administrasi WordPress kustom kita sendiri. Dalam seri ini, kita akan melihat bagaimana melakukan hal itu.

Sebelum Kita Mulai

Seperti kebanyakan tutorial seperti ini, penting untuk memastikan bahwa Anda memiliki segalanya untuk diikuti sehingga Anda dapat bekerja dengan kode sumber yang kami bahas sepanjang serial.

Untuk tutorial ini, saya berasumsi:

  • Anda memiliki pengaturan lingkungan pengembangan lokal yang relatif terhadap sistem operasi Anda.
  • Anda memiliki salinan WordPress yang terinstal dan siap digunakan untuk memasang plugin.
  • Anda sudah terbiasa dengan praktik pengembangan plugin WordPress.
  • Anda merasa nyaman bekerja dengan PHP dan HTML.

Jika Anda tidak terbiasa dengan cara menyiapkan lingkungan pengembangan lokal yang mencakup WordPress, lihat serial ini untuk cara melakukannya.

Dan jika Anda merasa cukup nyaman dengan PHP, biarpun hanya membaca bahasanya, maka saya akan melakukan yang terbaik untuk memberikan petunjuk dan komentar yang jelas untuk setiap potongan kode yang kami bagi.

Setelah semua ini siap, kita siap untuk mulai mengerjakan plugin kita.

Pengaturan Administrasi WordPress Kustom

Pada akhir seri ini, kita akan memiliki sebuah plugin yang memenuhi persyaratan berikut:

  • Menambahkan item submenu baru ke sistem menu WordPress yang ada.
  • Menambahkan halaman pengaturan baru yang sesuai dengan item submenu baru.
  • Sanitasi dan serialisasi pilihan pada halaman.
  • Validasi dan mengembalikan nilai yang telah disimpan dan menampilkan sesuai dengannya.

Selanjutnya, kita akan memastikan bahwa kita mendekati hal ini dengan cara yang paling semodular mungkin menggunakan Standar Pengkodean WordPress dan praktik-praktik serupa untuk membuat pembacaan, penulisan, dan pemeliharaan plugin kita semudah mungkin.

1. Bootstrap Plugin

Hal pertama yang perlu kita lakukan adalah membuat bootstrap plugin. Ini termasuk membuat direktori untuk menampung file plugin, README dasar, salinan lisensi, file bootstrap yang pada akhirnya akan digunakan untuk memulai plugin, dan sebuah direktori yang akan digunakan untuk menampung kelas-kelas yang terkait dengan fungsi administrasi.

File-file tersebut tersedia untuk diunduh sebagai lampiran pada posting ini namun, sementara itu, Anda dapat melihat seperti apa direktori saya di bawah ini:

The plugins directory structureThe plugins directory structureThe plugins directory structure

Struktur direktori pluginSelanjutnya, konten bootstrap plugin itu sederhana. Tinjau kode berikut untuk file PHP custom-admin-settings.php, lalu saya akan membahasnya secara lebih rinci di bawah bloknya.

Perhatikan bahwa dalam kode di atas, sebenarnya ada sedikit kode. Sebagai gantinya, lebih banyak komentar. Blok utama dari komentar di bagian atas file menjelaskan apa file tersebut.

Area di bawah tag @wordpress-plugin inilah yang akan dibaca WordPress agar menghasilkan judul, deskripsi, dan tautan relatif plugin di dashboard plugin WordPress.

Selanjutnya, kita mencegah seseorang mengakses file secara langsung. Dan, akhirnya, kita membuat fungsi kustom untuk dijalankan dengan hook plugins_loaded. Fungsi inilah yang akan digunakan untuk memulai plugin.

Pada titik ini, Anda harus bisa log in ke WordPress, navigasikan ke Dashboard Plugin, dan kemudian lihat plugin yang tersedia untuk diaktifkan. Langsung klik Activate.

Tidak akan ada yang akan terjadi, namun kita akan mulai menambahkan fungsionalitas saat kita mengerjakan seluruh tutorial ini.

2. Membuat Item Submenu

Untuk mulai mengerjakan plugin, mari kita memperkenalkan item submenu dahulu. Untuk melakukan ini, kita perlu memanfaatkan fungsi add_options_page dari WordPress API. Fungsi ini akan membutuhkan lima parameter:

  1. teks yang akan ditampilkan sebagai judul dari halaman pilihan yang sesuai
  2. teks untuk ditampilkan sebagai teks submenu untuk item menu
  3. kemampuan yang dibutuhkan untuk mengakses item menu ini
  4. slug menu yang digunakan untuk mengidentifikasi item submenu ini
  5. sebuah callback ke fungsi yang bertanggung jawab untuk me-render halaman admin

Perhatikan bahwa kami akan menggunakan kelas-kelas untuk mengatur fungsionalitas kami, jadi sebagian besar dari apa yang kita lakukan akan berorientasi objek.

Pertama, mari membuat kelas di direktori admin yang disebut class-submenu.php. Karena kelas ini bertanggung jawab untuk memperkenalkan submenu baru, kita akan memberinya nama secara deskriptif.

Isi kelas akan terlihat seperti ini:

Pada titik ini, plugin tetap tidak akan melakukan apapun. Kita masih perlu membuat kelas Submenu_Page yang sebenarnya, dan kemudian kita perlu memasang kelas ke file bootstrap.

3. Membuat Halaman Submenu

Mari kita mulai dengan kelas Submenu_Page terlebih dahulu. Membuat file lain di direktori admin dan menamakannya class-submenu-page.php. Kemudian, di file tersebut, tambahkan kode berikut.

Saat halaman ini ditampilkan, maka hanya akan menampilkan teksnya: "This is the basic submenu page." Kita akhirnya akan menambahkan opsi baru. Tapi pertama, mari kita hidupkan plugin ini dengan memberi instantiasinya di dalam file bootstrap kita.

4. Me-render Menu dan Halaman

Selanjutnya, buka file custom-admin-settings.php yang telah kita buat tadi di tutorial ini. Mari kita lanjutkan dan tuliskan kode yang diperlukan untuk mengenalkan item submenu baru dan halaman yang terkait.

Ingat, kelas Submenu mengharuskan sebuah instance dari kelas Submenu_Page disampaikan ke constructor-nya, dan kemudian kita perlu memanggil metode init pada kelas Submenu untuk mengatur keseluruhan pergerakannya.

Dalam kode, ini terlihat seperti berikut:

Pada titik ini, Anda harus bisa me-refresh instalasi WordPress Anda, mengaktifkan plugin (jika belum diaktifkan), dan kemudian melihat halaman baru Anda di-render di dalam wilayah administrasi.

The custom WordPress administration screenThe custom WordPress administration screenThe custom WordPress administration screen

Pada artikel berikutnya, kita akan melihat bagaimana kita bisa mulai mengenalkan pengaturan yang sebenarnya ke layar. Selain itu, kita akan melihat beberapa praktik terbaik dalam hal bekerja dengan template kita dan parsial template kita, lalu kita akan melihat bagaimana mereka akan dihubungkan ke API yang bertanggung jawab untuk tidak hanya menyimpannya tapi bagaimana kita akan melakukan sanitasi dan validasi pada mereka.

Tapi sebelum kita melangkah sejauh itu, saya ingin sedikit berbicara tentang desain kelas yang telah kita lihat di tutorial ini. Secara umum, saya ingin berbicara tentang mengapa kita memiliki kelas untuk Submenu dan Submenu_Page dan bagaimana kaitannya dengan file bootstrap.

Sebuah Kata pada Tanggung Jawab Kelas

Bagi Anda yang terbiasa dengan Single Responsibility Principle, bagian ini mungkin tidak menarik bagi Anda. Tapi kalau yang membutuhkan penyegaran atau ingin mendengar lebih banyak, maka bacalah terus.

Mengumpulkan hal-hal yang berubah karena alasan yang sama. Pisahkan hal-hal yang berubah karena berbagai alasan.

Ada banyak hal lagi, tapi jika Anda melihat kelas kita masing-masing (paling tidak keduanya sejauh ini), maka jelaslah bahwa alasan mengapa kelas kita dapat berubah adalah sebagai berikut:

  • Konten submenu mungkin berubah. Apa saja dari judul halaman ke slug menu dan segala sesuatu di antaranya.
  • Cara halaman menampilkan isinya mungkin (dan akan berubah). Secara khusus, saat ini tidak ada yang lain kecuali echo sebuah string. Segera, akan menyertakan file tertentu. Setelah itu, mungkin perlu menyertakan beberapa file.

Dua alasan di atas adalah dua alasan yang sangat berbeda sehingga kelas bisa berubah, sehingga membuat mereka tetap bersama di kelas yang sama akan melanggar prinsip di atas.

Pada akhirnya, saya membawa ini tidak hanya untuk membantu menjelaskan prinsip-prinsip rekayasa perangkat lunak yang lebih besar yang dapat diterapkan di WordPress, namun juga untuk membantu mempersiapkan Anda karena beberapa alasan mengapa kita akan memecah hal-hal tertentu yang biasanya berukuran besar dalam konteks plugin.

Hal yang menyenangkan tentang prinsip belajar adalah bahwa hal itu dapat diterapkan di banyak proyek dan tidak hanya dalam proyek tunggal. Anda mempelajarinya, Anda berlatih menggunakannya, dan Anda menjadi lebih baik dalam merancang solusi bagi orang lain.

Kurva belajar mungkin curam, tapi begitu Anda memulai mendakinya, semakin mudah dan mudah untuk memasukkan prinsipnya ke dalam pekerjaan Anda sehari-hari. Kemudian, pekerjaan yang Anda berikan untuk orang lain menjadi lebih mudah dipelihara dari waktu ke waktu.

Kesimpulan

Jangan lupa bahwa Anda bisa mendownload plugin dalam kondisi saat ini dari posting ini. Saat kita maju melalui serial ini, saya akan membuat versi terbaru yang tersedia di setiap posting sehingga Anda dapat mengikuti kode yang dibahas di setiap tutorial, bermain-main dengannya, dan menyiapkan pertanyaan yang mungkin ingin Anda tanyakan di komentar.

Sebagai catatan, jika Anda mencari utilitas lain untuk membantu Anda membangun perangkat Anda yang berkembang untuk WordPress atau kode untuk dipelajari dan menjadi lebih berpengalaman di WordPress, jangan lupa untuk melihat apa yang tersedia di Envato Market.

Ingat, Anda dapat menangkap semua kursus dan tutorial saya di halaman profil saya, dan Anda dapat mengikuti saya di blog dan/atau Twitter di @tommcfarlin dimana saya berbicara tentang berbagai praktik-praktik pengembangan perangkat lunak dan bagaimana kita dapat menggunakannya di WordPress.

Akhirnya, jangan ragu untuk meninggalkan pertanyaan atau komentar di feed di bawah ini. Saya melakukan yang terbaik untuk berpartisipasi dan menjawab setiap pertanyaan atau kritik yang Anda tawarkan sehubungan dengan proyek ini.

Sumber daya

Advertisement
Did you find this post useful?
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.