Advertisement
  1. Code
  2. WordPress
  3. Plugin Development

Cara Membuat Plugin Manajemen Avatar WordPress dari Scratch: Memulai

Scroll to top
Read Time: 19 min
This post is part of a series called How to Create a WordPress Avatar Management Plugin from Scratch.
How to Create a WordPress Avatar Management Plugin: Finishing Touches

() translation by (you can also view the original English article)

Avatar Manager untuk WordPress adalah plugin yang manis dan sederhana untuk menyimpan avatar secara lokal dan banyak lagi. Dengan mudah.

Tingkatkan situs WordPress Anda dengan memungkinkan pengguna memilih antara menggunakan Gravatar atau gambar avatar yang dihosting sendiri langsung dari layar profil mereka. Alur kerja yang ditingkatkan, pembuatan gambar on-demand dan izin pengguna khusus di bawah antarmuka asli. Ucapkan salam ke plugin Avatar Manager.


Pengantar

Plugin WordPress adalah aplikasi PHP yang menambahkan serangkaian fitur atau layanan khusus ke WordPress, yang dapat diintegrasikan secara mulus dengan WordPress menggunakan jalur akses dan metode yang disediakan oleh WordPress Plugin API.

Artikel ini akan memandu Anda melalui proses pembuatan plugin WordPress Anda sendiri dari awal.

Catatan: Artikel ini mengasumsikan bahwa Anda sudah akrab dengan fungsi dasar WordPress, dan pemrograman PHP.


Langkah 1. Menyiapkan Ruang Kerja

Untuk memulai navigasi ke wp-content/plugins/ di bawah instalasi WordPress Anda. Untuk menyiapkan ruang kerja mulai dengan membuat struktur direktori berikut dan file kosong seperti yang dicontohkan pada gambar di bawah ini:

Workspace structure of the Avatar Manager plugin
Struktur ruang kerja untuk plugin Avatar Manager

Pastikan untuk memilih nama yang unik untuk direktori plugin dan untuk file PHP utama, seperti avatar-manager dan avatar-manager.php dalam contoh ini, dan masukkan semua file plugin ke direktori itu.

Diam itu Emas

Sebelum mulai menulis plugin kita, buka avatar-manager/index.php dan tambahkan kode berikut:

1
2
<?php
3
// Silence is golden.

4
?>

z


Langkah 2. Menulis Plugin WordPress Dasar

Sekarang, saatnya untuk menaruh beberapa informasi ke dalam file PHP plugin utama kita.

Informasi Plugin Standar

Bagian atas file PHP utama plugin harus berisi header informasi plugin standar. Header ini memungkinkan WordPress mengenali bahwa plugin ada, menambahkannya ke layar pengelolaan plugin sehingga dapat diaktifkan, memuatnya, dan menjalankan fungsinya; tanpa header, plugin tidak akan pernah diaktifkan dan tidak akan pernah berjalan.

z

1
2
<?php
3
/**

4
 * @package Avatar_Manager

5
 */
6
/*

7
Plugin Name: Avatar Manager

8
Plugin URI: http://wordpress.org/extend/plugins/avatar-manager/

9
Description: Avatar Manager for WordPress is a sweet and simple plugin for storing avatars locally and more. Easily.

10
Version: 1.0.0

11
Author: Cătălin Dogaru

12
Author URI: http://profiles.wordpress.org/cdog/

13
License: GPLv2 or later

14
*/
15
?>

Informasi minimum yang dibutuhkan WordPress untuk mengenali plugin kami adalah baris Plugin Name. Informasi lainnya (jika ada) akan digunakan untuk membuat tabel plugin pada layar manajemen plugin. Urutan garis tidak penting.

Agar mekanisme peningkatan dapat membaca versi plugin kita dengan benar, disarankan untuk memilih format untuk nomor versi dan menempelnya di antara rilis yang berbeda.

Licence slug harus merupakan pengenal umum singkat untuk lisensi yang ada di bawah plugin dan dimaksudkan untuk menjadi cara sederhana untuk menyatakan eksplisit tentang lisensi kode.

Versi

Untuk transparansi dan wawasan tentang siklus rilis kita, dan untuk berusaha mempertahankan kompatibilitas mundur, Avatar Manager akan dipertahankan di bawah panduan Semantic Versioning sebanyak mungkin.

Rilis akan diberi nomor dengan format berikut:

