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

Był czas, kiedy zmiana kolorów tła w WordPressie oznaczała grzebanie w kodzie i nadzieję, że nic się nie zepsuje. Dobrze pamiętamy te dni. WordPress przeszedł długą drogę od tamtego czasu, a edytor bloków sprawił, że personalizacja jest łatwiejsza niż kiedykolwiek.

Mimo to wielu właścicieli stron internetowych ma trudności z uzyskaniem odpowiedniego koloru tła.

Po prowadzeniu wielu stron WordPress i pomocy tysiącom użytkowników nauczyliśmy się najprostszych i najbardziej niezawodnych sposobów na radzenie sobie z tymi zmianami.

W tym przewodniku pokażemy Ci dokładnie, jak zmienić kolory tła w edytorze bloków WordPress, używając metod, które działają dla każdego motywu i poziomu umiejętności.

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

Możesz chcieć zmienić kolor tła WordPressowego edytora bloków 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 dla aktywnej strony internetowej, w tym OceanWP, GeneratePress i inne.

Jednak jeśli Twój motyw WordPress nie używa tych samych kolorów, wygląd Twojego posta w edytorze będzie wyglądał zupełnie inaczej niż to, co zobaczą Twoi użytkownicy na żywej stronie internetowej.

Inną przyczyną może być po prostu Twój osobisty komfort.

Jeśli spędzasz wiele godzin na pisaniu, patrzenie na jasny biały ekran może być męczące dla oczu. Zmiana tła edytora na łagodniejszy kolor może sprawić, że czas pracy będzie znacznie przyjemniejszy.

Mając to na uwadze, zobaczmy, jak łatwo możesz zmienić kolor tła edytora WordPress.

Jak zmienić kolor tła edytora WordPress

Możesz zmienić kolor tła edytora WordPress, dodając niestandardowy kod do pliku functions.php swojego motywu.

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

Dlatego zalecamy użycie wtyczki WPCode.

Po dokładnych testach doszliśmy do wniosku, że jest to najłatwiejszy i najbezpieczniejszy sposób na dodanie niestandardowego kodu do Twojej witryny WordPress. Aby dowiedzieć się więcej, zapoznaj się z naszą recenzją WPCode.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Aby uzyskać więcej instrukcji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Kody » +Dodaj kod z paska bocznego administracji WordPress.

Stąd kliknij przycisk „Użyj fragmentu” w opcji „Dodaj własny kod (nowy fragment)”.

To przeniesie Cię na stronę „Utwórz niestandardowy fragment kodu”, gdzie możesz zacząć od wpisania nazwy dla swojego fragmentu kodu. Jest to tylko dla Ciebie i może być czymkolwiek, co pomoże Ci zidentyfikować kod.

Następnie wybierz „Fragment PHP” z menu, które pojawi się po kliknięciu menu „Typ kodu” w prawym górnym rogu ekranu

Po tym skopiuj i wklej poniższy kod do pola „Podgląd kodu”:

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

Ten fragment kodu wykonuje dwie proste czynności. Część add_action mówi WordPressowi, aby dodał nasze niestandardowe style do stopki obszaru administracyjnego.

Wewnątrz tego, kod CSS celuje w główny kontener edytora bloków (.editor-styles-wrapper) i ustawia jego background-color na nowy kod szesnastkowy.

Po wykonaniu tej czynności, poszukaj następującego kodu w fragmencie PHP, który właśnie wkleiłeś:

background-color: #bee0ec;

Następnie musisz dodać kod szesnastkowy 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 musisz wybrać opcję „Lokalizacja” fragmentu kodu jako „Tylko administrator” z menu rozwijanego.

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

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

Teraz odwiedź edytor bloków z paska bocznego administratora.

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

Samouczek wideo

Jeśli wolisz obejrzeć film, sprawdź nasz samouczek na YouTube, jak dostosować kolor tła edytora bloków WordPress:

Metoda bonusowa: Zmień kolor tła na swojej aktywnej stronie internetowej

Jeśli chcesz zmienić kolor tła, który widzą Twoi odwiedzający na swojej aktywnej stronie internetowej, metoda będzie zależeć od Twojego motywu WordPress.

WordPress ma dwa rodzaje motywów: motywy klasyczne i nowsze motywy blokowe. Pokażemy Ci oba sposoby.

Metoda 1: Korzystanie z Personalizatora motywu (dla motywów klasycznych)

Większość klasycznych motywów używa Personalizatora motywu do zmian kolorów. Możesz tam przejść, wybierając Wygląd » Dostosuj z panelu administracyjnego WordPress.

Po załadowaniu Personalizatora poszukaj sekcji zatytułowanej „Kolory”, „Kolory i tryb ciemny” lub coś podobnego. Dokładna nazwa i lokalizacja tych ustawień mogą się różnić w zależności od motywu.

Wewnątrz powinieneś znaleźć opcję „Kolor tła”, która pozwoli Ci użyć selektora kolorów do wprowadzenia zmian. Gdy będziesz zadowolony z wyniku, po prostu kliknij przycisk „Opublikuj”, aby zapisać.

Metoda 2: Korzystanie z Edytora całej witryny (dla motywów blokowych)

Jeśli używasz nowoczesnego motywu blokowego, wprowadzisz te zmiany w Edytorze całej witryny. Aby uzyskać do niego dostęp, przejdź do Wygląd » Edytor w bocznym pasku administratora.

W edytorze kliknij ikonę „Style” po prawej stronie (wygląda jak połowicznie wypełnione koło). Spowoduje to otwarcie panelu stylów globalnych.

Tutaj kliknij „Kolory”, a następnie wybierz opcję „Tło”.

Możesz teraz wybrać nowy kolor tła dla całej swojej witryny. Edytor pokaże Ci podgląd na żywo, a po zakończeniu możesz kliknąć „Zapisz”.

Bardziej szczegółowy przewodnik po obu metodach znajdziesz w naszym poradniku dla początkujących na temat jak dostosować kolory na Twojej stronie WordPress.

Często zadawane pytania dotyczące zmiany tła edytora

Oto kilka pytań, które nasi czytelnicy często zadają na temat zmiany koloru tła edytora WordPress:

Czy ten fragment kodu spowolni moją witrynę?

Nie, ten konkretny kod nie spowolni Twojej witryny. Ponieważ ustawiliśmy fragment WPCode tak, aby ładował się tylko w obszarze „Tylko administrator”, nie dodaje żadnego dodatkowego kodu do front-endu Twojej witryny. Ładuje się tylko dla zalogowanych użytkowników, którzy aktywnie korzystają z edytora bloków.

Czy mogę użyć gradientu lub obrazu jako tła edytora zamiast jednolitego koloru?

Tak, możesz. Wymaga to niewielkiej zmiany w kodzie CSS. Zamiast background-color użyłbyś właściwości background.

Na przykład, aby dodać prosty gradient liniowy, Twój kod CSS wewnątrz fragmentu może wyglądać tak:

.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }

Możesz użyć generatorów gradientów CSS online, aby tworzyć bardziej złożone style.

Kod nie zadziałał. Co powinienem sprawdzić najpierw?

Jeśli kolor się nie zmienia, najpierw dokładnie sprawdź ustawienia swojego fragmentu WPCode. Upewnij się, że przełącznik na górze jest ustawiony na „Aktywny”, a Lokalizacja wstawienia jest ustawiona na „Tylko administrator”.

Sprawdź również sam kod pod kątem literówek, zwłaszcza w selektorze CSS (.editor-styles-wrapper) i kodzie koloru szesnastkowego.

Jak znaleźć kod szesnastkowy dla konkretnego koloru, którego chcę użyć?

Najprostszym sposobem jest użycie narzędzia do wybierania kolorów online. Witryny takie jak Google’s Color Picker, HTML Color Codes lub Adobe Color pozwalają na wizualny wybór dowolnego koloru. Natychmiast podadzą Ci poprawny kod szesnastkowy (np. #1a457c) do skopiowania i wklejenia do fragmentu kodu.

Jeśli zaktualizuję mój motyw, czy stracę zmianę koloru tła edytora bloków?

Nie, nie stracisz tej zmiany. To największa zaleta korzystania z wtyczki takiej jak WPCode zamiast bezpośredniego edytowania pliku functions.php Twojego motywu. Fragment kodu jest zapisywany niezależnie od Twojego motywu, więc będzie działał nawet po aktualizacjach motywu.

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 ostatecznym przewodnikiem na temat jak wyłączyć edytor pełnoekranowy w WordPress, lub przyjrzeć się naszym najlepszym wyborom dla najlepszych wtyczek bloków Gutenberga dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.