Jak edytować nagłówek w WordPress za pomocą edytora strony i personalizatora + przydatne porady

Nagłówki WordPress pomagają zrobić pierwsze wrażenie na odwiedzających. Dlatego wiedza o tym, jak je edytować, może wzmocnić identyfikację marki, usprawnić nawigację lub odświeżyć wygląd Twojej strony internetowej.

WordPress umożliwia użytkownikom łatwą edycję nagłówków za pomocą Personalizatora i Edytora strony. Obie opcje są szybkie i przyjazne dla początkujących, jednak wyboru należy dokonać w zależności od własnych preferencji oraz używanego motywu WordPress.

Omówimy teraz, jak uzyskać dostęp do tych narzędzi, a także kilka wskazówek dotyczących tworzenia skutecznych nagłówków.

Jak edytować nagłówek WordPress

Kroki dostosowywania nagłówka w WordPress zależą od używanego motywu oraz wersji samego systemu. Te czynniki wpływają na funkcje i narzędzia dostępne do stworzenia własnego nagłówka.

Istnieją jednak dwa najpopularniejsze sposoby stworzenia własnego nagłówka: za pomocą Edytora strony oraz Personalizatora. W tym poradniku korzystamy z najnowszej wersji WordPress 6.5.

Jak edytować nagłówek w WordPress za pomocą edytora strony

Domyślny edytor WordPress od wersji 5.0 jest zintegrowany z Gutenbergiem. Wykorzystuje on bloki do dodawania elementów strony internetowej, takich jak nagłówki, akapity, listy czy obrazy.

Pamiętaj, że nie wszystkie motywy są kompatybilne z edytorem Gutenberg – działa on wyłącznie z motywami blokowymi.

Oto jak dostosować nagłówek za pomocą Edytora strony:

1. Przejdź do Wygląd → Edytor w kokpicie WordPress.

2. Po uruchomieniu Edytora strony wybierz sekcję Wzorce w menu bocznym po lewej stronie.

3. Przewiń do sekcji Części szablonu i wybierz Nagłówek. Liczba dostępnych części szablonu nagłówka zależy od użytego motywu blokowego.

4. Wybierz nagłówek, który chcesz dostosować, a następnie kliknij przycisk Edytuj, aby otworzyć nagłówek w trybie pełnej edycji strony.

5. W interfejsie edycji nagłówka możesz zmieniać istniejące bloki, zamieniać je na inne lub dodawać nowe bloki do szablonu nagłówka.

Każdy motyw kompatybilny z Gutenbergiem wykorzystuje inny zestaw domyślnych elementów w nagłówku. Kliknij przycisk Widok listy, aby wyświetlić wszystkie bloki znajdujące się w edytowanym nagłówku.

W tym przykładzie używamy motywu blokowego Twenty Twenty-Four, który w domyślnym nagłówku korzysta z grupy bloków. Jeśli wybrana część szablonu również zawiera grupę bloków, kliknięcie strzałki obok niej rozwinie listę zgrupowanych elementów.

Jeśli chcesz usunąć cały nagłówek, wybierz na liście element Grupa, a następnie kliknij przycisk Opcje dla grupy. Potem wybierz polecenie Usuń.

Użyj przycisku + (wstawiania bloków), aby dodać do nagłówka nowe elementy – na przykład tagline (slogan strony) lub pasek wyszukiwania. Ikonę plusa znajdziesz, gdy najedziesz kursorem na obszar nagłówka lub na pasku narzędzi u góry Edytora strony.

Następnie wyszukaj potrzebny blok i dodaj go do nagłówka. Przeciągnij i upuść nowo dodany element w wybrane miejsce. Możesz to zrobić również w panelu Widok listy, obserwując na bieżąco zmiany po prawej stronie ekranu.

Motyw Twenty Twenty-Four ma już w nagłówku wszystkie kluczowe elementy, więc pozostawimy je bez zmian. W następnych krokach spersonalizujemy tytuł strony, logo oraz menu nawigacyjne w edytorze pełnej strony.

Zmiana tytułu strony

Zmień domyślny tytuł strony w trybie edycji nagłówka, zaznaczając blok Tytuł strony.

Opcjonalnie możesz zmienić tytuł przez menu Ustawienia w kokpicie WordPress – spowoduje to automatyczną aktualizację bloku nagłówka.

Dodawanie logo strony

Istnieje wiele sposobów na zmianę logo w WordPress, w tym za pomocą Edytora strony. Ponieważ ten motyw wyświetla domyślne logo, wystarczy zastąpić obraz zastępczy. W tym celu zaznacz blok Logo strony w obrębie nagłówka.

Kliknij przycisk Dodaj logo strony na środku bloku.

Pojawi się okno biblioteki mediów. Prześlij nowy plik graficzny i nie zapomnij dodać tekstu alternatywnego przed kliknięciem przycisku Wybierz.

Nowe logo pojawi się w Twoim nagłówku. Zmień jego rozmiar, przeciągając punkty zaznaczenia na krawędziach obrazu do momentu uzyskania odpowiednich wymiarów. Jeśli chcesz przesunąć logo, użyj strzałek kierunkowych na pasku narzędzi bloku.

Dodawanie menu nawigacyjnego

Wybrany motyw WordPress może wyświetlać w obszarze nagłówka dedykowane menu nawigacyjne. Na przykład motyw Twenty Twenty-Four korzysta z bloku Nawigacja, który pozwala bezpośrednio edytować strukturę i styl menu.

Zaznacz w nagłówku blok Nawigacja, aby rozpocząć edycję menu, i kliknij przycisk Dodaj blok.

Spowoduje to automatyczne utworzenie tymczasowego odnośnika (linku), który możesz połączyć z dowolną stroną.

Dla ułatwienia edycji menu zaznacz blok menu i kliknij przycisk Ustawienia, aby otworzyć panel konfiguracji.

W panelu tym możesz zmienić ustawienia linku – m.in. edytować etykietę, adres URL, atrybuty i styl. Jeśli masz własny kod CSS do stylizacji menu, możesz go również dodać w tym miejscu.

Aby stworzyć menu rozwijane, rozwiń opcję Niestandardowy odnośnik, po czym wybierz polecenie Dodaj odnośnik submenu. Opcjonalnie dodaj nowy element Submenu poprzez wstawianie bloków.

Po zakończeniu wprowadzania zmian nie zapomnij nacisnąć Zapisz przed zamknięciem edytora nagłówka.

Jak edytować nagłówek WordPress za pomocą personalizatora

Jeśli korzystasz ze starszej wersji WordPress lub klasycznego motywu, użyj Personalizatora (Customizer) do zmiany szablonu nagłówka. W zależności od aktywowanego motywu kroki dostępu do Personalizatora mogą wyglądać nieco inaczej.

Na przykład domyślny motyw Twenty Twenty-One (oraz starsze) oferuje w Personalizatorze tylko opcję Tożsamość strony do zmiany logo i tytułu wyświetlanego w nagłówku.

Z kolei najpopularniejsze motywy firm trzecich, takie jak Astra czy Neve, posiadają dedykowane opcje nagłówka, zapewniające większą swobodę w dostosowywaniu elementów strony, na przykład dodanie ikon mediów społecznościowych (po przejściu na plan premium).

W tym poradniku skorzystamy z motywu Astra. Jednak sposób dostępu do Personalizatora jest taki sam – przejdź do Wygląd → Personalizuj w panelu administracyjnym.

Personalizator motywu Astra udostępnia kreator nagłówka z interfejsem typu przeciągnij i upuść (drag-and-drop). W panelu po lewej możesz wybierać elementy strony do edycji, a po prawej na bieżąco podglądać wprowadzane zmiany.

Aby rozpocząć edycję nagłówka swojej strony, wybierz z listy opcję Header Builder.

W panelu po lewej zobaczysz dostępne wzory nagłówka do edycji, a po prawej – podgląd nagłówka z aktywnym kreatorem.

Domyślnie dostępne są trzy wiersze nagłówka (górny, środkowy i dolny). Nowy element nagłówka dodasz, najeżdżając na puste miejsce i klikając pojawiający się przycisk +.

Możesz także przenosić istniejące elementy nagłówka metodą drag & drop – przeciągnij je i upuść w preferowane miejsce. Gdy rozmieścisz już wszystko tak, jak chcesz, przejdź do personalizowania zawartości.

Zmiana tytułu strony i logo

Aby wyświetlić ustawienia ogólne nagłówka, kliknij opcję Site Title & Logo w panelu konfiguracji nagłówka.

Naciśnij przycisk Change Logo (Zmień logo), aby otworzyć bibliotekę mediów WordPress i wgrać logo swojej strony. Następnie dostosuj szerokość wyświetlanego logo według uznania.

Możesz także usunąć domyślny obraz (placeholder), jeśli nie chcesz używać żadnego logo w nagłówku.

Przewijając panel w dół, zobaczysz ogólne ustawienia Tytułu strony. Możesz tam zmienić tekst tytułu, ustawić jego widoczność na różnych urządzeniach, dodać tagline (slogan) oraz zdecydować, czy wyświetlać te elementy w nagłówku, czy je ukryć.

Na dole panelu konfiguracji znajduje się także ustawienie Ikona strony (favicon) – obrazek ten będzie widoczny na karcie przeglądarki odwiedzających w trakcie korzystania z Twojej strony.

Wygląd nagłówka, logo i sloganu możesz dopasować, przełączając się na kartę Design w panelu ustawień.

Dodawanie menu nawigacyjnego

Aby zmienić menu nawigacyjne w nowym nagłówku, kliknij w panelu konfiguracji opcję Primary Menu (Menu główne). Podobnie jak w przypadku tytułu i logo, dostępne są tutaj zakładki ustawień General (Ogólne) i Design do personalizacji menu.

Jeśli chcesz edytować zawartość menu widocznego w nagłówku, kliknij przycisk Configure Menu from Here (Skonfiguruj menu tutaj), aby otworzyć ustawienia menu bezpośrednio w panelu personalizacji. Dzięki temu możesz modyfikować strukturę menu, jednocześnie obserwując zmiany na żywo po prawej stronie.

Opcjonalnie, zmiany wprowadzone poprzez Wygląd → Menu w kokpicie WordPress zostaną automatycznie uwzględnione w nagłówku aktywnego motywu.

Pamiętaj, aby na koniec nacisnąć Opublikuj – spowoduje to zapisanie i zastosowanie wszystkich zmian w nagłówku przed opuszczeniem kreatora motywu.

Dlaczego nagłówek WordPress jest ważny

Nagłówek strony WordPress znajduje się na samej górze strony, więc odgrywa ważną rolę w kształtowaniu doświadczeń użytkownika.

Spersonalizowany nagłówek WordPress może przynieść Twojej stronie internetowej następujące korzyści:

• Centrum nawigacji. W nagłówku często umieszczane jest menu nawigacyjne, co pomaga odwiedzającym szybko znaleźć to, czego szukają.
• Prezentacja marki. Niezależnie od tego, czy mowa o logo, sloganie czy palecie kolorów – nagłówek to miejsce, w którym kluczowe elementy identyfikacji marki wysuwają się na pierwszy plan.
• Walory estetyczne. Oprócz funkcji użytkowych, własny nagłówek wpływa na wygląd strony. Dobrze zaprojektowany nagłówek zwiększa zaangażowanie użytkowników i sprawia, że strona wygląda bardziej profesjonalnie.

Mówiąc prościej, nagłówek WordPress wpływa na doświadczenie użytkownika (UX) podczas nawigacji po stronie. Ponadto ma on znaczenie dla optymalizacji pod kątem wyszukiwarek (SEO), dostarczając robotom indeksującym ważnych informacji o stronie.

Wskazówki dotyczące efektywnego nagłówka WordPress

Utrzymaj nagłówek WordPress funkcjonalny i atrakcyjny wizualnie, stosując się do poniższych wskazówek:

Zachowaj spójność

Nagłówek pełni istotną rolę w ułatwianiu nawigacji po stronie, dlatego jego wygląd musi być konsekwentny i zgodny z dobrymi praktykami webdesignu.

Niezależnie od tego, czy odwiedzający trafia na stronę główną, wpisu WordPress czy stronę produktową, jednolity nagłówek na wszystkich podstronach zapewni mu płynne doświadczenie. Spójny układ pomaga również użytkownikom rozpoznać markę i zwiększa zaufanie do strony.