<major>.<minor>.<patch>

Dan dibangun dengan pedoman berikut:

  • Memecah kompatibilitas mundur menabrak mayor (dan menyetel ulang minor dan patch).
  • Tambahan baru tanpa melanggar kompatibilitas mundur menabrak minor (dan me-reset patch).
  • Perbaikan bug dan perubahan misc bumps patch.

Untuk informasi lebih lanjut tentang SemVer, silakan kunjungi semver.org.

Lisensi

Ini adalah kebiasaan untuk mengikuti header standar dengan informasi tentang lisensi untuk plugin. Kebanyakan plugin menggunakan lisensi yang sama yang digunakan oleh WordPress, yang merupakan lisensi GPLv2 atau lisensi yang kompatibel dengan GPLv2. Untuk menunjukkan lisensi GPLv2, sertakan baris berikut di plugin:

1
2
/*

3
Copyright © 2013 Cătălin Dogaru

4


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

6
the terms of the GNU General Public License as published by the Free Software

7
Foundation; either version 2 of the License, or (at your option) any later

8
version.

9


10
This program is distributed in the hope that it will be useful, but WITHOUT ANY

11
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A

12
PARTICULAR PURPOSE. See the GNU General Public License for more details.

13


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

15
this program; if not, write to the Free Software Foundation, Inc., 51 Franklin

16
Street, Fifth Floor, Boston, MA 02110-1301, USA.

17
*/

Selanjutnya, buka avatar-manager/LICENSE dan tempelkan versi teks biasa GPLv2 ke dalamnya.


Langkah 3. Memprogram Plugin Avatar Manager

Setelah menyelesaikan langkah sebelumnya, Anda harus dapat menemukan plugin Avatar Manager di bawah Layar Plugin.

The Avatar Manager plugin under Plugins ScreenThe Avatar Manager plugin under Plugins ScreenThe Avatar Manager plugin under Plugins Screen
Plugin Avatar Manager di bawah Layar Plugin

Sekarang, saatnya untuk membuat plugin kita benar-benar melakukan sesuatu. Aktifkan dan tambahkan baris kode berikut ke file PHP plugin utama:

1
2
define( 'AVATAR_MANAGER_VERSION', '1.0.0' );
3
define( 'AVATAR_MANAGER_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
4
define( 'AVATAR_MANAGER_AVATAR_UPLOADS', 0 );
5
define( 'AVATAR_MANAGER_DEFAULT_SIZE', 96 );

Fungsi define() mendefinisikan konstanta bernama pada saat runtime. Fungsi plugin_dir_url() mendapat URL (dengan trailing slash) untuk plugin __FILE__ dilewatkan masuk. Nilai __FILE__ adalah path lengkap dan nama file dari file saat ini dan itu salah satu dari delapan konstanta magis yang disediakan oleh PHP.

Mari kita melangkah lebih jauh dan menginisialisasi plugin kami:

1
2
/**

3
 * Sets up plugin defaults and makes Avatar Manager available for translation.

4
 *

5
 * @uses load_theme_textdomain() For translation/localization support.

6
 * @uses plugin_basename() For retrieving the basename of the plugin.

7
 *

8
 * @since Avatar Manager 1.0.0

9
 */
10
function avatar_manager_init() {
11
  // Makes Avatar Manager available for translation.

12
	load_plugin_textdomain( 'avatar-manager', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
13
}
14
15
add_action( 'init', 'avatar_manager_init' );

Panggilan add_action() mengaitkan fungsi ke tindakan tertentu. Aksi init dijalankan setelah WordPress selesai memuat tetapi sebelum header dikirim. Juga pemanggilan load_plugin_textdomain() harus dilakukan selama init, jika tidak, pengguna tidak dapat menghubungkannya. Tapi lebih lanjut tentang ini nanti, ketika saya akan membahas internasionalisasi plugin. Fungsi dirname() mengembalikan path direktori induk, sementara plugin_basename() mendapat nama dasar dari plugin.

Hooks, Actions and Filters

Hook disediakan oleh WordPress untuk memungkinkan plugin untuk menghubungkan ke seluruh WordPress; artinya, untuk memanggil fungsi dalam plugin pada waktu tertentu, dan dengan demikian mengatur plugin dalam gerakan. Ada dua jenis kait:

  • Tindakan - Tindakan adalah kait yang diluncurkan inti WordPress pada titik-titik tertentu selama eksekusi, atau ketika peristiwa tertentu terjadi.
  • Filter - Filter adalah kait yang diluncurkan WordPress untuk mengubah teks dari berbagai jenis sebelum menambahkannya ke database atau mengirimnya ke layar browser.

Langkah 4. Menambahkan Opsi Plugin

Selanjutnya, kita akan menambahkan opsi plugin. Mengizinkan untuk penyesuaian membuat plugin jauh lebih fleksibel bagi pengguna.

1
2
/**

3
 * Registers sanitization callback and plugin setting fields.

4
 *

5
 * @uses register_setting() For registering a setting and its sanitization

6
 * callback.

7
 * @uses add_settings_field() For registering a settings field to a settings

8
 * page and section.

9
 * @uses __() For retrieving the translated string from the translate().

10
 *

11
 * @since Avatar Manager 1.0.0

12
 */
13
function avatar_manager_admin_init() {
14
	// Registers plugin setting and its sanitization callback.

15
	register_setting( 'discussion', 'avatar_manager', 'avatar_manager_sanitize_options' );
16
17
	// Registers Avatar Uploads settings field under the Settings Discussion

18
	// Screen.

19
	add_settings_field( 'avatar-manager-avatar_uploads', __( 'Avatar Uploads', 'avatar-manager' ), 'avatar_manager_avatar_uploads_settings_field', 'discussion', 'avatars' );
20
21
	// Registers Default Size settings field under the Settings Discussion

22
	// Screen.

23
	add_settings_field( 'avatar-manager-default-size', __( 'Default Size', 'avatar-manager' ), 'avatar_manager_default_size_settings_field', 'discussion', 'avatars' );
24
}
25
26
add_action( 'admin_init', 'avatar_manager_admin_init' );

Tindakan admin_init dipicu sebelum hook lain ketika pengguna mengakses area admin. Fungsi register_setting() mendaftarkan pengaturan dan callback sanitasi. Fungsi add_settings_field() mendaftarkan bidang pengaturan ke halaman pengaturan dan bagian. Kami menggunakannya untuk menambahkan opsi plugin di bawah Layar Pengaturan Diskusi. Fungsi __() akan dijelaskan nanti, ketika saya akan membahas proses internasionalisasi.

Langkah 5. Menambahkan Callback Sanitasi

Sebelum menulis callback sanitasi, kita perlu mendefinisikan dua fungsi lagi, avatar_manager_get_default_options() dan avatar_manager_get_options().

1
2
/**

3
 * Returns plugin default options.

4
 *

5
 * @since Avatar Manager 1.0.0

6
 *

7
 * @return array Plugin default options.

8
 */
9
function avatar_manager_get_default_options() {
10
	$options = array(
11
		'avatar_uploads' => AVATAR_MANAGER_AVATAR_UPLOADS,
12
		'default_size'   => AVATAR_MANAGER_DEFAULT_SIZE
13
	);
14
15
	return $options;
16
}

Fungsi avatar_manager_get_default_options() mengembalikan opsi default plugin.

1
2
/**

3
 * Returns plugin options.

4
 *

5
 * @uses get_option() For getting values for a named option.

6
 * @uses avatar_manager_get_default_options() For retrieving plugin default

7
 * options.

8
 *

9
 * @since Avatar Manager 1.0.0

10
 *

11
 * @return array Plugin options.

12
 */
13
function avatar_manager_get_options() {
14
	return get_option( 'avatar_manager', avatar_manager_get_default_options() );
15
}

Fungsi avatar_manager_get_options() mengambil opsi plugin saat ini. Fungsi get_otpion() mengembalikan nilai dari opsi yang ditentukan atau nilai default jika opsi tidak ada dalam database.

1
2
/**

3
 * Sanitizes and validates plugin options.

4
 *

5
 * @uses avatar_manager_get_default_options() For retrieving plugin default

6
 * options.

7
 * @uses absint() For converting a value to a non-negative integer.

8
 *

9
 * @since Avatar Manager 1.0.0

10
 *

11
 * @return array Sanitized plugin options.

12
 */
13
function avatar_manager_sanitize_options( $input ) {
14
	$options = avatar_manager_get_default_options();
15
16
	if ( isset( $input['avatar_uploads'] ) && trim( $input['avatar_uploads'] ) )
17
		$options['avatar_uploads'] = trim( $input['avatar_uploads'] ) ? 1 : 0;
18
19
	if ( isset( $input['default_size'] ) && is_numeric( trim( $input['default_size'] ) ) ) {
20
		$options['default_size'] = absint( trim( $input['default_size'] ) );
21
22
		if ( $options['default_size'] < 1 )
23
			$options['default_size'] = 1;
24
		elseif ( $options['default_size'] > 512 )
25
			$options['default_size'] = 512;
26
	}
27
28
	return $options;
29
}

Fungsi avatar_manager_sanitize_options() membersihkan dan memvalidasi opsi plugin. Panggilan isset() menentukan apakah suatu variabel diatur dan bukan NULL. Fungsi trim() memotong spasi putih dari awal dan akhir string. Fungsi is_numeric() menemukan apakah suatu variabel adalah angka atau string numerik. Fungsi absint() mengubah nilai menjadi bilangan bulat non-negatif.


Langkah 6. Menambahkan Bidang Pengaturan

Sekarang, saatnya menambahkan bidang pengaturan.

1
2
/**

3
 * Prints Avatar Uploads settings field.

4
 *

5
 * @uses avatar_manager_get_options() For retrieving plugin options.

6
 * @uses _e() For displaying the translated string from the translate().

7
 * @uses checked() For comparing two given values.

8
 *

9
 * @since Avatar Manager 1.0.0

10
 */
11
function avatar_manager_avatar_uploads_settings_field() {
12
	// Retrieves plugin options.

13
	$options = avatar_manager_get_options();
14
	?>
15
	<fieldset>
16
		<legend class="screen-reader-text">
17
			<span>
18
				<?php _e( 'Avatar Uploads', 'avatar-manager' ); ?>
19
			</span>
20
		</legend><!-- .screen-reader-text -->
21
		<label>
22
			<input <?php checked( $options['avatar_uploads'], 1, true ); ?> name="avatar_manager[avatar_uploads]" type="checkbox" value="1">
23
			<?php _e( 'Anyone can upload', 'avatar-manager' ); ?>
24
		</label>
25
	</fieldset>
26
	<?php
27
}

Callback avatar_manager_avatar_uploads_settings_field() mencetak bidang pengaturan Avatar Upload. Fungsi yang checked() membandingkan dua nilai yang diberikan dan, jika nilainya sama, menambahkan atribut yang dicentang ke kotak checked saat ini. Fungsi _e() akan dijelaskan nanti, ketika saya akan menjelaskan proses internasionalisasi.

1
2
/**

3
 * Prints Default Size settings field.

4
 *

5
 * @uses avatar_manager_get_options() For retrieving plugin options.

6
 * @uses _e() For displaying the translated string from the translate().

7
 *

8
 * @since Avatar Manager 1.0.0

9
 */
10
function avatar_manager_default_size_settings_field() {
11
	// Retrieves plugin options.

12
	$options = avatar_manager_get_options();
13
	?>
14
	<fieldset>
15
		<legend class="screen-reader-text">
16
			<span>
17
				<?php _e( 'Default Size', 'avatar-manager' ); ?>
18
			</span>
19
		</legend><!-- .screen-reader-text -->
20
		<label>
21
			<?php _e( 'Default size of the avatar image', 'avatar-manager' ); ?>
22
			<input class="small-text" min="1" name="avatar_manager[default_size]" step="1" type="number" value="<?php echo $options['default_size']; ?>">
23
		</label>
24
	</fieldset>
25
	<?php
26
}

Callback avatar_manager_default_size_settings_field() mencetak bidang pengaturan Ukuran Default.

Setelah menambahkan bidang pengaturan Anda harus dapat menemukan opsi plugin di bawah Layar Diskusi Pengaturan.

The Avatar Manager plugin options under the Settings Discussion ScreenThe Avatar Manager plugin options under the Settings Discussion ScreenThe Avatar Manager plugin options under the Settings Discussion Screen
Opsi Plugin Manajer Avatar di bawah Layar Diskusi Pengaturan

Opsi pertama mengontrol apakah pengguna dengan hak istimewa rendah dapat mengunggah gambar avatar atau tidak, sedangkan opsi kedua mewakili ukuran default untuk gambar avatar.


Langkah 7. Menambahkan Bagian Avatar

Untuk memungkinkan pengguna mengelola avatarnya, kita perlu menambahkan bagian baru ke halaman profil mereka. Mari kita lanjutkan dan tambahkan bagian Avatar di bawah Layar Pengguna Profil Anda:

1
2
/**

3
 * Prints Avatar section.

4
 *

5
 * @uses avatar_manager_get_options() For retrieving plugin options.

6
 * @uses get_post_meta() For retrieving attachment meta fields.

7
 * @uses remove_filter() For removing a function attached to a specified action

8
 * hook.

9
 * @uses _e() For displaying the translated string from the translate().

10
 * @uses checked() For comparing two given values.

11
 * @uses get_avatar() For retrieving the avatar for a user.

12
 * @uses esc_attr() For escaping HTML attributes.

13
 * @uses add_query_arg() For retrieving a modified URL (with) query string.

14
 * @uses self_admin_url() For retrieving an admin url link with optional path

15
 * appended.

16
 * @uses current_user_can() For checking whether the current user has a certain

17
 * capability.

18
 * @uses submit_button() For echoing a submit button, with provided text and

19
 * appropriate class.

20
 * @uses __() For retrieving the translated string from the translate().

21
 *

22
 * @since Avatar Manager 1.0.0

23
 *

24
 * @param array $profileuser User to edit.

25
 */
26
function avatar_manager_edit_user_profile( $profileuser ) {
27
	// Retrieves plugin options.

28
	$options = avatar_manager_get_options();
29
30
	$avatar_type = isset( $profileuser->avatar_manager_avatar_type ) ? $profileuser->avatar_manager_avatar_type : 'gravatar';
31
32
	if ( isset( $profileuser->avatar_manager_custom_avatar ) ) {
33
		// Retrieves attachment meta fields based on attachment ID.

34
		$custom_avatar_rating   = get_post_meta( $profileuser->avatar_manager_custom_avatar, '_avatar_manager_custom_avatar_rating', true );
35
		$user_has_custom_avatar = get_post_meta( $profileuser->avatar_manager_custom_avatar, '_avatar_manager_is_custom_avatar', true );
36
	}
37
38
	if ( ! isset( $custom_avatar_rating ) || empty( $custom_avatar_rating ) )
39
		$custom_avatar_rating = 'G';
40
41
	if ( ! isset( $user_has_custom_avatar ) || empty( $user_has_custom_avatar ) )
42
		$user_has_custom_avatar = false;
43
44
	if ( $user_has_custom_avatar )
45
		// Removes the function attached to the specified action hook.

46
		remove_filter( 'get_avatar', 'avatar_manager_get_avatar' );
47
	?>
48
	<h3>
49
		<?php _e( 'Avatar', 'avatar-manager' ); ?>
50
	</h3>
51
	<table class="form-table">
52
		...
53
	</table><!-- .form-table -->
54
	<?php
55
}
56
57
add_action( 'show_user_profile', 'avatar_manager_edit_user_profile' );
58
add_action( 'edit_user_profile', 'avatar_manager_edit_user_profile' );

Tindakan show_user_profile dan edit_user_profile membantu penyesuaian halaman profil pengguna. Parameter $profileuser adalah objek WP_User dari pengguna yang sedang diedit. Fungsi get_post_meta() mengembalikan nilai dari kolom kustom dengan kunci yang ditentukan dari posting yang ditentukan. Fungsi empty() menentukan apakah suatu variabel kosong. Fungsi remove_filter() menghapus fungsi yang melekat pada hook filter yang ditentukan; diperlukan untuk menghapus fungsi kustom kami untuk mengambil gambar avatar.

Selanjutnya, kita akan menambahkan pemetik avatar, formulir unggahan, dan pemilih peringkat untuk gambar avatar khusus dari setiap pengguna.

Avatar Picker

Avatar Picker memungkinkan pengguna memilih antara menggunakan Gravatar atau gambar avatar khusus. Untuk menambahkannya, tulis kode berikut:

1
2
<tr>
3
	<th>
4
		<?php _e( 'Display this avatar', 'avatar-manager' ); ?>
5
	</th>
6
	<td class="avatar-manager">
7
		<fieldset>
8
			<legend class="screen-reader-text">
9
				<span>
10
					<?php _e( 'Display this avatar', 'avatar-manager' ); ?>
11
				</span><!-- .screen-reader-text -->
12
			</legend>
13
			<label>
14
				<input <?php checked( $avatar_type, 'gravatar', true ); ?> name="avatar_manager_avatar_type" type="radio" value="gravatar">
15
				<?php echo get_avatar( $profileuser->ID, 32, '', false ); ?>
16
				<?php _e( 'Gravatar', 'avatar-manager' ); ?>
17
				<span class="description">
18
					<?php _e( '<a href="http://codex.wordpress.org/How_to_Use_Gravatars_in_WordPress" target="_blank">More information</a>', 'avatar-manager' ); ?>
19
				</span><!-- .description -->
20
			</label>
21
			<?php if ( $user_has_custom_avatar ) : ?>
22
				<br>
23
				<label>
24
					<input <?php checked( $avatar_type, 'custom', true ); ?> name="avatar_manager_avatar_type" type="radio" value="custom">
25
					<?php echo avatar_manager_get_custom_avatar( $profileuser->ID, 32, '', false ); ?>
26
					<?php _e( 'Custom', 'avatar-manager' ); ?>
27
				</label>
28
			<?php endif; ?>
29
			<?php
30
			if ( $user_has_custom_avatar && ( current_user_can( 'upload_files' ) || $options['avatar_uploads'] ) ) {
31
				$href = esc_attr( add_query_arg( array(
32
					'action'                       => 'update',
33
					'avatar_manager_action'        => 'remove-avatar',
34
					'avatar_manager_custom_avatar' => $profileuser->avatar_manager_custom_avatar,
35
					'user_id'                      => $profileuser->ID
36
				),
37
				self_admin_url( IS_PROFILE_PAGE ? 'profile.php' : 'user-edit.php' ) ) );
38
				?>
39
				<a class="delete" href="<?php echo wp_nonce_url( $href, 'update-user_' . $profileuser->ID ); ?>" onclick="return showNotice.warn();">
40
					<?php _e( 'Delete', 'avatar-manager' ); ?>
41
				</a><!-- .delete -->
42
				<?php
43
			}
44
			?>
45
		</fieldset>
46
	</td><!-- .avatar-manager -->
47
</tr>

Fungsi get_avatar() mengambil avatar untuk pengguna yang memberikan ID pengguna atau alamat email. Untuk mengambil kembali gambar avatar khusus berdasarkan ID pengguna, kami menggunakan fungsi avatar_manager_get_custom_avatar(), yang akan ditulis nanti. Fungsi current_user_can() memeriksa apakah pengguna saat ini memiliki kemampuan tertentu. Biasanya, pengguna dengan hak istimewa rendah seperti Subscriber tidak diizinkan untuk mengunggah file; inilah sebabnya kita menggunakan variabel $options['avatar_uploads']. Fungsi esc_attr() melepaskan atribut HTML. Fungsi self_admin_url() mengambil tautan URL admin dengan jalur opsional ditambahkan. Konstanta IS_PROFILE_PAGE memberi tahu jika kita mengedit profil atau profil pengguna lain. Fungsi wp_nonce_url() mengambil URL tanpa tambahan yang ditambahkan ke kueri URL. Sebelum menghapus avatar, kami meminta pengguna untuk mengkonfirmasi dengan memanggil metode showNotice.warn() pada acara onclick dari tautan Hapus yang menampilkan pemberitahuan peringatan.

Formulir Upload

Formulir unggahan memungkinkan pengguna untuk menelusuri dan mengunggah gambar avatar khusus:

1
2
<?php if ( current_user_can( 'upload_files' ) || $options['avatar_uploads'] ) : ?>
3
	<tr>
4
		<th>
5
			<?php _e( 'Select Image', 'avatar-manager' ); ?>
6
		</th>
7
		<td>
8
			<fieldset>
9
				<legend class="screen-reader-text">
10
					<span>
11
						<?php _e( 'Select Image', 'avatar-manager' ); ?>
12
					</span>
13
				</legend><!-- .screen-reader-text -->
14
				<label class="description" for="avatar-manager-upload-avatar">
15
					<?php _e( 'Choose an image from your computer:', 'avatar-manager' ); ?>
16
				</label><!-- .description -->
17
				<br>
18
				<input name="avatar_manager_import" type="file">
19
				<?php submit_button( __( 'Upload', 'avatar-manager' ), 'button', 'avatar-manager-upload-avatar', false ); ?>
20
			</fieldset>
21
		</td>
22
	</tr>
23
<?php endif; ?>

Fungsi submit_button() menggemakan tombol submit, dengan teks yang disediakan dan kelas yang sesuai.

Rating Chooser

Pemilih rating hanya muncul ketika avatar kustom tersedia. Untuk menambahkannya, tulis baris berikut:

1
2
<?php if ( $user_has_custom_avatar ) : ?>
3
	<tr>
4
		<th>
5
			<?php _e( 'Avatar Rating', 'avatar-manager' ); ?>
6
		</th>
7
		<td>
8
			<fieldset>
9
				<legend class="screen-reader-text">
10
					<span>
11
						<?php _e( 'Avatar Rating', 'avatar-manager' ); ?>
12
					</span>
13
				</legend><!-- .screen-reader-text -->
14
				<?php
15
				$ratings = array(
16
					// Translators: Content suitability rating:

17
					// http://bit.ly/89QxZA

18
					'G'  => __( 'G &#8212; Suitable for all audiences', 'avatar-manager' ),
19
					// Translators: Content suitability rating:

20
					// http://bit.ly/89QxZA

21
					'PG' => __( 'PG &#8212; Possibly offensive, usually for audiences 13 and above', 'avatar-manager' ),
22
					// Translators: Content suitability rating:

23
					// http://bit.ly/89QxZA

24
					'R'  => __( 'R &#8212; Intended for adult audiences above 17', 'avatar-manager' ),
25
					// Translators: Content suitability rating:

26
					// http://bit.ly/89QxZA

27
					'X'  => __( 'X &#8212; Even more mature than above', 'avatar-manager' )
28
				);
29
30
				foreach ( $ratings as $key => $rating ) {
31
					?>
32
					<label>
33
						<input <?php checked( $custom_avatar_rating, $key, true ); ?> name="avatar_manager_custom_avatar_rating" type="radio" value="<?php echo esc_attr( $key ); ?>">
34
						<?php echo $rating; ?>
35
					</label>
36
					<br>
37
					<?php
38
				}
39
				?>
40
				<span class="description">
41
					<?php _e( 'Choose a rating for your custom avatar.', 'avatar-manager' ); ?>
42
				</span><!-- .description -->
43
			</fieldset>
44
		</td>
45
	</tr>
46
<?php endif; ?>

Ini memungkinkan pengguna memilih peringkat yang sesuai untuk gambar avatar kustom yang digunakan.


Langkah 8. Menambahkan Skrip dan Styles

Sekarang kita telah menambahkan bagian Avatar, saatnya untuk mendesainnya. Juga, kita akan menulis beberapa JS untuk mengubah pengkodean formulir; langkah ini diperlukan karena kita telah menambahkan kontrol unggah file ke dalamnya.

CSS Style

Untuk menata plugin, buka avatar-manager/avatar-manager.css dan tulis baris berikut:

1
2
#profile-page .avatar-manager img {
3
	margin: 2px 0;
4
	vertical-align: middle;
5
}
6
7
#profile-page .avatar-manager .delete {
8
	color: red;
9
	padding: 2px;
10
}
11
12
#profile-page .avatar-manager .delete:hover {
13
	background: red;
