Kuidas luua WordPressis kohandatud sisselogimisvormi

Hiljuti puutusin kokku olukorraga, kus minu klient soovis, et ma WordPressis loonaks kohandatud sisselogimisvormi. HTML-i arendaja on loonud pilkupüüdva sisselogimisvormi ja andnud mulle üle. Selles artiklis näitan teile, kuidas kasutasin täpset sisselogimisvormi kujundust ja lõin WordPressis kohandatud sisselogimisvormi.

Miks vaja WordPressis kohandatud sisselogimisvormi

WordPress pakkus armatuurlauale sisselogimiseks sisseehitatud vormi. See vorm on taustal saadaval ainult vaikekujundusega. Me ei saa seda vaikevormi kuvada esiotsa küljel, kuna see kujundus ei ühildu esiosaga.

Funktsiooni wp_login_form kasutamine

WordPress pakub meetodit wp_login_form(), mida saab kasutada esiotsa sisselogimisvormi loomiseks. Peame lihtsalt edastama funktsioonile parameetrid ja see kuvab kohapeal HTML-vormi. Helistage sellele funktsioonile kõikjal, kuhu soovite sisselogimisvormi lisada.

<?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 );
}
?>

Oleme kasutanud meetodit is_user_logged_in (), et kontrollida, kas kasutaja on juba sisse logitud. Meie sisselogimisvormi kuvatakse ainult sisselogimata kasutajatele. Nagu on näidatud massiivis $ args, lisab ‘form_id’ => ‘loginform’ loodud sisselogimisvormile HTML-i atribuudi ‘loginform’. Samamoodi võime edastada kasutajanimele ID, parooli vastavalt ‘id_username’ => ‘user_login’ ja ‘id_password’ => ‘user_pass’. Allpool on ekraanipilt loodud vormi kohta.

Kui teie sisselogimisvorm on loodud, saate CSS-i reguleerida, kasutades vormi ID-d, kasutajanime väljad jne. Selles etapis olen rakendanud sellele vormile CSS-i vastavalt HTML-i arendaja pakutule. Ma ei hakka näitama lõplikku vormikujundust. Selle õpetuse eesmärk on lihtsalt näidata, kuidas sama tulemust saavutada.

Loodan, et saate aru, kuidas WordPressis kohandatud sisselogimisvormi luua. Kui teil on küsimusi või ettepanekuid, jätke kommentaar allpool.