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

API Pengaturan WordPress, Bagian 6: Halaman Menu

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called The Complete Guide to the WordPress Settings API.
The WordPress Settings API, Part 5: Tabbed Navigation For Settings
The WordPress Settings API, Part 7: Validation, Sanitisation, and Input

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Di Bagian 3 dari seri ini, kami mensurvei berbagai fungsi menu yang disediakan oleh WordPress API. Jika Anda telah mengikuti, maka Anda tahu bahwa kami sudah menyiapkan halaman pengaturan untuk tema kami dengan menggunakan fungsi add_theme_page. Meskipun memperkenalkan menu dan submenu tidak secara eksplisit merupakan bagian dari API Pengaturan, mereka memainkan peran dalam membangun fungsi, plugin, dan / atau tema khusus.

Dalam artikel ini, kita akan memperkenalkan menu baru ke dashboard WordPress yang akan membuat pilihan tema kita tersedia di tempat lain selain hanya di bawah opsi 'Penampilan'.

Sebelum kita mulai: Artikel ini mengasumsikan bahwa Anda terbiasa dengan API Pengaturan dan opsi tema. Jika Anda seorang pemula atau bahkan pengembang WordPress menengah, saya sangat menyarankan untuk mengikuti sisa seri sebelum masuk ke posting ini.


Lihatlah API

Karena kami sudah melihat masing-masing fungsi menu, kami tidak perlu mengulang-ulang setiap fungsi yang tersedia di WordPress. Sebaliknya, kita akan melihat yang akan kita gunakan dan kemudian bekerja melalui contoh praktis bagaimana menggunakannya dalam pekerjaan kita sendiri.

Sebelum kita melihat setiap fungsi, mari detail apa yang akan kita capai dalam fase berikutnya dari seri ini:

  • Perkenalkan menu tingkat atas untuk opsi tema kami
  • Tambahkan item submenu yang akan ditautkan ke tab 'Pilihan Tampilan'
  • Tambahkan item submenu yang akan ditautkan ke tab 'Opsi Sosial'

Relatif sederhana, kan? Untuk melakukan ini, kami akan mengambil keuntungan dari dua fungsi berikut:

  • add_menu_page yang digunakan untuk memperkenalkan item menu tingkat atas
  • add_submenu_page yang digunakan untuk memperkenalkan item submenu untuk top-level menu.

Kita akan mengambil melihat fungsi setiap parameter dan penggunaan pelaksanaan mereka dalam tema kami.

Catatan bahwa sisa artikel ini didasarkan pada versi WordPress pengaturan Sandbox. Jika Anda mengikuti repositori, pastikan Anda memeriksanya.


Top-Level Menu

Hal pertama yang ingin kami lakukan adalah memperkenalkan menu tingkat atas. Menu ini akan muncul langsung di bawah menu 'Pengaturan' di dasbor WordPress dan akan melayani dua tujuan. Menu harus:

  1. Buka opsi tema ke dasbor WordPress
  2. Tampilkan halaman opsi default untuk opsi tema

Fungsi ini mengambil tujuh argumen berikut, lima yang pertama diperlukan, dua yang terakhir tidak:

  1. page_title adalah teks yang akan ditampilkan pada bilah judul browser
  2. menu_title adalah teks yang akan ditampilkan untuk item menu
  3. kemampuan mengacu pada peran yang harus dimiliki pengguna untuk mengakses menu ini
  4. menu_slug adalah nilai unik yang mengidentifikasi menu ini. Hal ini juga bagaimana submenu mendaftarkan diri dengan menu ini.
  5. function_name yang disebut ketika menu diklik untuk menampilkan halaman pilihan.
  6. icon_url adalah path ke ikon yang Anda ingin ditampilkan di sebelah item menu Anda.
  7. posisi adalah tempat menu harus ditambahkan dalam kaitannya dengan menu yang lain dalam WordPress Dashboard.

Dalam pekerjaan kami, kami akan fokus hanya pada parameter pertama lima. Saya membahas menu posisi dalam kesimpulan dari artikel ini.

Untuk memulai, kita akan perlu untuk memperkenalkan panggilan ke fungsi add_menu_page. Menurut WordPress Codex, administrasi menu dapat ditambahkan dengan menggunakan admin_menu hook. Sebelumnya dalam seri ini, kami menulis fungsi yang menambahkan opsi tema kami ke menu 'Penampilan'. Secara khusus, kami menulis sandbox_example_theme_menu:

Perhatikan kode diatas bahwa fungsi ini didaftarkan di hook admin_menu, juga. Anda harus selalu berusaha untuk menjaga fungsi Anda sejalan. Karena kita sudah memiliki fungsi yang mendaftarkan menu, yang terdaftar dengan hook sesuai, dan karena kami memperkenalkan fungsi yang sama, kami akan menambahkan fungsi-fungsi menu kami baru ke fungsi ini.

