Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Membangun Custom WordPress User Flow - Bagian 2: Registrasi User Baru

by
Read Time:20 minsLanguages:
This post is part of a series called Build a Custom WordPress User Flow.
Build a Custom WordPress User Flow — Part 1: Replace the Login Page
Build a Custom WordPress User Flow — Part 3: Password Reset

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Dalam tutorial pertama dalam seri ini tentang penyesuaian pengalaman login WordPress, kami membuat sebuah plugin yang memungkinkan Anda mengganti layar masuk WordPress Anda dengan halaman kustom. Hari ini, kita akan melangkah lebih jauh dan mengganti aliran pendaftaran pengguna baru dengan cara yang sama.

Alasan untuk menyesuaikan halaman login yang kami uraikan di Bagian 1 (mencocokkan halaman pendaftaran dengan tema situs Anda untuk menyembunyikan WordPress dan membuat pengalaman pengguna mulus) berlaku juga untuk pendaftaran pengguna baru, tetapi ada juga beberapa alasan yang lebih spesifik mengapa Anda mungkin ingin membuat halaman pendaftaran Anda sendiri:

  • Pertama, saat pendaftaran, Anda mungkin ingin mengubah bidang yang Anda minta dari anggota baru Anda, menambahkan bidang tambahan atau mungkin menjatuhkan beberapa. Sebagai contoh, dalam tutorial ini, kami akan menghapus bidang nama pengguna dan sebaliknya menggunakan alamat email pengguna baru sebagai login.
  • Kedua, ada spam pendaftaran. Ketika saya pertama kali membuka pendaftaran untuk semua orang di situs saya, itu tidak mengambil lebih dari beberapa jam untuk pendaftaran spam pertama kali muncul, berikut berikutnya setelah itu. Menambahkan field reCAPTCHA pada halaman pendaftaran kustom adalah cara yang baik untuk menangani hal ini sekaligus mempertahankan pengalaman pengguna yang konsisten.
  • Akhirnya, Anda mungkin ingin melakukan beberapa tindakan kustom pada saat pendaftaran, misalnya menambahkan pengguna baru ke milis Anda. Setelah membangun alur pendaftaran Anda sendiri, ini akan lebih mudah dari sebelumnya.

Jadi, dilengkapi dengan serangkaian alasan ini, mari kita mulai.

Dalam tutorial ini, Anda akan belajar bagaimana untuk mengganti layar sebesar WordPress dengan halaman kustom dan melaksanakan registrasi dengan kode Anda sendiri, tanpa melanggar prinsip-prinsip desain WordPress.

Fungsi yang akan dibangun di atas plugin kami membangun dalam bagian 1 dari seri tutorial, jadi jika Anda belum membacanya belum, itu adalah ide yang baik untuk memulai dengan memeriksa bahwa tutorial. Anda dapat menulis kode sendiri sementara mengikuti tutorial, atau men-download kode contoh dari proyek Github tutorial.

Tambahkan kustom halaman pendaftaran pengguna baru

Default WordPress baru halaman pendaftaran di wp-login.php?action=register terlihat seperti ini:

WordPress new user registration screenWordPress new user registration screenWordPress new user registration screen

Tidak buruk, tetapi kecuali jika Anda menjalankan WordPress.org, kemungkinan tidak konsisten dengan desain blog atau situs web Anda.

Catatan: Jika Anda tidak dapat mengakses halaman pendaftaran di situs WordPress Anda, itu adalah karena secara default WordPress tidak membolehkan pengguna baru untuk mendaftarkan diri. Untuk mengubah ini, pergi ke halaman General Settings di admin Dashboard dan centang kotak sebelum "Anyone can register". Kemudian Simpan pengaturan dan kembali ke halaman pendaftaran.

Check this checkbox to enable new user registration in WordPressCheck this checkbox to enable new user registration in WordPressCheck this checkbox to enable new user registration in WordPress

Pada bagian pertama dalam seri, kami membuat halaman kustom untuk menampilkan login form dan shortcode yang digunakan untuk menempatkan login form pada halaman tersebut. Sekarang, kami akan melakukan hal yang sama untuk pendaftaran: pertama, kita akan menciptakan shortcode untuk menampilkan formulir pendaftaran, dan kemudian sebuah halaman di mana shortcode ini akan ditempatkan.

Hal ini juga mungkin untuk menempatkan shortcode pada halaman yang berbeda atau memiliki form login dan registrasi pada satu halaman.

Langkah 1: Buat Shortcode

Membangun di atas plugin dibuat dalam bagian 1 dari seri, mari kita mulai dengan menambahkan shortcode untuk halaman pendaftaran.

Pada akhir plugin kelas 's (Personalize_Login_Plugin) constructor, menambahkan shortcode definisi berikut:

Kemudian, membuat fungsi bertanggung jawab untuk render form registrasi user baru:

Jika Anda telah membaca bagian 1 dari seri, Anda akan melihat banyak kesamaan antara fungsi ini dan login form fungsi render dari tutorial itu.

Pertama, pada baris 10-12, Anda akan melihat bahwa shortcode mengambil atribut show_title, digunakan untuk menentukan apakah judul harus diberikan oleh shortcode atau tidak.

Kedua, formulir pendaftaran tidak ditampilkan ke pengguna yang sudah masuk (baris 14-15). Pesan yang dikembalikan bukan formnya cukup sederhana, jadi tergantung pada kebutuhan Anda, Anda mungkin ingin mengganti potongan kode ini dengan sesuatu yang lebih rumit — misalnya tautan kembali ke dasbor.

Sebuah elemen baru adalah memeriksa untuk WordPress pilihan users_can_register baris 16. Opsi ini dikontrol oleh field General Settings WordPress Anyone can register disebutkan di atas. Untuk memastikan bahwa kita menghormati pengaturan pengguna mendefinisikan dalam WordPress, kita tidak harus menampilkan formulir pendaftaran jika pengaturan diatur ke false. Sebaliknya, seperti yang Anda lihat pada baris 17, akan mengembalikan fungsi pemberitahuan tentang pendaftaran ditutup.

Terjemahan sebenarnya formulir pendaftaran dilakukan pada baris 19 yang menggunakan template PHP, register_form.php, terletak di direktori templates yang kami ciptakan dalam tutorial sebelumnya. Lihat Bagian 1 untuk penjelasan yang lebih panjang pada bagaimana ini bekerja serta kode untuk fungsi yang digunakan, get_template_html.

Sekarang, mari kita tambahkan template formulir pendaftaran.

Langkah 2: Buat Form Registration

Di direktori templates, tambahkan file PHP baru dan nama itu register_form.php. Kemudian, lanjutkan dengan menambahkan formulir pendaftaran dengan bidang yang Anda inginkan Anda pengguna baru untuk mengisi.

Berikut ini adalah versi yang saya buat untuk tutorial ini; formulir pendaftaran agak standar dengan bidang email pengguna, nama pertama dan nama terakhir. Formulir tidak berisi bidang terpisah untuk nama pengguna karena alamat email akan digandakan sebagai satu.

Seperti standar baru pendaftaran pengguna WordPress, versi kami akan menghasilkan password dan email ke pengguna baru. Ini berfungsi sebagai pemeriksaan sederhana email (pengguna tidak akan dapat masuk tanpa memasukkan alamat email yang valid) dan memberlakukan beberapa tingkat keamanan password.

Tentu saja, pendekatan ini memiliki resiko keamanan sendiri dalam bentuk password email, jadi itu adalah ide yang baik untuk meminta (atau bahkan memerlukan) pengguna untuk mengubah sandi setelah masuk.

Pada baris 2-4, template menterjemahkan judul untuk form jika atribut show_title diatur.

Kemudian, pada baris 6, lihatlah action parameter: form dikirimkan ke default WordPress pendaftaran URL yang kita dapat mengambil menggunakan fungsi wp_registration_url. Kita akan bicara lebih banyak tentang ini segera, tapi saya akan menyebutkan sudah sekarang bahwa ini tidak berarti bahwa kami akan memberitahu WordPress menangani registrasi...

Sisa dari template adalah form HTML yang standar dengan field untuk email, nama depan, dan nama belakang.

Sebelum kita bisa melihat shortcode dalam action, kita masih perlu membuat halaman pendaftaran dan menempatkan shortcode di atasnya.

Step 3: Membuat Halaman Pendaftaran User Baru

