Investnet.pl > Blog > WordPress > Własne style css w panelu administracyjnym WordPress

Własne style css w panelu administracyjnym WordPress

2020-09-03

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.

Ukrywanie zakładek w panelu administracyjnym WordPress.

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' );
Efekt powyższego przykładu na zmianę domyślnego loga WordPress podczas logowania się do panelu administracyjnego.
Autor
Autor Bartosz Żygadło
Bartosz Żygadło
Project Manager / CEO
Sprawdź również