Tambahkan berikut panggilan untuk add_menu_page langsung di bawah panggilan di atas:

Seperti yang Anda lihat, kita sedang mendaftar menu yang akan menampilkan "Sandbox Theme" dalam judul kedua browser bar dan menu item. Kami memperlihatkan menu hanya untuk administrator dan kita telah diberi menu ID unik dari "sandbox_theme_parent_menu". Kita akan kembali menggunakan parameter ini pada bagian berikutnya.

Ada satu hal penting yang kita perlu menjelaskan: Perhatikan bahwa kami telah melewati 'sandbox_theme_display' sebagai fungsi akan dipanggil ketika item menu ini diklik. Ingat bahwa pada bagian 3 kita memperkenalkan fungsi ini (dan kita dimurnikan dalam Bagian 5). Secara khusus, ini bertanggung jawab untuk render halaman pilihan tab tema kami.

Dengan melewati nama fungsi ini ada ke fungsi add_menu_page, kami mengambil keuntungan dari kode yang kita sudah menulis dan kami sedang rendering halaman pilihan default untuk menu item.

Pada titik ini, kita sudah siap untuk mulai menambahkan submenu tapi sebelum bergerak maju, pastikan bahwa fungsi Anda tampak persis seperti ini:


Menambahkan submenu

Submenu sangat mirip dengan menu kecuali bahwa mereka "milik" menu yang ada. API untuk mendaftar submenu relatif sama, juga. Fungsi ini menerima enam argumen, lima yang pertama diperlukan, yang terakhir adalah opsional:

  1. parent_slug mengacu pada ID unik dari item menu induk. Dalam kasus kami, "sandbox_theme_menu".
  2. page_title adalah teks yang akan ditampilkan di bilah alat browser ketika item submenu ini aktif
  3. menu_title adalah teks untuk item submenu yang sebenarnya di dasbor
  4. kemampuan adalah peran yang pengguna harus mengakses item menu ini
  5. menu_slug adalah ID unik untuk item menu tertentu ini
  6. function_name yang dipanggil saat menu diklik untuk menampilkan halaman opsi

Fungsinya sangat mudah. Kami memiliki dua item menu untuk diperkenalkan - satu untuk 'Pilihan Tampilan' dan satu untuk 'Opsi Sosial.'

Pilihan tampilan

Pertama, mari memperkenalkan item submenu untuk opsi tampilan. Tambahkan blok kode berikut langsung di bawah panggilan add_menu_page yang kami definisikan di atas:

Setiap parameter di atas harus jelas dengan pengecualian nama fungsi yang kami berikan sebagai argumen terakhir. Perhatikan bahwa itu adalah nama fungsi yang sama yang kami berikan di panggilan add_menu_page. Tapi ini masuk akal, kanan? Setelah semua, "Opsi tampilan" adalah tab default yang akan ditampilkan bila pilihan tema yang dipilih jadi itu akan masuk akal yang harus diberikan ketika top-level menu yang dipilih dan ketika item menu "Tampilan pilihan" dipilih.

Pada titik ini, ada fitur penting dari WordPress untuk menyorot: catatan bahwa setelah Anda menambahkan item submenu Anda pertama, WordPress akan benar-benar membuat dua item submenu top-level menu-salah satu item yang duplikat fungsi top-level menu dan satu item yang berkaitan dengan item submenu yang Anda baru saja definisikan. Aku membawa hal ini karena, dalam pengalaman saya, saya telah melihat pengembang mendapatkan bingung bagaimana (dan mengapa) hal ini terjadi. Pendek itu adalah bahwa WordPress adalah melakukan hal ini-tidak ada yang salah dengan kode Anda.

Pilihan sosial

Menambahkan item menu pilihan sosial adalah hampir persis seperti menambahkan item menu pilihan tampilan. Tentu saja, kami hanya ingin untuk mengubah nilai bar judul, menu item dan halaman yang akan ditampilkan setiap kali menu yang dipilih. Pertama, mari kita setup kami panggilan ke fungsi add_submenu_page. Seharusnya terlihat seperti ini:

Simpan kode Anda, me-refresh dashboard Anda, dan Anda akan melihat item menu "Sosial pilihan" sekarang tersedia di bawah menu "Tema Sandbox"; Namun, melihat bahwa mengklik pada item submenu baru hanya menuliskan "Opsi tampilan." Karena kita sudah berlalu "sandbox_theme_display" sebagai nama fungsi, itulah yang seharusnya kita lihat, benar? Jadi sekarang kita dihadapkan dengan sedikit tantangan: bagaimana kita memilih tab "Sosial pilihan" ketika mengklik pada submenu item?

Refactoring fungsi Tab kami

Ada beberapa pilihan yang berbeda yang kita miliki untuk mengikat item submenu baru ke tab tepat pada halaman pilihan tema:

  • Kita dapat mendefinisikan sebuah fungsi baru yang membuat pilihan sosial. Ini akan memerlukan bahwa kami melakukan beberapa pekerjaan tambahan dalam memperkenalkan fungsi baru, mendirikan tabbing fungsi sehingga kita tidak istirahat pengalaman dari laman yang ada, dan duplikasi sedikit kode.
  • Kita dapat refactor fungsi yang ada sandbox_theme_display untuk menerima parameter opsional dan kemudian menggunakan fungsi anonim dalam panggilan add_submenu_page untuk melewati parameter untuk itu.

Pada akhirnya, salah satu dari pilihan ini adalah keinginan Anda; Namun, saya akan agak refactor fungsi saya yang sudah ada daripada duplikasi kode sehingga adalah apa yang akan saya lakukan sepanjang sisa artikel ini.

Pertama, mari kita mulai refactoring sandbox_theme_display fungsi kami. Mari kita menerima argumen opsional yang akan digunakan untuk menunjukkan tab mana yang ingin kita pilih. Cari tanda tangan berikut di file functions.php Anda:

Perbarui tanda tangan sehingga menerima satu argumen dan setel ke nol saat tidak ditentukan:

Jika Anda baru mengenal PHP, Anda dapat membaca tentang argumen default di halaman ini.

Ingat dari artikel terakhir bahwa fungsi tampilan kami sebenarnya mencari nilai string kueri yang akan ditetapkan. Kami masih ingin mempertahankan fungsionalitas itu, tetapi kami perlu memperhitungkan fakta bahwa parameter dapat dilewatkan ke fungsi, juga. Untuk melakukan refactoring ini, pertama cari baris kode berikut dalam fungsi sandbox_theme_display:

Perhatikan bahwa baris kode ini tertentu hanya berkaitan dengan parameter string kueri. Untuk memperhitungkan parameter opsional baru, kita perlu memperkenalkan logika yang pertama memeriksa jika parameter string kueri dicentang, jika tidak, itu akan memeriksa untuk melihat jika argumen fungsi yang ditetapkan untuk menampilkan pilihan sosial, dan, jika tidak, maka itu akan default ke layar op memainkan beberapa fungsi. Ganti baris kode di atas dengan kondisi berikut:

Versi final dari fungsi akan terlihat seperti ini:

Kita belum selesai. Meskipun kami telah melakukan pekerjaan yang perlu untuk menampilkan pilihan sosial jika parameter yang tepat telah berlalu, kami belum benar-benar disebut fungsi menggunakan parameter. Untuk melakukan ini, kita perlu refactor fungsi add_submenu_page dari atas. Saat ini, fungsi panggilan seperti ini:

Kita perlu untuk memperbarui parameter akhir sehingga itu memanggil fungsi layar dan melewati nilai tepat untuk render pilihan sosial. Untuk melakukan itu, kita akan membuat fungsi anonim:

Jika Anda baru untuk PHP, pastikan untuk membaca tentang create_function fitur dan fungsi anonim. Meskipun mereka berada di luar lingkup artikel ini, mereka dapat menjadi kuat (dan berguna!) ketika digunakan dalam konteks yang tepat.

Versi final dari fungsi sandbox_example_theme_menu harus sebagai berikut:


Kesimpulan

Pada titik ini, kami tema sekarang memiliki sendiri top-level menu item dengan masing-masing tab pengaturan dapat diakses melalui item submenu. Meskipun ini berguna, saya percaya penting untuk dicatat bahwa ada beberapa pendapat campuran dalam memperkenalkan menu ke dalam WordPress Dashboard. Meskipun mereka dapat membuat pekerjaan Anda lebih menonjol dan mudah diakses, mereka mungkin juga mengganggu ada menu WordPress atau pihak ketiga lain bekerja terutama jika Anda mencoba untuk menempatkan menu Anda di suatu tempat menggunakan parameter posisi. Meskipun tidak ada kesalahan mutlak atau mutlak mutlak ketika memperkenalkan menu, pikirkan baik-baik tentang di mana Anda mengekspos menu Anda. Jika menu WordPress yang ada masuk akal, daftarkan pekerjaan Anda sebagai submenu.

Pada posting berikutnya, kita akan mulai melihat berbagai elemen input yang dapat kita gunakan untuk memperkenalkan opsi ke dalam tema WordPress kita serta cara memvalidasi dan membersihkan data sebelum membuat serial.


Sumber Terkait

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.