Cara Membuat Halaman Login WordPress Full Customize

Banyak dari Anda, saya yakin, sudah familiar dengan halaman login WordPress di wp-login.php. Kelihatannya bagus, dan berfungsi dengan baik. Tetapi ketika datang untuk membuat situs web untuk klien, Anda mungkin menginginkan lebih halaman login yang disesuaikan, sehingga menyatu dengan baik dengan desain website secara keseluruhan. Selain itu, memiliki halaman login yang disesuaikan juga dapat memberikan kesan yang baik kepada klien Anda tentang keahlian Anda.

Jika ini adalah sesuatu yang ingin Anda capai di situs Anda, inilah cara Anda dapat membuat halaman login WordPress yang sepenuhnya disesuaikan.

Halaman Masuk Kustom

Pertama, kita perlu membuat template halaman kustom untuk halaman login. Untuk melakukannya, Anda dapat membuat templat halaman baru dan menamainya – misalnya – page-login.php. Kemudian, buat Halaman baru dari backend WordPress dan atur tautan permanen ke login sehingga WordPress akan secara otomatis mengambil page-login.php template untuk halaman.

Formulir Masuk

Menempatkan wp_login_form tandai di page-login.php halaman template untuk menampilkan form login.

<?php wp_login_form(); ?>

Berikut ini opsional, tetapi dapat berguna dalam kasus tertentu. Anda dapat mengonfigurasi beberapa hal untuk formulir login, seperti menentukan pengalihan URL setelah pengguna berhasil login, mengubah ID nama pengguna, dan bidang input kata sandi.

<?php
$args = array(
    'redirect' => home_url(), 
    'id_username' => 'user',
    'id_password' => 'pass',
   ) 
;?>
<?php wp_login_form( $args ); ?>

Selain itu, Anda juga dapat menambahkan sesuatu. Bisa jadi logo Anda dan sedikit deskripsi situs Anda, misalnya.

<div class="login-branding">
	<a href="#" class="login-logo">Hongkiat.com</a>
	<p class="login-desc">
		Hongkiat.com is a design weblog dedicated to designers and bloggers. We constantly publish useful tricks, tools, tutorials and inspirational artworks.
	</p>
</div>
<div class="login-form">
<?php
$args = array(
    'redirect' => home_url(), 
    'id_username' => 'user',
    'id_password' => 'pass',
   ) 
;?>
<?php wp_login_form( $args ); ?>
</div>

Sekarang, mari kita buat form lebih bagus dengan CSS. Anda dapat membuat CSS sendiri sesuai kebutuhan situs Anda. Dalam contoh ini, inilah tampilan formulir login saya. Ini memiliki latar belakang hitam, dengan tombol biru, yang sangat cocok dengan tema situs Hongkiat.com.

Validasi

Pada titik ini, halaman login sudah berfungsi. Kita bisa mencoba login, dan jika berhasil kita akan diarahkan ke URL yang telah kita tentukan di redirect parameter di atas. Tapi, ada sesuatu yang perlu kita atasi.

Pertama, wp-login.php halaman masih dapat diakses. Akan lebih baik untuk mengarahkan wp-login.php ke halaman login baru kami untuk memberikan pengalaman terpadu kepada klien kami.

Untuk melakukannya, Anda dapat menambahkan kode berikut di functions.php dari tema Anda.

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');

Ingatlah untuk mengubah $login_page variabel ke halaman login Anda sendiri (terima kasih kepada Montana Flynn untuk tipnya).

Kedua, halaman login dapat berfungsi seperti yang diharapkan ketika kita berhasil login. Namun jika terjadi kesalahan seperti saat mengirimkan kombinasi user dan password yang tidak valid, atau mengirimkan kolom kosong, kita juga akan dibuang ke wp-login.php. Untuk mengatasi masalah ini, tambahkan fungsi berikut di functions.php.

function login_failed() {
	$login_page  = home_url( '/login/' );
	wp_redirect( $login_page . '?login=failed' );
	exit;
}
add_action( 'wp_login_failed', 'login_failed' );

function verify_username_password( $user, $username, $password ) {
	$login_page  = home_url( '/login/' );
    if( $username == "" || $password == "" ) {
        wp_redirect( $login_page . "?login=empty" );
        exit;
    }
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);

Kedua fungsi ini melakukan dua tugas. Mereka akan mengarahkan pengguna setelah gagal, dan menambahkan a login string kueri ke URL dengan nilai salah satu dari failed atau empty.

Masalah terakhir adalah kita juga akan diarahkan ke wp-login.php ketika kita telah keluar dari situs. Jadi, kita juga perlu menentukan URL pengalihan saat logout, seperti itu.

function logout_page() {
	$login_page  = home_url( '/login/' );
	wp_redirect( $login_page . "?login=false" );
	exit;
}
add_action('wp_logout','logout_page');

Pesan eror

Kami akan menampilkan pesan kesalahan, menunjukkan kepada pengguna ketika kesalahan terjadi, dan ketika mereka telah keluar dengan menggunakan string kueri yang telah kita masukkan ke dalam URL. Untuk mendapatkan nilai dari string kueri login di atas, kita dapat menggunakan $_GET.

Letakkan kode ini di bawah ini di template halaman login.

$login 	= (isset($_GET['login']) ) ? $_GET['login'] : 0;

Kode di atas akan memeriksa apakah login variabel berisi nilai, jika tidak maka akan disetel ke 0. Kemudian kami akan menampilkan pesan notifikasi yang berbeda berdasarkan nilai $errorseperti begitu.

if ( $login === "failed" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';
} elseif ( $login === "empty" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';
} elseif ( $login === "false" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>';
}

Dan di bawah ini adalah seperti apa pesan kesalahannya.

Kesimpulan

Ada beberapa hal yang dapat kami lakukan untuk meningkatkan halaman login kami seperti menambahkan Tautan Kata Sandi yang Hilang, Tautan Daftardan pesan kesalahan yang dipersonalisasi. Namun, pada titik ini sekarang berfungsi cukup baik bagi pengguna kami untuk masuk dan keluar, dan itu juga bisa menjadi awal yang baik untuk membuat halaman masuk yang lebih maju.

Kami harap Anda menemukan tutorial ini bermanfaat.