Bejelentkezési felület testreszabása WordPress-ben - 2. rész előnézeti képe

Bejelentkezési felület testreszabása WordPress-ben - 2. rész

| Olvasási idő: 1 perc

Folytatjuk az előzőekben elkezdett admin felület átszabási projektünket: már megvan, hogy hogyan töltünk be egyedi CSS-t a WordPress admin felületéhez, illetve egy kicsit a WordPress bejelentkező képernyőjéhez is hozzányúltunk már, azonban ezt még tovább is vihetjük, határt "csak" a CSS tudásunk szabhat.

Egy egyszerű átalakítást fogunk végezni a bejelentkező képernyőn, de haladjunk szépen sorban: első lépésként az mu-plugins mappában hozzuk létre a customize-wp-login.php fájlt, a következő tartalommal:

php
<?php
/*
Plugin Name: Load custom CSS for wp-login.php
Plugin URI: https://www.webmenedzser.hu
Description: Load custom CSS for wp-login.php
Version: 1.0
Author: Radics Ottó
Author URI: https://www.webmenedzser.hu
License: GPL2
*/

function load_custom_css_for_wp_login() {
    wp_register_style( 'custom_css_wp_login', WP_CONTENT_URL . '/mu-plugins/wp-login-styles.css', false, '1.0.0'  );
    wp_enqueue_style('custom_css_wp_login' );
}
add_action( 'login_enqueue_scripts', 'load_custom_css_for_wp_login' );

Ez már ismerős lehet korábbról: megadott URL-ről betölti a hivatkozott fájlt - alapesetben a fenti kód a /wp-content/mu-plugins/wp-login-styles.css fájlt fogja betölteni.

Mentés és frissítés után látni fogjuk, hogy a kapunk egy 404-es hibát, mert nem találja a fájlt - hacsak nem hoztuk létre már előrelátóan. Ha nem tettük még meg, akkor most hozzuk létre a megadott útvonalon a fájlt, és példa tartalomként a következővel töltsük fel:

css
body.login {
    /* Photo of the day by Mar Bustos - unsplash.com */
    background-image: url('https://images.unsplash.com/photo-1549558549-415fe4c37b60?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&dl=mar-bustos-1352933-unsplash.jpg');
    background-size: cover;
    background-position: center center;
}

body.login::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: black;
    opacity: 0.25;
    z-index: 0;
}

body.login #login {
    max-width: 100%;
    padding: 1em;
    width: 460px;
    position: relative;
    z-index: 1;
}

body.login h1 a {
    background-image: url('https://www.webmenedzser.hu/assets/dist/images/webmngr-logo.svg');
    width: 200px;
    display: block;
    height: 120px;
    padding: 0;
    margin: 0 auto;
    background-position: center center;
}

body.login #login_error,
body.login .message {
    background-color: #f5f5f5;
    border-left: 0;
    border-radius: 4px;
    padding: 1.25rem 2.5rem 1.25rem 1.5rem;
    position: relative;
    text-align: center
}

body.login #login_error:not(:last-child),
body.login .message:not(:last-child) {
    margin-bottom: 1.5rem
}

body.login .message {
    background-color: #53b5e6;
    color: #fff
}

body.login #login_error {
    background-color: #da2424;
    color: #fff;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.3);
}

body.login #login_error a {
    color: #fff;
    text-decoration: underline
}

body.login #login_error a:focus,
body.login #login_error a:hover,
body.login #login_error strong {
    color: #fff
}

body.login #loginform {
    border: 1px solid #eee;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5);
}

body.login #loginform input[type=password],
body.login #loginform input[type=text] {
    border-radius: 4px;
    padding: .5rem 1rem
}

body.login #loginform .submit {
    text-align: center
}

body.login #loginform .button-primary {
    -webkit-box-shadow: none;
    box-shadow: none;
    float: none;
    font-size: 1rem;
    height: auto;
    line-height: inherit;
    padding: .5em 1em;
    text-shadow: none
}

body.login #loginform .button-primary,
body.login #loginform .button-primary:focus,
body.login #loginform .button-primary:hover {
    background-image: linear-gradient(to top right, #29d, #471696);
    border-color: transparent;
    color: #fff;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
}

body.login #loginform .button-primary:hover {
    transform: scale(1.1);
}

body.login #backtoblog,
body.login #nav,
body.login .forgetmenot {
    display: none
}

Igen, jól látod, ez valóban sok CSS szabály, viszont ha most frissítesz, akkor láthatod, hogy sok helyen változott a bejelentkező képernyő megjelenése: többek között lett egy háttered, kicsit szélesebb lett a bejelentkező doboz, illetve bizonyos elemek el is tűntek. Fontos megjegyezni, hogy az eltüntetett linkek nem jelentik azt, hogy azokra ne lehetne rákattintani: elég csak a Dev Tools-ban kikapcsolni az elrejtést, vagy kikeresni a forráskódból a linket, tehát ez semmiképpen sem tekinthető biztonsági intézkedésnek.

Ha mélyebben érdekel a témakör, olvasd el a WordPress Codex vonatkozó aloldalát a részletekért. 

Ezzel az admin felület és a bejelentkezési képernyő testreszabásának végére értünk - a következő részben már egy másik területen haladunk tovább. Ha kérdésed van, nem működik, vagy jobban tudod: írd meg