Kuinka rakentaa custom login-sivu WordPressiin

WordPressin oletuskirjautumissivu toimii teknisesti hyvin, mutta ulkoasultaan ja käyttökokemukseltaan se on usein geneerinen eikä vastaa yrityksen brändiä. Custom login-sivu mahdollistaa täysin räätälöidyn kirjautumiskokemuksen, joka näyttää osalta muuta verkkosivustoa ja tarjoaa paremman käyttökokemuksen käyttäjille.

Monet rakentavat custom login -sivun raskailla lisäosilla, vaikka sen voi toteuttaa kevyesti WordPressin omilla hookeilla, templateilla ja pienellä määrällä PHP- ja CSS-koodia. Tämä pitää sivuston nopeampana ja helpommin ylläpidettävänä.

Miksi tehdä custom login-sivu

Oletuksena WordPress käyttää wp-login.php-sivua, joka näyttää samalta lähes kaikilla WordPress-sivustoilla. Räätälöity login-sivu tuo useita hyötyjä.

Tärkeimmät edut:

• Brändätty käyttökokemus
• Parempi turvallisuus
• Selkeämpi käyttöliittymä
• Parempi mobiilikäyttö
• Mahdollisuus lisätä omia toimintoja
• Parempi käyttäjäohjaus

Erityisesti jäsenalueilla ja asiakasportaaleissa custom login-sivu tekee palvelusta huomattavasti ammattimaisemman.

Luo oma login-sivu WordPressiin

Yksinkertaisin tapa on luoda tavallinen WordPress-sivu esimerkiksi nimellä:

• Kirjaudu
• Login
• Jäsenalue

Tämän jälkeen sivulle voidaan lisätä WordPressin kirjautumislomake shortcodeilla tai PHP:llä.

Kirjautumislomake wp_login_form-funktiolla

WordPress sisältää valmiin funktion kirjautumislomakkeen näyttämiseen.

Esimerkki:

<?php wp_login_form(); ?>

Tämä voidaan lisätä custom page templateen tai shortcodeen.

Voit myös määrittää asetuksia:

<?php
wp_login_form(array(
    'redirect' => home_url('/dashboard'),
    'label_username' => 'Sähköposti',
    'label_password' => 'Salasana',
    'label_log_in' => 'Kirjaudu'
));
?><

Custom page template login-sivulle

Paras tapa on tehdä oma sivupohja teemaan.

Esimerkki:

<?php
/*
Template Name: Custom Login
*/
get_header();
?>

<div class="login-wrapper">
    <?php wp_login_form(); ?>
</div>

<?php get_footer(); ?>

Tämän jälkeen template voidaan valita WordPress-editorissa kyseiselle sivulle.

Login-sivun tyylien muokkaus

Oletuslomake näyttää hyvin pelkistetyltä, joten CSS-muokkaukset ovat yleensä tarpeen.

Esimerkki:

.login-wrapper {
    max-width: 400px;
    margin: 60px auto;
}

.login-wrapper input {
    width: 100%;
    padding: 12px;
}

Voit lisätä myös:

• oman logon
• taustakuvan
• animaatioita
• dark moden
• responsiivisen layoutin

Oletus wp-login.php:n ohjaaminen pois käytöstä

Monet haluavat estää käyttäjiä näkemästä oletusloginia.

Esimerkki redirectistä:

function custom_login_redirect() {
    $login_page = home_url('/kirjaudu');

    if (strpos($_SERVER['REQUEST_URI'], 'wp-login.php') !== false) {
        wp_redirect($login_page);
        exit;
    }
}
add_action('init', 'custom_login_redirect');

Tämä parantaa myös turvallisuutta vähentämällä bottien hyökkäyksiä oletusloginia vastaan.

Custom login logo

WordPressin login-logon voi vaihtaa helposti.

function custom_login_logo() {
    ?>
    <style>
        .login h1 a {
            background-image: url('/logo.png');
            background-size: contain;
            width: 100%;
        }
    </style>
    <?php
}
add_action('login_head', 'custom_login_logo');

Käyttäjän ohjaaminen kirjautumisen jälkeen

Kirjautumisen jälkeen käyttäjä voidaan ohjata tietylle sivulle roolin perusteella.

Esimerkki:

function custom_login_redirect_by_role($redirect_to, $request, $user) {

    if (isset($user->roles) && is_array($user->roles)) {

        if (in_array('subscriber', $user->roles)) {
            return home_url('/jasenalue');
        }

        if (in_array('administrator', $user->roles)) {
            return admin_url();
        }
    }

    return $redirect_to;
}

add_filter('login_redirect', 'custom_login_redirect_by_role', 10, 3);

Turvallisuus custom login -sivulla

Custom login-sivu ei yksinään tee sivustosta turvallista, mutta se auttaa pienentämään hyökkäyspintaa.

Tärkeitä turvallisuustoimia:

• reCAPTCHA
• kaksivaiheinen tunnistautuminen
• login attempt limit
• HTTPS
• vahvat salasanat
• bot protection
• turvallinen hosting

Login-sivun optimointi mobiilille

Suuri osa käyttäjistä kirjautuu mobiililaitteilla, joten responsiivisuus on tärkeää.

Hyviä käytäntöjä:

• isot painikkeet
• selkeät kentät
• mobiiliystävällinen spacing
• nopea lataus
• ei turhia popuppeja

Custom login ilman lisäosia

Monet login-lisäosat lataavat paljon ylimääräistä JavaScriptiä ja CSS:ää. Kevyt custom-ratkaisu toimii usein paremmin.

Kevyen toteutuksen etuja:

• parempi suorituskyky
• vähemmän konflikteja
• helpompi ylläpito
• parempi turvallisuus
• enemmän hallintaa

Elementor ja custom login

Jos käytössä on Elementor Pro, login-sivu voidaan rakentaa myös visuaalisesti.

Elementor mahdollistaa:

• custom login widgetit
• popup-loginit
• responsiiviset layoutit
• dynaamiset redirectit

Kevyempi PHP-ratkaisu on kuitenkin usein nopeampi.

Login-sivun SEO ja indeksointi

Kirjautumissivua ei yleensä haluta hakukoneisiin.

Lisää:

<meta name="robots" content="noindex,nofollow">

Tai estä indeksointi SEO-lisäosalla.

Yhteenveto

Custom login-sivu tekee WordPressistä ammattimaisemman, turvallisemman ja paremmin brändätyn. Kevyellä toteutuksella voidaan rakentaa täysin räätälöity kirjautumiskokemus ilman raskaita lisäosia.

Kun login-sivu yhdistetään hyvään turvallisuuteen, responsiiviseen suunnitteluun ja käyttäjäroolien hallintaan, WordPress toimii huomattavasti paremmin jäsenalueissa, verkkokaupoissa ja asiakasportaaleissa.