Membuat Widget Anda Sendiri Menggunakan Berbagai API WordPress: Pendahuluan

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

1

<?php

2

class TutsPlusText_Widget extends WP_Widget {

3

4

  // widget constructor

5

  public function __construct(){

6

7

  }

8

9

  public function widget( $args, $instance ) {

10

    // outputs the content of the widget

11

  }

12

13

  public function form( $instance ) {

14

    // creates the back-end form

15

  }

16

17

  // Updating widget replacing old instances with new

18

  public function update( $new_instance, $old_instance ) {

19

    // processes widget options on save

20

  }

21

22

}

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).

1

<?php

2

3

public function __construct(){

4

5

  parent::__construct(

6

    	'tutsplustext_widget',

7

		__( 'TutsPlus Text Widget', 'tutsplustextdomain' ),

8

		array(

9

			'classname'   => 'tutsplustext_widget',

10

			'description' => __( 'A basic text widget to demo the Tutsplus series on creating your own widgets.', 'tutsplustextdomain' )

11

		)

12

      );

13

14

      load_plugin_textdomain( 'tutsplustextdomain', false, basename( dirname( __FILE__ ) ) . '/languages' );

15

16

    }

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:

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:

1

<p>

2

  <label for="title">Title</label>

3

  <input class="widefat" id="title" name="title" type="text" value="WIDGET TITLE" />

4

</p>

5

<p>

6

  <label for="message">Simple Message</label>

7

  <textarea class="widefat" rows="16" cols="20" id="message" name="message">message...</textarea>

8

9

</p>

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:

1

<?php

2

/**

3

  * Back-end widget form.

4

  *

5

  * @see WP_Widget::form()

6

  *

7

  * @param array $instance Previously saved values from database.

8

  */

9

public function form( $instance ) {    

10

11

    $title 		= esc_attr( $instance['title'] );

12

	$message	= esc_attr( $instance['message'] );

13

	?>

14

15

	<p>

16

		<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> 

17

		<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />

18

	</p>

19

	<p>

20

		<label for="<?php echo $this->get_field_id('message'); ?>"><?php _e('Simple Message'); ?></label> 

21

		<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>"><?php echo $message; ?></textarea>

22

	</p>

23

24

	<?php 

25

    }

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:

1

<?php

2

/**

3

  * Sanitize widget form values as they are saved.

4

  *

5

  * @see WP_Widget::update()

6

  *

7

  * @param array $new_instance Values just sent to be saved.

8

  * @param array $old_instance Previously saved values from database.

9

  *

10

  * @return array Updated safe values to be saved.

11

  */

12

public function update( $new_instance, $old_instance ) {        

13

14

	$instance = $old_instance;

15

16

	$instance['title'] = strip_tags( $new_instance['title'] );

17

	$instance['message'] = strip_tags( $new_instance['message'] );

18

19

    return $instance;

20

21

}

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():

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:

1

<?php

2

/**  

3

  * Front-end display of widget.

4

  *

5

  * @see WP_Widget::widget()

6

  *

7

  * @param array $args     Widget arguments.

8

  * @param array $instance Saved values from database.

9

  */

10

public function widget( $args, $instance ) {    

11

12

    extract( $args );

13

14

    $title         = apply_filters( 'widget_title', $instance['title'] );

15

    $message 	= $instance['message'];

16

17

	echo $before_widget;

18

19

    if ( $title ) {

20

		echo $before_title . $title . $after_title;

21

	}

22

23

	echo $message;

24

    echo $after_widget;

25

26

}

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:

Mendaftarkan Widget

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

1

<?php

2

add_action( 'widgets_init', function() {

3

     register_widget( 'TutsplusText_Widget' );

4

});

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:

1

<?php

2

/*

3

Plugin Name: Tutsplus Widget Pack

4

Plugin URI: http://code.tutsplus.com

5

Description: A plugin containing various widgets created in a TutsPlus series on WordPress widgets

6

Version: 0.1

7

Author: Tutsplus

8

Author URI: http://code.tutsplus.com

9

Text Domain: tutsplustextdomain

10

License: GPLv2

11

12

Copyright 2014  Tutsplus

13

14

This program is free software; you can redistribute it and/or modify

15

it under the terms of the GNU General Public License, version 2, as

16

published by the Free Software Foundation.

17

18

This program is distributed in the hope that it will be useful,

19

but WITHOUT ANY WARRANTY; without even the implied warranty of

20

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

21

GNU General Public License for more details.

22

23

You should have received a copy of the GNU General Public License

24

along with this program; if not, write to the Free Software

25

Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

26

*/

27

28

29

class TutsplusText_Widget extends WP_Widget {

30

31

    public function __construct() {

32

33

		parent::__construct(

34

    		'tutsplustext_widget',

35

			__( 'TutsPlus Text Widget', 'tutsplustextdomain' ),

36

			array(

37

				'classname'   => 'tutsplustext_widget',

38

				'description' => __( 'A basic text widget to demo the Tutsplus series on creating your own widgets.', 'tutsplustextdomain' )

39

				)

40

		);

41

42

		load_plugin_textdomain( 'tutsplustextdomain', false, basename( dirname( __FILE__ ) ) . '/languages' );

43

44

    }

45

46

	/**  

47

	 * Front-end display of widget.

48

	 *

49

	 * @see WP_Widget::widget()

50

	 *

51

	 * @param array $args     Widget arguments.

52

	 * @param array $instance Saved values from database.

53

	 */

54

	public function widget( $args, $instance ) {    

55

56

	    extract( $args );

57

58

	    $title     	= apply_filters( 'widget_title', $instance['title'] );

59

	    $message 	= $instance['message'];

60

61

		echo $before_widget;

62

63

	    if ( $title ) {

64

			echo $before_title . $title . $after_title;

65

		}

66

67

		echo $message;

68

	    echo $after_widget;

69

70

	}

71

72

73

	/**

74

	  * Sanitize widget form values as they are saved.

75

	  *

76

	  * @see WP_Widget::update()

77

	  *

78

	  * @param array $new_instance Values just sent to be saved.

79

	  * @param array $old_instance Previously saved values from database.

80

	  *

81

	  * @return array Updated safe values to be saved.

82

	  */

83

	public function update( $new_instance, $old_instance ) {        

84

85

		$instance = $old_instance;

86

87

		$instance['title'] = strip_tags( $new_instance['title'] );

88

		$instance['message'] = strip_tags( $new_instance['message'] );

89

90

	    return $instance;

91

92

	}

93

94

	/**

95

	  * Back-end widget form.

96

	  *

97

	  * @see WP_Widget::form()

98

	  *

99

	  * @param array $instance Previously saved values from database.

100

	  */

101

	public function form( $instance ) {    

102

103

	    $title 		= esc_attr( $instance['title'] );

104

		$message	= esc_attr( $instance['message'] );

105

		?>

106

107

		<p>

108

			<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> 

109

			<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />

110

		</p>

111

		<p>

112

			<label for="<?php echo $this->get_field_id('message'); ?>"><?php _e('Simple Message'); ?></label> 

113

			<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>"><?php echo $message; ?></textarea>

114

		</p>

115

116

	<?php 

117

    }

118

119

}

120

121

/* Register the widget */

122

add_action( 'widgets_init', function(){

123

     register_widget( 'TutsplusText_Widget' );

124

});

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.