Cara Mengembangkan Situs Keanggotaan dengan WordPress: Bagian 2

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

Final product image — What You'll Be Creating

Pada bagian pertama dari rangkaian ini, kita membahas kustomisasi formulir pendaftaran dan login. Hari ini kita akan membahas bagaimana menambahkan field kustom ke formulir pendaftaran. Kita akan menambahkan masukan teks untuk handle Twitter dan kotak centang dimana pengguna harus menyetujui persyaratan sebelum mendaftar. Pekerjaan yang dibutuhkan dapat dibagi menjadi tiga bagian:

Menambahkan field itu sendiri
Validasi di field-field
Memproses data

Kita juga akan membahas secara singkat cara terbaik untuk memberi gaya pada email keluar Anda. Ini berarti pengguna akan menerima email bermerek yang bagus saat mereka mendaftar.

Dengan cepat sebelum kita mulai, pastikan Anyone can register dicentang di pengaturan WordPress Anda (Settings > General).

Banyak yang Harus Dilakukan; Mari Kita Mulai

Salah satu hal terbesar tentang WordPress adalah cara ia memberi Anda tindakan dan filter. Ini memungkinkan kita mengaitkan ke event atau menyaring konten, yang memberi kita kesempatan untuk memperluas WordPress dengan anggun.

Jadi dengan menggunakan tindakan register_form, mari kaitkan ke formulir pendaftaran dan menambahkan field kita. Salin fungsi berikut ke admin.php yang kita buat di bagian satu dari serial ini.

<?php

function tutsplus_register_form_edit() {
    $twitter_name = ( ! empty( $_POST['twitter_name'] ) ) ? trim( $_POST['twitter_name'] ) : ''; ?>
    <p>
        <label for="twitter_name">
          <?php _e( 'Twitter name', 'sage' ) ?><br />
        	<input type="text" name="twitter_name" id="twitter_name" class="input" value="<?php echo esc_attr( wp_unslash( $twitter_name ) ); ?>" size="25" />
        </label>
    </p>

	<?php $terms = ( ! empty( $_POST['terms'] ) ) ? $_POST['terms'] : ''; ?>
    <p>
        <label for="terms">
        	<input type="checkbox" name="terms" id="terms" class="input" value="agreed" <?php checked( $_POST['terms'], 'agreed', true ); ?> />
        	<?php _e( 'I have read the terms and conditions', 'sage' ) ?>
        </label>
    </p>
    <?php
}
add_action( 'register_form', 'tutsplus_register_form_edit' );

Pada dasarnya kita menyuntikkan beberapa field baru ke dalam formulir pendaftaran kita. Markup yang digunakan adalah meniru dari field-field asli. Kita juga ingin mempertahankan nilainya jika halaman dimuat ulang, jadi kita akan memeriksa apakah mereka ada di super global $_POST. Anda mungkin bertanya-tanya mengapa label Twitter kita dibungkus dalam sebuah fungsi: <?php _e( 'Twitter name', 'tutsplus' ) ?>.

Fungsi _e memungkinkan terjemahan terjadi—Anda dapat membaca lebih banyak tentang hal itu di Codex WordPress.

Ini sangat bagus, tapi bagaimana dengan beberapa validasi? Seperti saat ini, pengguna dapat menempatkan apapun yang mereka inginkan di sana atau hanya membiarkannya kosong. Mari kita membuat field kita required dan pastikan field teks hanya mengambil karakter biasa untuk mencegah serangan berbahaya. Kali ini kita akan menggunakan filter WordPress: registration_errors.

<?php

function tutsplus_validate_registration( $errors, $sanitized_user_login, $user_email ) {
    if ( empty( $_POST['twitter_name'] ) || !empty( $_POST['twitter_name'] ) && trim( $_POST['twitter_name'] ) == '' ) {
		$errors->add( 'twitter_name_error', __( '<strong>ERROR</strong>: Please enter your Twitter name.', 'sage' ) );
	}
	if ( preg_match('/[^a-z_\-0-9]/i', $_POST['twitter_name']) ) {
		$errors->add( 'twitter_name_error', __( '<strong>ERROR</strong>: Please use letters, numbers, spaces and underscores only.', 'sage' ) );
	}
	if ( empty( $_POST['terms'] ) ) {
		$errors->add( 'terms_error', __( '<strong>ERROR</strong>: You must agree to the terms.', 'sage' ) );
	}
	return $errors;
}
add_filter( 'registration_errors', 'tutsplus_validate_registration', 10, 3 );

