Bagaimana cara menyesuaikan login wordpress?

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

Jika ya, Anda 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

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

Anda mendapatkan layar masuk ini setiap kali melakukannya, bukan?

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

1. Latar belakang bawaan
2. Logo WordPress
3. Bidang 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 kustom Anda, katakanlah, untuk tujuan branding?

Baca terus 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 situs Anda adalah toko online, membiarkan pelanggan masuk ke situs Anda melalui gateway yang membosankan dan non-merek bukanlah keputusan yang bagus.

Praktik terbaiknya adalah membuat halaman login konsisten dengan gaya situs web Anda

Manfaat lain dari memiliki halaman login khusus WordPress adalah meningkatkan keamanan situs Anda. Dengan mengubah URL login WordPress default, pengguna yang tidak diinginkan tidak dapat masuk ke 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 mendetail 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 Login

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

function 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);
        height:100px;
        width:300px;
        background-size: 300px 100px;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?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

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

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

Menonaktifkan Pengalih Bahasa Halaman Login WordPress

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

Ini 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 fungsi tema (anak) Anda. php 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

Cukup ikuti 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 Templat Baru

Untuk melakukannya, buka Appearance > Theme File Editor

Di bawah bagian template-parts, tambahkan yang baru. php dan beri nama sesuai keinginan Anda, mis. g. halaman login kustom. php

Hal pertama yang pertama, tambahkan baris ini ke file template kustom Anda

<?php /* Template Name: Custom Login Pages */ ?>

Tindakan ini akan menjadikan file PHP yang Anda buat sebagai template halaman. Karenanya, Anda akan melihat nama template saat mengedit halaman di backend

Langkah 2. Sesuaikan File Templat yang Anda Buat

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

Tambahkan Formulir Masuk

<?php
/**
* Template Name: Custom Login Page
*/
get_header();
if ( ! is_user_logged_in() ) {
    $args = array
        'redirect' => admin_url(), // redirect to admin dashboard.
        'form_id' => 'custom_loginform',
        'label_username' => __( 'Username:' ),
        'label_password' => __( 'Password:' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log Me In' ),
         'remember' => true
    );
wp_login_form( $args );
}
get_footer();

Redirect 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 mengalihkan pengguna dari URL login default WordPress ke URL kustom Anda

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

function redirect_login_page() {
    $login_url  = home_url( '/login' );
    $url = basename($_SERVER['REQUEST_URI']); // get requested URL
    isset( $_REQUEST['redirect_to'] ) ? ( $url   = "wp-login.php" ): 0; // if users ssend request to wp-admin
    if( $url  == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET')  {
        wp_redirect( $login_url );
        exit;
    }
}
add_action('init','redirect_login_page');

Penanganan Error Login

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 fungsi tema (anak) Anda. file php

function error_handler() {
    $login_page  = home_url( '/login' );
    global $errors;
    $err_codes = $errors->get_error_codes(); // get WordPress built-in error codes
    $_SESSION["err_codes"] =  $err_codes;
    wp_redirect( $login_page ); // keep users on the same page
    exit;
}
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 );
}
function display_error_message( $err_code ){
    // Invalid username.
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = '<strong>ERROR</strong>: Invalid username.';
    }
    // Incorrect password.
    if ( in_array( 'incorrect_password', $err_code ) ) {
        $error = '<strong>ERROR</strong>: The password you entered is incorrect.';
    }
    // Empty username.
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = '<strong>ERROR</strong>: The username field is empty.';
    }
    // Empty password.
    if ( in_array( 'empty_password', $err_code ) ) {
        $error = '<strong>ERROR</strong>: The password field is empty.';
    }
    // Empty username and empty password.
    if( in_array( 'empty_username', $err_code )  &&  in_array( 'empty_password', $err_code )){
        $error = '<strong>ERROR</strong>: The username and password are empty.';
    }
return $error;
}

Langkah 3. Buat Halaman Baru dan 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 Atribut Halaman, 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 mendetail untuk menyesuaikan halaman login admin Anda

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

Sebagai alternatif, 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

Bisakah saya menyesuaikan halaman login WordPress?

Bagaimana cara membuat login khusus di WordPress?

Bagaimana cara menyesuaikan halaman login WordPress saya tanpa plugin?

Bagaimana cara mengubah formulir login saya di WordPress?