Come inserire il form di login di WordPress nel front-end

È spesso necessario portare nel front-end il form di login di WordPress, specialmente quando avete blog e siti che differenziamìno i servizi e i contenuti per gli utenti iscritti.

La funzione wp_login_form() fa proprio questo: genera un semplice form di login di WordPress da collocare dove si desidera all’interno di un template.

Se non siamo sviluppatori di temi WordPress, però, possiamo comunque aggiungere il nostro form di login attraverso uno shortcode che permetta di inserire il form in qualunque articolo o pagina del sito, o anche in un widget di una barra laterale.

Per prima cosa va creato lo shortcode:

function register_theme_settings() {
    add_shortcode( 'login-form', 'build_login_form' );
}
add_action('init', 'register_theme_settings');

La funzione add_shortcode() richiede due argomenti: il nome dello shortcode e una funzione di callback, che può essere anche la seguente:

function build_login_form( $atts ){
    if ( is_user_logged_in() )
        return '';

    $atts = shortcode_atts( array( 'redirect' => get_bloginfo( 'url' ) ), $atts, 'login_form' );

    $output = '
        <div id="login">
    ';
    $args = array(
        'echo' => false,
        'redirect' => esc_url( $atts['redirect'] ), 
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => true
    );
    $output .= wp_login_form( $args );
    $output .= '
        </div><!-- #login-form -->
    ';
    return $output;
}

Niente di difficile. La prima condizione verifica che l’utente non sia già autenticato. In questa situazione non è utile visualizzare il form. Se il visitatore non è autenticato, si procede alla creazione dello shortcode. A questo provvede la funzione shortcode_atts(), con cui vengono definiti gli attributi dello shortcode e se ne impostano i valori predefiniti. In questo caso, abbiamo previsto l’unico attributo redirect, cui assegniamo il valore dell’URL della home page (get_bloginfo( 'url' ) – si legga il Codex per maggiori informazioni).

Così, se l’amministratore inserisce lo shortcode senza attributi, l’utente sarà reindirizzato alla home page dopo il login.

[login-form]

Se, invece, viene passato l’attributo redirect, sarà questo a impostare una diversa pagina di reindirizzamento:

[login-form redirect="http://www.example.com/profile"]

E questo è il nostro form visualizzato in una pagina di Twenty Nineteen: