jak dostosować nagłówki w WordPress: Przewodnik dla początkujących

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

ponieważ nagłówek znajduje się na górze każdej strony, odgrywa kluczową rolę w brandingu witryny, pomaganiu odwiedzającym w nawigacji i promowaniu najważniejszych treści.

jednak, aby uzyskać jak najwięcej korzyści z nagłówka witryny, potrzebujesz sposobu na jego edycję, którego wiele motywów nie oferuje.

w tym poście podzielimy się różnymi taktykami, których możesz użyć do dostosowania nagłówka w WordPress za pomocą prostych interfejsów typu „przeciągnij i upuść” i własnego kodu.

najprostszą opcją jest użycie motywu Astra i jego narzędzia do przeciągania i upuszczania nagłówków, ale udostępnimy również inne taktyki, które będą działać z dowolnym motywem WordPress.

Co To jest nagłówek WordPress?

nagłówek WordPress jest częścią twojej witryny, która pojawia się na górze każdej strony. Zazwyczaj zawiera co najmniej dwa elementy:

• logo/tożsamość strony
• menu nawigacyjne)

na przykład, oto jak wygląda nagłówek na blogu Astra. Widać, że zawiera logo Astry, a także dwa oddzielne menu nawigacyjne:

w zależności od potrzeb Możesz również dołączyć inne elementy, takie jak ikony mediów społecznościowych, pole wyszukiwania, promocje, numer telefonu i inne informacje.

jeśli kiedykolwiek chcesz zobaczyć, jak to działa, nagłówek WordPress jest zawarty w nagłówku.plik php w Twoim szablonie WordPress.

jak dostosować nagłówek WordPress za pomocą Astra

jeśli chcesz mieć pełną kontrolę nad nagłówkiem WordPress, darmowy motyw Astra zapewnia przeciąganie i upuszczanie, bez kodu, aby w pełni dostosować nagłówek WordPress.

możesz od razu zobaczyć swoje zmiany w podglądzie na żywo swojej witryny i łatwo dodać różne rodzaje treści, takie jak przyciski, ikony społecznościowe, pole wyszukiwania i inne.

aby rozpocząć, musisz zainstalować i aktywować motyw Astra. Możesz także zaimportować jedną z setek gotowych witryn demonstracyjnych, aby szybko zacząć działać. Jeśli potrzebujesz pomocy w każdym z tych kroków, mamy wiele przewodników, które Ci pomogą:

• jak zainstalować Astrę
• jak importować witryny startowe

Gdy twoja podstawowa strona jest gotowa do pracy, oto jak dostosować nagłówek za pomocą Astry.

1. Otwórz Astra header Builder

aby rozpocząć, przejdź do Wygląd → Dostosuj na pulpicie nawigacyjnym WordPress, aby uruchomić natywny Dostosowywacz WordPress. Następnie wybierz opcję header Builder:

po uruchomieniu narzędzia header builder zobaczysz nowy zestaw opcji, w których możesz kontrolować układ nagłówka:

2. Dodaj i uporządkuj zawartość nagłówka

teraz dla Zabawy-dodawanie treści. Możesz zobaczyć, że masz trzy wiersze w kreatorze nagłówków. Każdy wiersz kontroluje zawartość dla innej części nagłówka:

1. powyżej nagłówek
2. nagłówek podstawowy – tutaj umieścisz swoją” główną ” zawartość.
3. poniżej nagłówka

absolutnie chcesz dołączyć treść do głównego nagłówka, a następnie masz możliwość dodania treści powyżej lub poniżej, zgodnie z Twoimi potrzebami.

aby dodać zawartość, możesz kliknąć w miejscu, w którym chcesz dodać zawartość. Spowoduje to otwarcie zestawu opcji:

• Menu główne
• menu Dodatkowe
• Logo
• przycisk
• Szukaj
• społeczne
• HTML 1
• HTML 2

