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

Własne style css w panelu administracyjnym WordPress

5/5 - (2 opinie)

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
Wycena stron interenteowych
Sprawdź również
Ile kosztuje stworzenie strony internetowej? Porady
2021-10-25

Ile kosztuje stworzenie strony internetowej?

Strona internetowa cena Myślisz o stworzeniu nowej strony internetowej? Chcesz dowiedzieć się ile kosztuje profesjonalna strona www? Szukasz […]

...
/
Bartosz Żygadło
Certyfikat SSL – co to jest i do czego służy? Aktualności
2021-08-26

Certyfikat SSL – co to jest i do czego służy?

Certyfikat SSL jest często nierozumiany przez większość osób, które chcą założyć swoją stronę internetową lub sklep. W tym […]

...
/
Jakub Wiśniewski
Marketplace – co to jest i na czym polega? E-commerce
2021-08-20

Marketplace – co to jest i na czym polega?

Marketplace jest dzisiaj niezwykle szeroką gałęzią biznesu. Sklepy tego typu podbijają światowy rynek i zyskują coraz więcej klientów, […]

...
/
Jakub Wiśniewski
Co to jest WooCommerce? E-commerce
2021-08-10

Co to jest WooCommerce?

Co to jest WooCommerce – to pytanie zadaje sobie wiele osób, które wyszukują tematy związane z stworzeniem sklepu […]

...
/
Jakub Wiśniewski
Jak założyć bloga? (WordPress) Porady
2021-07-26

Jak założyć bloga? (WordPress)

Blog jest to forma prowadzenia strony internetowej, która pozwala na tworzenie wpisów przez twórcę strony. Coraz więcej osób […]

...
/
Jakub Wiśniewski
Co to jest WordPress i do czego służy? Porady
2021-07-15

Co to jest WordPress i do czego służy?

Co to jest WordPress i do czego służy – tego dowiesz się w tym wpisie. WordPress od lat […]

...
/
Jakub Wiśniewski