Untuk menunjukkan formulir pendaftaran, Anda harus menambahkan kode berikut di halaman WordPress:

Ini bisa menjadi salah satu halaman, tetapi untuk sekarang, mari kita membuat sebuah halaman baru untuk formulir pendaftaran.

Dalam bagian sebelumnya, kami menciptakan sebuah fungsi, plugin_activated, untuk membuat halaman plugin di Aktivasi plugin. Di dalam fungsi, kami menambahkan array untuk menyimpan semua halaman yang harus dibuat oleh plugin.

Sekarang, mari kita tambahkan informasi tentang halaman baru ke array. Setelah penambahan, definisi array akan terlihat seperti ini, dengan halaman baru (dengan slug member-register) didefinisikan terakhir:

Hook aktivasi hanya dijalankan ketika sebuah plugin diaktifkan, jadi silakan dan menonaktifkan dan kemudian aktifkan plugin di halaman Plugin. Sekarang, ketika Anda menavigasi ke URL https://<YOUR site="">/member-register, Anda harus melihat sesuatu seperti ini (menggunakan WordPress tema default, Twenty Fifteen):

Custom new user registration formCustom new user registration formCustom new user registration form

Langkah 4: Alihkan Pengguna ke Halaman Pendaftaran Baru Kami

Sebelum kita bergerak untuk melaksanakan action pendaftaran, mari kita pastikan pengguna selalu diarahkan untuk halaman pendaftaran baru ini bukan halaman pengguna baru default di wp-login.php?action=register.

Untuk melakukan ini, kita akan menggunakan action hook login_form_{action} yang, seperti yang mungkin Anda ingat dari bagian 1, aktifkan sebelum setiap tindakan di wp-login.php. Seperti yang Anda lihat dari link di atas, action dalam hal ini adalah register, dan begitu, kita akan menghubungkan kami fungsi untuk login_form_register.

Dalam konstruktor plugin, tambahkan baris berikut:

Kemudian, membuat fungsi callback:

Seperti kita ketagihan fungsi untuk tindakan login_form_register, kita tahu bahwa pengguna ini baik berusaha untuk mengakses form registrasi user baru atau posting.

Itulah hal pertama yang kita lakukan dalam fungsi ini (baris 6) adalah untuk memeriksa permintaan metode yang digunakan untuk mengakses halaman: redirect hanya dilakukan pada GET request seperti  POST request akan disediakan untuk melaksanakan action pendaftaran. Lebih lanjut tentang ini segera.

Kemudian, fungsi berlanjut dengan memeriksa jika pengguna telah masuk (baris 7).

Login pengguna diarahkan ke laman akun (atau admin dashboard jika mereka admin) menggunakan redirect_logged_in_user fungsi yang kita buat di bagian 1. Pengunjung diarahkan ke halaman baru kami, anggota mendaftar.

Sekarang, dengan halaman dan form di tempat, mari kita pindah ke apa yang terjadi ketika pengguna mengirimkan form.

Daftar Pengguna Baru

Ketika pengguna mengirimkan form registrasi user baru, isinya yang dikirim ke wp-login.php?action=register, URL yang sama yang kita gunakan ketika mengarahkan pengguna ke halaman pendaftaran di atas.

Untuk melakukan penyesuaian yang disebutkan sebelumnya (paling penting, menggunakan alamat email sebagai nama pengguna) kita perlu untuk menggantikan fungsi ini dengan kode kita sendiri. Untuk melakukan ini, pertama-tama kita akan membuat fungsi untuk mendaftarkan pengguna baru secara terprogram dan kemudian memanggil fungsi ini dalam action handler.

Langkah 1: Buat Pengguna

Mari kita mulai dengan membuat sebuah fungsi yang dapat digunakan untuk mendaftarkan pengguna baru menggunakan data yang dikumpulkan dari formulir di atas: email alamat, nama pertama dan nama terakhir. Alamat email akan menjadi satu-satunya pengidentifikasi unik, dan sisanya adalah sesuatu yang baik untuk dimiliki.

Di kelas plugin, tambahkan fungsi private berikut:

Seperti yang saya sebutkan di atas, alamat email adalah identifier hanya unik, dan juga satu-satunya diperlukan parameter. Itu sebabnya kita mulai fungsi memvalidasi nilainya. Pertama pada baris 15, memvalidasi alamat email dan kemudian, baris 20 kami memverifikasi alamat email yang belum digunakan. Jika salah satu validasi gagal, sebuah objek Wp_Error dikembalikan. Kita akan kembali ke menampilkan error ini segera.

Jika semua berjalan lancar dan tidak ada kesalahan yang ditemukan, fungsi berlanjut dengan menghasilkan password pada baris 26.

Pada baris 28-37, Anda akan menemukan inti fungsi ini, penciptaan pengguna baru. Pengguna ditambahkan dengan menggunakan WordPress fungsi wp_insert_user. (baris 37). Sebagai parameter satunya, fungsi mengambil array asosiatif dengan informasi tentang pengguna yang sedang dibuat. Seperti yang Anda lihat pada baris 28-35, kami menggunakan $email untuk nama pengguna (user_login) dan field email (email). Untuk daftar lengkap dari bidang yang dapat dimasukkan dalam array atribut, lihatlah WordPress codex.

Setelah membuat pengguna, pada baris 38, fungsi panggilan wp_new_user_notification untuk mengirim sandi yang dihasilkan untuk pengguna baru dan admin situs pengguna baru.

Langkah 2: Panggil Kode Registrasi Saat Pengguna Mengajukan Formulir

Sekarang setelah kami menulis kode untuk mendaftarkan pengguna, kami dapat memanggilnya ketika form pendaftaran disubmit

Sebelumnya, ketika kita menambahkan redirect ke halaman pendaftaran kustom kami menggunakan tindakan login_form_register, saya sebutkan kita akan menggunakan tindakan yang sama juga untuk menangani permintaan POST.

Seperti yang sering terjadi dalam pemrograman, ini bukan satu-satunya cara kita bisa menangani pendaftaran pengguna baru, tetapi memiliki manfaat yang cukup penting: dengan cara ini, kita akan memastikan bahwa orang tidak sengaja dapat mengakses kode pendaftaran standar di WordPress.

Untuk kejelasan, mari tambahkan fungsi terpisah dan ikatkan ke action yang sama (secara teknis, tidak ada alasan mengapa Anda tidak bisa begitu saja menambahkan kode ini ke fungsi pengalihan yang kami buat di atas).

Dalam konstruktor kelas plugin, tambahkan definisi action baru:

Kemudian, buat fungsi:

Fungsi dimulai dengan pemeriksaan metode permintaan baris 8: fungsi terkait dengan WordPress action login_form_register, yang sama bahwa kita digunakan untuk mengarahkan pengguna, dan metode permintaan adalah apa yang membedakan keduanya menggunakan satu sama lain.

Pada baris 11, kami memverifikasi bahwa mendaftarkan pengguna baru diperbolehkan. Jika tidak, pengguna akan diarahkan kembali ke halaman pendaftaran dengan kode error (closed) sebagai query parameter (register-errors).

Di sisi lain, jika pendaftaran terbuka, fungsi mengumpulkan parameter yang diperlukan (baris 15-17) dari permintaan data dan menggunakan mereka untuk memanggil fungsi yang kami ciptakan di atas (baris 19) untuk membuat pengguna baru.

Setelah panggilan register_user, fungsi mengarahkan ulang pengguna ke tempat yang tepat tergantung pada apakah pendaftaran pengguna baru ini berhasil atau tidak:

  • Setelah sukses redirect, pengguna akan diarahkan ke halaman login, dengan parameter $registered menunjukkan bahwa pengguna baru saja dibuat.
  • Apabila terdapat error, poin redirect kembali ke formulir pendaftaran dengan kode kesalahan dari fungsi pendaftaran pengguna baru digabungkan ke dalam daftar dipisahkan koma dan termasuk dalam permintaan (baris 23-24).

Langkah 3: Menampilkan Pesan Error dan Sukses

Seperti yang kita lihat di atas, fungsi pendaftaran mengarahkan ulang pengguna ke halaman login jika registrasi berhasil dan kembali ke halaman pendaftaran jika ada kesalahan, dengan status dikirimkan sebagai parameter permintaan.

Sekarang, mari kita tambahkan beberapa kode untuk menampilkan pesan tersebut kepada pengguna, dimulai dengan pesan galat pada halaman pendaftaran baru.

Dalam render_register_form, tambahkan potongan kode berikut tepat sebelum render template:

Potongan ini pertama memeriksa jika kesalahan ditanggungkan di permintaan parameter register-errors (baris 2). Jika ya, itu akan melalui semua itu, mencari pesan kesalahan yang sesuai menggunakan fungsi get_error_message yang kami buat di Bagian 1 dari seri tutorial.

Pesan error yang dikumpulkan ke dalam sebuah array dalam array $attributes untuk pencetakan dalam template.

Harus mampu menunjukkan pesan error yang benar, kita juga perlu menambahkan pesan kesalahan baru ke fungsi get_error_message. Dalam struktur switch, tambahkan ini (atau Anda sendiri) pesan kesalahan:

Untuk menampilkan kesalahan pada halaman pendaftaran, tambahkan kode berikut dalam template register_form.php di antara judul dan form:

Selanjutnya, mari kita tambahkan pesan yang sukses.

Ketika pengguna baru telah berhasil terdaftar, pengguna akan diarahkan ke Sign In halaman, dengan parameter, registered={email address} ditambahkan ke URL.

Dalam render_login_form fungsi, tambahkan dua baris berikut untuk memeriksa apakah parameter tampil:

Kemudian, dalam template login_form.php, tambahkan pesan yang akan ditampilkan jika flag registered ditetapkan:

Itu dia. Anda sekarang telah membangun alur pendaftaran pengguna baru yang lengkap dengan validasi parameter dan error reporting.

Silakan membuat account pengguna baru untuk menguji alurnya.

Sign In page shows a success messageSign In page shows a success messageSign In page shows a success message

Jika Anda menguji plugin server lokal, kecuali Anda telah mengkonfigurasi pengaturan emailer, Anda mungkin tidak menerima email yang berisi password — itu normal.

Lawan Spam Pendaftaran dengan ReCAPTCH Google

Sementara formulir pendaftaran telah selesai, kami akan menjaga mengubahnya sedikit lebih dengan menambahkan cek reCAPTCHA (itu adalah kotak centang "I'm not a robot" yang akan Anda temukan di banyak situs besar online) untuk mencegah spammer pendaftaran dari membuat account di situs web Anda.

Langkah 1: Dapatkan Key Captcha Anda

Pertama, kunjungi situs reCAPTCHA. Klik pada tombol "Get reCAPTCHA" di sudut kanan atas untuk mengakses halaman admin reCAPTCHA.

Google reCAPTCHA web siteGoogle reCAPTCHA web siteGoogle reCAPTCHA web site

Jika Anda tidak masuk ke akun Google, Anda akan diminta untuk sign in. Jika Anda belum memilikinya, Anda harus membuatnya untuk menggunakan alat ini.

Pada halaman account reCAPTCHA, Anda akan menemukan form berikut. Menggunakannya untuk memasukkan informasi tentang situs web Anda.

Registering a new site for reCAPTCHARegistering a new site for reCAPTCHARegistering a new site for reCAPTCHA

Setelah Anda mengirimkan form dengan mengklik Register, Anda akan melihat halaman dengan petunjuk tentang cara mengaktifkan reCAPTCHA pada situs Anda, serta dua kunci yang digunakan untuk menggunakan API: Site Key dan Secret Key.

Untuk menyimpan kunci dalam plugin WordPress kita, kita harus membuat dua bidang pengaturan. Untuk menjaga hal-hal sederhana, kami akan menambahkannya ke General Settings dan tidak membuat halaman pengaturan khusus.

Untuk menambah field pengaturan, pertama hook action baru. Dalam konstruktor plugin, tambahkan baris baru berikut:

Kemudian membuat fungsi untuk mendefinisikan kolom pengaturan dan dua fungsi callback untuk render bidang pengaturan:

Seperti tutorial ini bukanlah tentang WordPress pengaturan API, kami tidak akan melalui deklarasi bidang pengaturan. Jika Anda tidak akrab dengan bagaimana menambahkan pengaturan di WordPress bekerja, memeriksa seri tutorial lengkap ini oleh Tom McFarlin.

Sekarang, pergi ke halaman General Settings dan menyalin tombol reCAPTCHA ke dua bidang saja dibuat dan menyimpan pengaturan.

