Come editare la pag...
 
Condividi:

Come editare la pagina standard di login  

  

0

Come accedere

Se hai installato WordPress nella directory principale del tuo sito web, la tua pagina di accesso è: http://example.com/wp-login.php Se hai installato WordPress nella sua sottodirectory, ad esempio / directory, la tua pagina di accesso è: http://example.com/directory/wp-login.php In caso di problemi durante l'accesso, provare i suggerimenti relativi ai problemi di accesso.

 

Il modulo di accesso
Nella parte superiore della pagina di accesso si trovano il logo e il collegamento di WordPress, seguito dal modulo di accesso, con:

  • Campi di input per "Nome utente" e "Password".
  • Una casella di controllo "Ricordami". Se selezionato, il tuo browser ti tiene connesso per 14 giorni. (Se non è selezionato, ti disconnetti quando chiudi il browser o dopo due giorni.)
  • Il pulsante "Accedi" per inviare i dati del modulo.

Sotto il modulo ci sono due link:

  1. Uno è per gli utenti registrati che hanno dimenticato la password.
  2. L'altro va alla prima pagina del tuo sito WordPress.

Questo modulo di accesso può fare tre cose:

  1. Accedi a un sito (inserendo un nome utente e una password validi).
  2. Invia una password via e-mail a un utente registrato (facendo clic su Hai perso la password? (link: wp-login.php?action=lostpassword).
  3. Registra nuovi utenti (che sono arrivati a questo modulo facendo clic su Registrati (link: wp-login.php?action=register).

 

Personalizzare l'accesso a WordPress
Gran parte della pagina di accesso di WordPress può essere facilmente modificata con i plugin di WordPress (cerca "login"). Può anche essere modificato aggiungendo manualmente codice al file functions.php del tema WordPress.

 

Cambia il logo di accesso
Per cambiare il logo di WordPress con il tuo, dovrai cambiare gli stili CSS associati a questa intestazione:

<h1> <a href="https://wordpress.org/"> Powered by WordPress </a> </h1>

WordPress utilizza i CSS per visualizzare un'immagine di sfondo, il logo di WordPress, nel collegamento (<a>) all'interno del tag di intestazione (<h1>).

Puoi utilizzare l'hook login_enqueue_scripts per inserire CSS nell'intestazione della pagina di accesso in modo che il tuo logo venga caricato.

Per utilizzare il codice seguente, sostituisci il file denominato site-login-logo.png con il nome del file del tuo logo e memorizza il tuo logo con i tuoi file Theme attivi in una directory denominata / images:

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
		height:65px;
		width:320px;
		background-size: 320px 65px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

La dimensione del tuo logo non dovrebbe essere superiore a 80 x 80 pixel. Regola il valore di riempimento inferiore sopra alla spaziatura desiderata tra il tuo logo e il modulo di accesso.

Per modificare i valori del collegamento in modo che il logo si colleghi al tuo sito WordPress, utilizza il seguente esempio di hook di WordPress; modificalo e incollalo sotto il precedente nel functions.php:

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Stile del tuo accesso
Puoi modellare ogni elemento HTML nella pagina di accesso di WordPress con CSS.

Per aggiungere stili al <head> della tua pagina di login, usa una funzione come il my_login_logo sopra. Gli stili dichiarati all'interno dell'elemento head di una pagina sono chiamati "embedded style sheet" e hanno la precedenza sugli stili nei fogli di stile esterni collegati.

Se hai molti stili di pagina di accesso, potresti voler creare il tuo foglio di stile di accesso personalizzato. Questo codice, aggiunto al tuo file functions.php, caricherà un file CSS chiamato style-login.css, memorizzato con i tuoi file Theme attivi:

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

WordPress collega due dei suoi fogli di stile esterni alla pagina di accesso:
wp-admin / css / colors.css e wp-admin / css / wp-admin.css (dalla versione 3.8,
le versioni precedenti utilizzavano wp-admin / css / color /color-fresh.css, wp-admin / css / login.css).
Puoi sovrascrivere gli stili predefiniti di WordPress rendendo la tua dichiarazione di stile più "specifica":
quando due stili si applicano allo stesso elemento, CSS dà la precedenza al selettore più specifico.

 

Ecco alcuni selettori CSS utili e altamente specifici per la pagina di accesso:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

WordPress utilizza il foglio di stile CSS wp-admin.css per inserire il logo e per nascondere il testo
dell'intestazione con text-indent: -9999px ;:

.login h1 a {
	background-image: url('../images/w-logo-blue.png?ver=20131202');
	background-image: none, url('../images/wordpress-logo.svg?ver=20131107');
	background-size: 80px 80px;
	background-position: center top;
	background-repeat: no-repeat;
	color: #999;
	height: 80px;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.3em;
	margin: 0 auto 25px;
	padding: 0;
	text-decoration: none;
	width: 80px;
	text-indent: -9999px;
	outline: none;
	overflow: hidden;
	display: block;
}

L'utilizzo di un selettore più specifico nel tuo foglio di stile personalizzato sovrascrive il
valore dell'immagine di sfondo sopra, inserendo invece il tuo logo:

.body.login div#login h1 a {
    background-image: url("images/site-logo.png");
}

Lo stile della pagina di accesso predefinito in colors.css imposta il colore del testo dei collegamenti sotto il modulo:

.login #nav a,
.login #backtoblog a {
	text-decoration: none;
	color: #999;
}

