Membuat Custom Login dengan Page Builder Favorit

Ingin mendesain halaman login dengan menggunakan Elementor, Divi, WP Bakery atau Gutenberg? SolusiPress punya plugin yang bernama Custom Login and Member Page.

Pengaturan Dasar

Pastikan Anda sudah memasang dan mengaktifkan plugin CLaMP. Buka menu Settings -> General, kemudian tentukan apakah user dapat mendaftar pada website Anda. Pengaturan ini akan mempengaruhi form login dan pendaftaran.

Desain Halaman Login

Silahkan desain halaman login Anda menggunakan page builder favorit atau menggunakan Gutenberg editor bawaaan WordPress. Gunakan shortcode berikut untuk membuat form.

[spclamp_login_form signup="yes|no" show_title="yes|no" title="Log In" button="Log In"]

Untuk contoh kali ini saya akan menggunakan shortcode berikut untuk ditempelkan pada halaman login saya.

[spclamp_login_form show_title="no"]

Pengaturan Custom Login

Buka menu Settings -> Custom Login, atur Login Page dengan halaman login yang baru Anda desain. Kemudian tentukan pengaturan lainnya, contoh pengaturan pada custom login saya dapat dilihat pada gambar dibawah ini.

Anda dapat menentukan sembarang halaman untuk dijadikan Member/Dashboard Page, halaman tersebut beserta child page (1 level) dibawahnya hanya dapat dibuka ketika pengunjung sudah login.

Login type akan berpengaruh pada form registrasi, dengan memilih opsi Email maka input username tidak akan ditampilkan pada saat pengunjung mengisi form registrasi.

Pengaturan Keamanan

Untuk keamanan website, Anda dapat mencegah public visitor (pengunjung tanpa login) untuk mengakes wp-admin atau wp-login.php. Atau jika pengunjung telah login, Anda tetap dapat menghalangi mereka untuk masuk ke halaman wp-admin.

Keamanan Tambahan

Untuk keamanan tambahan, Anda dapat mengaktifkan integrasi dengan Google Recaptcha v3. Pastikan domain Anda terdaftar pada Google Recaptcha.

Buka tab Integration untuk memasukkan site key dan secret key. Sebagai catatan, mungkin butuh beberapa menit agar recaptcha dapat terkoneksi dengan website Anda.

Silahkan logout dan buka halaman login Anda kembali, untuk memastikan form login dan recaptcha berjalan dengan baik

Pastikan juga halaman yang Anda atur sebagai Member/Dashboard Page juga tidak dapat dibuka sebelum pengunjung login.

Halaman Edit Profil

Buat halaman baru dibawah page yang dijadikan Member/Dashboard Page, tambahkan shortcode [spclamp_profile_form] untuk menampilkan form edit profil.

Untuk menambahkan menu berdasarkan user yang login, Anda dapat menggunakan plugin If Menu.

Wrapper Shortcode

Jika Anda butuh teks yang hanya dapat dilihat ketika user login atau tidak pada sembarang post / page, Anda dapat menggunakan shortcode [spclamp_content] ... [/spclamp_content], seperti pada contoh berikut.

[spclamp_content target="member"]
Tulisan ini hanya untuk semua member yang sudah login
[/spclamp_content]

[spclamp_content target="member" roles="editor,author"]
Tulisan ini hanya untuk member author dan editor yang sudah login 
[/spclamp_content]

[spclamp_content target="guest"]
Tulisan ini hanya untuk pengunjung tamu yang belum login
[/spclamp_content]

CLaMP Versi Pro

Jika Anda menyukai project ini, silahkan berikan dukungan melalui donasi atau membeli versi pro. Fitur-fitur tambahan pada fitur pro untuk versi Alpha-1 ini mencakup Social Sign in dengan Facebook & Google. Selain itu Anda dapat mengatur apakah page/post/custom post dapat diakses oleh role tertentu. Fitur-fitur lain akan ditambahkan pada rilis-rilis selanjutnya.

Pembatasan akses ke halaman tertentu pada page, post dan custom post types.

Membatasi view berdasarkan kategori, tag dan custom taxonomy (termasuk kategori product woocommerce atau yang lainnya)

Known Issue: Untuk website berbasis non-theme seperti penggunaan Oxygen Builder masih bermasalah ketika menampilkan pesan pembatasan akses, karena Theme builder tidak menggunakan file template.

Demo versi Pro dapat Anda lihat pada url https://ukmdemo.solusipress.com/

Happy WordPressing 🙂

Credits:
https://github.com/Gregwar/Formidable
https://github.com/justintadlock/members (for the idea)
https://packagist.org/packages/nicmart/string-template

3.7 3 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Angga Arkademi
Angga Arkademi
7 months ago

Keren Om.. kalo boleh kasih masukan, bisa ditambahin settingan pilihan redirect setelah login/register, misal ke home, halaman sebelumnya, atau ke url yg kita setup..

envelope-otagscalendarwhatsapp
2
0
Would love your thoughts, please comment.x
()
x