Menggunakan tulang punggung dalam WordPress Admin: Back-End

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.

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.

2. Tambahkan Plugin Header

Dalam wp_quiz.php.

1

/*

2

Plugin Name: WP Quiz

3

Plugin URI: https://wp.tutsplus.com/author/shaneosbourne/

4

Description: An example of using Backbone within a plugin.

5

Author: Shane Osbourne

6

Version: 0.1

7

Author URI: http://wp.tutsplus.com/author/shaneosbourne/

8

*/

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

1

/** wp_quiz.php **/

2

3

include 'src/WpQuiz.php'; // Class File

4

5

// Create an instance of the Plugin Class

6

function call_wp_quiz() {

7

  return new WpQuiz( 'admin' );

8

}

9

10

// Only when the current user is an Admin

11

if ( is_admin )

12

	add_action( 'init', 'call_wp_quiz' );

13

14

// Helper function

15

if ( ! function_exists( 'pp' ) ) {

16

	function pp() {

17

		return plugin_dir_url( __FILE__ );

18

	}

19

}

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

1

/** src/WpQuiz.php  **/

2

class WpQuiz {

3

4

	// Names of Custom Post Type

5

	public $postTypeNameSingle = 'Question';

6

	public $postTypeNamePlural = 'Questions';

7

8

	// Meta Box Stuff

9

	public $metaBoxTitle = 'Answers';

10

	public $metaBoxTempl = 'templates/metabox.templ.php';

11

12

	// Question Id's

13

	public $answerIds = array( 'quiz-a-1', 'quiz-a-2', 'quiz-a-3', 'quiz-a-4' );

14

15

	// Javascript

16

	public $jsAdmin = '/js/admin.js';

17

18

}

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

1

/** src/WpQuiz.php  **/

2

3

public function __construct( $type ) {

4

	switch ( $type ) {

5

		case 'admin' :

6

			// Register the Post Type

7

			$this->registerPostType(

8

				$this->postTypeNameSingle,

9

				$this->postTypeNamePlural

10

			);

11

12

			// Add the Meta Box

13

			add_action( 'add_meta_boxes', array( $this, 'addMetaBox' ) );

14

15

			// Accept an Ajax Request

16

			add_action( 'wp_ajax_save_answer', array( $this, 'saveAnswers' ) );

17

18

			// Watch for Post being saved

19

			add_action( 'save_post', array( $this, 'savePost' ) );

20

	}

21

}

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

1

/** src/WpQuiz.php  **/

2

3

public function addMetaBox() {

4

5

	// Load the Javascript needed on this admin page.

6

	$this->addScripts();

7

8

	// Create an id based on Post-type name

9

	$id = $this->postTypeNameSingle . '_metabox';

10

11

	// Add the meta box

12

	add_meta_box(

13

		$id,

14

		$this->metaBoxTitle,

15

		array( $this, 'getMetaBox' ), // Get the markup needed

16

		$this->postTypeNameSingle

17

	);

18

19

}

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!

1

/** src/WpQuiz.php  **/

2

3

public function getMetaBox( $post ) {

4

5

	// Get the current values for the questions

6

	$json = array();

7

	foreach ( $this->answerIds as $id ) {

8

		$json[] = $this->getOneAnswer( $post->ID, $id );

9

	}

10

11

	// Set data needed in the template

12

	$viewData = array(

13

		'post' => $post,

14

		'answers' => json_encode( $json ),

15

		'correct' => json_encode( get_post_meta( $post->ID, 'correct_answer' ) )

16

	);

17

18

	echo $this->getTemplatePart( $this->metaBoxTempl, $viewData );

19

20

}

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.

1

/** src/WpQuiz.php  **/

2

3

public function getOneAnswer( $post_id, $answer_id ) {

4

	return array(

5

		'answer_id' => $answer_id,

6

		'answer' => get_post_meta( $post_id, $answer_id, true )

7

	);

8

}

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.

1

/** src/WpQuiz.php  **/

2

3