Settings for reCAPTCHASettings for reCAPTCHASettings for reCAPTCHA

Langkah 2: Menampilkan CAPTCHA

Dengan persiapan yang dilakukan, kita sekarang dapat menambahkan bidang reCAPTCHA dan menggunakannya untuk memverifikasi bahwa pengguna kami manusia.

Dalam render_registration_form, pertama mengambil reCAPTCHA site key dari pengaturan WordPress dan menyimpannya dalam array $attributes untuk membuatnya tersedia dalam template:

Kemudian, gunakan parameter, tambahkan pengganti untuk bidang reCAPTCHA formulir pendaftaran, tepat di atas tombol submit:

Field reCAPTCHA sebenarnya akan ditempatkan di dalam div di atas menggunakan JavaScript. Jadi, untuk menampilkan field, kita masih akan perlu untuk memasukkan JavaScript di footer halaman.

WordPress memiliki action tertentu hanya untuk digunakan. Tambahkan baris berikut di konstruktor plugin:

Kemudian, buat fungsi, add_captcha_js_to_footer yang mencetak JavaScript tag yang memuat reCAPTCHA API dari Google:

Sekarang, ketika Anda pergi ke halaman pendaftaran, Anda akan melihat ada field reCAPTCHA:

The reCAPTCHA field in actionThe reCAPTCHA field in actionThe reCAPTCHA field in action

Langkah 3: Periksa CAPTCHA

Jika JavaScript berbasis "not a robot" check sukses, reCAPTCHA widget menambahkan parameter baru ke form, g-recaptcha-response. Kemudian, dalam server side validasi dalam fungsi do_register_user, kita dapat menggunakan parameter untuk memeriksa bahwa pengguna telah lulus ujian.

Pertama, mari kita membuat sebuah fungsi untuk memeriksa reCAPTCHA parameter:

Pada baris 9-13, fungsi mengambil respon reCAPTCHA. Jika tidak ditemukan, pengguna belum bahkan mencoba untuk menyelesaikan tes sebelum mengirimkan form.

Kemudian, pada baris 16-24, fungsi menggunakan wp_remote_post untuk mengirim permintaan POST ke server reCAPTCHA untuk memverifikasi menerima respons. Permintaan diperlukan dua parameter, tertanam dalam sebuah array dengan id body: kunci rahasia reCAPTCHA dan respons kita adalah memvalidasi, membaca dari permintaan parameter g-recaptcha-response.

Server mengembalikan respon sebagai sebuah objek JSON dikodekan. Setelah respon yang diterjemahkan, dapat digunakan untuk memeriksa jawaban seperti yang kita lakukan pada baris 29.

Selanjutnya, mari kita menggunakan fungsi dalam handle_register_request untuk membuat reCAPTCHA memeriksa bagian dari parameter validasi. Untuk kejelasan, berikut adalah seluruh if...else membangun dengan kode baru ditambahkan di tengah (baris 4-6):

Jika cek reCAPTCHA gagal, pengguna dikirim kembali ke halaman pendaftaran dengan kesalahan kode captcha termasuk dalam URL.

Untuk menampilkan error kepada pengguna, tambahkan pesan error yang cocok dalam fungsi get_error_message. Sesuatu seperti ini, mungkin:

Dan hanya itu. Anda telah menambahkan cek reCAPTCHA alur pendaftaran pengguna baru Anda.

Apakah berikutnya?

Anda sekarang telah berhasil custom situs WordPress berbasis alur pendaftaran pengguna baru. Jika Anda memiliki lebih banyak ide tentang hal-hal yang Anda ingin untuk berbeda pada langkah ini, ini adalah waktu yang baik untuk memperpanjang perubahan-perubahan yang kami lakukan dalam tutorial ini. Menambahkan Field baru, melakukan validasi lebih, menambahkan pengguna tersebut ke daftar mailing. Anda sebutkan saja.

Dalam tutorial berikutnya, dan akhir, dalam seri ini, kita akan menyelesaikan penyesuaian dengan mengganti "Lupa password" fungsi dengan halaman kustom kami sendiri.

Sampai saat itu, selamat coding.

Advertisement
Did you find this post useful?
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.