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.

    

            
    
    
    

Email Address



        

    Password
            Show        
        


    

        

             
            Remember Me
        
        

                        
        
        
    
    



Lost your password?

                Register
            


    

        

            or log in with :
        
                

            Facebook        
                
                

            Google        
                
    
    

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

    

            
    
    
    

Email Address



        

    Password
            Show        
        


    

        

             
            Remember Me
        
        

                        
        
        
    
    



Lost your password?

                Register
            


    

        

            or log in with :
        
                

            Facebook        
                
                

            Google        
                
    
    

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 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

Tulisan ini hanya untuk pengunjung tamu yang belum login

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