Kuinka luoda mukautettu kirjautumislomake WordPressissä

Viime aikoina törmäsin tilanteeseen, jossa asiakkaani halusi minun luovan mukautetun kirjautumislomakkeen WordPressiin. HTML-kehittäjä on luonut katseenvangitsijan kirjautumislomakkeen ja luovuttanut sen minulle. Tässä artikkelissa näytän sinulle, kuinka käytin tarkkaa kirjautumislomakkeen suunnittelua ja luonut mukautetun kirjautumislomakkeen WordPressiin.

Miksi tarvitset mukautetun kirjautumislomakkeen WordPressissä

WordPress toimitti sisäänrakennetun lomakkeen hallintapaneeliin kirjautumista varten. Tämä lomake on saatavana taustalla vain oletusrakenteella. Emme voi näyttää tätä oletuslomaketta käyttöliittymän puolella, koska tämä malli ei sovi yhteen käyttöliittymän kanssa.

Wp_login_form-toiminnon käyttö

WordPress tarjoaa menetelmän wp_login_form(), jolla voidaan luoda käyttöliittymän kirjautumislomake. Meidän on vain välitettävä parametrit funktiolle, ja se näyttää HTML-lomakkeen sivustossa. Soita vain tähän toimintoon missä haluat lisätä kirjautumislomakkeen.

<?php
if (! is_user_logged_in()) {
    $args = array(
        'echo'           => true,
        'remember'       => true,
        'redirect'       => (is_ssl()? 'https://': 'http://' ). $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'],
        'form_id'        => 'loginform',
        'id_username'    => 'user_login',
        'id_password'    => 'user_pass',
        'id_remember'    => 'rememberme',
        'id_submit'      => 'wp-submit',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in'   => __( 'Log In' ),
        'value_username' => '',
        'value_remember' => false
    );
 
    wp_login_form( $args );
}
?>

Olemme käyttäneet menetelmää is_user_logged_in () tarkistamaan, onko käyttäjä jo kirjautunut sisään. Kirjautumislomakkeemme näkyy vain kirjautumattomille käyttäjille. Kuten $ args -taulukossa näkyy, ‘form_id’ => ‘loginform’ lisää HTML-tunnuksen attribuutin ‘loginform’ luotuun kirjautumislomakkeeseen. Samalla tavalla voimme välittää tunnuksen käyttäjätunnukselle, salasanan vastaavasti ‘id_username’ => ‘user_login’ ja ‘id_password’ => ‘user_pass’. Alla on kuvakaappaus luodusta lomakkeesta.

Kun kirjautumislomake on luotu, voit säätää CSS: ää käyttämällä lomakkeen tunnusta, käyttäjätunnuskenttiä jne. Tässä vaiheessa olen soveltanut CSS: ää tähän lomakkeeseen HTML-kehittäjän toimittaman mukaisesti. En aio näyttää lopullista muotoilua. Tämän opetusohjelman tarkoituksena on vain osoittaa, kuinka voidaan saavuttaa sama tulos.

Toivon, että ymmärrät, miten luot mukautetun kirjautumislomakkeen WordPressissä. Jos sinulla on kysyttävää tai ehdotuksia, jätä kommentti alla.