Jak dostosować kolor tła edytora bloków WordPress?

Czy chcesz dostosować kolor tła edytora bloków WordPress dla administratorów?

Czasami, podczas pracy nad własnym projektem klienta, możesz chcieć zmienić kolor tła edytora Gutenberg w WordPress, aby dopasować go do kolorów marki.

W tym artykule pokażemy, jak łatwo dostosować kolor tła edytora bloków WordPress dla obszaru administracyjnego.

Dlaczego warto zmienić kolor tła edytora bloków w WordPress?

Możesz chcieć zmienić kolor tła edytora bloków WordPress z wielu powodów.

Na przykład większość nowoczesnych motywów WordPress używa tego samego koloru tła dla edytora bloków, co witryna internetowa na żywo, w tym Astra, OceanWP, GeneratePress i inne.

Jeśli jednak twój motyw WordPress nie używa tych samych kolorów, to wygląd twojego wpisu w edytorze będzie wyglądał zupełnie inaczej niż to, co użytkownicy zobaczą na żywej witrynie internetowej.

Innym powodem zmiany koloru tła mogą być osobiste preferencje.

Na przykład, domyślnie edytor bloków używa białego tła. Dla niektórych użytkowników patrzenie na biały ekran przez długie godziny może być nieco stresujące. Zmęczenie oczu może być prawdziwym problemem dla wielu osób, a domyślne białe tło nie jest łatwe dla oczu.

Biorąc to pod uwagę, zobaczmy, jak łatwo zmienić kolor tła edytora WordPress.

Film instruktażowy

Jeśli wolisz pisemne instrukcje, czytaj dalej.

Jak zmienić kolor tła edytora WordPress

Możesz łatwo zmienić kolor tła edytora WordPress, dodając własny kod do pliku functions.php twojego motywu.

Jednak nawet najmniejszy błąd w kodzie może zepsuć twoją witrynę internetową i uczynić ją niedostępną.

Dlatego zalecamy korzystanie z wtyczki WPCode . Jest to najlepsza wtyczka do fragmentów kodu WordPress na rynku i jest to najłatwiejszy i najbezpieczniejszy sposób na dodanie własnego kodu do twojej witryny internetowej WordPress.

Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać więcej instrukcji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdź na stronę Code Snippets ” +Add Snippet z panelu bocznego administratora WordPress.

Następnie kliknij przycisk „Użyj fragmentu kodu” pod opcją „Dodaj swój konfigurator (nowy fragment kodu)”.

Spowoduje to przejście do strony „Utwórz własny fragment kodu”, gdzie możesz zacząć od wpisania rodzaju nazwy dla twojego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować kod.

Następnie wybierz „Fragment kodu PHP” jako „Rodzaj kodu” z menu rozwijanego w prawym rogu ekranu.

Następnie skopiuj i wklej poniższy kod w polu „Podgląd kodu”:

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Gdy już to zrobisz, musisz poszukać następującego kodu we fragmencie kodu PHP, który właśnie wkleiłeś:

background-color: #bee0ec;

Następnie musisz dodać kod szesnastkowy twojego preferowanego koloru obok opcji koloru tła. Jeśli nie chcesz używać kodu szesnastkowego, możesz zamiast tego użyć podstawowych nazw kolorów, takich jak „biały” lub „niebieski”.

Następnie przewiń w dół do sekcji „Wstawianie” i wybierz opcję „Automatyczne wstawianie”.

Następnie z rozwijanego menu należy wybrać „Położenie” fragmentu kodu jako „Tylko dla administratora”.

Następnie wróć na górę strony i przełącz przełącznik „Nieaktywne” na „Aktywne”.

Na koniec nie zapomnij kliknąć przycisku „Zapisz fragment kodu”, aby zapisać twoje zmiany.

Teraz przejdź na edytor bloków z panelu bocznego administratora.

Tak wyglądał edytor bloków na naszej witrynie po dodaniu fragmentu kodu PHP.

Bonus: Zmiana koloru tła w WordPress

Jeśli chcesz zmienić kolor tła na front-endzie twojej witryny, możesz to zrobić, przechodząc na ekran Wygląd ” Dostosuj z pulpitu nawigacyjnego WordPress.

Spowoduje to uruchomienie konfiguratora motywu, w którym należy kliknąć kartę „Kolory i tryb ciemny” w lewej kolumnie. Pamiętaj, że twój konfigurator może wyglądać inaczej w zależności od używanego motywu.

Spowoduje to otwarcie nowego panelu na pasku bocznym, w którym należy kliknąć opcję „Wybierz kolor”.

Na twoim ekranie otworzy się teraz próbnik kolorów, w którym możesz wybrać preferowany kolor tła. Po zakończeniu nie zapomnij kliknąć przycisku „Opublikuj” u góry, aby zapisać twoje ustawienia.

Możesz także zmienić kolor tekstu, kolor podświetlenia, kolor przycisków i więcej z poziomu konfiguratora motywu. Jeśli jednak korzystasz z motywu blokowego, będziesz musiał wprowadzić te zmiany w pełnym edytorze witryny.

Więcej szczegółów na ten temat można znaleźć w naszym przewodniku dla początkujących na temat dostosowywania kolorów na twojej witrynie internetowej WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo zmienić kolor tła edytora WordPress. Możesz również zapoznać się z naszym przewodnikiem po najbardziej przydatnych i oszczędzających czas skrótach WordPress lub zapoznać się z naszymi najlepszymi wtyczkami do tworzenia stron WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.