Jak dostosować własny nagłówek WordPress (przewodnik dla początkujących)

Ulepszenie twojej witryny internetowej WordPress za pomocą własnego nagłówka to świetny pomysł zarówno pod względem wyglądu, jak i doświadczenia użytkownika.

Podczas gdy wiele motywów WordPress oferuje wbudowane nagłówki, dostosowanie ich pozwala na dodanie istotnych elementów, takich jak ważne odnośniki, ikonki społecznościowe i wyszukiwarka witryn.

Funkcje te mogą sprawić, że twoja witryna internetowa będzie bardziej przyjazna dla użytkownika i profesjonalna. Ponadto dobrze zaprojektowany nagłówek może znacząco wpłynąć na pierwsze wrażenie odwiedzających na temat twojej witryny.

W tym przewodniku wykorzystamy nasze ponad 16-letnie doświadczenie w zarządzaniu witrynami internetowymi WordPress, aby pokazać ci, jak krok po kroku dostosować własny nagłówek WordPress.

Czym jest nagłówek w WordPress?

Nagłówek twojej witryny internetowej to górna sekcja każdej strony w witrynie WordPress i prawdopodobnie pierwsza rzecz, którą widzą odwiedzający. Często wyświetla on logo i tytuł twojej witryny internetowej, menu nawigacyjne i inne ważne elementy, które użytkownicy powinni zobaczyć jako pierwsze.

Na przykład, oto nasz obszar nagłówków na WPBeginner, który co miesiąc widzą miliony czytelników.

Dostosowując nagłówek twojej witryny, możesz nadać mu unikatowy charakter i uczynić go bardziej użytecznym dla klientów. Możesz umieszczać odnośniki do twoich najpopularniejszych stron, wyświetlać ikonki społecznościowe lub numer telefonu firmowego, a także wyświetlać przyciski wezwania do działania w celu zwiększenia liczby konwersji.

W poniższych sekcjach pokażemy, jak łatwo dostosować własny nagłówek WordPress. Możesz użyć poniższych odnośników, aby przejść do sekcji, którą chcesz przeczytać:

Gotowy? Zaczynajmy.

Dostosuj nagłówek za pomocą konfiguratora motywu WordPress

Popularne motywy WordPress umożliwiają korzystanie z konfiguratora motywów WordPress w celu wprowadzania zmian w obszarze nagłówka twojej witryny. Funkcja ta jest czasami nazywana własnym nagłówkiem, ale należy pamiętać, że nie wszystkie motywy ją obsługują.

Powinieneś zacząć od przejścia do Wygląd ” Dostosuj w twoim obszarze administracyjnym WordPress.

Twój motyw może zawierać sekcję „Nagłówek” w konfiguratorze lub zapewniać opcje nagłówka w sekcji „Kolor”. Różni się to jednak w zależności od motywu. Oto kilka przykładów.

Niektóre motywy, takie jak Twenty Twenty-One, w ogóle nie oferują opcji konfiguratora nagłówków. W takim przypadku zalecamy użycie wtyczki do tworzenia motywów typu „przeciągnij i upuść”, takiej jak SeedProd, którą omówimy poniżej.

Motyw Twenty Sixteen umożliwia dodanie obrazka tła do nagłówka, a nawet dodanie losowych obrazków nagłówka.

Niektóre darmowe i premium motywy WordPress oferują jeszcze więcej opcji konfiguratora motywu.

Na przykład, możesz zmienić styl pisma w nagłówku, twój układ, kolory i wiele więcej. Ale nadal będzie się to różnić w zależności od motywu i jesteś ograniczony do tego, na co pozwala twórca motywu.

W tym przewodniku pokażemy, jak utworzyć własny nagłówek za pomocą konfiguratora motywu w motywie Astra.

Astra ma dedykowaną opcję „Konstruktora nagłówków” we własnym panelu konfiguratora po lewej stronie. Tutaj znajdziesz różne ustawienia do edycji wyglądu i stylu nagłówka. Możesz zbudować własny nagłówek, dodając bloki, tak jak podczas edycji wpisu na blogu lub strony w edytorze treści WordPress.

