WordPress je v České republice čím dál více rozšířen. Napovídá tomu i fakt, že již konečně bude dokončena česká lokalizace na 100%. Jenže při používání redakčního systému jsou tu i některá úskalí. Jak bezpečnost, protože čím více se něco používá, tak tím více se na to zaměří někdo, kdo chce nekalými praktikami něco získat. Tuto odvětví ale dneska probírat nebudeme. Již jsem se mu věnoval v předchozím seriálu Bezpečný wordpress, který má zatím jen 2 díly. Dnešní článek je o tom, jak svůj web, který běží na WordPressu odlišit od jiných. Dnes se zaměříme na přizpůsobení přihlašovací stránky.

Základní vzhled

Přihlašovací obrazovka bez jakýkoliv úprav vypadá jako na screenshotu výše. Na stránce vidíte logo WordPressu, dvě přihlašovací kolonky, tlačítko na přihlášení a i odkazy na web a nebo zapomenuté heslo. Sice je tato stránka čistá a přátelská, ale přeci jen chybí ji ten osobitý styl, který vyjadřuje váš web.

Vlastní logo

První co si změníme bude logo. Základní rozměr loga je 80 x 80. Tuto velikost klidně můžete změnit, ale na maximální šířku 320 px. Výška omezená není, ale je zbytečné vkládat velké logo. Jde jen o to, si přizpůsobit stránku ne ji zbytečně znechutit.

function my_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(ADRESA_OBRÁZKU);
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Tento kód si vložte do svého souboru functions.php , který najdete ve složce svojí šablony.Místo ADRESA_OBRÁZKU vložte adresu vašeho obrázku, který chcete, aby se zobrazoval při přihlašování. Pokud chcete vložit obrázek, který přesahuje jeden ze základních rozměrů (80×80) je nutné, aby jste přidali ještě parametry o velikosti obrázku. Pro vložení většího obrázku použijte kód níže.

function my_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(ADRESA_OBRÁZKU);
background-size: ŠÍŘKApx VÝŠKApx;
height: ŠÍŘKApx;
width: VÝŠKApx;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

V tomto kódu zase vložte adresu obrázku a poté vložte celkovou výšku a šířku obrázku do příslušných polí. Pozor: Konec „px“ ponechte!

Odkaz

Možná jste se již někdy zajímali o to, kam vedete odkaz loga WordPressu. V České republice vede na stránku české komunity. V našem případě, však chceme, aby tento odkaz vedl třeba na úvodní stránku webu. Toho docílíme velice snadno. Do functions.php vložte kód, který najdete níže.

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

function my_login_logo_url_title() {
return 'TITULEK';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Tento úryvek kódu vám také umožní změnit titulek, který se zobrazí při najetí na logo. Změnu titulku provedete přepsáním části TITULEK. Ještě také můžeme chtít vložit nějakou unikátní URL. Taková změna není problém. Stačí jen poupravit jeden řádek. Pro jinou URL než adresu webu použijte kód níže.

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

function my_login_logo_url_title() {
return 'TITULEK';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Místo URL vložte vaši adresu ve formátu http://adresa .

Úplně jiná stránka

Samozřejmě, že tyto přizpůsobení nejsou jediná, která provést. Jsou ovšem základní a pro většinu uživatelů stačí. Pokud chcete změnit i jiné parametry stačí využít následující kód, který vám vloží vlastní CSS soubor do přihlašovací stránky.

function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/prihlas_styl.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );


Poté již stačí jen využít přiřazení třídy a identifikátory a vše si upravit podle svých potřeb. Tyto úpravy ovšem doporučuji jen zkušenějším uživatelům.

Seznam tříd a identifikátorů

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 {}