Membuat Kustom Plugin Formulir Pendaftaran WordPress

Diluar perkiraan, WordPress menyediakan sebuah kustom formulir pendaftaran yang dapat digunakan untuk mengatur pengguna baru, atau untuk menambahkan pengguna baru ketika menambahkannya ke instalasi WordPress yang ada. Tapi bagaimana jika Anda ingin menerapkan formulir pendaftaran kustom yang tidak ada pilihannya dalam Dashboard WordPress?

Dalam tutorial ini, kita akan belajar cara membuat formulir pendaftaran kustom di WordPress menggunakan kombinasi tag template dan shortcode.

Secara default formulir pendaftaran standar terdiri dari dua kolom yaitu username dan email.

Kehadirannya formulir isian yang hanya username dan email membuat proses pendaftaran sangat mudah. Pertama, Anda tinggal memasukkan username dan email setelahnya password akan dikirimkan kepada Anda. Selanjutnya, Anda tinggal login ke situs dengan password dan kemudian melengkapi profil Anda dan mengganti password dengan sesuatu yang lebih mudah diingat.

Malah terkadang membuat pengguna bosan lalu pergi hanya untuk mendaftar di situs Anda, mengapa tidak memberikan formulir pendaftaran yang to the point dengan terdiri dari beberapa kolom formulir tambahan penting selain kolom default username dan email seperti password, URL untuk situs web mereka, biografi, nama panggilan, dan nama depan dan nama belakang mereka.

Hal ini sangat berguna dalam situs seperti Tuts+ yang memiliki penulis lebih dari satu.

Pada artikel ini, kita akan membuat sebuah Plugin kustum untuk formulir pendaftaran dengan kolom formulir berikut:

• username
• password
• email
• website URL
• nama depan
• nama belakang
• nama panggilan
• biografi (atau bagian tentang jati diri)

Formulir pendaftaran kustom kemudian dapat diintegrasikan ke dalam WordPress menggunakan shortcode Plugin dan tag template terkait.

Dengan shortcode, Anda dapat membuat halaman dan membuatnya sebagai halaman pendaftaran resmi situs Anda. Anda juga dapat menggunakan shortcode dalam post sehingga pengguna dapat mendaftar ke situs Anda setelah membaca salah satu artikel Anda.

Jika Anda ingin menambahkan formulir pendaftaran ke sidebar atau lokasi tertentu di situs web Anda, maka Anda dapat mengedit tema WordPress tetapi dengan menempatkan tag template di lokasi yang diinginkan.

Sebelum kita mulai membuat Plugin formulir pendaftaran, perlu dicatat bahwa username, password, dan email merupakan bidang yang diperlukan.

Kita akan menggunakan aturan ini ketika menulis fungsi validasi kita.

Opsi Premium

Tutorial ini akan mengajarkan Anda untuk membuat plugin dari awal, tetapi jika Anda sedang mencari cepat, solusi plug and play, cobalah plugin WordPress Registration Form yang ada di Envato Market. Anda dapat mengatur berbagai bidang pendaftaran dengan kontrol validasi. Setelah pendaftaran selesai, sebuah email akan dikirim ke anggota baru dengan rincian login mereka. Email template dapat dimodifikasi untuk pendaftaran, perubahan password, dll

Pilihan lainnya adalah dengan mudah memesan di Envato Studio. Anda dapat memilih orang yang tepat dari berbagai pengembang plugin WordPress yang berpengalaman. Kemudian Anda kirim keperluan singkat Anda, dan biarkan pengembang membuat plugin anda dalam jangka waktu yang disepakati.

Misalnya, Alisaleem252 akan mengembangkan sebuah plugin WordPress yang disesuaikan yang akan kompatibel dengan versi WordPress terbaru dan plugin lainnya di Repository WordPress sesuai dengan kebutuhan Anda

Anda akan mendapatkan:

• kustom widget jika diperlukan
• kustom shortcode jika diperlukan
• kustom tipe post jika diperlukan
• layanan yang handal

Layanan penuh dengan biaya hanya $300, dan plugin anda akan siap dalam 10 hari. Alisaleem252 memiliki 98% rating persetujuan dari klien sebelumnya. Jadi mengapa tidak mencoba layanannya Pembuatan Kustom Plugin Wordpress yang populer!

Membuat Plugin

Dengan itu, mari kita mulai dengan koding plugin. Pertama, masukkan header Plugin.

1

<?php

2

/*

3

  Plugin Name: Custom Registration

4

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

5

  Description: Updates user rating based on number of posts.

6

  Version: 1.0

7

  Author: Agbonghama Collins

8

  Author URI: http://tech4sky.com

9

 */

Selanjutnya, kita akan membuat fungsi PHP yang berisi kode HTML dari formulir pendaftaran.

1

function registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {

2

    echo '

3

    <style>

4

    div {

5

      margin-bottom:2px;

6

	}

7

8

	input{

9

		margin-bottom:4px;

10

	}

11

	</style>

12

	';

13

14

    echo '

15

    <form action="' . $_SERVER['REQUEST_URI'] . '" method="post">

16

	<div>

17

	<label for="username">Username <strong>*</strong></label>

18

	<input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">

19

	</div>

20

21

	<div>

22

	<label for="password">Password <strong>*</strong></label>

23

	<input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">

24

	</div>

25

26

	<div>

27

	<label for="email">Email <strong>*</strong></label>

28

	<input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">

29

	</div>

30

31

	<div>

32

	<label for="website">Website</label>

33

	<input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '">

34

	</div>

35

36

	<div>

37

	<label for="firstname">First Name</label>

38

	<input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">

39

	</div>

40

41

	<div>

42

	<label for="website">Last Name</label>

43

	<input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">

44

	</div>

45

46

	<div>

47

	<label for="nickname">Nickname</label>

48

	<input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '">

49

	</div>

50

51

	<div>

52

	<label for="bio">About / Bio</label>

53

	<textarea name="bio">' . ( isset( $_POST['bio']) ? $bio : null ) . '</textarea>

54

	</div>

55

	<input type="submit" name="submit" value="Register"/>

56

	</form>

57

	';

58

}

Perhatikan bidang pendaftaran yang siap dikirimkan ke fungsi di atas sebagai variabel? Dalam kode fungsi, Anda akan melihat contoh kode berikut, misalnya:

( isset( $_POST['lname'] ) ? $last_name : null )

Operator ternary adalah untuk memeriksa isi dari array $ _POST global untuk melihat apakah formulir mengandung nilai. Jika itu mengandung nilai, ini menempatkan kolom formulir dengan nilai untuk menghindari pengguna memasukkan kembali ke bidang input.

Sebuah formulir pendaftaran tidak pernah lengkap sampai Anda memvalidasi dan membenarkan input pengguna. Sebagai hasilnya, kita akan membuat fungsi validasi dengan nama registration_validation.

Untuk memudahkan validasi, kita akan menggunakan kelas WordPress WP_Error. Ikuti saya kita akan membuat kode fungsi validasi:

1. Buat fungsi dan bidang pendaftaran dengan benar sebagai fungsi argumen.
   

   1	function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {

2. Berikan class WP_Error dan berikan variabel global sehingga dapat menjadi akses luar lingkup fungsi.
   

   1	global $reg_errors;
   2	$reg_errors = new WP_Error;

3. Ingat: Kami mengatakan username, password dan email diperlukan dan tidak boleh ditinggalkan. Agar mematuhi aturan, kita perlu memeriksa apakah ada bidang yang kosong. Jika kosong, kita tambahkan pesan kesalahan ke class WP_Error global.

   1	if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
   2	$reg_errors->add('field', 'Required form field is missing');
   3	}

4. Kita juga memeriksa untuk memastikan jumlah karakter username tidak kurang dari 4.

   1	if ( 4 > strlen( $username ) ) {
   2	$reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' );
   3	}

5. Memeriksa apakah username tersebut sudah terdaftar.

   1	if ( username_exists( $username ) )
   2	$reg_errors->add('user_name', 'Sorry, that username already exists!');

6. Menggunakan layanan fungsi validate_username WordPress untuk memastikan nama tersebut valid.

   1	if ( ! validate_username( $username ) ) {
   2	$reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' );
   3	}

7. Pastikan password yang dimasukkan oleh pengguna tidak kurang dari 5 karakter.

   1	if ( 5 > strlen( $password ) ) {
   2	$reg_errors->add( 'password', 'Password length must be greater than 5' );
   3	}

8. Memeriksa apakah email tersebut adalah email yang valid.

   1	if ( !is_email( $email ) ) {
   2	$reg_errors->add( 'email_invalid', 'Email is not valid' );
   3	}

9. Memeriksa apakah email tersebut sudah terdaftar.

   1	if ( email_exists( $email ) ) {
   2	$reg_errors->add( 'email', 'Email Already in use' );
   3	}

10. Jika bidang situs diisi, periksa untuk melihat apakah itu sudah valid.

    1	if ( ! empty( $website ) ) {
    2	if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {
    3	$reg_errors->add( 'website', 'Website is not a valid URL' );
    4	}
    5	}

11. Akhirnya, kita ulang error dalam WP_Error kita dan agar menampilkan kesalahan secara individu.
    

    1	if ( is_wp_error( $reg_errors ) ) {
    2
    3	foreach ( $reg_errors->get_error_messages() as $error ) {
    4
    5	echo '<div>';
    6	echo '<strong>ERROR</strong>:';
    7	echo $error . '<br/>';
    8	echo '</div>';
    9
    10	}
    11
    12	}

    KIta telah selesai koding fungsi validasi.

Berikutnya adalah fungsi plugin complete_registration() untuk yang menangani pendaftaran pengguna.
Pendaftaran pengguna sebenarnya dilakukan oleh fungsi wp_insert_user yang menerima array data pengguna.

1

