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

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

| Olvasási idő: 2 perc

Ha éreztél valaha indíttatást arra, hogy bizonyos dolgokat megváltoztass a WordPress bejelentkező felületén, akkor ez és a következő bejegyzés biztosan érdekelni fog: hogyan alakítsuk át a WordPress login képernyőjét, pluginek használata nélkül? 

Folytatva az előző résszel megkezdett témakört, és részben az ottaniakra építve, ebben a bejegyzésben egy kicsit átalakítjuk a WordPress bejelentkezési felületét.

Több snippetet is használunk ma, de nem külön-külön, hanem egy fájlban fogjuk őket tárolni. Ha valamelyiket nem szeretnéd használni, csak szimplán ne illeszd be azt a kódrészletet.

Hozzuk létre az mu-plugins mappában a fájlt, amiben a login oldalhoz kapcsolódó kódot fogjuk tárolni, mondjuk customize-wp-login.php néven, az alábbi tartalommal:

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

Aki már egy kicsit is foglalkozott PHP-vel, rögtön látja, hogy ez a kód "nem csinál semmit", hiszen az egész csak egy komment szekció. A mostani bejegyzés - ahogy fentebb is írtam - rendhagyó, mert nem egyben kapjátok meg a kódot, hanem összeválogathatjátok a saját ízlésetek szerint, a fenti snippet után sorban beillesztve. 

Nézzük tehát sorban!

1) "Rezgés" elrontott jelszó esetén

"Kikapcsolható" a login form rezgése az alábbi kódrészlettel:

php
function disable_shake_js_login_head() {
    remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'disable_shake_js_login_head');

2) A WordPress logó hivatkozásának lecserélése

Azt gondolnánk, hogy a bejelentkező felület WordPress logójára kattintva a weboldalunk főoldalára kerülünk, de nem: a wordpress.com-ra navigál a böngészőnk ebben az esetben. Ezt kiküszöbölhetjük az alábbi kódrészlettel, így a mi főoldalunkra ugrik majd a felhasználó a logóra kattintva:

php
function override_login_logo_url() {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'override_login_logo_url' );

3) A WordPress logó hivatkozásszövegének cseréje

A bejelentkező oldalon a WP logó fölé mozgatva az egeret megjelenik "A honlap lelke a WordPress" szöveg. Ez aranyos, de egy professzionális keretek között nyújtott oldal esetében inkább megmosolyogtató, így érdemes lehet ezt valami semlegesebbre/az ügyfélhez jobban passzolóra (például a weboldal leírására) cserélni:

php
function override_login_logo_url_title() {
    return get_bloginfo( 'description' );
}
add_filter( 'login_headertitle', 'override_login_logo_url_title' );

4) WP logó cseréje

A mai "kódcsokor" utolsó eleme pedig a WordPress logó cseréje tetszőleges képre. Ehhez egy nem túl szép (keverednek benne a PHP, HTML és CSS elemek), de kiszámíthatóan működő kódrészletet fogunk használni. Nyilvánvaló: a képre mutató hivatkozást cseréld le annak a képnek az URL-jére, amit a bejelentkező képernyőn látni szeretnél! 

php
function override_login_logo_image() {
    echo '<style>.login h1 a {background-image: url("https://www.webmenedzser.hu/assets/dist/images/webmngr-logo-gradient.svg")}</style>';
};
add_action('login_head', 'override_login_logo_image');

Ha a most érintett összes változtatást szeretnéd használni, az alábbi snippettel ezt egy mozdulattal megteheted:

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

function disable_shake_js_login_head() {
    remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'disable_shake_js_login_head');

function override_login_logo_url() {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'override_login_logo_url' );

function override_login_logo_url_title() {
    return get_bloginfo( 'description' );
}
add_filter( 'login_headertitle', 'override_login_logo_url_title' );

function override_login_logo_image() {
    echo '<style>.login h1 a {background-image: url("https://www.webmenedzser.hu/assets/dist/images/webmngr-logo-gradient.svg")}</style>';
};
add_action('login_head', 'override_login_logo_image');

Sikerült átszabnod a WordPress bejelentkező felületét, plugint nélkül - gratulálok! :)

Jövő héten folytatása következik, addig is: ha kérdésed merült fel, esetleg témajavaslatod lenne, írd meg!