Aby rozpocząć, wystarczy najechać kursorem na pusty obszar w nagłówku i kliknąć ikonkę „+”, aby dodać blok nagłówka.

Następnie możesz wybrać dowolny blok, który chcesz dodać do własnego nagłówka. Można na przykład dodać blok widżetu, blok konta, blok wyszukiwania i inne.

Kreator nagłówków umożliwia również przeciąganie i upuszczanie bloków w celu umieszczenia ich nad lub pod nagłówkiem.

Następnie można dalej konfigurować każdy blok dodawany do nagłówka.

Na przykład, wybranie bloku Tytuł i logo witryny daje opcje przesłania tytułu i logo witryny, zmiany szerokości logo, wyświetlania sloganu witryny i nie tylko.

Oprócz tego można również zmienić kolor tła nagłówka lub dodać obrazek tła, który pojawi się w nagłówku.

Po zakończeniu edycji własnego nagłówka wystarczy kliknąć przycisk „Opublikuj”.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat korzystania z konfiguratora motywów WordPress.

Dostosuj nagłówek za pomocą pełnego edytora witryny WordPress

WordPress dodał pełną edycję witryny do WordPressa w wersji 5.9. Jeśli twój motyw obsługuje tę nową funkcję, to zastępuje ona konfigurator motywów. Jednak w tej chwili istnieje tylko kilka motywów, które współpracują z edytorem pełnej witryny.

Jeśli używasz zgodnego motywu, możesz dostosować swój nagłówek, przechodząc do Wygląd ” Edytor. Spowoduje to uruchomienie pełnego edytora witryny, który jest podobny do edytora bloków używanego do pisania wpisów i stron WordPress.

Po kliknięciu nagłówka, powiadomienie zmieni nazwę szablonu u góry strony na „Nagłówek strony”.

Teraz, po kliknięciu ikonki „Ustawienia” na pasku narzędzi, pojawią się opcje umożliwiające dostosowanie układu, koloru, obramowania i wymiarów nagłówka.

Jako przykład zmienimy kolor tła nagłówka. Najpierw należy rozwinąć sekcję „Kolor”, a następnie kliknąć opcję „Tło”.

W wyświetlonym oknie podręcznym należy najpierw wybrać jednolity kolor lub gradient. Następnie możesz wybrać jeden z wielu gotowych kolorów. Po kliknięciu na wybrany kolor, tło twojego nagłówka zostanie natychmiast zmienione.

Więcej opcji konfiguratora można znaleźć, klikając ikonkę „Style” w prawym górnym rogu strony. Umożliwi to zmianę kroju pisma, kolorów i układu nagłówka.

Aby dowiedzieć się więcej o tym, jak działa pełny edytor witryny, zapoznaj się z naszym przewodnikiem dla początkujących, jak dostosować swój motyw WordPress.

Tworzenie własnych nagłówków i układów stron za pomocą SeedProd

Jeśli chcesz mieć pełną kontrolę nad nagłówkami, stopkami i panelami bocznymi, aby nadać Twojej witrynie internetowej unikatowy wygląd, zalecamy skorzystanie z SeedProd.

SeedProd to najlepsza wtyczka do tworzenia motywów WordPress, która umożliwia łatwe tworzenie własnego konfiguratora WordPress bez pisania jakiegokolwiek kodu. Obejmuje to tworzenie nagłówków, stopek i wszystkiego innego, co jest potrzebne do stworzenia atrakcyjnego motywu WordPress.

Możesz nawet utworzyć wiele własnych stylów nagłówków dla różnych stron i sekcji twojej witryny internetowej.

Uwaga: Darmowa wersja SeedProd umożliwia tworzenie własnych stron docelowych, w tym własnych nagłówków. Będziesz jednak potrzebował wersji Pro, aby tworzyć w pełni własne motywy, które obejmują układy nagłówków dla całej witryny.

Najpierw zalecamy skorzystanie z naszego przewodnika na temat łatwego tworzenia własnego motywu WordPress bez żadnego kodu. Gdy już to zrobisz, możesz zacząć dostosowywać swój nagłówek w edytorze SeedProd.