function complete_registration() {

2

    global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;

3

    if ( 1 > count( $reg_errors->get_error_messages() ) ) {

4

        $userdata = array(

5

        'user_login'    => 	$username,

6

        'user_email' 	=> 	$email,

7

        'user_pass' 	=> 	$password,

8

        'user_url' 		=> 	$website,

9

        'first_name' 	=> 	$first_name,

10

        'last_name' 	=> 	$last_name,

11

        'nickname' 		=> 	$nickname,

12

        'description' 	=> 	$bio,

13

		);

14

        $user = wp_insert_user( $userdata );

15

        echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.';   

16

	}

17

}

Dalam fungsi complete_registration() di atas, kita membuat $reg_errors WP_Error  dan kolom formulir variabel global sehingga kita dapat mengakses variabel dalam lingkup global.

Kemudian kita periksa apakah penanganan kesalahan $reg_errors  misalnya mengandung kesalahan. Jika tidak ada kesalahan yang ditemukan, kita lanjutkan mengisi array $userdata dan memasukkan rincian pendaftaran pengguna ke database WordPress dan menampilkan pesan Pendaftaran Selesai dengan link ke halaman login.

Di samping, adalah fungsi super custom_registration_function()  yang menempatkan semua fungsi yang telah kita buat di atas mulai digunakan.

1

function custom_registration_function() {

2

    if ( isset($_POST['submit'] ) ) {

3

        registration_validation(

4

        $_POST['username'],

5

        $_POST['password'],

6

        $_POST['email'],

7

        $_POST['website'],

8

        $_POST['fname'],

9

        $_POST['lname'],

10

        $_POST['nickname'],

11

        $_POST['bio']

12

    	);

13

14

		// sanitize user form input

15

        global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;

16

        $username	= 	sanitize_user( $_POST['username'] );

17

        $password 	= 	esc_attr( $_POST['password'] );

18

        $email 		= 	sanitize_email( $_POST['email'] );

19

        $website 	= 	esc_url( $_POST['website'] );

20

        $first_name = 	sanitize_text_field( $_POST['fname'] );

21

        $last_name 	= 	sanitize_text_field( $_POST['lname'] );

22

        $nickname 	= 	sanitize_text_field( $_POST['nickname'] );

23

        $bio 		= 	esc_textarea( $_POST['bio'] );

24

25

		// call @function complete_registration to create the user

26

		// only when no WP_error is found

27

        complete_registration(

28

        $username,

29

        $password,

30

        $email,

31

        $website,

32

        $first_name,

33

        $last_name,

34

        $nickname,

35

        $bio

36

		);

37

    }

38

39

    registration_form(

40

    	$username,

41

        $password,

42

        $email,

43

        $website,

44

        $first_name,

45

        $last_name,

46

        $nickname,

47

        $bio

48

		);

49

}

Mari saya jelaskan apa kode di fungsi custom_registration_function().

Pertama, kita menentukan apakah formulir telah disampaikan dengan memeriksa jika $_POST['submit'] sudah diatur. Jika formulir telah disampaikan, kita panggil fungsi registration_validation untuk memvalidasi data pengguna yang dimasukkan.

Kemudian kita membersihkan data formulir dan mengatur data yang dibersihkan untuk nama variabel setelah isian formulir. Akhirnya, kita panggil complete_registration untuk mendaftarkan pengguna.

Kita perlu memanggil fungsi registration_form untuk menampilkan formulir registrasi.

Ingat saya menyebutkan bahwa kita akan memberikan dukungan shortcode untuk plugin pendaftaran? Berikut ini adalah kode dukungan shortcode.

1

// Register a new shortcode: [cr_custom_registration]

2

add_shortcode( 'cr_custom_registration', 'custom_registration_shortcode' );

3

4

// The callback function that will replace [book]

5

function custom_registration_shortcode() {

6

    ob_start();

7

    custom_registration_function();

8

    return ob_get_clean();

9

}

Pada titik ini, kita sudah selesai mengkoding plugin. Berikut adalah gambar yang menunjukkan bagaimana tampilan formulir pendaftaran.

Perhatikan Anda mungkin tidak mendapatkan tampilan yang sama persis di situs WordPress Anda sebagai hasil dari beragamnya CSS styling.

Penggunaan Plugin

Untuk menerapkan plugin dalam posting WordPress atau halaman, gunakan shortcode [cr_custom_registration].

Untuk menerapkan formulir pendaftaran dalam aspek tertentu dari tema Anda, tambahkan tag template berikut - <?php custom_registration_function(); ?>.
Anda bisa mendapatkan file plugin ini di lampiran dalam artikel ini.

Ringkasan

Pada artikel ini, kita berlalu melalui proses menciptakan sebuah plugin yang menambahkan  kustom formulir pendaftaran untuk WordPress. Anda dapat memperpanjang formulir pendaftaran untuk memasukkan tambahan bidang seperti peran pengguna, akun AOL IM, tapi pastikan bentuk bidang memliki meta data yang valid dengan wp_insert_user.

Jika Anda memiliki pertanyaan dan saran, beritahu saya di komentar!

Ingat bahwa jika Anda berusaha keras untuk mengikuti tutorial ini dan Anda ingin solusi sederhana, cobalah plugin WordPress Registration Form yang ada di Envato Market.