Cara Membuat Halaman Login WordPress Custom-Made

Diterbitkan: 2018-04-11

Ah, ya, halaman login WordPress – salah satu halaman yang paling dikenal di WordPress – bukan?

login default wordpress

Tetapi pada saat yang sama, memiliki halaman ini di situs WordPress Anda dalam bentuk default tidak selalu merupakan ide terbaik.

Mengapa? - Anda bertanya.

Inilah jawabannya:

Mengapa Anda memerlukan halaman login WordPress yang dibuat khusus?

Masalahnya adalah tiga kali lipat:

  1. lalu lintas . Semakin banyak lalu lintas yang Anda dapatkan, semakin banyak lalu lintas "buruk" yang Anda dapatkan sebagai akibat langsung. Yang saya maksud dengan lalu lintas buruk adalah skrip dan bot berbahaya, spammer, dan semua jenis pengguna yang datang ke situs Anda dengan niat buruk. Menyesuaikan halaman login WordPress Anda dapat membuat situs Anda lebih aman.
  2. Situs multi-pengguna . Jika situs Anda dikelola oleh banyak orang – baik itu administrator atau penulis/blogger – akan terjadi beberapa kali proses masuk. Menyediakan formulir login khusus akan membuat proses lebih menyenangkan secara keseluruhan.
  3. Merek . Halaman login default semuanya bagus, tetapi ada logo WordPress besar tepat di tengah. Mengalihkan ini dan membuat halaman login lebih terlihat seperti milik Anda bisa menjadi sentuhan branding yang bagus. Ini terutama berlaku jika Anda membuat situs web untuk klien. Memberikan pengalaman yang konsisten kepada klien Anda pasti sesuatu yang akan mereka hargai.

Jika salah satu di atas terdengar menarik bagi Anda, Anda harus mempertimbangkan untuk mengalihkan halaman login Anda ke halaman khusus. Berikut caranya:

Cara membuat halaman login WordPress yang dibuat khusus

Ada dua cara utama yang dapat Anda lakukan:

  • cara manual ,
  • cara pluginnya .

Kedua cara memiliki pro dan kontra. Cara manual memberi Anda lebih banyak kontrol atas tampilan halaman akhir. Cara plugin lebih mudah diikuti, terutama jika Anda tidak memiliki keterampilan pengkodean, tetapi Anda harus puas dengan apa yang memungkinkan plugin untuk Anda lakukan.

Mari kita bahas keduanya.

Membuat halaman login khusus secara manual

Meskipun ini mengharuskan Anda untuk mengubah beberapa file sumber tema Anda, itu tidak terlalu sulit. Saya akan menggunakan Dua Puluh Lima Belas sebagai contoh saya di sini.

Kegembiraan dimulai dengan membuat salinan file page.php dan file content-page.php .

Ganti nama salinan baru tersebut masing-masing menjadi page-login.php dan content-login.php .

Buka page-login.php dan ubah hanya satu baris. Dari sini:

 get_template_part( 'content', 'page' );

Untuk ini:

 get_template_part( 'content', 'login' );

Sekarang, mari edit content-login.php dan tambahkan satu baris tepat di bawah <?php the_content(); ?> <?php the_content(); ?> . Seperti:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Catatan. Pada tahap ini, Anda dapat melakukan berbagai penyesuaian lain jika Anda mau (seperti menyesuaikan desain/tata letak, menghapus bilah sisi), tetapi semuanya opsional. Mengubah hanya dua baris itu akan berhasil jika Anda menggunakan pendekatan yang sangat minimal dengan halaman login WordPress baru Anda.

Sekarang, mari kita buat halaman baru di wp-admin dan sebut saja "login". Pastikan bahwa permalink adalah "login" juga:

halaman masuk

Melakukan hal ini akan memastikan bahwa WordPress menggunakan file template page-login.php Anda secara otomatis.

Jika Anda mengunjungi halaman baru Anda sekarang, tampilannya akan terlihat seperti ini:

halaman login baru

Pada tahap ini, satu-satunya yang tersisa untuk dilakukan adalah mengatur pengalihan untuk akhirnya menghilangkan halaman login default WordPress. Lakukan dengan menempatkan baris ini di akhir file functions.php Anda:

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Cuplikan kode dibuat berdasarkan: [1][2].)

Saat ini, satu-satunya halaman login yang dapat diakses adalah halaman baru yang Anda buat. Hal yang hebat di sini adalah Anda dapat mengeditnya secara bebas melalui editor halaman default WordPress (sama seperti Anda mengedit halaman lainnya).

Membuat halaman login WordPress khusus dengan plugin

Metode ini bekerja sedikit berbeda karena alih-alih membuat halaman login yang benar-benar baru, kami sebenarnya memodifikasi yang default.

Pertama, plugin yang akan kita gunakan adalah: Custom Login Page Customizer.

Kustom-Login-Halaman-Customizer

Setelah menginstal dan mengaktifkannya, buka saja Appearance > Login Customizer , di mana Anda dapat meluncurkan panel penyesuai.

Opsi plugin ini cukup bagus, dan memungkinkan Anda untuk menyesuaikan hal-hal seperti:

  • Setel logo agar muncul alih-alih logo WordPress default.
  • Atur latar belakang untuk seluruh halaman login.
  • Atur latar belakang untuk formulir itu sendiri.
  • Sesuaikan gaya formulir dan setiap detail kecil tentangnya (font, ukuran, warna, bidang).
  • Instal add-on keamanan untuk mendapatkan bidang captcha tambahan dalam formulir (bagus untuk mencegah login / bot spam).

Misalnya, hanya beberapa menit bekerja dengan plugin dan saya mendapatkan hasil ini:

demo masuk

Opsi Plugin Lain

Plugin halaman login kustom lain yang layak untuk dilihat adalah: Login Designer. Plugin ini bertujuan untuk membuat penyesuaian halaman login WordPress menjadi sangat mudah sambil tetap memberi Anda fleksibilitas dalam desain.

Salah satu cara untuk mencapai kemudahan penggunaan adalah dengan membuat proses kustomisasi menjadi familiar. Semua opsi dan alat terintegrasi langsung ke dalam WordPress Customizer. Jadi, jika Anda terbiasa menggunakan Customizer untuk mengubah opsi tema, Anda akan merasa seperti di rumah sendiri.

Lihat video ini untuk ikhtisar tentang cara kerja plugin.

Manual atau melalui plugin ?

Apa metode pilihan Anda? Apakah Anda lebih suka membuat kode secara manual atau semuanya ditangani oleh plugin? Jangan ragu untuk berbagi.