Crea una pagina di accesso personalizzata WordPress senza plug-in

Pubblicato: 2022-09-01

Ti sei mai annoiato con la pagina di accesso predefinita di WordPress?

Ti sei mai chiesto se esiste un modo per rendere la pagina di accesso coerente con il design del tuo sito web?

Se sì, sei nel posto giusto. In questo articolo, ti guideremo attraverso diversi metodi per personalizzare la tua pagina di accesso senza plug-in.

Cosa abbiamo incluso oggi?

  • Pagina di accesso predefinita di WordPress
  • Perché dovresti creare una pagina di accesso personalizzata?
  • Personalizza la pagina di accesso predefinita di WordPress
    • Personalizza il logo della pagina di accesso
    • Disabilitazione del selettore di lingua della pagina di accesso di WordPress
  • Crea una nuova pagina di accesso personalizzata

Pagina di accesso predefinita di WordPress

Per impostazione predefinita, puoi accedere alla pagina di accesso di WordPress aggiungendo /login/, /admin/ o wp-login.php alla fine dell'URL del tuo sito.

Ottieni questa schermata di accesso ogni volta che lo fai, vero?

PPWP Pro: pagina di accesso predefinita di WordPress

Come puoi vedere, la pagina di accesso di WordPress contiene i seguenti elementi:

  1. Sfondo predefinito
  2. Il logo WordPress
  3. Campi di inserimento (nome utente e password)
  4. La casella di controllo Ricordami
  5. Il pulsante Invia
  6. Il collegamento Password smarrita
  7. Torna al collegamento

E se volessi sostituire questa pagina generica con quella personalizzata, diciamo, per scopi di branding?

Continua a leggere fino alla fine del nostro blog. Ci saranno delle sorprese per te.

Perché dovresti creare una pagina di accesso personalizzata di WordPress?

Innanzitutto, le pagine di accesso personalizzate offrono un'esperienza utente molto migliore. Se gestisci una piccola impresa che ha pochi utenti per accedere al tuo sito, puoi assolutamente utilizzare la pagina di accesso predefinita di WordPress.

Tuttavia, immagina che il tuo sito sia un negozio online, consentire ai clienti di accedere al tuo sito tramite un gateway noioso e non di branding non è una buona scelta.

La migliore pratica è rendere la pagina di accesso coerente con gli stili del tuo sito web.

Un altro vantaggio di avere una pagina di accesso personalizzata di WordPress è il miglioramento della sicurezza del tuo sito. Modificando l'URL di accesso predefinito di WordPress, gli utenti indesiderati non possono accedere facilmente alla pagina di accesso dell'amministratore. Questo aiuta a evitare attacchi indesiderati al tuo sito.

Ora, passiamo alle sezioni successive, dove ti guideremo attraverso i passaggi dettagliati per creare la tua pagina di accesso.

Personalizza la pagina di accesso predefinita di WordPress

Sai che puoi sostituire loghi e collegamenti nella pagina di accesso predefinita di WordPress con i tuoi?

Personalizza il logo della pagina di accesso

Per sostituire il logo di WordPress, aggiungi semplicemente il seguente frammento di codice al file functions.php del tuo tema (figlio).

 funzione ppwp_custom_login_logo() { ?>
    <tipo di stile="testo/css">
        #login h1 a, .login h1 a {
immagine di sfondo: url( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
        altezza: 100px ;
        larghezza: 300px ;
        dimensione dello sfondo: 300px 100px ;
        background-repeat: no-repeat ;
        imbottitura-fondo: 10px ;
        }
    </stile>
<?php }
add_action('login_enqueue_scripts', 'ppwp_custom_login_logo');

Questa azione ti aiuta a sostituire solo il logo. Quando fai clic sul tuo logo, vieni comunque reindirizzato alla pagina di WordPress.

Come puoi reindirizzare gli utenti al tuo sito?

Solo un gioco da ragazzi con il seguente frammento di codice.

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

Non dimenticare di sostituire l'URL del sito con il nome effettivo del tuo sito. Il logo personalizzato sulla schermata di accesso è ora indirizzato alla home page del tuo sito.

Disabilitazione del selettore di lingua della pagina di accesso di WordPress

WordPress 5.9 include una funzione che consente agli utenti di selezionare le lingue quando accedono al tuo sito.

È utile quando gestisci un sito multilingue. Se il tuo sito web è disponibile in un'unica lingua, potresti voler disabilitare quella funzione per semplificare il tuo modulo di accesso.

Come puoi farlo?

Aggiungi semplicemente il seguente frammento di codice al file functions.php del tuo tema (figlio) o al plug-in Code Snippets.

 add_filter( 'login_display_language_dropdown', '__return_false' );

Crea una nuova pagina di accesso personalizzata di WordPress

E se volessi fare qualcosa di più della semplice modifica di loghi e link?

WordPress ti consente di creare la tua pagina di accesso e sostituire quella predefinita di WordPress con la tua?

Sì! Puoi assolutamente!

Basta seguire i nostri passaggi di seguito. Tieni presente che questa guida richiede una piccola conoscenza del codice. Se non hai familiarità con i codici, usa invece i plugin.

Ricordati di eseguire il backup del tuo sito prima di iniziare.

Passaggio 1: crea un nuovo file modello

Per farlo, vai su Aspetto > Editor di file del tema.