Filter di atas dikirimkan tiga parameter:

Kesalahan yang telah diproses
Email pengguna
Nama pengguna yang disterilkan dari pengguna

Fungsi ini dipicu setelah formulir dikirimkan tapi sebelum data menyentuh database. Dalam kasus kita, kita memeriksa apakah field-nya kosong dan jika ada karakter aneh dalam masukan nama Twitter kita. Jika salah satu dari ini benar, kita akan menyampaikan pesan kesalahan ke objek $error yang dikembalikan.

Catatan: jika Anda mendapatkan kotak kesalahan kosong, jangan khawatir. Plugin keamanan yang kita instal di bagian satu memiliki pengaturan default yang menyembunyikan pesannya. Di bagian WordPress Tweaks, hapus centang pada pilihan Disable login error messages.

Sekarang bagian terakhir dari teka-teki kita: memproses data sehingga tersimpan dalam database kita terhadap pengguna tersebut. Sekali lagi kita akan menggunakan tindakan yang didefinisikan WordPress (user_register) untuk dihubungkan ke proses ini. Dibutuhkan satu parameter, user_id—cara itu agar tahu siapa yang harus menyimpan data. Dengan asumsi superglobal $_POST berisi data kita, kita dapat menyimpannya dengan menggunakan update_user_meta.

<?php

/**
 * Process the additional fields.
 *
 * @param user_id
 */
function tutsplus_process_registration( $user_id ) {
    if ( ! empty( $_POST['twitter_name'] ) ) {
		update_user_meta( $user_id, 'twitter_name', trim( $_POST['twitter_name'] ) );
	}
	if ( ! empty( $_POST['terms'] ) ) {
		update_user_meta( $user_id, 'terms', trim( $_POST['terms'] ) );
	}
}
add_action( 'user_register', 'tutsplus_process_registration' );

Field Kustom di Admin

Saat ini kita telah mengumpulkan data pengguna - termasuk field kustom kita - namun kita tidak dapat mengedit nilai tersebut di admin WordPress. Mari kaitkan itu. Di admin.php kita tambahkan fungsi berikut ini:

<?php
/** Display in the wp backend
 * http://codex.wordpress.org/Plugin_API/Action_Reference/show_user_profile
 *
 * Show custom user profile fields
 * @param  obj $user The WP user object.
 * @return void
 */
function tutsplus_custom_user_profile_fields( $user ) {
?>
<table class="form-table">
    <tr>
		<th>
			<label for="twitter_name"><?php __e( 'Twitter name','sage' ); ?></label>
		</th>
		<td>
			<input type="text" name="twitter_name" id="twitter_name" value="<?php echo esc_attr( get_the_author_meta( 'twitter_name', $user->ID ) ); ?>" class="regular-text" />
		</td>
	</tr>
</table>
<?php
}
// Hooks near the bottom of profile page (if current user)
add_action('show_user_profile', 'tutsplus_custom_user_profile_fields');
// Hooks near the bottom of the profile page (if not current user)
add_action('edit_user_profile', 'tutsplus_custom_user_profile_fields');

Dengan menggunakan beberapa tindakan WordPress, kita dapat dengan mudah menambahkan field kustom.

Sekarang untuk memproses meta user kustom.

<?php
/** Update the custom meta
 * https://codex.wordpress.org/Plugin_API/Action_Reference/personal_options_update
 * https://codex.wordpress.org/Plugin_API/Action_Reference/edit_user_profile_update
 *
 * Show custom user profile fields
 * @param  int user_id.
 */
function tutsplus_update_extra_profile_fields( $user_id ) {

   if ( current_user_can( 'edit_user', $user_id ) )

      update_user_meta( $user_id, 'twitter_name', $_POST['twitter_name'] );
}
// Hook is used to save custom fields that have been added to the WordPress profile page (if current user)
add_action( 'personal_options_update', 'tutsplus_update_extra_profile_fields' );

// Hook is used to save custom fields that have been added to the WordPress profile page (if not current user)
add_action( 'edit_user_profile_update', 'tutsplus_update_extra_profile_fields' );

Mengarahkan Ulang pada Login

Akhirnya kita ingin mengalihkan pengguna kita ke halaman tertentu saat mereka login. Default-nya mengirim mereka ke backend WordPress. Lupakan itu. Mari mengirimkan mereka ke halaman "my account". Jadi pertama-tama Anda harus membuat halaman ini di backend. Jangan khawatir tentang konten untuk saat ini, karena kita akan membahasnya di bagian berikutnya dari serial.

Sekarang kita memiliki halaman kita, sisipkan kode di bawah ini ke dalam ____.php dan berikan pengujian. Dengan asumsi halaman "my account" memiliki slug my-account yang seharusnya bekerja. Sekali lagi kita telah menggunakan filter WordPress untuk mencapai ilmu sihir ini.

Singkatnya, kode tersebut memeriksa pengguna, dan jika mereka adalah pengguna admin, mereka diarahkan ke tempat default, jika tidak, mereka mengarahkan ulang ke halaman my-account. Semua ini dipicu saat user log in menggunakan filter login_redirect.

<?php

/**
 * Redirect user after successful login.
 *
 * @param string $redirect_to URL to redirect to.
 * @param string $request URL the user is coming from.
 * @param object $user Logged user's data.
 * @return string
 */
function tutsplus_redirect_on_login( $redirect_to, $request, $user ) {
    //is there a user to check?
	global $user;
	if ( isset( $user->roles ) && is_array( $user->roles ) ) {
		//check for admins
		if ( in_array( 'administrator', $user->roles ) ) {
			// redirect them to the default place
			return $redirect_to;
		} else {
			return home_url('profile');
		}
	} else {
		return $redirect_to;
	}
}
add_filter( 'login_redirect', 'tutsplus_redirect_on_login', 10, 3 );

Catatan Singkat Tentang Email Keluar

Saat pengguna mendaftar di situs Anda, mereka akan menerima email konfirmasi. Juga jika pengguna lupa kata sandinya, mereka memiliki kemampuan untuk mendapatkannya kembali melalui email. Jadi penting kita memberi email ini beberapa cinta dan perhatian jika kita ingin situs keanggotaan kita menjadi semua itu.

Sekarang ada beberapa cara untuk melakukan ini. Untuk semua puritan di luar sana Anda dapat menggunakan filter WordPress untuk mengubah jenis konten email dan memberi gaya pada email Anda—lihat Codex WordPress. Atau ada sejumlah plugin di luar sana yang dirancang untuk tujuan ini.

Secara pribadi saya ingin menggunakan Mandrill dari MailChimp untuk mengirim email dari situs WordPress saya. Ini tidak terlalu sulit untuk disiapkan dan ia penuh dengan fitur, yang salah satunya bisa menerapkan template/gaya ke email keluar Anda.

Apa berikutnya?

Di bagian berikutnya dan terakhir dari serial ini, kita akan membuat bagian akun dasar dimana pengguna yang login dapat mengedit rinciannya. Kita juga ingin administrator bisa mengedit rincian ini dari admin area WP, jadi kita akan menambahkan beberapa field kustom di sana juga.

Jika Anda memiliki saran atau pertanyaan, silakan tinggalkan komentar. Saya akan melakukan yang terbaik untuk menjawab secara tepat waktu.

Hal yang Perlu Diperhatikan

Harap diperhatikan: jika Anda mengunduh kode dari repositori GitHub, itu termasuk semua file agar tema Anda aktif dan berjalan. Idenya adalah bahwa Anda dapat mengambil repo-nya dan cukup menjalankan perintah Gulp dan Bower yang diperlukan dan Anda akan pergi! Jika Anda hanya menginginkan file yang berisi kode khusus untuk seri ini, file-file tersebut tercantum di bawah ini.