Buat Halaman Login Kustom WordPress Tanpa Plugin

Pernahkah Anda bosan dengan halaman login default WordPress?

Pernahkah Anda bertanya-tanya apakah ada cara untuk membuat halaman login konsisten dengan desain situs web Anda?

Jika ya, Anda telah datang ke tempat yang tepat. Pada artikel ini, kami akan memandu Anda melalui berbagai metode untuk menyesuaikan halaman login Anda tanpa plugin apa pun.

Apa yang telah kita sertakan hari ini?

• Halaman Login Default WordPress
• Mengapa Anda Harus Membuat Halaman Login Kustom?
• Sesuaikan Halaman Login Default WordPress
  • Sesuaikan Logo Halaman Masuk
  • Menonaktifkan Pengalih Bahasa Halaman Masuk WordPress
• Buat Halaman Login Kustom Baru

Halaman Login Default WordPress

Secara default, Anda dapat mengakses halaman login WordPress dengan menambahkan /login/, /admin/, atau wp-login.php di akhir URL situs Anda.

Anda mendapatkan layar login ini setiap kali Anda melakukannya, bukan?

Seperti yang Anda lihat, halaman login WordPress berisi elemen-elemen berikut:

1. Latar belakang default
2. Logo WordPress
3. Kolom input (nama pengguna dan kata sandi)
4. Kotak centang Ingat Saya
5. Tombol Kirim
6. Tautan Kehilangan Kata Sandi Anda
7. Kembali ke tautan

Bagaimana jika Anda ingin mengganti halaman umum ini dengan halaman khusus Anda, katakanlah, untuk tujuan pencitraan merek?

Teruskan membaca sampai akhir blog kami. Akan ada beberapa kejutan untuk Anda.

Mengapa Anda Harus Membuat Halaman Login Kustom WordPress?

Pertama dan terpenting, halaman login khusus menghadirkan pengalaman pengguna yang jauh lebih baik. Jika Anda menjalankan bisnis kecil yang memiliki beberapa pengguna untuk masuk ke situs Anda, Anda benar-benar dapat menggunakan halaman login default WordPress.

Namun, bayangkan bahwa situs Anda adalah toko online, membiarkan pelanggan masuk ke situs Anda melalui gateway yang membosankan dan non-branding bukanlah pilihan yang baik.

Praktik terbaik adalah membuat halaman login konsisten dengan gaya situs web Anda.

Manfaat lain dari memiliki halaman login kustom WordPress adalah meningkatkan keamanan situs Anda. Dengan mengubah URL login WordPress default, pengguna yang tidak diinginkan tidak dapat membuka halaman login admin Anda dengan mudah. Ini membantu menghindari serangan yang tidak diinginkan di situs Anda.

Sekarang, mari beralih ke bagian berikutnya, di mana kami akan memandu Anda melalui langkah-langkah terperinci untuk membuat halaman login Anda sendiri.

Sesuaikan Halaman Login Default WordPress

Tahukah Anda bahwa Anda dapat mengganti logo dan tautan di halaman login default WordPress dengan milik Anda sendiri?

Sesuaikan Logo Halaman Masuk

Untuk mengganti logo WordPress, cukup tambahkan cuplikan kode berikut ke file functions.php tema (anak) Anda.

 fungsi ppwp_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
background-image: url( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
        tinggi: 100 piksel ;
        lebar: 300px ;
        ukuran latar belakang: 300px 100px ;
        background-repeat: tidak-ulangi ;
        bantalan-bawah: 10px ;
        }
    </ gaya>
<?php }
add_action( 'login_enqueue_scripts', 'ppwp_custom_login_logo' );

Tindakan ini membantu Anda mengganti logo saja. Saat mengklik logo Anda, Anda masih diarahkan ke halaman WordPress.

Bagaimana Anda bisa mengarahkan pengguna ke situs Anda?

Hanya sepotong kue dengan potongan kode berikut.

 fungsi ppwp_custom_login_url() {
    kembali home_url();
}
add_filter('login_headerurl', 'ppwp_custom_login_url');
fungsi ppwp_login_logo_url_redirect() {
    kembali ' https://passwordprotectwp.com/ ';
}
add_filter( 'login_headertitle', 'ppwp_login_logo_url_redirect' );

Jangan lupa untuk mengganti URL situs dengan nama asli situs Anda. Logo kustom di layar login Anda sekarang diarahkan ke halaman beranda situs Anda.

Menonaktifkan Pengalih Bahasa Halaman Masuk WordPress

WordPress 5.9 menyertakan fitur bagi pengguna untuk memilih bahasa saat masuk ke situs Anda.

Ini sangat berguna saat Anda menjalankan situs multibahasa. Jika situs web Anda tersedia dalam satu bahasa, Anda mungkin ingin menonaktifkan fungsi tersebut untuk menyederhanakan formulir login Anda.

Bagaimana Anda bisa melakukan itu?

Cukup tambahkan cuplikan kode berikut ke file functions.php tema (anak) Anda atau plugin Cuplikan Kode.

 add_filter( 'login_display_language_dropdown', '__return_false' );

Buat Halaman Login Kustom WordPress Baru

Bagaimana jika Anda ingin melakukan lebih dari sekadar mengubah logo dan tautan?

Apakah WordPress memungkinkan Anda untuk membuat halaman login Anda sendiri dan mengganti halaman default WordPress dengan milik Anda?

Ya! Anda benar-benar bisa!

Ikuti saja langkah-langkah kami di bawah ini. Harap dicatat bahwa panduan ini membutuhkan sedikit pengetahuan pengkodean. Jika Anda tidak terbiasa dengan kode, gunakan plugin sebagai gantinya.