14
	color: #fff;
15
	text-decoration: none;
16
}

Ini menyelaraskan gambar avatar secara vertikal dengan radiobox dan gaya tautan Hapus yang sesuai untuk integrasi sempurna dengan antarmuka asli WordPress.

JS Script

Selanjutnya, buka avatar-manager/avatar-manager.js dan tambahkan kode berikut:

1
2
jQuery( document ).ready( function() {
3
	jQuery( '#your-profile' ).attr( 'enctype', 'multipart/form-data' );
4
} );

Fungsi .attr() menetapkan nilai satu atau beberapa atribut untuk setiap elemen yang cocok. Atribut enctype menentukan bagaimana bentuk-data harus dikodekan ketika mengirimkannya ke server. Kita perlu mengubah nilainya menjadi multipart/form-data untuk memungkinkan pengunggahan file.


Langkah 9. Mengakhiri Naskah dan Gaya

Metode yang aman dan direkomendasikan untuk menambahkan skrip dan gaya ke halaman yang dihasilkan WordPress adalah dengan menggunakan wp_enqueue_script() dan wp_enqueue_style(). Fungsi-fungsi ini termasuk skrip dan gaya jika mereka belum dimasukkan, dan menangani dependensi dengan aman.

1
2
/**

3
 * Enqueues plugin scripts and styles for Users Your Profile Screen.

4
 *

5
 * @uses wp_register_style() For registering a CSS style file.

6
 * @uses wp_enqueue_style() For enqueuing a CSS style file.

7
 * @uses wp_register_script() For registering a JS script file.

8
 * @uses wp_enqueue_script() For enqueuing a JS script file.

9
 *

10
 * @since Avatar Manager 1.0.0

11
 */
