Jak dostosować nagłówki w WordPressie (4 proste sposoby)

Opublikowany: 2022-02-07

Szukasz łatwego sposobu na dostosowanie nagłówka WordPress?

Nagłówek WordPress znajduje się u góry każdej strony w Twojej witrynie. W związku z tym odgrywa kluczową rolę w budowaniu marki witryny, pomaganiu odwiedzającym w nawigacji i prezentowaniu najważniejszych stron.

Ale aby dostosować nagłówek do potrzeb biznesowych, będziesz potrzebować sposobu na jego dostosowanie, na co nie pozwala wiele motywów WordPress.

W tym poście dowiesz się, jak dostosować nagłówki w WordPress za pomocą edytorów wizualnych i niestandardowego kodu. Najłatwiejszą opcją jest użycie SeedProd z jego kreatorem motywów typu „przeciągnij i upuść”, ale udostępnimy również kilka innych rozwiązań, które działają z dowolnym motywem.

Co to jest nagłówek WordPressa?

Nagłówek WordPress to część Twojej witryny, która wyświetla się u góry każdej strony. Twój nagłówek będzie zawierał co najmniej:

  • Tytuł lub logo witryny
  • Menu nawigacji

Na przykład, oto jak wygląda nagłówek na stronie SeedProd.

SeedProd website header

Jak widać, ma logo SeedProd, menu nawigacyjne i przycisk wezwania do działania, aby rozpocząć korzystanie z SeedProd.

Jeśli Twoja witryna ma inne potrzeby, możesz dodać dodatkowe elementy do nagłówka witryny WordPress. Podobnie jak SeedProd, możesz dodać przyciski wezwania do działania lub dołączyć pole wyszukiwania, ikony mediów społecznościowych i inne treści.

Szczegóły nagłówka WordPressa znajdziesz w pliku header.php motywu WordPress. Sugerujemy jednak edytowanie pliku header.php tylko wtedy, gdy jesteś zaawansowanym użytkownikiem i rozumiesz, co robisz.

Spis treści
  1. 1. Jak dostosować nagłówki w WordPressie za pomocą SeedProd
  2. 2. Edytuj nagłówki WordPress za pomocą narzędzia do dostosowywania motywów
  3. 3. Dostosuj nagłówki w WordPressie za pomocą wtyczki Header
  4. 4. Dostosuj kod nagłówka WordPress (zaawansowane)

1. Jak dostosować nagłówki w WordPressie za pomocą SeedProd

Jeśli chcesz mieć pełną kontrolę nad nagłówkiem WordPress, SeedProd jest najlepszym rozwiązaniem. To najlepsza wtyczka do tworzenia motywów WordPress, która umożliwia tworzenie niestandardowego motywu WordPress bez łatwego pisania kodu.

SeedProd WordPress theme builder plugin

SeedProd to narzędzie do tworzenia stron WordPress typu „przeciągnij i upuść” dla firm, blogerów i właścicieli witryn. Ale jest również wyposażony w niestandardowego projektanta motywów, który pozwala wskazać i kliknąć, aby edytować dowolny element.

Na przykład utworzenie niestandardowego nagłówka dla witryny WordPress zajmuje tylko kilka kliknięć i możesz dodać popularne opcje nagłówka za pomocą przeciągania i upuszczania.

Najlepszą rzeczą w kreatorze motywów SeedProd jest to, że jest on niezależny od motywu. Oznacza to, że styl i funkcjonalność nie są uzależnione od istniejącego motywu WordPress, co zapewnia pełną swobodę i kontrolę nad projektem witryny.

Mając to na uwadze, oto kroki, aby dostosować nagłówki w WordPressie za pomocą SeedProd.

Krok 1. Zainstaluj wtyczkę SeedProd Theme Builder

Konfiguracja kreatora motywów SeedProd jest stosunkowo prosta, ponieważ działa z każdą witryną WordPress korzystającą z dowolnego motywu.

Najpierw zainstaluj i aktywuj SeedProd na swojej witrynie WordPress.

Zacznij korzystać z SeedProd już dziś

Aby uzyskać pomoc, zapoznaj się z tym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Uwaga: aby odblokować kreator motywów, potrzebujesz co najmniej planu Pro lub Elite.

Po aktywacji wtyczki przejdź do strony SeedProd »Ustawienia , aby wprowadzić klucz licencyjny wtyczki. Możesz znaleźć te informacje na swoim koncie na stronie SeedProd.

Enter your SeedProd license key

Po wprowadzeniu klucza licencyjnego i kliknięciu przycisku Zweryfikuj klucz możesz utworzyć niestandardowy nagłówek WordPress za pomocą narzędzia do tworzenia motywów SeedProd.

Krok 2. Wybierz szablon motywu startowego

Aby utworzyć niestandardowy nagłówek motywu za pomocą SeedProd, musisz najpierw utworzyć niestandardowy motyw. Nie martw się; tworzenie niestandardowego motywu WordPress za pomocą SeedProd jest dość proste.

Najpierw przejdź do strony SeedProd » Theme Builder . Zobaczysz listę szablonów dla bieżącego niestandardowego motywu SeedProd na tej stronie.

SeedProd theme builder

Ponieważ jeszcze nie zaczęliśmy, mamy tylko globalny szablon CSS.

Na początek masz dwie opcje.

  1. Użyj jednego z gotowych motywów SeedProd jako punktu wyjścia
  2. Ręcznie twórz szablony motywów od podstaw

Sugerujemy zacząć od istniejącego motywu. Dzięki temu SeedProd może automatycznie generować wszystkie pliki szablonów. Motywy SeedProd to kompletne motywy profesjonalnej jakości, które dają Ci przewagę w edytowaniu szablonów zgodnie z Twoimi wymaganiami.

Po prostu kliknij przycisk Motywy i wybierz jeden z dostępnych motywów. Istnieją różne motywy dla różnych stron internetowych, więc wybierz ten, który najlepiej odpowiada Twoim potrzebom.

choose a seedprod theme template

Po wybraniu motywu SeedProd automatycznie utworzy wszystkie szablony motywów. Stamtąd możesz edytować każdy szablon indywidualnie w edytorze przeciągania i upuszczania.

Seedprod theme builder template files

Krok 3. Dostosuj sekcję nagłówka

Aby dostosować nagłówek za pomocą SeedProd, znajdź szablon nagłówka i kliknij łącze Edytuj projekt .

Customize WordPress header seedprod

Spowoduje to uruchomienie pliku szablonu w kreatorze motywów SeedProd. Zobaczysz podgląd na żywo swojego szablonu nagłówka w prawej kolumnie z panelem edycji w lewej kolumnie.

Drag and drop header builder WordPress

Aby zmienić element w pliku szablonu nagłówka, możesz po prostu wskazać i kliknąć, aby go edytować.

how to edit header in WordPress

W zależności od typu elementu w lewej kolumnie zobaczysz różne opcje edycji. Będziesz mógł zmieniać czcionki, kolory, tło, odstępy i nie tylko.

Drag and drop items to your WordPress header

Aby dodać niestandardowe elementy nagłówka, możesz dodać bloki SeedProd z lewej kolumny. Zawiera kilka typów bloków, które możesz dodać do swojego szablonu:

  • Tagi szablonów – bloki, które umożliwiają generowanie elementów motywu z bazy danych WordPress, takich jak posty na blogu, komentarze, polecane obrazy itp.
  • Bloki standardowe — są to typowe elementy projektowania stron internetowych, które umożliwiają dodawanie nowych obrazów, przycisków, tekstu, separatorów i nie tylko. Możesz nawet dodać film, aby zwiększyć zaangażowanie.
  • Zaawansowane bloki – Inne zaawansowane bloki umożliwiają dodawanie formularzy kontaktowych, profili społecznościowych, przycisków udostępniania, skrótów WordPress, Map Google i innych.
  • WooCommerce – Jeśli prowadzisz sklep internetowy, możesz użyć bloków WooCommerce w swoim motywie, aby wyświetlać produkty, koszyki, a nawet utworzyć niestandardową stronę kasy.

Używanie sekcji do dostosowywania nagłówka WordPress

Oprócz bloków możesz również dodać całe sekcje do szablonu nagłówka swojego motywu.

Po prostu przejdź do zakładki Sekcje w panelu Projekt.

Add sections to your WordPress header

Sekcje to grupy bloków dla różnych obszarów projektu witryny. Na przykład możesz znaleźć gotowe do użycia sekcje na nagłówek, stopkę, wezwania do działania, funkcje i nie tylko.

Wystarczy kliknąć sekcję nagłówka, aby dodać ją do szablonu motywu i edytować zgodnie z własnymi wymaganiami.

Edit WordPress header section

Jeśli jesteś zadowolony z wyglądu nagłówka, kliknij przycisk Zapisz w prawym górnym rogu.

Teraz powtórz ten proces dla innych szablonów w swoim motywie, aby utworzyć całkowicie niestandardowy motyw WordPress.

Krok 4. Opublikuj swój niestandardowy nagłówek WordPress

Gdy jesteś zadowolony z niestandardowego nagłówka WordPress, ostatnim krokiem jest aktywacja go w witrynie WordPress.

W SeedProd możesz zastosować swój niestandardowy nagłówek WordPress za pomocą prostego przełącznika.

Po prostu przejdź do strony SeedProd » Theme Builder i przełącz przełącznik obok opcji „Włącz motyw SeedProd” na „Tak”.

Enable seedprod theme

SeedProd zastąpi Twój istniejący projekt nowym motywem i nagłówkiem WordPress.

Teraz możesz odwiedzić swoją witrynę, aby zobaczyć w akcji niestandardowy nagłówek WordPress.

custom header example WordPress

Tworzenie wielu niestandardowych nagłówków za pomocą SeedProd

Teraz, gdy masz niestandardowy nagłówek WordPress, nadal możesz go modyfikować, ale możesz także utworzyć wiele nagłówków dla różnych sekcji swojej witryny.

Na przykład możesz chcieć dodać nowy szablon nagłówka do swojego motywu, który wyświetla się tylko w określonych kategoriach.

Aby to zrobić, po prostu utwórz nowy szablon i zmień warunki wyświetlania zgodnie z własnymi potrzebami.

add multiple custom headers in WordPress

Korzystając z przyjaznego dla początkujących kreatora motywów SeedProd typu „przeciągnij i upuść”, możesz łatwo utworzyć dowolny rodzaj niestandardowego układu, którego potrzebuje Twoja witryna.

Chociaż edytor wizualny SeedProd oferuje najłatwiejszy sposób dostosowania nagłówka, istnieją również inne taktyki, których możesz użyć.

Czytaj dalej, aby poznać niektóre z najpopularniejszych rozwiązań.

2. Edytuj nagłówki WordPress za pomocą narzędzia do dostosowywania motywów

Większość motywów WordPress zapewnia pewną kontrolę nad nagłówkiem witryny w natywnym konfiguratorze WordPress. Może nie zapewniać dużego poziomu szczegółowości, ale otrzymasz kilka opcji kontrolowania wyglądu i funkcji nagłówka.

Dostępne opcje zależą od motywu, ale zwykle można je otworzyć w konfiguratorze motywów i łatwo je edytować.

Aby to zrobić, przejdź do Wygląd » Dostosuj w obszarze administracyjnym WordPress. Następnie kliknij nagłówek Tożsamość witryny z listy w lewej kolumnie.

edit your WordPress header with theme customizer