Per ignorarlo, aumentare la specificità e includere! Important:

body.login div#login p#nav a,
body.login div#login p#backtoblog a {
    color: #0c0 !important; /* Your link color. */
}

 

Hook di accesso
Puoi personalizzare la tua pagina di login di WordPress con action hook e filter hook, tra cui:

  • Azioni nella <head> del documento: login_enqueue_scripts, login_head.
  • Filtra in <body>: login_headerurl, login_headertitle, login_message, login_errors.
  • Azioni in fondo e sotto il modulo: login_form, login_footer.

L'immagine mostra dove diversi hook possono aggiungere contenuto.

 

Gli hook precedenti vengono eseguiti quando si utilizza il modulo per accedere. Altri sono pensati per la registrazione, il recupero della password e i plugin di WordPress.

Il file WordPress wp-login.php genera l'HTML, contenente la posizione e la sequenza di tutti gli hook della pagina di accesso.

 

Crea una pagina di accesso personalizzata
Finora hai visto come personalizzare la pagina di accesso integrata di WordPress. Puoi anche creare la tua pagina di accesso personalizzata utilizzando la funzione wp_login_form in uno dei modelli di pagina del tuo tema WordPress:

<?php wp_login_form(); ?>

La funzione ha diversi parametri per modificare le impostazioni predefinite.
Ad esempio, puoi specificare: i nomi ID del modulo e dei suoi elementi (per lo stile CSS),
se stampare la casella di controllo "Ricordami" e l'URL a cui un utente viene reindirizzato dopo un accesso riuscito
(l'impostazione predefinita è rimanere attivo la stessa pagina):

<?php
if ( ! is_user_logged_in() ) { // Display WordPress login form:
    $args = array(
        'redirect' => admin_url(), 
        'form_id' => 'loginform-custom',
        'label_username' => __( 'Username custom text' ),
        'label_password' => __( 'Password custom text' ),
        'label_remember' => __( 'Remember Me custom text' ),
        'label_log_in' => __( 'Log In custom text' ),
        'remember' => true
    );
    wp_login_form( $args );
} else { // If logged in:
    wp_loginout( home_url() ); // Display "Log Out" link.
    echo " | ";
    wp_register('', ''); // Display "Site Admin" link.
}
?>

I parametri della funzione sopra:

  • Reindirizza l'utente alla schermata del dashboard di amministrazione dopo l'accesso.
  • Imposta il nome ID per il modulo: id = "loginform-custom".
  • Modificare le etichette di testo per gli elementi del modulo (ad esempio, dal "nome utente" predefinito a, in questo esempio, "testo personalizzato nome utente").
  • Stampa la casella di controllo "Ricordami".

Se l'utente è già loggato, il modulo non viene stampato; invece vedono due link: Log Out | Site Admin.

Questo modulo di accesso ha i filtri: login_form_top, login_form_middle e login_form_bottom.

Ciascuno può stampare il testo nel modulo, come mostrato nell'immagine.

Il modulo stesso è generato dal codice nel file WordPress wp-includes/general-template.php.

Poiché la tua pagina di accesso personalizzata è diversa dalla pagina di accesso incorporata di WordPress (wp-login.php), gli stessi fogli di stile CSS non si applicano. Ma il foglio di stile del tuo tema attivo (style.css) si applica, quindi usalo per modellare questo modulo.

Altri tag di modello relativi alla funzionalità di accesso includono wp_login_url, wp_logout_url, wp_loginout, wp_lostpassword_url, login_redirect e wp_register.

Parlaci della tua Idea