4 łatwe metody (3 bez kodu)

Nagłówek to pierwszy element Twojej witryny, który widzi większość odwiedzających. Zazwyczaj jest to miejsce, w którym umieszczane jest logo i menu Twojej witryny, które są nieodłączną częścią każdej strony. Jeśli nie wiesz, jak edytować nagłówek WordPressa, będziesz miał trudny czas ️ zrobienie dobrego pierwszego wrażenia.

WordPress umożliwia edycję nagłówka witryny na kilka sposobów. Prawie każdy motyw ma unikalny projekt nagłówka, który możesz dostosować ręcznie. Alternatywnie możesz skorzystać z szeregu narzędzi udostępnianych przez większą społeczność WordPressa.

W tym artykule pokażemy cztery sposoby edycji nagłówka WordPress , zarówno z wtyczkami, jak i bez nich. Chodźmy do pracy!

Spis treści:

1. Edytuj nagłówek za pomocą Customizer
2. Użyj pełnej edycji witryny (i kompatybilnego motywu)
3. Edytuj nagłówek za pomocą kreatora stron WordPress
4. Dodaj niestandardowy kod do nagłówka za pomocą wtyczki

1. Edytuj nagłówek za pomocą Customizer

WordPress Customizer to wbudowane narzędzie, które umożliwia edycję globalnych elementów Twojej witryny. Za pomocą narzędzia Customizer możesz edytować nagłówek, stopkę, typografię, menu i inne kluczowe aspekty witryny.

Aby uzyskać dostęp do narzędzia Customizer, przejdź do pulpitu nawigacyjnego i kliknij opcję Wygląd > Dostosuj . Customizer wyświetli menu opcji po lewej stronie i podgląd Twojej witryny po prawej:

Pamiętaj, że jeśli nie widzisz opcji WordPress Customizer na pulpicie nawigacyjnym, być może używasz motywu z blokadą. Aby edytować nagłówek dla tego typu motywu, musisz użyć pełnej edycji witryny, którą omówimy w następnej sekcji.

W Customizerze powinieneś zobaczyć opcję związaną z Twoim nagłówkiem. Czasami może to być widoczne od razu, jak w powyższym przykładzie. Innym razem może być konieczne przejście do podmenu. Na przykład niektóre motywy umieszczają opcje nagłówka w opcjach układu lub czymś podobnym.

Po znalezieniu opcji nagłówka motywu opcje, które teraz zobaczysz, będą zależeć od używanego motywu. Na przykład nasz motyw Neve zawiera opcje zmiany logo, koloru nagłówka i menu wyświetlanego w tej sekcji:

Neve oferuje również wybór elementów, które można dodać do nagłówka za pomocą funkcji przeciągania i upuszczania. Wybierz dowolny z elementów w obszarze Dostępne komponenty i przeciągnij je do wierszy nagłówka na dole narzędzia Customizer. Neve umożliwia dodanie maksymalnie trzech rzędów elementów do nagłówka i umieszczenie elementów w dowolnej pozycji:

Gdy jesteś zadowolony z konfiguracji nagłówka, zapisz zmiany w motywie, klikając przycisk Opublikuj u góry Customizera.

Pamiętaj, że wszelkie zmiany wprowadzone za pomocą narzędzia Customizer będą miały zastosowanie tylko do aktywnego motywu. Jeśli zmienisz motywy, musisz ponownie edytować nagłówek WordPress.

2. Użyj pełnej edycji witryny (i kompatybilnego motywu)

Pełna edycja witryny to nowsza funkcja, która umożliwia edycję szablonów motywów za pomocą Edytora bloku. Działa to tylko w przypadku motywów z blokadą, więc może być lub nie być dostępne w Twojej witrynie.

Aby sprawdzić, czy Twój motyw obsługuje pełną edycję witryny, otwórz menu Wygląd i poszukaj opcji Edytor :

Wybierz to i otworzy się Edytor bloku. Jednak będziesz edytować szablony motywów, a nie poszczególne strony lub posty.

Domyślnie edytor otworzy się na szablonie strony głównej, który powinien zawierać element Header :

Pamiętaj, że niektóre bloki będą wyświetlane jako symbole zastępcze tylko podczas korzystania z pełnej edycji witryny. To dlatego, że to narzędzie nie służy do edycji pojedynczych bloków, ale całych układów.

Podczas edycji nagłówka masz pełną kontrolę nad tym, jakie bloki i elementy mają zostać uwzględnione. Jeśli otworzysz narzędzie Widok listy , zobaczysz zestawienie tego, jakie bloki aktualnie zawiera nagłówek:

Na tym etapie możesz dodać lub usunąć bloki z nagłówka. Aby usunąć lub edytować istniejący blok, wybierz go i użyj menu kontekstowego, które pojawi się na ekranie, gdy to zrobisz:

Kiedy wybierzesz blok, możesz go również edytować za pomocą Bloku menu ustawień po prawej stronie ekranu. To menu zazwyczaj zawiera opcje stylizacji, które różnią się w zależności od edytowanego bloku:

Aby dodać nowy blok, wybierz element Header i poszukaj ikony znaku plus . Ten przycisk otworzy menu, które pozwala wybrać blok do dodania:

Inną przydatną funkcją edytora całej witryny jest możliwość wizualnej edycji menu. Aby to zrobić, po prostu wybierz menu za pomocą bloku nawigacyjnego . Zobaczysz opcję dodawania nowych linków, tworzenia nowego menu i przełączania się między istniejącymi:

Gdy jesteś zadowolony ze zmian w nagłówku , kliknij Zapisz . Spowoduje to zapisanie zmian w szablonie nagłówka motywu i zostaną one automatycznie odzwierciedlone w Twojej witrynie.

3. Edytuj nagłówek za pomocą kreatora stron WordPress

Niektóre wtyczki do tworzenia stron WordPress oferują opcje edycji nagłówka WordPress. Na przykład Elementor Pro zawiera narzędzie Theme Builder, do którego można uzyskać dostęp dzięki licencji premium.

Jeśli nie masz dostępu do Elementor Pro, możesz skorzystać z bezpłatnego rozszerzenia innej firmy, takiego jak wtyczka Elementor Header & Footer Builder na WordPress.org.

Pokażemy Ci jednak, jak to zrobić, używając Elementor Pro i jego funkcji Theme Builder.

W praktyce Kreator motywów Elementor działa podobnie do pełnej edycji witryny.

Aby uzyskać dostęp do Kreatora motywów, przejdź do Szablony > Kreator motywów . Wybierz opcje Nagłówek w części SITE PARTS i poszukaj istniejących szablonów po prawej stronie. Powinien być tylko jeden szablon nagłówka i możesz kliknąć przycisk Edytuj obok niego:

Spowoduje to uruchomienie edytora Elementor. Tutaj możesz wybrać budowanie nagłówka za pomocą bloków Elementora lub importowanie gotowych szablonów. Jeśli klikniesz ikonę folderu w treści edytora, zobaczysz, do jakich szablonów nagłówków masz dostęp:

Jeśli korzystasz z Elementora, zalecamy skorzystanie z tych szablonów. Umożliwia to eksperymentowanie z wieloma stylami nagłówków, które można edytować, dodając lub dostosowując moduły:

Jeśli nie znasz się na korzystaniu z Elementora, ten kreator stron umożliwia wybieranie modułów za pomocą menu po lewej stronie. Możesz przeciągnąć te moduły na swoją stronę, która pojawi się w podglądzie po prawej stronie ekranu.

Korzystając z Kreatora motywów, edytujesz tylko określony szablon motywu. Jednak nadal możesz korzystać z pełnej gamy modułów i opcji konfiguracyjnych, które oferuje Elementor.

Po zakończeniu edycji szablonu nagłówka zapisz go za pomocą przycisku Opublikuj . Następnie Elementor poprosi Cię o wybranie, na których stronach szablon powinien się wyświetlać:

O ile nie płacisz już za licencję premium Elementor, narzędzie Theme Builder może samo w sobie nie uzasadniać zakupu. Robi dokładnie to, co robi pełna edycja witryny, ale za dodatkową opłatą. Główną różnicą jest to, że możesz korzystać z szerszej gamy modułów Elementora, a jeśli już korzystasz z Elementora, łatwiej będzie upewnić się, że projekt nagłówka jest zgodny z resztą witryny.

4. Dodaj niestandardowy kod do nagłówka za pomocą wtyczki

Zazwyczaj korzystanie z wtyczek jest najłatwiejszym sposobem na wdrożenie dostosowań w WordPress. Jednak zwykle nie dzieje się tak w przypadku nagłówków. Jeśli potrzebujesz wtyczki, która umożliwia wizualną edycję nagłówków, musisz użyć narzędzia do tworzenia stron. Większość kreatorów stron oferujących tę funkcjonalność jest płatna, jak omówiliśmy w poprzedniej sekcji.

Darmowe wtyczki, które umożliwiają dostosowanie nagłówka, zazwyczaj oferują tylko łatwiejszy sposób dodania do niego niestandardowego kodu. Alternatywą jest ręczne edytowanie plików motywu za pomocą motywu podrzędnego, co może być onieśmielające (i ryzykowne), chyba że masz doświadczenie w tworzeniu stron internetowych.

Jednym z fantastycznych przykładów takiej wtyczki jest Header Footer Code Manager. To narzędzie umożliwia dodawanie fragmentów kodu HTML, CSS i JavaScript do nagłówka i/lub stopki oraz wybieranie, na których stronach te fragmenty będą się ładować:

Gdy wtyczka jest aktywna, przejdź do strony HFCM > Dodaj nowe fragmenty na pulpicie nawigacyjnym. Tutaj możesz wybrać rodzaj fragmentu, który chcesz dodać, gdzie powinien być wyświetlany i czy dodać go do nagłówka lub stopki:

Jeśli planujesz dodać nowe elementy do nagłówka, musisz użyć HTML. Aby zmienić styl nagłówka i zawartych w nim elementów, użyj fragmentów CSS.

Główną wadą tego podejścia jest to, że musisz sprawdzić kod nagłówka, aby zobaczyć, jakich klas i identyfikatorów używa, aby dodać do nich CSS. Może to być czasochłonny proces, ponieważ dodajesz nowe fragmenty kodu, sprawdzasz, czy zmiany działają, i dostosowuj kod, aż będziesz zadowolony z wyników.

Dostosuj nagłówek WordPress już dziś

Masz pytania dotyczące edycji nagłówka w WordPressie? Porozmawiajmy o nich w sekcji komentarzy poniżej!