Pamiętaj, aby edytować nagłówek za każdym razem, gdy nowa zawartość strony tego wymaga, na przykład po utworzeniu nowej podstrony dodaj ją do menu nawigacyjnego.

Niektóre motywy WordPress automatycznie dostosowują sekcję nagłówka po każdej aktualizacji na Twojej stronie. Inne tego nie robią, dlatego po zmianach warto ponownie sprawdzić wprowadzone modyfikacje nagłówka.

Postaw na prostotę

Choć nagłówek to kluczowy element strony, jego przeładowanie może przynieść efekt przeciwny do zamierzonego. Jedną z najlepszych praktyk projektowania nagłówków jest minimalizm.

Prosty, przejrzysty nagłówek zwiększa użyteczność strony – odwiedzający skupią się na najważniejszych elementach, takich jak logo, tytuł, slogan i główne menu nawigacyjne.

Jeśli jakiś komponent zajmuje zbyt wiele miejsca, przenieś go w inne miejsce strony. Przykładowo, duży pasek wyszukiwania umieszczony obok rozbudowanego menu nawigacji w nagłówku to niezbyt dobre rozwiązanie.

Wykorzystaj wysokiej jakości grafiki

Zalecamy umieszczenie w nagłówku logotypu strony. Będzie on wizualnym punktem odniesienia, wzmacniającym rozpoznawalność marki.

Używaj obrazów w wysokiej rozdzielczości, aby nagłówek prezentował się profesjonalnie, ponieważ rozmazane, niskiej jakości logo może negatywnie wpłynąć na odbiór całej strony. Sięgnij po dopracowane pliki graficzne, aby wywrzeć pozytywne pierwsze wrażenie na odwiedzających.

W razie potrzeby rozważ zlecenie projektu logo profesjonaliście lub skorzystanie z narzędzia do tworzenia logo w oparciu o sztuczną inteligencję.

Zadbaj o responsywność

Blisko 60% ruchu w internecie odbywa się za pomocą urządzeń mobilnych. Użytkownicy mobilni nie powinni musieć powiększać ekranu, aby przeglądać stronę www, dlatego wersja mobilna strony musi być czytelna i łatwa w obsłudze.

Responsywny nagłówek zapewnia bezproblemowe doświadczenie na różnych wielkościach ekranów. Utrzymanie przyjaznej dla urządzeń mobilnych strony poprawia również jej pozycję w wynikach wyszukiwania.

Podczas budowy strony, wybieraj responsywne motywy WordPress lub kreatory. Dzięki temu Twój nagłówek automatycznie dopasuje się do różnych rozdzielczości.

Jeśli chcesz sprawdzić, jak strona radzi sobie na urządzeniach mobilnych, skorzystaj z narzędzia Mobile-Friendly Test dostępnego w Google Search Console.

Podsumowanie

Umiejętność zmiany nagłówka w WordPress pomaga poprawić wygląd i funkcjonalność strony. Na szczęście modyfikacja nagłówka za pomocą Edytora strony lub Personalizatora wymaga tylko kilku prostych kroków.

Poza samą edycją nagłówka pokazaliśmy też, jak zrobić, żeby nagłówek w WordPress działał skutecznie. Poniżej znajdziesz krótkie podsumowanie najważniejszych wskazówek:

• Utrzymuj nagłówek spójny na całej stronie, aby strona wyglądała profesjonalnie.
• Postaw na czysty, przejrzysty nagłówek złożony z kluczowych elementów – logo, tytułu, sloganu i menu nawigacyjnego.
• Używaj wysokiej jakości obrazów w nagłówku, aby wzmocnić branding swojej strony.
• Wybierz responsywny motyw WordPress, dzięki czemu nagłówek będzie dobrze wyglądał na ekranach o różnych rozmiarach.

Na koniec korzystaj z niezawodnych usług hostingu WordPress, aby mieć pewność, że Twoja strona jest zawsze dostępna online i szybko się ładuje.

Jak edytować nagłówek WordPress – FAQ

Przeczytaj najczęściej zadawane pytania, aby dowiedzieć się więcej o dostosowywaniu nagłówka WordPress.