Hogyen lehet testre szabni a WordPress bejelentkező képernyőjét?

Alapértelmezésben minden WordPress webhely ugyanúgy néz ki. Számos indokból előfordulhat a WordPress webhelyek testre szabása saját logóval vagy megjelenítési stílussal. Ebben a leírásban bemutatjuk a WordPress testre szabásának egy példáját. Bevezetést adunk a függvények és a CSS használatába a webhely megjelenésének egy, a frissítéstől biztonságban levő megváltoztatásához.

A WordPress bejelentkező képernyője

A WordPress egyik leggyakrabban használt képernyője a bejelentkező oldal. Ez a példaoldal csak a bejelentkező űrlapot és néhány linket (jelszó visszaszerzés és visszalépés a webes felületre) tartalmazza. Alapértelmezésben ezen az oldalon megjelenik a WordPress logó és a cím. A logó vagy az oldal megjelenésének megváltoztatásához bizonyos változtatásokat kell elvégezni a rendszerfájlokban, tehát ez nem ajánlott. Egyébként is, a WordPress frissítésekor a rendszerfájlok is frissülnek, ezért elveszhet a testre szabás is.

A WordPress működéséből adódik az, hogy nem kell a rendszerbe benyúlni. Használhatjuk a WordPress függvényeit a saját logó megjelenítéséhez és és az oldal megjelenésének módosításához anélkül, hogy az érintené a rendszer frissítését. Nézzük tehát a WordPress bejelentkezési képernyő testre szabásának helyes módját.

1. Testreszabás a rendszerbe nyúlás nélkül

Mindezt CSS segítségével végezzük el. A WordPress úgynevezett hurkokat (ezek függvények) nyújt számunkra, amely lehetővé teszi a speciális függvények meghívását, amelyek akkor futnak le, amikor a WordPress összeállítja a megjelenő oldalt. Két ilyen típusú hurok van: a Műveletek (Actions) és a Szűrők (Filters).

• A Műveleteket a WordPress rendszer indítja el az oldal összeállításának bizonyos pontjain, ehhez adhatunk hozzá saját műveleteket.
• A Szűrők hasonlóak a Műveletekhez abban, hogy az oldal betöltődés bizonyos pontjain lépnek életbe. Arra szolgálnak, hogy elkapjunk, kezeljünk és visszaadjunk adatokat még az adatbázis mentett adatok szerinti oldal összeállítása előtt.

A bejelentkező képernyő testreszabásához 3 hurokra van szükség:

1. “login_head” : a bejelentkező képernyő fejrészébe CSS elemek beszúrása.
2. “login_headerurl” : a logó webcímének megváltoztatása.
3. “login_headertitle” : a logólink címének megváltoztatása.

Az alábbi példa bemutatja az egyedi CSS nyomtatására szolgáló új függvény létrehozását és meghívását a login_head hurkon belül. Ez betölti a CSS-t a bejelentkező oldal fejrészébe. A cikk további részében ezt részletesen bemutatjuk.

Ahogy azt az összes kód esetén ebben a cikkben, adjuk hozzá a sablonunk functions.php fájljában.

[sourcecode language=”php”]if ( !function_exists( ‘our_custom_login_page_style’ ) ) {
function our_custom_login_page_style() {
//echo ‘CSS CODE…’;
}
}
add_action(‘login_head’, ‘our_custom_login_page_style’);[/sourcecode]

2. A bejelentkező képernyő felépítése

A továbblépés előtt gondoljuk át a bejelentkező képernyő HTML felépítését. Azt szeretnénk, ha a testre szabást csak a CSS segítségével végezük el, fontos az oldalon használt azonosítók és az osztályok ismerete.

A bejelentkezési képernyő osztályai a BODY elemben: login, login-action-login és wp-core-u

Az osztályok célba vételével beállíthatjuk a teljes oldal háttérszínét vagy megváltoztathatjuk a színt, stb. Az oldalstruktúra és a HTML elemek elhelyezkedésének megismerése fontos a saját CSS bejegyzések elkészítése előtt..

A struktúra megértéséhez tekintsük át az alábbi képet.

3. Az alapértelmezett WordPress logó megváltoztatása

A bejelentkező képernyő logójának megváltoztatásához hozzunk létre egy új “new_custom_login_logo” nevű függvényt. Ez a függvény egyszerűen kiírja a CSS kódot. Az alábbi kódot a sablon functions.php fájlba betéve a CSS kód a bejelentkező oldal fejrészébe kerül. A png típusú logót tegyük be a sablon könyvtárába és nevezzük át “logo_admin_login.png” névre. Az áttetsző háttér miatt ajánlott a png fájl használata.

[sourcecode language=”php”]function new_custom_login_logo() {
echo ‘<style type="text/css">
h1 a { background-image: url(‘/.get_template_directory_uri().’/logo_admin_login.png) !important;
height:130px !important;
background-size: auto auto !important; }
</style>’;
}[/sourcecode]

A fenti függvény elkészítése után a függvényt be kell “hurkolni” vagyis regisztrálni a WordPress-be. Ehhez meghívjuk az “add_action” függvényt, ahol a “login_head” a hurok neve. Ez megmondja a WordPress-nek az eseményt. amellyel a függvény társítva lett.

[sourcecode language=”php”]add_action(‘login_head’, ‘new_custom_login_logo’);[/sourcecode]

MEGJEGYZÉS: A “get_template_directory_uri()” függvény visszaadja a sablon könyvtárútvonalát. Ha mindezt egy gyermeksablonnál használjuk, akkor le kell cserélni a “get_stylesheet_directory_uri()” függvénnyel.

4. A logó link és cím megváltoztatása

Ha most a bejelentkező oldalra navigálunk, az új logót kell látnunk. Habár amikor az egeret rávisszük, még mindig a “Powered by WordPress” vagy annak megfelelő magyar szöveg jelenik meg és a kattintás a www.wordpress.org oldalra visz bennünket. Ennek a viselkedésnek a megváltoztatásához meghívunk két 2 specifikus WordPress szűrőt: “login_headurl” és “login_headtitle”. Ahogy az elnevezés is jelzi, ezek felelősek a bejelentkező oldal logójához a webcím és a címfelirat hozzáadásáért. Adjuk az alábbi kódot a functions.php fájlba és frissítsük a bejelentkező oldalt a böngészőben. Állítsuk be a linket a webhelyünk webcímére:

[sourcecode language=”php”]function new_wp_login_url() {
return home_url();
}
add_filter(‘login_headerurl’, ‘new_wp_login_url’);[/sourcecode]

A link címének megváltoztatása az alapértelmezett blognévvel a Beállítások oldalon tehető meg.:

[sourcecode language=”php”]function new_wp_login_title() {
return get_option(‘blogname’);
}
add_filter(‘login_headertitle’, ‘new_wp_login_title’);[/sourcecode]

5. Egyedi stílusú űrlap

Végül, adjunk néhány színváltoztatást az űrlaphoz:

[sourcecode language=”php”]function new_custom_login_page_style() {
echo ‘
<style type="text/css">
body.login
{ background-color: #FFF; }
#loginform { background-color: #194272; }
#loginform label {color: #FFF ;}
</style>’;
}
add_action(‘login_head’, ‘new_custom_login_page_style’);[/sourcecode]

Ezt az eredményt kaptuk:

A cikkben néhány egyszerű stílusbeállítást használtunk. Saját CSS-t alkalmazhatunk a különféle HTML elemeken és így a testre szabást folytathatjuk tetszés szerint a sablon és a webhely igénye szerint.

Forrás – Varanka Zoltán