Strona na WordPress działa, ale wygląda jak setki innych? Ten sam standardowy motyw, te same czcionki, żadnego śladu indywidualności. Platforma daje mnóstwo możliwości dostosowania, pytanie tylko, od czego zacząć i nie zepsuć strony po drodze.

Zmiana wyglądu strony WordPress nie musi oznaczać całkowitego przerabiania jej od zera. Czasem wystarczą trzy, cztery punktowe poprawki, by strona przestała wyglądać szablonowo i zaczęła zapadać w pamięć. Poniżej analiza krok po kroku: od schematu kolorystycznego po favikonę, z konkretnymi narzędziami i bez linii kodu tam, gdzie można się bez niego obyć.

💡 Szybki przegląd:

• Proszę dobrać schemat kolorystyczny z 3 kolorów za pomocą Adobe Color, Coolors lub ColorHexa
• Proszę skonfigurować czcionki przez Google Fonts, Use Any Font dla niestandardowych krojów
• Proszę zmienić format daty i czasu jedną linijką kodu lub przez Customizer

Dobór schematu kolorystycznego

Kolory tworzą połowę wrażenia. Odwiedzający jeszcze nie przeczytał nagłówka, a już czuje: strona jest „droga" czy „tania", techniczna czy kreatywna, wiarygodna czy podejrzana. Schemat kolorystyczny to wizualna kotwica marki.

Optymalne podejście to trzy podstawowe kolory: główny (tło/tekst), akcentujący (przyciski, linki, ważne elementy) i pomocniczy (obramowania, separatory, stany hover). Więcej niż trzy to ryzyko wizualnego szumu; mniej to nuda. Główna zasada: koloru akcentującego należy używać oszczędnie, tylko tam, gdzie trzeba przyciągnąć uwagę.

Od czego zacząć dobór:

Adobe Color (dawniej Kuler)

Narzędzie Adobe do tworzenia schematów kolorystycznych według zasad harmonii: monochromatyczny, komplementarny, triadyczny, analogiczny. Pod maską koło barw, gdzie ustala się odcień bazowy, a system automatycznie dobiera resztę. Można wyciągnąć paletę z przesłanego obrazu, wygodne, jeśli ma się punkt odniesienia. Dostępne bezpłatnie na color.adobe.com.

Coolors

Generator palet nastawiony na szybkość. Naciska się spację, otrzymuje się nową kombinację pięciu kolorów. Każdy można zablokować i losować pozostałe. Na wyjściu gotowe kody HEX. Jest wtyczka do Chrome/Firefox i aplikacja na iOS. Działa na coolors.co.

ColorHexa

ColorHexa to nie tylko próbnik koloru, ale encyklopedia barwy. Wprowadza się HEX, RGB lub nazwę, otrzymuje się stronę z odcieniami komplementarnymi, gradientami, triadami, składem procentowym i podglądem dla daltonistów (jak kolor widzą osoby z różnymi typami ślepoty barw). Mikser kolorów: po wpisaniu #ff0000+#0000ff+#ff00ff otrzymuje się wynikowy #aa00aa z pełnym rozkładem. colorhexa.com.

Gotowe palety HTML

Jeśli nie chce Pan/Pani dobierać od zera, proszę skorzystać z gotowych palet. htmlcolorcodes.com, 216 kolorów bezpiecznych dla sieci z kodami HEX, kompatybilnych z CSS, Photoshopem i dowolną grafiką. Serwis Paletton (dawniej Color Scheme Designer) udostępnia schematy z podglądem na makiecie strony.

CSS Gradient Generator

Gradienty wracają, teraz nie są to pasy z 2012 roku, lecz subtelne przejścia w tle sekcji i przycisków. ColorZilla Gradient Editor, edytor przypominający Photoshop: definiuje Pan/Pani punkty kontrolne z kolorami i przezroczystością, przesuwa midpoint, kopiuje gotowy CSS. Obsługuje gradienty linear, radial i repeating. Dostępna jest wtyczka do Chrome i Firefox, zakraplacz prosto z przeglądarki.

Wybór i konfiguracja fontów

Kolory przyciągają uwagę, tekst ją zatrzymuje. Font wpływa na czytelność i odbiór tonu: surowy szeryf tworzy wrażenie jakości redakcyjnej, czysty bezszeryfowy, technologiczności.

Problem z fontami internetowymi polega na tym, że odwiedzający zobaczy tylko te, które ma zainstalowane na swoim komputerze, chyba że zastosuje Pan/Pani fonty osadzone (web fonts). Dlatego do niestandardowego wyglądu stosuje się wyłącznie fonty zewnętrzne.

Podstawowa zasada: nie więcej niż dwa fonty na stronie. Jeden do nagłówków (duży, charakterystyczny), drugi do tekstu głównego (maksymalnie czytelny). Trzeci tylko wtedy, gdy potrzebny jest font o stałej szerokości do kodu.

Google Fonts, główne źródło

Bezpłatny katalog z ponad 1500 rodzin na fonts.google.com. Podłączenie za pomocą dwóch linijek. Klasyczny sposób, przez header.php szablonu:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Lub w style.css:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Po imporcie font jest dostępny w dowolnej regule CSS:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

RODO, niuans: Google Fonts ładowane bezpośrednio z serwerów Google przekazują adresy IP odwiedzających. Od 2022 roku sądy w UE uznają to za naruszenie. Rozwiązanie: wtyczka Local Google Fonts, która ładuje czcionki na Pana/Pani serwer i udostępnia je lokalnie. Alternatywa dla osób, które nie chcą zajmować się wtyczkami: artykuł o lokalnym ładowaniu Google Fonts na naszym blogu.

Niestandardowe czcionki przez wtyczkę

Jeśli potrzebna jest firmowa czcionka, której nie ma w Google Fonts: Use Any Font. Ładuje Pan/Pani plik ttf, otf lub woff, wtyczka konwertuje go do woff2 i dodaje w panelu administracyjnym. Darmowa wersja pozwala załadować jedną czcionkę; Pro znosi ograniczenia.

Ręczne podłączanie przez @font-face

Jeśli woli Pan/Pani kod zamiast wtyczek, proszę umieścić plik czcionki w folderze /wp-content/themes/ваша-тема/fonts/ i dodać w style.css:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Użycie:

1
#menu { font-family: 'Museo300', sans-serif; }

Formatowanie daty i czasu

Standardowy format daty nie zawsze pasuje do projektu. Na szczęście WordPress pozwala go zmienić bez wtyczek.

Sposób 1: przez Customizer (bez kodu)

Proszę przejść do Appearance → Customize → General Settings. Tam również zmienia się format czasu. Pasuje do większości klasycznych motywów.

Sposób 2: przez single.php (precyzyjna kontrola)

Proszę otworzyć Appearance → Theme Editor → single.php. Znaleźć funkcję the_time() lub the_date():

1
<?php the_time('F Y'); ?>

Symbole formatu:

• l, pełna nazwa dnia tygodnia (mała litera L)
• F, miesiąc słownie
• j, dzień miesiąca liczbą
• Y, rok czterema cyframi
• y, rok dwiema cyframi

Przykłady kombinacji:

('l, j F Y') → Sunday, 14 June 2026. ('j F, Y') → 14 June, 2026.

Nie dotykaj Pan pojedynczych cudzysłowów wewnątrz nawiasów, edytuj Pan wyłącznie znaki między nimi. Jeśli w motywie używana jest funkcja the_date() zamiast the_time(), format zmienia się prościej: Ustawienia → Ogólne → Format daty.

Wykorzystanie obrazów

Dodawanie obrazów w WordPressie za pomocą przycisku „Dodaj plik multimedialny" w edytorze wpisu. Kursor w odpowiednie miejsce → Dodaj plik multimedialny → wybrać obraz z biblioteki mediów lub przesłać nowy.

Po prawej stronie panel ustawień załącznika: tytuł, tekst alternatywny (ważny dla SEO i dostępności), rozmiar, wyrównanie, link. Dla szybkości witryny proszę przesyłać obrazy już skompresowane (TinyPNG lub ShortPixel przed przesłaniem). Więcej szczegółów w naszym przewodniku po bibliotece mediów WordPressa.

Dodawanie favikony

Favikona to maleńki kwadracik w karcie przeglądarki i zakładkach. Mały detal, który pracuje na rozpoznawalność: gdy użytkownik ma otwartych 20 kart, favikona jest jedyną rzeczą, która wizualnie wyróżnia Pana witrynę spośród innych.

Jak stworzyć favikonę

Najbardziej niezawodna usługa to RealFaviconGenerator. Przesyła Pan kwadratowy obraz (co najmniej 260×260), otrzymuje Pan pakiet ikon na wszystkie platformy: iOS, Android, kafelki Windows, przypiętą kartę Safari. Plus gotowy kod HTML do wstawienia.

Jeśli potrzebuje Pan prostego pliku.ico o rozmiarze 16×16, wystarczy dowolny edytor graficzny z zapisem do.ico (GIMP jest darmowy). Albo usługa online Favicon.io.

Jak zainstalować w WordPressie