pamiętaj, że podczas dodawania zawartości zobaczysz mniej opcji. Na przykład możesz dodać swoje logo tylko raz, więc ta opcja zniknie, gdy już dodasz logo do nagłówka:

po dodaniu zawartości możesz kliknąć tę zawartość, aby otworzyć jej ustawienia. Na przykład, jeśli dodasz przycisk, będziesz mógł sterować tekstem przycisku i łączem.

Możesz również otworzyć ustawienia projektu, aby dalej dostosowywać rzeczy:

jeśli chcesz zmienić układ zawartości lub przenieść ją do innego wiersza, wystarczy ją przeciągnąć i upuścić:

3. Dostosuj układ nagłówka

powyżej pokazaliśmy, jak dostosować poszczególne elementy wewnątrz nagłówka. Masz również kilka opcji, aby dostosować nagłówek jako całość.

po pierwsze, możesz przejść do zakładki projekt głównego konstruktora nagłówków, aby kontrolować szerokość i odstępy nagłówka. Możesz także kliknąć ikonę koła zębatego dla każdego wiersza nagłówka, aby dostosować jego wysokość i wygląd:

4. Eksperymentuj z różnymi typami nagłówków

w zależności od tego, czy używasz darmowej wersji Astry, czy Astry Pro, otrzymasz również dostęp do dodatkowych typów nagłówków, takich jak nagłówki przezroczyste (bezpłatne) i nagłówki sticky (Pro).

możesz użyć tego samego konstruktora nagłówka i stopki powyżej, aby zaprojektować przezroczysty lub lepki nagłówek. Zobaczysz te opcje w sekcji typy nagłówków. Możesz je kliknąć, aby rozwinąć ustawienia i zaprojektować różne typy nagłówków:

trzy inne sposoby dostosowania nagłówka WordPress

podczas gdy kreator nagłówków przeciągnij i upuść Astry oferuje najprostszy sposób dostosowania nagłówka WordPress, istnieją również inne taktyki, których możesz użyć, bez względu na to, jakiego motywu używasz.

oto niektóre z najlepszych strategii …

1. Użyj ustawień dostosowywania motywu

Większość motywów WordPress zapewnia pewną kontrolę nad nagłówkiem witryny w natywnym dostosowywaniu WordPress. Jest mało prawdopodobne, aby uzyskać poziom szczegółowości, który daje Astra, ale otrzymasz kilka opcji kontrolujących wygląd i funkcje nagłówka.

opcje te różnią się w zależności od motywu, ale zwykle można je otworzyć, klikając niebieską ikonę ołówka obok elementów w nagłówku. Na przykład w nowym domyślnym motywie Twenty Twenty-One możesz zobaczyć, że możesz dostosować swój:

• Logo
• nagłówek strony
• Menu

jeśli potrzebujesz dodatkowej pomocy, możesz zapoznać się z dokumentacją twórcy szablonu.

2. Użyj Elementora i bezpłatnej niestandardowej wtyczki nagłówka

jeśli nie znasz Elementora, jest to wizualne narzędzie do przeciągania i upuszczania, którego możesz użyć do tworzenia treści w swojej witrynie. Z bezpłatnym Elementor-Header, Stopka & blokuje szablon niestandardowy nagłówek wtyczki WordPress, możesz użyć darmowej wersji Elementor do zaprojektowania własnego niestandardowego nagłówka WordPress.

ta wtyczka działa doskonale z darmowym motywem Astra, a także z każdym innym motywem WordPress, którego możesz używać.

aby rozpocząć, zainstaluj i aktywuj bezpłatną wtyczkę z WordPress.org. musisz również zainstalować darmową wersję Elementora, jeśli jeszcze tego nie zrobiłeś.

gdy już to zrobisz, przejdź do Wygląd → Stopka nagłówka & bloki i kliknij Dodaj nowy:

nadaj szablonowi nazwę i wybierz nagłówek w obszarze Typ szablonu. Możesz także użyć opcji wyświetlanie lub role użytkownika, aby kierować nagłówek do określonej zawartości/użytkowników.

