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

Menggunakan tulang punggung dalam WordPress Admin: Back-End

by
Read Time:11 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Santosa (you can also view the original English article)

Rumor tersebut benar! WordPress Admin Panel sekarang menggunakan Underscore dan tulang punggung! Ini berarti bahwa dengan sedikit usaha, kita bisa mulai untuk memanfaatkan perpustakaan JavaScript ini fantastis plugin kita sendiri. Tutorial ini akan menunjukkan Anda persis bagaimana Anda bisa melakukan itu. Kami akan membuat bagian Admin plugin kuis. Kita akan menggunakan Custom Post Type sederhana untuk menyimpan pertanyaan, dan kemudian dalam setiap pertanyaan kita akan menambahkan sebuah kotak meta yang akan memungkinkan kita untuk masuk ke hingga 4 jawaban dan yang merupakan salah satu yang benar. Kita akan pergi melalui cara menggunakan template, bagaimana untuk menghubungkan ke klik dan peristiwa-peristiwa kunci-up, bagaimana untuk menyimpan data kembali ke WordPress database dan yang paling penting, bagaimana untuk 'mendapatkan kebenaran dari Dom', sebagai pencipta Jeremy Ashkenas suka untuk meletakkannya.

Aku akan mengatakan depan, bahwa plugin kami sedang membangun dalam tutorial ini mungkin tampak terlalu verbose untuk apa accomplishes. Akan tetapi, memberi Anda hebat mengintip ke dunia menggunakan tulang punggung dan harus Anda menemukan sebuah proyek di masa depan yang memerlukan sebuah antarmuka pengguna yang kompleks dengan banyak JavaScript, Anda akan baik bersenjata dan siap untuk membawa banyak dibutuhkan organisasi Partai.


Apa yang akan kita lakukan

Pada bagian pertama ini, kami akan membuat back-end plugin kami. Ini akan melibatkan menyiapkan file dan folder serta melaksanakan semua fitur plugin kami memerlukan di PHP. Kita harus:

  1. Mendaftar Custom Post Type - pertanyaan kami
  2. Tambahkan meta kotak yang akan memungkinkan kita untuk memasukkan jawaban pada halaman yang sama
  3. Menyimpan informasi dari kotak meta ketika posting disimpan
  4. Menyimpan informasi dari kami permintaan ajax (melalui Backbone)

Kemudian dalam bagian kedua...

Setelah kita memiliki kami back-end mengatur, kita akan kemudian lanjutkan ke output HTML diperlukan untuk kotak meta kami bersama dengan data untuk setiap jawaban dalam JSON format. Kami juga akan menulis JavaScript yang mengikat segala sesuatu bersama-sama. Kita akan membahas:

  1. Keluaran HTML dasar untuk kotak meta
  2. Keluaran sisi klien template dengan jawaban JSON
  3. JavaScript diperlukan untuk mengikat semua bersama-sama

Saya berharap ini seri kecil terdengar menarik untuk Anda, dan aku menanti-nantikan untuk membantu Anda bangun dan berjalan dengan menggunakan Backbone.js dalam sebuah plugin.


Apa yang kita akan membangun

Plugin ini kecil akan menggunakan Custom Post Type untuk menyelamatkan pertanyaan. Kemudian pada kotak meta, kita akan membuat empat input yang akan memungkinkan pengguna untuk memasukkan kemungkinan jawaban untuk pertanyaan saat ini dan pilih mana adalah jawaban yang tepat. Ketika jawaban berubah, sesuai Simpan tombol akan menjadi aktif. Ketika diklik, kita akan menggunakan tulang punggung yang dibangun di model.save() metode untuk menyimpan data kembali ke WordPress database. Juga, ketika jawaban yang ditulis dalam input, pilih kotak di bawah ini akan secara otomatis memperbarui nilai-nilai itu akan melihat untuk perubahan model. Semua hal ini relatif sepele hubungannya dengan tulang punggung dan setelah membaca tutorial ini, Anda dapat mulai mengambil plugin Anda ke tingkat berikutnya dengan menggunakan mereka dalam WordPress.

answers01

Ada banyak untuk menutupi, jadi mari kita mulai!


1. Buat Plugin

Kita perlu melakukan semua biasa pertama langkah terlibat dengan plugin - membuat file folder.

  1. Buat folder disebut wp_quiz
  2. Membuat file PHP di dalam dengan nama yang sama
  3. Buat sebuah folder bernama js
  4. Buat sebuah folder bernama src

Struktur folder Anda akan terlihat seperti ini.

files01

2. Tambahkan Plugin Header

Dalam wp_quiz.php.


3. Tambahkan kait ke Instantiate Plugin

Masih dalam wp_quiz.php, kita perlu melakukan hal berikut:

  1. Termasuk kelas utama plugin kami
  2. Membuat fungsi yang akan membuat instance kelas
  3. Menambahkan sebuah kait untuk hanya memanggil fungsi ketika pengguna admin

Menempatkan pp() fungsi pembantu dalam file ini akan memungkinkan kami untuk referensi file lainnya relatif terhadap akar dari folder plugin (Anda akan melihat bahwa tindakan di segera).


4. membuat kelas Plugin

Dalam src folder, buat file bernama WpQuiz.php.