Aby uzyskać dostęp do edytora, wystarczy kliknąć odnośnik „Edytuj projekt” znajdujący się pod nagłówkiem.

Spowoduje to otwarcie nagłówka w edytorze przeciągnij i upuść SeedProd.

Z tego miejsca możesz łatwo dostosować swój nagłówek, dodając nowe bloki.

Dostępne są bloki dla tagów szablonów, takich jak logo witryny lub twój widżet WordPress, a także zaawansowane bloki, takie jak licznik czasu, menu nawigacyjne lub przyciski udostępniania społecznościowego.

Najlepsze jest to, że każdy blok można dodatkowo dostosować za pomocą konfiguratora motywu. Można na przykład zmienić rozmiar i wyrównanie twojego logo lub wybrać strony, które mają być wyświetlane w menu nawigacyjnym. Pozwala nawet na dodanie obrazka w nagłówku.

Dzięki SeedProd możesz również dodać całą sekcję do szablonu nagłówka twojego motywu.

Sekcje to grupy bloków, których możesz używać w różnych obszarach twojej witryny internetowej. Obejmują one nagłówki, stopki, funkcje, referencje, wezwania do działania i inne.

Aby użyć sekcji nagłówków, należy przejść do karty „Sekcje” w panelu „Projekt”.

Następnie wybierz sekcję nagłówka, której chcesz użyć w swojej witrynie internetowej. SeedProd oferuje szablony z wieloma sekcjami, których możesz użyć.

Przejdź dalej i zacznij dostosowywać sekcję nagłówka.

Gdy już będziesz zadowolony ze swojego własnego nagłówka, kliknij przycisk „Zapisz”, aby zapisać zmiany.

Teraz możesz opublikować swój własny nagłówek.

Po prostu przejdź do SeedProd ” Theme Builder z twojego kokpitu WordPress i kliknij przełącznik obok opcji „Włącz motyw SeedProd” na „Tak”.

Po włączeniu tej opcji, SeedProd zastąpi Twój domyślny motyw WordPress nowym, własnym motywem i nagłówkiem.

Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć nowy własny nagłówek w działaniu.

Tworzenie różnych własnych nagłówków dla każdej strony

Czy wiesz, że za pomocą SeedProd możesz tworzyć własne nagłówki dla różnych stron?

Kreator motywów umożliwia dodawanie własnych nagłówków dla każdej strony w twojej witrynie internetowej WordPress. W ten sposób możesz wyświetlać dostosowany nagłówek dla różnych kategorii, tagów, typów wpisów, typów stron i nie tylko.

Aby rozpocząć, musisz przejść do SeedProd ” Theme Builder z kokpitu WordPress i kliknąć przycisk „Utwórz nowy motyw”.

Pojawi się nowe wyskakujące okno, w którym należy wpisz szczegóły szablonu motywu.

Następnie wpisz nazwę twojego szablonu motywu. Następnie wybierz „Nagłówek” jako rodzaj szablonu z rozwijanego menu. Pole „Priorytet” można pozostawić puste.

Następnie musisz wpisz warunki wyświetlania twojego własnego nagłówka. Na przykład, użyliśmy warunków, w których będzie on wyświetlany na wszystkich wpisach i stronach, które znajdują się w kategorii poradników.

Nie zapomnij kliknąć przycisku „Zapisz” po zakończeniu.

Następnie przejdź do edycji własnego nagłówka za pomocą kreatora motywów SeedProd typu „przeciągnij i upuść”.

Po zakończeniu edycji własnego nagłówka wystarczy kliknąć przycisk „Zapisz” u góry.

Więcej pomysłów na dostosowanie nagłówka za pomocą SeedProd można znaleźć w naszym przewodniku dla początkujących, jak łatwo stworzyć własny konfigurator motywu WordPress za pomocą SeedProd.

Dodawanie własnego nagłówka dla każdej kategorii

Większość witryn internetowych wyświetla ten sam nagłówek na wszystkich wpisach, stronach, kategoriach i stronach archiwum. Można jednak wyświetlić inny nagłówek dla każdej kategorii WordPress.