Najprostszy sposób to wbudowana funkcja Site Icon. Od wersji WordPress 4.3 jest ona dostępna w Customizerze:

Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny. Przesyła Pan kwadratowy obraz, WordPress sam przytnie potrzebne rozmiary na wszystkie platformy. Bez wtyczek, bez FTP, bez header.php.

Sposób z wtyczką, All In One Favicon, daje więcej kontroli: osobne ikony dla panelu administracyjnego, frontendu, różne dla różnych urządzeń. Ale dla 95% witryn wbudowana Ikona witryny jest wystarczająca.

Metoda ręczna (dodać w header.php):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Plik favicon.ico proszę umieścić w katalogu głównym folderu motywu. Należy pamiętać o zduplikowaniu go w public_html, aby favicon otwierał się pod adresem вашсайт.com/favicon.ico.

⁉️🤔 Często zadawane pytania

Czy można zmienić wygląd strony bez utraty treści?

Tak, zmiana motywu WordPress nie wpływa na posty, strony ani pliki multimedialne. Są one przechowywane w bazie danych niezależnie od motywu. Jedyne, co może „rozjechać się", to układ i rozmieszczenie elementów, zwłaszcza jeśli stary motyw korzystał z niestandardowych typów wpisów lub shortkodów. Przed zmianą należy wykonać pełną kopię zapasową (hosting + baza danych). Do bezpiecznego testowania proszę używać staging site, wiele hostingów (SiteGround, Kinsta, WP Engine) udostępnia go jednym kliknięciem.

Ile krojów pisma jest optymalnych dla strony?

Dwa: jeden do nagłówków, jeden do tekstu głównego. Trzeci, o stałej szerokości, do kodu, jeśli występuje na stronie. Każdy dodatkowy krój wydłuża czas ładowania o 200-400 ms i generuje szum wizualny. Google Fonts pozwala wybrać tylko potrzebne odmiany (regular + bold = 2 pliki zamiast 9), a wtyczka Local Google Fonts dodatkowo buforuje je na serwerze.

Czy trzeba grzebać w kodzie, żeby coś dostosować?

Nie. WordPress Customizer (Wygląd → Dostosuj) pokrywa większość zadań: kolory, czcionki, logo, favicon, obrazy tła, CSS. Block themes (od WP 5.9) dają Site Editor, czyli jeszcze bardziej wizualny sposób bez kodu. Kod jest potrzebny, gdy wymagane jest precyzyjne dostrojenie: format daty w single.php, niestandardowy @font-face, specyficzny CSS dla konkretnej wtyczki.

Co zrobić, jeśli po zmianie motywu strona się zepsuła?

Po pierwsze: nie panikować, treść nigdzie nie zniknęła. Po drugie: jeśli panel administracyjny jest dostępny, proszę przywrócić stary motyw (Wygląd → Motywy → Aktywuj). Jeśli panel jest niedostępny, proszę wejść przez FTP do /wp-content/themes/, zmienić nazwę folderu nowego motywu (dodać _disabled), a WordPress automatycznie przełączy się na motyw domyślny. Po przywróceniu działania proszę włączyć WP_DEBUG w pliku wp-config.php, aby zobaczyć błędy.

Jak sprawdzić, czy favicon działa?

Proszę otworzyć вашсайт.com/favicon.ico, jeśli ikona się wyświetla, plik jest na swoim miejscu. W przeglądarce favicon nie pojawia się od razu: jest agresywnie buforowany. Aby to sprawdzić, proszę otworzyć stronę w trybie incognito lub wymusić odświeżenie pamięci podręcznej (Ctrl+Shift+R). RealFaviconGenerator udostępnia narzędzie do sprawdzania faviconu po adresie URL.

Redesign WordPress: co zrobić w pierwszej kolejności

Kolejność działań przy dostosowywaniu od zera: schemat kolorów → kroje pisma → logo i favicon → format daty → układ widgetów i menu. Właśnie w tej kolejności: kolory i typografia to fundament, na który nakłada się całą resztę.

Jeśli strona już działa i przynosi ruch, proszę nie robić redesignu na żywej domenie. Kopia staging + testowanie → przeniesienie. Zmiany zauważalne dla wyszukiwarek (zmiana struktury HTML, nagłówków, adresów URL) proszę wprowadzać ze zrozumieniem: gwałtowny redesign bez przekierowań może obniżyć pozycje.

Dla tych, którzy chcą zgłębić temat: przewodnik po niestandardowych czcionkach na naszym blogu, artykuł o bibliotece multimediów WordPress do pracy z obrazami, a także szczegółowa analiza lokalnego ładowania Google Fonts z testem GTmetrix przed/po.

Proszę zacząć od trzech kolorów i dwóch krojów pisma, reszta się dopasuje.