12
function avatar_manager_admin_enqueue_scripts() {
13
	global $hook_suffix;
14
15
	if ( $hook_suffix == 'profile.php' || $hook_suffix == 'user-edit.php' ) {
16
		// Registers plugin CSS style file.

17
		wp_register_style( 'avatar-manager.css', AVATAR_MANAGER_PLUGIN_URL . 'avatar-manager.css', array(), '1.0.0' );
18
19
		// Enqueues plugin CSS style file.

20
		wp_enqueue_style( 'avatar-manager.css' );
21
22
		// Registers plugin JS script file.

23
		wp_register_script( 'avatar-manager.js', AVATAR_MANAGER_PLUGIN_URL . 'avatar-manager.js', array( 'jquery' ), '1.0.0' );
24
25
		// Enqueues plugin JS script file.

26
		wp_enqueue_script( 'avatar-manager.js' );
27
	}
28
}
29
30
add_action( 'admin_enqueue_scripts', 'avatar_manager_admin_enqueue_scripts' );

Tindakan admin_enqueue_scripts adalah tindakan pertama yang terkait dengan tindakan skrip admin. Kemudian, variabel global $hook_suffix digunakan untuk menambahkan skrip dan style hanya pada halaman yang dibutuhkan Sebelum memasukkan skrip atau gaya, kita harus mendaftarkannya terlebih dahulu. Fungsi wp_register_style() adalah cara yang aman untuk mendaftarkan file gaya CSS untuk digunakan nanti; fungsi wp_enqueue_style() digunakan untuk melakukan enqueue. Demikian pula, fungsi wp_register_script() dan wp_enqueue_script() digunakan untuk mendaftar dan memasukkan file naskah JS plugin.