Dalam kelas plugin ini, kami akan memerlukan beberapa metode yang berbeda untuk mencapai semua hal berikut:

  1. Mendaftar Custom Post Type
  2. Tambahkan kotak meta
  3. Mengambil konten kotak meta dan output HTML dan beberapa data JSON ke dalamnya
  4. Mendengarkan untuk menempatkan permintaan dan menyimpan data ke database
  5. Menyimpan data kotak meta kami berdasarkan biasa 'Simpan' tindakan

Sebelum kita menulis metode meskipun, kita akan dapat menyimpan beberapa informasi sebagai properti kelas. Kami menyimpan informasi ini di bagian atas file kelas kami sehingga modifikasi lebih mudah untuk membuat nanti. AnswerIds array berisi kunci yang kita akan menggunakan seluruh plugin ini untuk menyimpan data menggunakan built-in add_post_meta().

Menambah properti

Tambahkan Constructor

  1. Pertama kali kita mendaftar jenis posting kustom menggunakan metode penolong yang lain (yang akan dilihat nanti)
  2. Kemudian kita mendaftar hook untuk memuat kotak meta kami
  3. Kami juga membutuhkan metode terpisah untuk menerima permintaan ajax kami
  4. Akhirnya, ketika halaman load kita akan ingin menyimpan info dari kotak meta kami

Tambahkan kotak Meta

  1. Menambahkan file JavaScript diperlukan untuk plugin ini - lagi menggunakan metode penolong (dilihat kemudian)
  2. Membuat ID unik untuk plugin ini berdasarkan nama jenis posting
  3. Tambahkan kotak meta menggunakan sifat-sifat yang kami ditetapkan sebelumnya

Mendapatkan kotak Meta konten

Di sini kita perulangan melalui id jawaban kami dan membangun sebuah array yang berisi posting meta diambil dengan kami getOneAnswer metode penolong. Kami membuat array baru sehingga kita dapat menyandikan ini dan mengirimkannya ke template kami dalam JSON format - hanya cara Backbone menyukainya. Kami mengirimkan data ke template kami menggunakan array $viewData yang dilihat di bawah ini. Ini membuat semua HTML dari membahayakan jalan dan memungkinkan kita untuk bekerja di atasnya di file terpisah. Kami akan mengambil cepat melihat metode getTemplatePart kemudian, tetapi jika Anda ingin penjelasan mendalam tentang mengapa saya menggunakannya, silahkan cek keluar meningkatkan Anda-alur kerja – terpisah Your Mark-Up dari Anda logika!

Mendapatkan jawaban yang tunggal - Helper

Kami hanya mengembalikan array data yang diperlukan dalam template kami. Anda dapat menganggap ini sebagai menciptakan satu model yang diperlukan di ujung depan.

Menyimpan posting

Bila pengguna mengklik untuk menyimpan posting yang kotak meta kami saat ini di, kita perlu melakukan beberapa pemeriksaan untuk memastikan kita menyelamatkan kami Custom Post Type dan bahwa pengguna saat ini memiliki izin benar - jika pemeriksaan kedua ok maka kita Simpan jawaban empat dari meta kotak dan jawaban yang benar.

Simpan jawaban dari permintaan Ajax

Ini adalah dimana kita akan mendapatkan data yang dikirimkan ke server dari tulang punggung. Kita perlu:

  1. Akses data yang dikirim sebagai menempatkan permintaan. Seperti itu akan berada dalam JSON format, kita perlu men-decode
  2. Lagi memeriksa bahwa pengguna saat ini memiliki izin yang relevan
  3. Maju terus dan mencoba menyelamatkan
  4. Jika baik Add atau Update berhasil, kita hanya dapat kembali data baru disimpan dan tulang punggung akan melihat ini sebagai save sukses
  5. Jika tidak berhasil, kita hanya kembali 0 untuk menunjukkan kegagalan

Metode penolong

Berikut adalah pembantu empat yang disebutkan dalam potongan di atas.

  1. canSaveData() - ini hanya memastikan bahwa pengguna saat ini memiliki izin yang relevan untuk mengedit / update posting ini.
  2. addScripts() - catatan itu di sini kita memastikan bahwa kita melewati param 5 ke fungsi wp_register_script(). Ini akan memuat JavaScript kustom kami ke footer dan akan memastikan bahwa data JSON kami tersedia. Juga, jika Anda menggunakan WordPress editor plugin Anda, Anda tidak perlu menetapkan tulang punggung sebagai ketergantungan karena sudah akan tersedia untuk Anda. Aku termasuk di sini untuk contoh meskipun.
  3. registerPostType() - ini adalah sesuatu yang sering saya gunakan plugin. Itu hanya membuat hidup lebih mudah ketika menambahkan jenis Custom posting baru. It menerima versi tunggal dan jamak nama karena hal ini tidak selalu semudah hanya menambahkan 's'.
  4. getTemplatePart() - Aku belum pernah suka memiliki mark-up dalam metode saya. Pembantu kecil ini akan memungkinkan penggunaan file template terpisah.

5. pada hari ke ujung depan

Pada titik ini, kami telah menyiapkan segala sesuatu yang diperlukan untuk kami back-end. Itu adalah waktu untuk istirahat dan mempersiapkan untuk bagian selanjutnya dimana kita akan mendapatkan kotor dengan sisi klien template, JavaScript dan Backbone.js. Saya berharap untuk melihat Anda di sana - itu akan menjadi bagus.

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.