Ako pridať vlastný štýl, pre administráciu WordPress?

Ak vytvárate stránky vo WordPress, niekedy sa dostanete do situácie, že potrebujete vytvoriť, upraviť alebo zvýrazniť niektoré časti administrácie. Na to môžeme použiť CSS, avšak naše súbory CSS z témy sa nenačítajú v administrátorskom rozhraní. V tomto článku vám ukážem dva spôsoby, ako pridať vlastné štýly tak, aby sa načítavali iba v administrátorskom rozhraní.

Prvým spôsobom, ako pridať štýly pre admin rozhranie, je priame vloženie štýlu do hlavičky. Tento spôsob môže byť vhodný pre jednoduché zmeny štýlu, ktoré nevyžadujú veľa kódu. Ak chcete použiť tento spôsob, postupujte nasledovne:

1. Pridajte vlastnú funkciu do functions.php aktívnej témy. Môžete to urobiť pomocou editora v administrátorskom rozhraní WordPress alebo pomocou FTP klienta.
2. Vložte nasledujúci kód do súboru functions.php

/**
 * Vloženie štýlu do hlavičky v administrácii WordPress
 */

function viking_admin_style() {
  echo '<style>
    /* Vaše štýly pridajte sem */
  </style>';
}
add_action('admin_head', 'viking_admin_style');

Druhý spôsob, ako pridať štýly pre admin rozhranie, je vloženie CSS súboru s vašim štýlom pre administráciu. Tento spôsob je vhodný pre zložitejšie zmeny štýlu, ktoré vyžadujú viac kódu. Ak chcete použiť tento spôsob, postupujte nasledovne:

1. Vytvorte nový súbor s názvom viking-admin-style.css a uložte ho do priečinku vašej témy.
2. Vložte nasledujúci kód do súboru functions.php

/**
 * Pridanie vlastného css súboru, pre administráciu
 * Tento spôsob použite, iba ak ste v hlavnej tému
 */
function viking_admin_style() {
  wp_enqueue_style( 'viking-admin-style', get_template_directory_uri() . '/viking-admin-style.css', false, '1.0.0' );
}
add_action( 'admin_enqueue_scripts', 'viking_admin_style' );

/**
 * Pridanie vlastného css súboru pre administráciu
 * Tento spôsob použite, ak používate child tému
 */
function viking_admin_style() {
    wp_enqueue_style( 'viking-admin-style', get_stylesheet_directory_uri() . '/custom-admin-style.css', false, '1.0.0' );
}
add_action( 'admin_enqueue_scripts', 'viking_admin_style' );

V príklade, môžte vidieť, ako postupovať, ak ste v hlavnej téme, ale aj ako pridať súbor so štýlmi v child téme. V oboch prípadeoch, sme použili hook admin_enqueue_scripts pomocou add_action.
Ešte by som upriamil pozornosť na funkcie: get_template_directory_uri() a get_stylesheet_directory_uri(). Jedna funkcia vráti cestu do priečinku s hlavnou témou a tá druhá, vracia cestu, do priečinku aktívnej témy – tam kde je uložený súbor: style.css.

Priame vloženie CSS do hlavičky je rýchly a jednoduchý spôsob na pridanie štýlov. Je vhodný pre jednoduché zmeny štýlu, ktoré nevyžadujú veľa štýlovania – pár riadkov. Na druhej strane, takýto spôsob je problematický z dlhodobého pohľadu a udržateľnosti zmenených štýlov.

Vloženie CSS súboru pre administráciu je zložitejší spôsob. Tento spôsob má však výhody v podobe jednoduchej zmeny a úpravy. Taktiež orientovanie sa v správne písanom štýle v súbore je tiež omnoho jednoduchšie.