Można to zrobić, dodając kod do plików twojego motywu, ale będziesz mieć większą kontrolę, korzystając z kreatora motywów.

Pokazaliśmy wcześniej, jak dostosować twój nagłówek za pomocą wtyczki SeedProd do tworzenia motywów. SeedProd umożliwia również tworzenie wielu własnych nagłówków i wyświetlanie ich dla różnych kategorii przy użyciu logiki warunkowej.

Aby utworzyć nowy nagłówek, należy przejść do SeedProd ” Theme Builder i kliknąć pomarańczowy przycisk „Add New Theme Template”. Alternatywnie, możesz zduplikować twój obecny nagłówek i użyć go jako punktu wyjścia.

Pojawi się wyskakujące okno, w którym można nadać szablonowi motywu nazwę i wybrać „Nagłówek” z rozwijanego menu Rodzaj.

Należy również wpisz priorytet. Jeśli więc więcej niż jeden nagłówek spełnia warunki dla danej strony, wyświetlony zostanie nagłówek o największym priorytecie.

Domyślny nagłówek ma priorytet 0, więc upewnij się, że wpiszesz 1 lub wyższy.

Następnie należy skonfigurować jeden lub więcej warunków. Dzięki temu SeedProd będzie wiedział, kiedy wyświetlić określony nagłówek. Wystarczy wybrać warunki z rozwijanego menu.

W pierwszych dwóch menu należy wybrać opcję „Uwzględnij”, a następnie „Ma kategorię”. W ostatnim polu należy wpisać rodzaj nazwy kategorii, w której ma być wyświetlany nagłówek.

Możesz łatwo wyświetlić ten sam nagłówek dla wielu kategorii, klikając przycisk „Dodaj warunek” i dodając kolejną kategorię. Po zakończeniu upewnij się, że kliknąłeś przycisk „Zapisz”, aby zapisać nowy nagłówek.

Teraz możesz dostosować wygląd każdego nowego nagłówka za pomocą edytora przeciągnij i upuść SeedProd, jak pokazaliśmy wcześniej.

Aby dowiedzieć się więcej, w tym jak to zrobić za pomocą kodu, zobacz nasz przewodnik na temat dodawania własnego nagłówka, stopki lub panelu bocznego dla każdej kategorii.

Dodaj obszar widżetów do nagłówka twojego WordPressa

Jeśli budujesz własny motyw od podstaw za pomocą kodu, możesz dodać widżet WordPress do nagłówka, aby przyciągnąć uwagę twoich klientów.

Widżety umożliwiają łatwe dodawanie bloków treści do określonych sekcji twojego motywu, ale należy pamiętać, że nie każdy motyw zawiera obszar widżetów nagłówka.

Wspomnieliśmy wcześniej, jak proste jest dodawanie widżetów do twojego nagłówka za pomocą kreatora motywów SeedProd. Ale co, jeśli chcesz dodać widżet do nagłówka zwykłego motywu WordPress?

Niektóre motywy, takie jak motyw Astra, pozwalają to zrobić za pomocą konfiguratora motywów WordPress. Astra dodaje opcję o nazwie „Header Builder”, aby całkowicie konfigurować nagłówek, w tym dodawać widżety.

Jeśli twój motyw WordPress nie ma obecnie obszaru widżetów w nagłówku, musisz dodać go ręcznie.

Podczas gdy ogólnym podejściem jest dodawanie fragmentów kodu do pliku functions.php, łatwiejszym i bezpieczniejszym podejściem jest użycie WPCode. Ta wtyczka upraszcza proces dodawania fragmentów kodu bez uszkadzania twojej witryny.

Aby rozpocząć, upewnijmy się, że masz zainstalowaną i włączaną wtyczkę fragmentów kodu WPCode na twojej witrynie internetowej WordPress. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączaniu, będziesz chciał przejść do Code Snippets „ + Add Snippets.

Teraz pierwszą rzeczą, którą musisz zrobić, jest utworzenie tytułu fragmentu kodu. Na przykład, nasz nazwaliśmy „Dodawanie widżetu WordPress do obszaru nagłówka”. Drugim krokiem jest rozwinięcie listy rozwijanej rodzaju kodu i wybranie opcji „Fragment kodu PHP”.

