Własne style css w panelu administracyjnym WordPress

Projektując strony internetowe lub sklepy z wykorzystaniem WordPress’a / WooCommerce, w nie jednym projekcie przychodzi potrzeba dodania własnych stylów css do panelu administracyjnego. Dzięki własnym stylom możemy poprawić wyświetlanie danych elementów, zmienić je czy nawet możemy je ukryć.

Ukrywanie elementów za pomocą stylów CSS może być bardzo przydatne jeżeli nie chcemy wyświetlać zbędnych lub bardzo rzadko używanych elementów w panelu administracyjnym.

Przedstawiam przykład kodu z którego często korzystam:

function wlasne_style_css() { ?>
    <style type="text/css"> 
	<!-- Podajemy nazwy selektorów ID wybranych zakładek lub elementów do ukrycia -->
	#menu-posts-portfolio,
	#menu-posts-monolit_service,
	#menu-posts-monolit_timeline,
	#menu-posts-cth_testimonial{
		display:none !important;
	} 
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wlasne_style_css' );

Efektem powyższego kodu jest ukrycie wybranych zakładek w panelu administracyjnym, które służą do edycji zagranicznego szablonu. Dzięki, temu rozwiązaniu możemy w szybki i łatwy sposób uporządkować zaplecze WordPress’a. Jest to oczywiście rozwiązanie czysto wizualne i zakładki są ciągle dostępne po wyłączeniu kodu CSS, ale często przy mniejszych projektach może być wystarczające.

Kolejnym przykładem gdzie przydatne są dodatkowe style css jest personalizacja panelu administracyjnego WordPress. Poniżej przedstawiam krótki kod który należy umieścić w pliku functions.php w Twoim szablonie, aby zmienić domyśle logo WordPressa na wybrany obrazek.

function wlasne_style_css() { ?>
    <style type="text/css"> 
	.login h1 a{
            <!-- Tutaj możemy podać adres dowolnego zdjęcia -->
            background-image: url(https://twojastrona.pl/logo.png) !important;
            width: 152px !important; <!-- Ustawiamy szerokość zdjęcia -->
            height: 166px !important; <!-- Ustawiamy wysokość zdjęcia -->
            background-size: 100% auto !important;
        } 
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wlasne_style_css' );