Jak změnit vzhled přihlašovací stránky WordPressu

Nelíbí se vám design přihlašovací stránky WordPressu? Úprava vzhledu je jednodušší, než si myslíte. Přizpůsobením přihlašovacího formuláře vám umožní vytvořit stránku, která odpovídá designu vašeho webu, takže působí vizuálně atraktivněji a profesionálněji.

Defaultní vzhled přihlašovacího formuláře WordPressu vypadá následovně:

V dnešním článku si uvedeme dva způsoby, pomocí kterých lze požadovaných změn dosáhnout:

• Změna vzhledu pomocí pluginu
• Změna vzhledu pomocí kódu

Změna vzhledu pomocí pluginu

Zaměříme se na plugin „Custom Login Page Customizer„, díky kterému dokážete vzhled přihlašovací stránky kompletně změnit pomocí několika kliknutí. Konkrétně můžete editovat pozadí přihlašovací stránky, barvy, fonty a přidat vlastní loga, nebo obrázky.

Po aktivaci se v administraci WordPressu objeví nová kolonka s názvem Login Customizer, ve které najdete Setting a Customizer:

Setting – Nastavení

1. Kolonka s nápisem „Pamatovat si mě“ zůstane vždy zaškrtnutá
2. Lze nastavit možnost uživatelského přihlášení pouze pomocí jména, nebo e-mailu
3. Zaškrtnutím deaktivujete měnič jazyků, který je běžně umístěn pod přihlašovacím formulářem

Po nastavení přejdeme do Customizeru, který nám umožní editovat vzhled stránky ve frontendu.

Customizer – Přizpůsobení vzhledu

Jednotlivá nastavení customizeru si zde vysvětlíme:

• Templates
• Background
• Logo
• Form
• Fields
• Button
• Other
• Custom CSS & Javascript

Templates – předem definované šablony

• Lze vybrat jednu ze tří předem nadefinovaných šablon

Background – změna pozadí

• Barva pozadí
• Obrázek na pozadí

Logo

• Deaktivace loga
• Import vlastního loga
• Změna velikosti
• Vlastní padding
• Nastavení odkazu
• Nadpis stránky

Form – vzhled formuláře

• Obrázek na pozadí
• Custom barva pozadí
• Změna šířky a výšky
• Nastavení paddingu
• Zaoblení rohů
• Stínování

Fields – vzhled polí formuláře

• Odstranění pole „pamatovat si mě“
• Vlastní šířka polí
• Velikost fontu
• Šířka, barva a stínování rámečku
• Barva pozadí a textu

Button – vzhled tlačítko

• Barva pozadí
• Barva pozadí při najetí myší (hover efekt)
• Velikost tlačítka
• Velikost fontu
• Barva textu
• Nastavení paddingů
• Nastavení rámečku
• Stínování

Other – ostatní

• Deaktivace pole „Zapomenuté heslo“, „Souhlas se zpracováním osobních údajů“, nebo „Přejít zpět na web“
• Velikost fontu
• Barva textu + hover efekt

Custom CSS & Javascript

• Možnost přidat vlastní CSS, nebo JavaScript kód

Výsledek práce pak může vypadat například nějak takto:

Změna funkcí pomocí PHP

O něco složitější způsob, který je vhodný zejména pro ty, kteří nechtějí zatěžovat web spoustou jednorázových pluginů.

Než budete pokračovat, ujistěte se, že používáte child theme, jinak by se po aktualizaci šablony veškeré změny přepsaly!!

Kód vždy vkládejte na konec souboru functions.php vaší šablony (k souboru se dostanete přes Vzhled > Editor souboru šablony).

Nejprve si ukážeme některé změny, které lze provézt pouze pomocí php funkcí, a v další sekci si založíme nový CSS soubor pro úpravu vzhledu.

Změna URL pro přesměrování uživatelů, kteří se přihlásili

V tomto případě přesměrujeme uživatele na domovskou stránku webu:

function admin_login_redirect( $redirect_to, $request, $user ) {
   global $user;

   if( isset( $user->roles ) && is_array( $user->roles ) ) {
      if( in_array( "administrator", $user->roles ) ) {
      return $redirect_to;
      }
      else {
      return home_url();
      }
   }
   else {
   return $redirect_to;
   }
}

add_filter("login_redirect", "admin_login_redirect", 10, 3);

Automatické zaškrtnutí pole pamatovat si mě

Automatickým zaškrtnutím pole „Pamatovat si mě“ se sníží počet uživatelů, kteří pole nezaškrtli a rázem ztratili, nebo zapomněli své přihlašovací údaje na web.

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Změna vzhledu pomocí CSS

Pokud se chystáte provádět rozsáhlejší úpravy týkajících se vzhledu, bude potřeba vytvořit vlastní CSS soubor, do kterého budete všechny změny vzhledu přihlašovací stránky ukládat:

1. Přejděte do sekce Vzhled > Editor souboru šablony a otevřete soubor functions.php
2. Na konec souboru přidejte kód, který načte soubor s vašimi custom styly (soubor vytvoříme v dalších krocích):

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

3. Přihlašte se k FTP webu (například pomocí programu Filezilla, nebo WinSCP)
4. Přejděte do složky se soubory vaší šablony (cesta může vypadat například takto: www/domains/domena-webu.cz/wp-content/themes/aktualne-pouzivana-sablona)
5. V souborech šablony vytvořte nový soubor s názvem login-style.css

6. Po vytvoření by měl být CSS soubor automaticky aplikován
7. Změny jednotlivých částí přihlašovací stránky již můžete upravit pomocí CSS stylů

Zde je seznam nejdůležitějších selektorů pro úpravu přihlašovací stránky (selektorem vyberete oblast, kterou můžeme následně editovat):

• body.login – pozadí stránky
• body.login div#login h1 a – logo webu
• body.login div#login form#loginform – bílý box, uvnitř kterého je umístěn přihlašovací formulář
• body.login div#login form#loginform p label – popisky polí přihlašovacího formuláře – uživatelského jméno a heslo
• body.login div#login form#loginform input – obě pole formuláře (jméno i heslo)
• body.login div#login form#loginform input#user_login – pole uživatelského jména
• body.login div#login form#loginform input#user_pass – pole hesla
• body.login div#login form#loginform p.forgetmenot – pole „pamatovat si mě“
• body.login div#login form#loginform p.submit input#wp-submit – tlačítko „přihlásit se“
• body.login div#login p#nav a – link „zapomněli jste heslo?“
• body.login div#login p#backtoblog a – link ← Zpět: Váš web

V praxi to funguje tak, že použijete selektor, a v něm jednotlivé CSS styly. Pro ty méně znalé zde uvedu i pár základních stylů, které by se vám při editaci mohli hodit:

• změna barvy pozadí – background-color: #barva;
• velikost fontu – font-size: _ px;
• šířka – width: _ px;
• výška – height: _ px;
• zaoblení rohů – border-radius: _ px;
• skrýt element – display: none;

Příklad použití:

//změna pozadí na černou
body.login {
 background-color: #000000;
}

//skrytí pole "pamatovat si mě"
body.login div#login form#loginform p.forgetmenot {
 display: none;
}

//změna barvy linku "← Zpět: Váš web" na červenou
body.login div#login p#backtoblog a {
 color: red;
}

Díky výše zmíněným selektorům můžete mít vzhled přihlašovací stránky pod svou kontrolou a nastavit tak vzhled, který odpovídá image vašeho webu.