A WordPress admin felületének testreszabása egyedi CSS-el előnézeti képe

A WordPress admin felületének testreszabása egyedi CSS-el

| Olvasási idő: 1 perc

Szeretnél belenyúlni a WordPress admin felületének dizájnjába valamilyen okból, de nem tudod, hogyan állhatnál neki? Ebben az epizódban megmutatom, hogyan teheted ezt meg, anélkül, hogy core fájlokat kellene megváltoztatnod. 

Mikor jöhet kapóra ez a snippet? Ha például szeretnéd egy kicsit átalakítani a brand színeinek megfelelően az admin felületet, vagy ha egy kicsit szellősebb elrendezést szeretnél. Először hozzunk létre egy fájlt az mu-plugins mappában, mondjuk load-custom-css-for-wp-admin.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
*/

function load_custom_css_for_wp_admin() {
    wp_register_style( 'custom_css_wp_admin', WP_CONTENT_URL . '/mu-plugins/admin-styles.css', false, '1.0.0'  );
    wp_enqueue_style('custom_css_wp_admin' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_css_for_wp_admin');

A fenti néhány sor nem tesz mást, mint behivatkozik egy CSS fájlt, ami (alapesetben) a wp-contents/mu-plugins mappában található, admin-styles.css néven.  Ha most frissítesz az admin felületen, akkor látni fogod a konzolban, hogy egy 404-es hibát kapsz: jó úton jársz, már csak a hivatkozott fájlt kell létrehoznod és feltöltened tartalommal. Tegyük is meg ezt: hozzuk létre az mu-plugins mappában az admin-styles.css fájlt - mondjuk a következő tartalommal: 

css
/* Oldalsáv és admin menü színe */
#adminmenu,
#adminmenu .wp-submenu,
#adminmenuback,
#adminmenuwrap,
#wpadminbar {
    background-color: #252525;
}

#adminmenu div.wp-menu-name {
    font-weight: bold;
}

A fenti CSS snippet az oldalsáv és a felső, adminisztrációs menü hátterét egy kicsit sötétebbre, illetve az oldalsáv főmenüpontjait félkövérre állítja. Innentől már csak rajtad áll, hogy mennyire "vadulsz" a testreszabással. :) 

A fentieken túl természetesen még nagyon sok mindent ki lehetne ebből hozni, de a cél itt nem egy teljes admin sablon létrehozása volt, hanem a lehetőség felvillantása. Kísérletezz, és ha ezzel valami menőt csináltál, küldd el nekem, és kiteszem ide, példának! 

Kérdés, kérés, óhaj-sóhaj? Küldj üzenetet! :)