Cambio logo WordPress

Cambio logo WordPress

2668
0
CONDIVIDI

Personalizzare il pannello di controllo WordPress da codice è facile ed intuitivo. Vi illustrerò passo dopo passo le semplici procedure da apportare per poter cambiare vestre grafica all’interfaccia di login wordpress:

Istanziamo i filtri

Aprire il file functions.php presente all’interno del tema corrente (wp-content/themes/tuotema/functions.php) e piazzare il seguente codice a fine pagina, prima dei tag di chiusura php (?>):

function custom_login() {
   echo '';
}
add_action('login_head', 'custom_login');

function LOGIN_the_url( $url ) {
   return get_bloginfo( 'siteurl' );
}
function LOGIN_the_title( $url ) {
   return get_bloginfo( 'name' );
}
add_filter( 'login_headerurl', 'LOGIN_the_url' );
add_filter( 'login_headertitle', 'LOGIN_the_title' );

Gli hook, come dei veri e propri “uncini” permettono di agganciarci ed “intrometterci” nel ciclo di vita dell’applicazione ed in questo caso, poter modificare l’interfaccia grafica del pannello di controllo introducendo un file css.

Incorporare il foglio di stile su WordPress

A questo punto possiamo creare il file “login.css” e posizionarlo all’interno del tema corrente (wp-content/themes/tuotema/), successivamente possiamo all’interno incollare delle righe di codice che ci permetteranno di personalizzare la pagina al 100%:

/* NON MODIFICARE */
* { margin: 0; padding: 0; }
html { background: #efefef !important; }
body { padding-top: 30px; font-family: sans-serif; font-size: 12px; }
form { margin-left: 8px; padding: 26px 24px 46px; font-weight: normal; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #fff; border: 1px solid #e5e5e5; -moz-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px; -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px; -khtml-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px; box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px; }
form .forgetmenot { font-weight: normal; float: left; margin-bottom: 0; }
.button-primary { font-family: sans-serif; padding: 3px 10px; border: none; font-size: 13px; border-width: 1px; border-style: solid; -moz-border-radius: 11px; -khtml-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; cursor: pointer; text-decoration: none; margin-top: -3px; }
#login form p { margin-bottom: 0; }
label { color: #777; font-size: 14px; }
form .forgetmenot label { font-size: 12px; line-height: 19px; }
form .submit, .alignright { float: right; }
form p { margin-bottom: 24px; }
#login { width: 320px; margin: 7em auto; }
#login_error, .message { margin: 25px 0 16px 8px; border-width: 1px; border-style: solid; padding: 12px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; float:right; }
#nav, #backtoblog { text-shadow: rgba(255, 255, 255, 1) 0 1px 0; margin: 0 0 0 16px; padding: 16px 16px 0; }
#backtoblog { padding: 12px 16px 0; }
body form .input { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; font-weight: 200; font-size: 24px; width: 97%; padding: 3px; margin-top: 2px; margin-right: 6px; margin-bottom: 16px; border: 1px solid #e5e5e5; background: #fbfbfb; outline: none; -moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); }
input { color: #555; }
.clear { clear: both; }
#pass-strength-result { font-weight: bold; border-style: solid; border-width: 1px; margin: 12px 0 6px; padding: 6px 5px; text-align: center; }
/* FINE NON MODIFICARE */

/*CUSTOM LOGIN*/
html { background:#eee !important; }
#login { width:800px; height:405px; margin:5em auto; }
h1{ padding:20px !important; }
h1 a{ background:url(../images/logo.png) no-repeat top left !important; width:250px !important; height:150px !important;text-indent:-9999px; padding:20px !important; overflow:hidden;padding-bottom:0px;display:block; float:left;}
#login form { background:none; border:none; border-radius:none; box-shadow:none; float:right; padding:25px; width:250px; height:370px; }
#login label { color:#000; font-weight:bold; }
#nav, #backtoblog { padding:0px 25px; float:right; clear:both; margin:0; text-shadow:none; }
#backtoblog { padding:10px 25px; }
.login #nav a, .login #backtoblog a { color:#333 !important; }
.login #nav a:hover, .login #backtoblog a:hover { color:#cc0000 !important;}

Cambio logo WordPress

Chiaramente per poter effettuare dei cambiamenti al logo e sostituire quello di WordPress con il vostro è necessario agire sul selettore seguente:

h1 a{ background:url(../images/logo.png) no-repeat top left !important; width:250px !important; height:150px !important;text-indent:-9999px; padding:20px !important; overflow:hidden;padding-bottom:0px;display:block; float:left; }

In questa maniera ho personalizzato anche la mia interfaccia di login:
login

Nulla vi vieta di modificare altri elementi della pagina (sfondo, pulsanti, ecc…) magari aiutandovi anche con strumenti per gli sviluppatori come Firebug o Analizzatori di elementi html.