Setelah langkah ini Anda harus dapat menemukan opsi plugin di bawah Layar Pengguna Profil Anda.

The Avatar Manager plugin options under the User Your Profile ScreenThe Avatar Manager plugin options under the User Your Profile ScreenThe Avatar Manager plugin options under the User Your Profile Screen
Opsi Plugin Manajer Avatar di bawah Layar Pengguna Profil Anda

Opsi pertama memungkinkan Anda memilih antara menggunakan Gravatar atau gambar avatar yang dihosting sendiri. Kolom kedua memungkinkan Anda menelusuri dan mengunggah gambar avatar khusus. Opsi Peringkat Avatar hanya muncul ketika avatar kustom tersedia. Tapi lebih lanjut tentang ini nanti, ketika kita akan menangani upload avatar.


Selanjutnya Apa

Ini melengkapi bagian pertama dari tutorial. Saya harap Anda menikmati waktu yang dihabiskan bersama dan menemukan itu berguna. Di bagian selanjutnya kita akan menyelesaikan plugin Avatar Manager; kita akan menangani unggahan avatar dan pembuatan gambar sesuai permintaan, menginternasionalkan plugin, dan banyak lagi. Terima kasih sudah membaca!


Referensi

  • WordPress Coding Standards - Informasi umum tentang standar pengkodean untuk pengembangan WordPress.
  • Writing a Plugin - Tempat awal terbaik untuk belajar tentang cara mengembangkan plugin WordPress.
  • Plugin API - Deskripsi cara menggunakan hook tindakan dan filter di plugin WordPress Anda, dan fungsi inti yang dapat diganti plugin.
  • Settings API - Referensi dengan contoh untuk menambahkan pengaturan baru ke layar pengaturan yang ada.
  • Function Reference - Sebuah artikel dengan banyak fungsi inti WordPress yang berguna untuk plugin dan pengembang tema; daftar sebagian besar fungsi inti, kecuali Tag Template.
  • SemVer - Semantic versioning (SemVer) spesifikasi.
  • GPLv2 - Lisensi Publik Umum GNU, versi 2.

Tautan Eksternal

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.