Nella sezione parti del modello, aggiungi un nuovo file .php e assegnagli il nome che desideri, ad esempio pagina-di-accesso-personalizzata.php.

Per prima cosa, aggiungi questa riga al tuo file modello personalizzato:

 <?php /* Nome modello: pagine di accesso personalizzate */ ?>

Questa azione renderà il tuo file PHP creato un modello di pagina. Di conseguenza, vedrai il nome del modello quando modifichi le pagine nel back-end.

Passaggio 2: personalizza il file modello creato

Il passaggio successivo consiste nell'aggiungere codici PHP per creare un modulo di accesso completo.

Aggiungi un modulo di accesso

 <?php
/**
* Nome modello: pagina di accesso personalizzata
*/
get_header();
se ( ! è_utente_logged_in() ) {
    $args = matrice
        'redirect' => admin_url(), // reindirizza alla dashboard dell'amministratore.
        'form_id' => 'custom_loginform',
        'label_username' => __( ' Nome utente: ' ),
        'label_password' => __( ' Password: ' ),
        'label_remember' => __( ' Ricordami ' ),
        'label_log_in' => __( ' Accedimi '),
         'ricorda' => vero
    );
wp_login_form($args);
}
get_footer();

Reindirizza wp-login.php alla pagina di accesso personalizzata

Hai creato correttamente una pagina di accesso personalizzata. Tuttavia, gli utenti possono comunque accedere direttamente alla pagina di accesso predefinita di WordPress digitando wp-admin o wp-login.php dopo gli URL del sito.

Per evitare che ciò accada, devi reindirizzare gli utenti dagli URL di accesso predefiniti di WordPress a quelli personalizzati.

Per farlo, aggiungi i seguenti codici personalizzati al plugin functions.php o Code Snippets del tuo tema (figlio).

 funzione redirect_login_page() {
    $url_accesso = home_url( '/login' );
    $url = nomebase($_SERVER['RICHIESTA_URI']); // ottieni l'URL richiesto
    isset($_REQUEST['redirect_to'] ) ? ( $url = "wp-login.php" ): 0; // se gli utenti inviano la richiesta a wp-admin
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_url);
        Uscita;
    }
}
add_action('init','redirect_login_page');

Gestione degli errori di accesso

Una volta terminata la creazione di una pagina di accesso personalizzata, gli utenti che inseriscono i dettagli di accesso corretti accederanno alla dashboard. Le richieste di accesso non riuscite verranno reindirizzate a quella predefinita di WordPress.

Per gestire i tentativi di accesso falliti, aggiungi il seguente codice al file functions.php del tuo tema (figlio).

 funzione gestore_errore() {
    $login_page = home_url( '/login' );
    errori $ globali;
    $codici_errori = $errori->get_codici_errori(); // ottieni i codici di errore integrati in WordPress
    $_SESSION["codici_err"] = $codici_err;
    wp_redirect($pagina_di_accesso); // mantiene gli utenti sulla stessa pagina
    Uscita;
}
add_filter( 'login_errors', 'error_handler');

Quindi, aggiungi i seguenti codici a custom_login_page.php.

 $err_codes = isset($_SESSION["err_codes"] )? $_SESSIONE["codici_err"] : 0;
    if( $codici_err !== 0 ){
        echo display_error_message($err_codes);
}
funzione display_error_message($codice_errore){
    // Nome utente non valido.
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = '<strong>ERRORE</strong>: nome utente non valido.';
    }
    // Password errata.
    if ( in_array( 'password_errata', $err_code ) ) {
        $error = '<strong>ERRORE</strong>: la password inserita non è corretta.';
    }
    // Nome utente vuoto.
    if ( in_array( 'nome_utente_vuoto', $codice_err) ) {
        $error = '<strong>ERRORE</strong>: il campo del nome utente è vuoto.';
    }
    // Password vuota.
    if ( in_array( 'vuoto_password', $err_code ) ) {
        $error = '<strong>ERRORE</strong>: il campo della password è vuoto.';
    }
    // Nome utente vuoto e password vuota.
    if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
        $error = '<strong>ERRORE</strong>: il nome utente e la password sono vuoti.';
    }
restituisce $ errore;
}

Passaggio 3: crea una nuova pagina e assegna il modello creato alla pagina personalizzata

Ora vai alla sezione Pagine nella dashboard di amministrazione e crea una nuova pagina.

Nell'elenco a discesa Modello nella sezione Attributi di pagina, seleziona il modello creato.

PPWP Pro: crea pagine di accesso personalizzate

Salva la pagina.

Ora hai la tua pagina di accesso.

Hai creato con successo la tua pagina di accesso personalizzata?

Ti abbiamo guidato attraverso i passaggi dettagliati per personalizzare la pagina di accesso dell'amministratore.

Puoi modificare il logo e l'URL associato nel modulo di accesso predefinito di WordPress.

In alternativa, puoi creare la tua pagina di accesso personalizzata WordPress creando un nuovo modello di pagina. Sebbene la seconda soluzione all'inizio sembri richiedere conoscenze di codifica, è abbastanza facile con la nostra chiara guida passo passo. Quindi non preoccuparti affatto.

Sei già riuscito a creare la tua pagina di accesso personalizzata?

Hai bisogno di ulteriori informazioni?

Fatecelo sapere nella sezione commenti qui sotto!