Po zakończeniu wystarczy skopiować poniższy kod i wkleić go w sekcji „Podgląd kodu”.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Ten kod zarejestruje nowy nagłówek lub obszar gotowy na widżet dla twojego motywu.

Oto jak może to wyglądać w twoim edytorze WPCode:

Aby włączyć fragment kodu, możesz przełączyć przełącznik obok niebieskiego przycisku „Zapisz fragment kodu” na „Aktywny”. Następnie nie zapomnij kliknąć przycisku „Zapisz fragment kodu”, aby zapisać twoje zmiany.

Po włączeniu przełącznika i zapisaniu twoich zmian, edytor powinien wyglądać następująco:

Teraz, jeśli przejdziesz do Wygląd ” Widżety, zobaczysz nowy obszar widżetów oznaczony jako „Obszar widżetów nagłówka własnego”.

Tutaj dodasz swój widżet. Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym przewodnikiem na temat dodawania i używania widżetów w WordPress.

W zależności od twojego motywu, może być również konieczne dodanie CSS do WordPressa, aby kontrolować sposób wyświetlania obszaru widżetu.

Aby uzyskać szczegółowe instrukcje, możesz zapoznać się z naszym przewodnikiem na temat dodawania widżetu WordPress do nagłówka twojej witryny internetowej.

Dodaj losowe obrazki nagłówka do twojego bloga WordPress

Innym sposobem na uatrakcyjnienie twoich nagłówków WordPress jest dodanie losowych obrazków do sekcji nagłówków.

Wyświetlanie losowo zmieniających się obrazków pomaga przyciągnąć uwagę odwiedzających i sprawić, że twoja treść będzie bardziej angażująca.

Aby dodać losowe obrazki nagłówków do twojego bloga WordPress, możesz użyć konfiguratora motywu i przesłać obrazki do sekcji nagłówków. Opcja ta może się różnić w zależności od używanego motywu WordPress.

Następnie wybierz opcję „Losuj przesłane nagłówki”.

Jeśli chcesz mieć większą kontrolę i elastyczność w wyświetlaniu losowych obrazków w sekcji nagłówków, możesz również użyć wtyczki WordPress.

Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem na temat dodawania losowych obrazków nagłówków do twojego bloga WordPress.

Dodawanie kodu do nagłówka twojej witryny internetowej (zaawansowane)

Wreszcie, jeśli chcesz dodać własny kod do sekcji nagłówka twojej witryny internetowej, możesz to łatwo zrobić z kokpitu WordPress. Ta metoda jest zalecana dla zaawansowanych użytkowników i może nie być odpowiednia dla początkujących, ponieważ bierze udział w edycji kodu i wymaga wiedzy technicznej.

Możesz znaleźć pliki nagłówków twojego motywu, przechodząc do Wygląd ” Edytor plików motywu z panelu administracyjnego WordPress. W plikach motywu „style.css” można przewinąć w dół do sekcji nagłówka witryny i dodać lub usuwać kod.

Uwaga: Nie zalecamy bezpośredniej edycji plików motywu, ponieważ najmniejszy błąd może uszkodzić witrynę i zepsuć projekt WordPress.

Łatwiejszym sposobem dodania własnego kodu do edycji nagłówka twojej witryny jest użycie WPCode.

Najpierw zainstaluj i włącz darmową wtyczkę WPCode. Więcej szczegółów można znaleźć w naszym przewodniku na temat instalacji wtyczki WordPress.

Po włączaniu, możesz przejść do Code Snippets ” Header & Footer z twojego kokpitu WordPress. Następnie wpisz własny kod w sekcji „Nagłówek”.

Po wpisz kod, kliknij przycisk „Zapisz zmiany”.

Więcej szczegółów można znaleźć w naszym przewodniku na temat dodawania kodu nagłówka i stopki w WordPress.

Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak dostosować twój nagłówek WordPress. Następnie możesz również zapoznać się z naszym artykułem na temat wyświetlania różnych paneli bocznych dla każdego wpisu i strony WordPress lub jak utworzyć przypięty pływający widżet paska bocznego w WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.