public function savePost( $post_id ) {

4

	// Check that we are saving our Custom Post type

5

	if ( $_POST['post_type'] !== strtolower( $this->postTypeNameSingle ) ) {

6

		return;

7

	}

8

9

	// Check that the user has correct permissions

10

	if ( ! $this->canSaveData( $post_id ) ) {

11

		return;

12

	}

13

14

	// Access the data from the $_POST global and create a new array containing

15

	// the info needed to make the save

16

	$fields = array();

17

	foreach ( $this->answerIds as $id ) {

18

		$fields[$id] = $_POST[$id];

19

	}

20

21

	// Loop through the new array and save/update each one

22

	foreach ( $fields as $id => $field ) {

23

		add_post_meta( $post_id, $id, $field, true );

24

		// or

25

		update_post_meta( $post_id, $id, $field );

26

	}

27

28

	// Save/update the correct answer

29

	add_post_meta( $post_id, 'correct_answer', $_POST['correct_answer'], true );

30

	// or

31

	update_post_meta( $post_id, 'correct_answer', $_POST['correct_answer'] );

32

33

}

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

1

/** src/WpQuiz.php  **/

2

3

public function saveAnswers() {

4

	// Get PUT data and decode it

5

	$model = json_decode( file_get_contents( "php://input" ) );

6

7

	// Ensure that this user has the correct permissions

8

	if ( ! $this->canSaveData( $model->post_id ) ) {

9

		return;

10

	}

11

12

	// Attempt an insert/update

13

	$update = add_post_meta( $model->post_id, $model->answer_id, $model->answer, true );

14

	// or

15

	$update = update_post_meta( $model->post_id, $model->answer_id, $model->answer );

16

17

	// If a save or update was successful, return the model in JSON format

18

	if ( $update ) {

19

		echo json_encode( $this->getOneAnswer( $model->post_id, $model->answer_id ) );

20

	} else {

21

		echo 0;

22

	}

23

	die();

24

}

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.

1

/** src/WpQuiz.php  **/

2

3

/**

4

* Determine if the current user has the relevant permissions

5

*

6

* @param $post_id

7

* @return bool

8

*/

9

private function canSaveData( $post_id ) {

10

	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )

11

		return false;

12

	if ( 'page' == $_POST['post_type'] ) {

13

		if ( ! current_user_can( 'edit_page', $post_id ) )

14

			return false;

15

	} else {

16

		if ( ! current_user_can( 'edit_post', $post_id ) )

17

			return false;

18

	}

19

	return true;

20

}

21

22

private function addScripts() {

23

	wp_register_script( 'wp_quiz_main_js', pp() . $this->jsAdmin , array( 'backbone' ), null, true );

24

	wp_enqueue_script( 'wp_quiz_main_js' );

25

}

26

27

/**

28

* Register a Custom Post Type

29

*

30

* @param $single

31

* @param $plural

32

* @param null $supports

33

*/

34

private function registerPostType( $single, $plural, $supports = null ) {

35

36

	$labels = array(

37

		'name' => _x( $plural, 'post type general name' ),

38

		'singular_name' => _x( "$single", 'post type singular name' ),

39

		'add_new' => _x( "Add New $single", "$single" ),

40

		'add_new_item' => __( "Add New $single" ),

41

		'edit_item' => __( "Edit $single" ),

42

		'new_item' => __( "New $single" ),

43

		'all_items' => __( "All $plural" ),

44

		'view_item' => __( "View $single" ),

45

		'search_items' => __( "Search $plural" ),

46

		'not_found' => __( "No $plural found" ),

47

		'not_found_in_trash' => __( "No $single found in Trash" ),

48

		'parent_item_colon' => '',

49

		'menu_name' => $plural

50

	);

51

	$args = array(

52

		'labels' => $labels,

53

		'public' => true,

54

		'publicly_queryable' => true,

55

		'show_ui' => true,

56

		'show_in_menu' => true,

57

		'query_var' => true,

58

		'rewrite' => true,

59

		'capability_type' => 'post',

60

		'has_archive' => true,

61

		'hierarchical' => false,

62

		'menu_position' => null,

63

		'supports' => ( $supports ) ? $supports : array( 'title', 'editor', 'page-attributes' )

64

	);

65

	register_post_type( $single, $args );

66

}

67

68

/**

69

* Render a Template File

70

*

71

* @param $filePath

72

* @param null $viewData

73

* @return string

74

*/

75

public function getTemplatePart( $filePath, $viewData = null ) {

76

77

	( $viewData ) ? extract( $viewData ) : null;

78

79

	ob_start();

80

	include ( "$filePath" );

81

	$template = ob_get_contents();

82

	ob_end_clean();

83

84

	return $template;

85

}

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.