Cara Membuat Plugin Manajemen Avatar WordPress dari Scratch: Memulai
() 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:

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.
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.
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 — Suitable for all audiences', 'avatar-manager' ), |
19 |
// Translators: Content suitability rating:
|
20 |
// http://bit.ly/89QxZA
|
21 |
'PG' => __( 'PG — Possibly offensive, usually for audiences 13 and above', 'avatar-manager' ), |
22 |
// Translators: Content suitability rating:
|
23 |
// http://bit.ly/89QxZA
|
24 |
'R' => __( 'R — Intended for adult audiences above 17', 'avatar-manager' ), |
25 |
// Translators: Content suitability rating:
|
26 |
// http://bit.ly/89QxZA
|
27 |
'X' => __( 'X — 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.
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
- Manajer Avatar pada Direktori Plugin WordPress - Rumah resmi untuk plugin Avatar Manager.
- Avatar Manager di GitHub - Kode sumber dari plugin Avatar Manager.