następnie opublikuj nagłówek i kliknij Edytuj za pomocą Elementora, aby otworzyć wizualny Kreator:

teraz możesz w pełni dostosować nagłówek za pomocą wizualnego interfejsu przeciągnij i upuść Elementora. Wtyczka daje również nowy Nagłówek, Stopka & blokuje widżety, których możesz użyć do dodania ważnych elementów Witryny, takich jak logo witryny lub menu nawigacyjne:

aby dowiedzieć się więcej o używaniu Elementora, sprawdź nasz pełny samouczek Elementora lub recenzję Elementora.

3. Użyj kodu niestandardowego (zaawansowany)

wreszcie, jeśli jesteś zaawansowanym użytkownikiem, możesz również dostosować nagłówek WordPress za pomocą własnego kodu. Aby to zrobić, potrzebujesz przynajmniej praktycznej znajomości HTML, PHP i CSS, więc nie jest to opcja dla nietechnicznych użytkowników.

jeśli nie znasz tych języków kodowania, powinieneś trzymać się jednej z poprzednich metod na tej liście.

istnieją dwie części do używania kodu do dostosowywania nagłówka:

• HTML / PHP-to kontroluje rzeczywistą zawartość w nagłówku.
• CSS-to kontroluje stylizację nagłówka.

jak wspomnieliśmy wcześniej, zawartość nagłówka witryny znajduje się w nagłówku.plik php. Aby dostosować zawartość nagłówka, musisz pracować bezpośrednio z tym plikiem. Niektóre motywy, takie jak Astra, oferują również Hooki, których możesz użyć do dodania treści do nagłówka.

w przewodniku Astra visual hooks guide możesz zobaczyć, że masz wiele opcji, aby dostosować nagłówek:

jeśli chcesz edytować nagłówek szablonu.bezpośrednio w pliku php powinieneś użyć motywu podrzędnego, aby upewnić się, że nie nadpisujesz zmian podczas aktualizacji motywu.

z drugiej strony, jeśli używasz hooków, nie musisz używać motywu potomnego, o ile używasz wtyczki, takiej jak Hooki Astra lub fragmenty kodu. Jeśli dodasz Hooki bezpośrednio do funkcji motywu.plik php, nadal powinieneś używać motywu potomnego.

w Astra Pro masz również możliwość dodawania haczyków za pomocą funkcji niestandardowego układu Astra Pro.

fajną rzeczą w niestandardowych układach Astry Pro jest to, że możesz używać reguł wyświetlania, aby kontrolować dokładnie, kiedy zmiany wyświetlają się. Na przykład możesz dodać do nagłówka niestandardową zawartość, która będzie widoczna tylko dla zalogowanych użytkowników.

tak można dostosować zawartość nagłówka – ale co ze stylizacją?

aby dostosować styl nagłówka, możesz edytować styl.plik css bezpośrednio, jeśli używasz motywu podrzędnego. Możesz też użyć dodatkowego obszaru CSS w edytorze WordPress, aby dodać własne niestandardowe style do nagłówka.

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

Twój nagłówek WordPress odgrywa kluczową rolę w sukcesie Twojej witryny. Pomaga markować Twoją stronę, kierować odwiedzających do kluczowych treści, promować ważne informacje lub profile społecznościowe i wiele więcej.

najprostszym sposobem na uzyskanie pełnej kontroli nad nagłówkiem witryny jest użycie darmowego motywu Astra. Dzięki Astrze uzyskujesz dostęp do wizualnego narzędzia do tworzenia Nagłówków typu „przeciągnij i upuść”. Nie potrzebujesz żadnego kodu ani zewnętrznych wtyczek-uzyskasz 100% kontrolę nad nagłówkiem od samego początku dostosowywania WordPress.

w innych sytuacjach możesz również użyć innych ustawień dostosowywania motywu, Elementor – Nagłówek, Stopka & blokuje wtyczkę szablonu lub własny kod, jeśli masz wiedzę techniczną.