Na przykład w domyślnym motywie Twenty Twenty-One opcja Tożsamość witryny umożliwia dostosowanie:

  • Logo
  • Nazwa strony
  • Slogan

Następnie możesz kliknąć nagłówek Menu i zmienić układ menu nawigacyjnego.

edit header menu in WordPress theme customizer

Jeśli potrzebujesz więcej pomocy z tą metodą, możesz zapoznać się z dokumentacją swojego motywu WordPress.

Uwaga: w powyższym przykładzie używaliśmy domyślnego motywu WordPress Twenty Twenty-One. Jeśli używasz motywu Twenty Twenty-Two, moduł dostosowania będzie nosił nazwę „Edytor”. Możesz go znaleźć, przechodząc do Wygląd »Edytor .

customize header with WordPress block editor

Dzięki nowemu edytorowi WordPress możesz dostosować swój nagłówek za pomocą edytora bloków, jak każdy inny post lub stronę. Nie oferuje tak wielu funkcji dostosowywania jak SeedProd, ale pozwala szybko dostosować układ.

3. Dostosuj nagłówki w WordPressie za pomocą wtyczki Header

Innym łatwym sposobem na edycję nagłówka w WordPressie jest prosta wtyczka nagłówka. Jest to dobra opcja, jeśli nie masz ochoty bezpośrednio edytować pliku nagłówka motywu.

Chociaż istnieją setki wtyczek do wyboru, bezpłatna wtyczka Wstaw nagłówki i stopki jest najpopularniejszą opcją.

Po aktywacji wtyczki na swojej stronie, możesz ją znaleźć w Ustawieniach » Wstaw nagłówki i stopki.

Insert headers and footers WordPress plugin

Stamtąd możesz wkleić dowolny kod, który chcesz dodać lub usunąć z nagłówka swojej witryny.

insert headers and footers

Wszelkie skrypty dodane w tym obszarze są automatycznie dodawane do tagu nagłówka witryny WordPress. Pamiętaj tylko, aby kliknąć przycisk Zapisz , aby zapisać zmiany.

4. Dostosuj kod nagłówka WordPress (zaawansowane)

Jeśli jesteś zaawansowanym użytkownikiem, możesz dostosować nagłówki w WordPressie, używając własnego niestandardowego kodu. Do tej metody potrzebna jest praktyczna znajomość HTML, PHP i CSS, więc nie jest ona odpowiednia dla użytkowników nie posiadających wiedzy technicznej.

Aby edytować kod nagłówka, przejdź do Wygląd » Edytor motywów i otwórz plik Style.css .

Use WordPress theme editor to customize WordPress header

Stamtąd możesz przewinąć w dół do sekcji Nagłówek witryny i dodać lub usunąć kod, aby dostosować styl.

Możesz także dokonać zmian w pliku header.php . Jednak ten kod zajmuje się funkcjami, a nie stylami.

Większość osób, które chcą dostosować swoje nagłówki, jest bardziej zainteresowana aktualizacją wyglądu swoich witryn niż tym, co dzieje się za kulisami. Więc prawdopodobnie skupisz większość swojej uwagi na CSS nagłówka.

Dostosuj swój nagłówek WordPress już dziś

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się edytować nagłówki w WordPressie.

Najłatwiejszym sposobem uzyskania pełnej kontroli nad nagłówkiem jest SeedProd. Oferuje wizualny kreator nagłówków typu „przeciągnij i upuść”, nie musisz bezpośrednio edytować żadnego kodu ani plików motywów, a także możesz dostosować nagłówek bezpośrednio z pulpitu WordPress.

Zacznij korzystać z SeedProd już dziś

Może Ci się również spodobać ten przewodnik, jak edytować stopkę w WordPressie.

Dziękuje za przeczytanie. Śledź nas na YouTube, Twitterze i Facebooku, aby uzyskać więcej przydatnych treści, które pomogą rozwinąć Twój biznes.