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:
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.
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!
