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
2023-04-01

Ile kosztuje stworzenie strony internetowej?

Myślisz o stworzeniu nowej strony internetowej? Chcesz dowiedzieć się ile kosztuje profesjonalna strona www?

...
Bartosz Żygadło
Ile kosztuje sklep internetowy? E-commerce
2022-11-10

Ile kosztuje sklep internetowy?

Cena sklepu internetowego jest ściśle powiązane z wykorzystywaną technologią, potrzebnymi funkcjonalnościami, czy złożonością samego projektu.

...
Bartosz Żygadło
Ile kosztuje pozycjonowanie? E-commerce
2022-03-01

Ile kosztuje pozycjonowanie?

Chcesz zdobyć nowych Klientów oraz wykazać się dużą skutecznością w zakresie ich pozyskiwania? Może Ci to zagwarantować skuteczne […]

...
Bartosz Żygadło
Jak założyć sklep internetowy? Aktualności
2022-01-13

Jak założyć sklep internetowy?

  Jak założyć sklep internetowy Sklep internetowy zawsze wiąże się z wyborem oprogramowania. Technologia dla rozwiązań e-commerce bardzo […]

...
Jakub Wiśniewski
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