Ingatlah untuk mencadangkan situs Anda sebelum memulai.

Langkah 1: Buat File Template Baru

Untuk melakukannya, buka Appearance > Theme File Editor.

Di bawah bagian template-parts, tambahkan file .php baru dan beri nama sesuai keinginan Anda, misalnya custom-login-page.php.

Hal pertama yang pertama, tambahkan baris ini ke file template khusus Anda:

 <?php /* Nama Template: Halaman Login Kustom */ ?>

Tindakan ini akan membuat file PHP yang Anda buat menjadi template halaman. Dengan demikian, Anda akan melihat nama template saat mengedit halaman di backend.

Langkah 2: Sesuaikan File Template Buatan Anda

Langkah selanjutnya adalah menambahkan kode PHP untuk membuat form login yang lengkap.

Tambahkan Formulir Masuk

 <?php
/**
* Nama Template: Halaman Login Kustom
*/
get_header();
jika ( ! is_user_logged_in() ) {
    $args = array
        'redirect' => admin_url(), // redirect ke dashboard admin.
        'form_id' => 'custom_loginform',
        'label_namapengguna' => __( ' Nama pengguna: ' ),
        'label_password' => __( ' Sandi: ' ),
        'label_remember' => __( ' Ingat Saya ' ),
        'label_log_in' => __( 'Masukkan Saya ' ),
         'ingat' => benar
    );
wp_login_form( $args );
}
get_footer();

Arahkan ulang wp-login.php ke Halaman Login Kustom

Anda telah berhasil membuat halaman login khusus. Namun, pengguna masih bisa langsung masuk ke halaman login default WordPress dengan mengetikkan wp-admin atau wp-login.php setelah URL situs Anda.

Untuk menghindari hal ini terjadi, Anda perlu mengarahkan pengguna dari URL login default WordPress ke URL kustom Anda.

Untuk melakukannya, tambahkan kode khusus berikut ke plugin functions.php atau Cuplikan Kode tema (anak) Anda.

 fungsi redirect_login_page() {
    $login_url = home_url( '/login' );
    $url = nama dasar($_SERVER['REQUEST_URI']); // dapatkan URL yang diminta
    isset( $_REQUEST['redirect_to'] ) ? ( $url = "wp-login.php" ): 0; // jika pengguna mengirim permintaan ke wp-admin
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect( $login_url );
        KELUAR;
    }
}
add_action('init','redirect_login_page');

Penanganan Kesalahan Masuk

Setelah Anda selesai membuat halaman login khusus, pengguna yang memasukkan detail login yang benar akan masuk ke dasbor. Permintaan login yang gagal akan dialihkan ke default WordPress.

Untuk mengatasi upaya login yang gagal, tambahkan kode berikut ke file functions.php tema (anak) Anda.

 fungsi error_handler() {
    $login_page = home_url( '/login' );
    global $kesalahan;
    $err_codes = $errors->get_error_codes(); // dapatkan kode kesalahan bawaan WordPress
    $_SESSION["err_codes"] = $err_codes;
    wp_redirect( $login_page ); // pertahankan pengguna di halaman yang sama
    KELUAR;
}
add_filter('login_errors', 'error_handler');

Selanjutnya, tambahkan kode berikut ke custom_login_page.php.

 $err_codes = isset( $_SESSION["err_codes"] )? $_SESSION["err_codes"] : 0;
    if( $err_codes !== 0 ){
        echo display_error_message( $err_codes );
}
fungsi tampilan_error_message( $err_code ){
    // Nama pengguna tidak valid.
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = '<strong>ERROR</strong>: Nama pengguna tidak valid.';
    }
    // Kata kunci Salah.
    if ( in_array( 'salah_password', $err_code ) ) {
        $error = '<strong>ERROR</strong>: Kata sandi yang Anda masukkan salah.';
    }
    // Nama pengguna kosong.
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = '<strong>ERROR</strong>: Bidang nama pengguna kosong.';
    }
    // kata sandi kosong.
    if ( in_array( 'empty_password', $err_code ) ) {
        $error = '<strong>ERROR</strong>: Bidang sandi kosong.';
    }
    // Nama pengguna kosong dan kata sandi kosong.
    if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
        $error = '<strong>ERROR</strong>: Nama pengguna dan sandi kosong.';
    }
kembalikan $kesalahan;
}

Langkah 3: Buat Halaman Baru & Tetapkan Template yang Dibuat ke Halaman Kustom

Sekarang, navigasikan ke bagian Halaman di bawah dasbor admin Anda dan buat halaman baru.

Di bawah dropdown Template di bawah bagian Page Attributes, pilih template yang Anda buat.

Simpan halaman.

Sekarang Anda memiliki halaman login Anda sendiri.

Sudahkah Anda Berhasil Membuat Halaman Login Kustom Anda?

Kami telah memandu Anda melalui langkah-langkah terperinci untuk menyesuaikan halaman login admin Anda.

Anda dapat mengubah logo dan URL terkait di formulir login default WordPress.

Atau, Anda dapat membuat halaman login kustom WordPress Anda sendiri dengan membuat template halaman baru. Sementara solusi ke-2 tampaknya membutuhkan pengetahuan pengkodean pada awalnya, itu cukup mudah dengan panduan langkah demi langkah kami yang jelas. Jadi jangan khawatir sama sekali.

Sudahkah Anda berhasil membuat halaman login khusus Anda?

Apakah Anda memerlukan informasi lebih lanjut?

Beri tahu kami di bagian komentar di bawah!