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

Chcesz wyświetlić własny nagłówek dla twojej witryny internetowej WordPress?

Wiele motywów WordPress posiada wbudowany nagłówek, który znajduje się na górze każdej strony. Konieczne może być dostosowanie go w celu dodania ważnych odnośników, ikonek społecznościowych, wyszukiwarki witryn lub innych elementów, aby zrobić dobre pierwsze wrażenie.

W tym artykule pokażemy ci, jak dostosować nagłówek WordPressa, a nawet stworzyć w pełni własny nagłówek dla całej twojej witryny lub określonych stron.

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ą zobaczą odwiedzający.

Często wyświetla logo i tytuł twojej witryny internetowej, menu nawigacyjne i inne ważne elementy, które importer chce zobaczyć jako pierwsze.

Na przykład, oto nasz obszar nagłówka na WPBeginner, który miliony czytelników widzą każdego miesiąca.

Dostosowując nagłówek twojej witryny, możesz nadać mu unikatowy wygląd 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 do firmy, a także wyświetlać przyciski wezwania do działania w celu zwiększenia konwersji.

Mając to na uwadze, przyjrzyjmy się, 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ć.

• Dostosuj nagłówek za pomocą konfiguratora motywu WordPress
• Dostosuj nagłówek za pomocą pełnego edytora witryny WordPress
• Tworzenie własnych nagłówków i układów stron za pomocą SeedProd
• Dodawanie własnego nagłówka dla każdej kategorii
• Dodawanie obszaru widżetów do twojego nagłówka WordPress
• Dodawanie losowych obrazków nagłówka do twojego bloga WordPress
• Dodawanie własnego kodu do nagłówka twojej witryny internetowej (zaawansowane)

Dostosuj nagłówek za pomocą konfiguratora motywu WordPress

Wiele popularnych motywów WordPress umożliwia korzystanie z konfiguratora motywów WordPress w celu wprowadzania zmian w obszarze nagłówka twojego układu WordPress. Ta funkcja jest czasami nazywana własnym nagłówkiem, ale 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 dodać sekcję „Nagłówek” do konfiguratora lub dodać opcje nagłówka w sekcji „Kolor”, ale różni się to 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łówka. 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 dodawanie losowych obrazków nagłówka.

Niektóre darmowe i premium motywy WordPress oferują jeszcze więcej opcji dostosowywania motywu. Na przykład, możesz zmienić styl pisma w nagłówku, układ, kolory i wiele więcej. Jesteś jednak ograniczony do tego, na co pozwala twórca motywu.

Na przykład można utworzyć własny nagłówek za pomocą konfiguratora motywu z motywem Astra.

Astra posiada dedykowaną opcję „Header Builder” w twoim panelu po lewej stronie. Znajdziesz tu 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.

Ponadto kreator nagłówków umożliwia przeciąganie i upuszczanie bloków oraz umieszczanie ich nad lub pod nagłówkiem.

Każdy blok dodany do nagłówka można dodatkowo dostosować do własnych potrzeb.

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 motywu. 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 blokowego 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 kliknąć sekcję „Kolor”, aby ją rozwinąć. Następnie należy kliknąć opcję „Tło”.

Pojawi się wyskakujące okienko umożliwiające wybór jednolitego koloru lub gradientu. Dostępna będzie również pewna liczba kolorów do wyboru. Po kliknięciu koloru 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: Możesz użyć darmowej wersji SeedProd do tworzenia własnych stron docelowych, w tym niestandardowych nagłówków, ale będziesz potrzebować wersji Pro, aby tworzyć w pełni niestandardowe motywy, które obejmują układy nagłówków dla całej witryny.

Po pierwsze, zalecamy skorzystanie z naszego przewodnika na temat łatwego tworzenia własnego motywu WordPress bez żadnego kodu. Gdy już to zrobisz, SeedProd ułatwi Ci dostosowanie własnego nagłówka.

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.

Istnieją bloki dla tagów szablonów, takich jak logo witryny, dowolny z twoich widżetów WordPress i 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 grupa bloków, których możesz używać w różnych obszarach twojej witryny internetowej. Obejmuje to nagłówki, stopki, funkcje, referencje, wezwania do działania i inne.

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

Następnie wybierz sekcję nagłówka, której chcesz użyć w swojej witrynie internetowej. SeedProd oferuje wiele szablonów sekcji, których możesz użyć.

Następnie przejdź dalej i dostosuj 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 strony 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, dostosowanym motywem i nagłówkiem.

Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć nowy niestandardowy 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 treści, typów stron i innych.

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

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

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

Następnie 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 można przejść 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ć własny 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.

Zostanie wyświetlone wyskakujące okienko, w którym można nadać szablonowi motywu nazwę i wybrać „Nagłówek” z rozwijanego menu Rodzaj.

Należy również wpisz priorytet. Jest on używany, jeśli więcej niż jeden nagłówek spełnia warunki dla danej strony, a wyświetlony zostanie nagłówek o najwyższym 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ę „Include”, a następnie „Has Category”. 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 tworzysz własny konfigurator motywu od podstaw przy użyciu kodu, być może chcesz 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 nie każdy motyw zawiera obszar widżetów w nagłówku.

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. Na przykład Astra dodaje opcję o nazwie „Header Builder”, która pozwala całkowicie dostosować nagłówek, w tym dodawać widżety.

Jeśli twój motyw WordPress nie ma obecnie obszaru widżetów WordPress w nagłówku, musisz dodać go ręcznie, dodając następujący kod do pliku functions.php, we wtyczce specyficznej dla witryny lub za pomocą wtyczki fragmentów kodu.

Jest to bardziej zaawansowana opcja, ponieważ musisz wiedzieć, gdzie umieścić kod i jak go stylizować za pomocą CSS.

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 rejestruje nowy panel boczny lub obszar gotowy na widżet dla twojego motywu.

Jeśli przejdziesz do Wygląd ” Widżety, zobaczysz nowy obszar widżetów oznaczony jako „Własny obszar widżetów nagłówka”. Teraz możesz utworzyć swój widżet w tym nowym obszarze.

Na koniec musisz dodać kod do szablonu nagłówka twojego motywu znajdującego się w pliku header.php. Spowoduje to dodanie utworzonego wcześniej obszaru widżetów do nagłówka, dzięki czemu widżety będą wyświetlane na twojej witrynie internetowej.

Musisz skopiować ten fragment kodu i wkleić go tam, gdzie chcesz, aby widżet był wyświetlany.

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
 
<?php endif; ?>

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ć więcej informacji, zapoznaj 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łówka.

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 obrazy nagłówka do twojego bloga WordPress, możesz użyć konfiguratora motywu i przesłać obrazki do sekcji nagłówka. 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łówka, 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łówka 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 nie jest odpowiednia dla początkujących, ponieważ obejmuje edycję kodu i wymaga wiedzy technicznej.

Pliki nagłówka twojego motywu można znaleźć, 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ć twoją witrynę internetową i zepsuć jej wygląd.

Ł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. Możesz również dowiedzieć się, jak wybrać najlepsze oprogramowanie do projektowania stron internetowych lub zapoznać się z naszą listą wtyczek, które musisz mieć, aby rozwinąć swoją witrynę.

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.