Niestandardowy nagłówek WordPress: co to jest i jak go utworzyć?

Jedną z najbardziej elastycznych i użytecznych funkcji, jakie WordPress kiedykolwiek wprowadził, są niestandardowe nagłówki. Jest to funkcja, która pozwala dostosować górną sekcję witryny WordPress, dając możliwość personalizacji jej według własnego uznania za pomocą niestandardowego szablonu nagłówka. Podobnie jak w przypadku większości funkcji WordPress, istnieje wiele sposobów dostosowania nagłówka za pomocą funkcji motywu, niestandardowego kodu lub wtyczki WordPress.

W tym artykule przeprowadzimy Cię przez te trasy i podamy kilka przykładów. Ale najpierw porozmawiajmy o nagłówkach WordPress i dlaczego zawracasz sobie głowę ich dostosowywaniem.

Dlaczego warto korzystać z niestandardowego nagłówka WordPress?

Nagłówek jest jednym z najważniejszych aspektów graficznych witryny, ponieważ jest pierwszą rzeczą, którą zauważą Twoi odwiedzający. W związku z tym warto sprawdzić, czy zmiana nagłówka witryny może poprawić wrażenia użytkownika. Na przykład możesz poprawić estetykę i wygląd nagłówka, aby Twoja wiadomość biznesowa była skuteczniej przekazywana odwiedzającym.

Hostuj swoją stronę internetową z Pressidium

60- DNIOWA GWARANCJA ZWROTU PIENIĘDZY

ZOBACZ NASZE PLANY

Co więcej, dobrze skonstruowany nagłówek może pomóc odwiedzającym łatwiej przeglądać Twoje treści i może być używany do delikatnego zachęcania ich do produktów lub usług, na których chcesz, aby się skoncentrowali.

Co właściwie możesz zmienić

Technicznie rzecz biorąc, prawie wszystko jest otwarte na zmiany w nagłówku witryny, w tym rozmiar czcionki, obrazy, schemat kolorów i tak dalej. Możesz dodać obszar widżetów, zastosować różne style dla określonych stron, ustawić logo według własnego uznania, zastosować przyciski CTA (wezwania do działania), zmodyfikować menu nawigacyjne i wiele więcej!

Jeśli w tym momencie jesteś przekonany, że potrzebujesz niestandardowego szablonu nagłówka, oto opcje, które są dostarczane z WordPressem zarówno dla programistów, jak i osób niebędących programistami.

Jak dostosować nagłówek w WordPressie

Przyjrzyjmy się niektórym z najpopularniejszych sposobów dostosowywania nagłówka.

Użyj konfiguratora swojego motywu

Aby użyć wbudowanego dostosowywania WordPress do edycji nagłówka, musisz najpierw sprawdzić, czy Twój motyw to obsługuje. Możesz wyszukać swój motyw w oficjalnej bibliotece motywów i użyć filtrów, aby dowiedzieć się, czy Twój bieżący motyw ma wbudowaną funkcję niestandardowych nagłówków.

Jeśli zainstalujesz jeden z motywów dołączonych do tej funkcji, zauważysz, że po aktywacji niektóre dodatkowe pozycje menu pojawiają się w menu „Wygląd”. Jeśli na przykład zainstalujesz i aktywujesz Blog Forever, otrzymasz to menu:

Po kliknięciu pozycji menu „Nagłówek” zostaniesz przeniesiony do opcji nagłówka.

W menu dostosowania możesz również znaleźć inne opcje, które pomogą Ci dostosować nagłówek.

Wiele opcji jest dostępnych tutaj. Możesz zmieniać kolory, dodawać widżety w nagłówku, takie jak media społecznościowe lub informacje kontaktowe, zmieniać hasło itp.

Ale co, jeśli Twój motyw nie jest jednym z motywów „edytowalnych nagłówków”?

Jak dodać obsługę niestandardowego nagłówka do swojego motywu?

Weźmy motyw GeneratePress jako przykład motywów, które nie obsługują tej funkcji. Jeśli zainstalujesz i aktywujesz ten motyw, nie zobaczysz żadnych opcji zmiany obrazu nagłówka w dostosowywaniu motywu.

Jeśli posiadasz pewne umiejętności kodowania i korzystasz z rdzenia WordPress w wersji 3.4 lub nowszej, możesz dość łatwo włączyć funkcję niestandardowego nagłówka. Możesz go łatwo dodać za pomocą wbudowanej funkcji add_theme_support() .

Przejdź do folderu swojego motywu, znajdź plik functions.php i otwórz go w swoim ulubionym edytorze. Następnie dodaj następujący wiersz:

 add_theme_support( 'custom-header' );

I to wszystko, teraz będziesz mógł zobaczyć opcję obrazu nagłówka na stronie dostosowania i w menu Wygląd. Możesz go użyć i przesłać obraz do swojego nagłówka.

Możesz także przekazać argumenty, aby ustawić dowolną z dostępnych opcji. Oto przykład, jak możesz ustawić rozmiar obrazu, dodając kod do functions.php:

 function mytheme_custom_header_setup() { $args = array( 'width' => 1000, 'height' => 250, ); add_theme_support( 'custom-header', $args ); } add_action( 'after_setup_theme', 'mytheme_custom_header_setup' );

After_setup_theme służy do zarejestrowania naszej funkcjonalności zaraz po zainicjowaniu motywu.

Jednak, jak możesz zauważyć, w nagłówku nie pojawia się żaden obraz, co jest normalne, ponieważ nie zrobiliśmy nic, aby go wyświetlić.

Jak wyświetlić obraz nagłówka

Aby wyświetlić obraz nagłówka, musisz użyć funkcji WordPress get_header_image() w następujący sposób:

 <?php if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; ?>

Możesz stąd przejść w dowolne miejsce, w zależności od wymagań i umiejętności kodowania. Możesz dodać tag lub dodatkowy tytuł nagłówka lub dowolny widżet motywu za pomocą ich haka i oczywiście dodać własny CSS, aby go dopracować.

Powinieneś wstawić ten fragment niestandardowego kodu do pliku szablonu nagłówka swojej instalacji WordPress. Ten plik nie jest taki sam dla wszystkich motywów. Jeśli nie wiesz, który to jest, możesz sprawdzić hierarchię szablonów lub zapomnieć o jakim pliku i dodać kod do nagłówka przez functions.php za pomocą funkcji wp_head().

 function my_custom_function(){ if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; }; add_action('wp_head', 'my_custom_function');

Należy również zauważyć, że takie dostosowania powinny być stosowane w motywie podrzędnym, aby zmiany nie zostały utracone po aktualizacji motywu.

Oczywiście, jeśli używasz motywu blokowego WordPress , takiego jak Twenty Twenty Two, który obsługuje pełny edytor witryn, sprawy mogą być jeszcze łatwiejsze. Więcej szczegółów na ten temat przedstawimy w przyszłym artykule.

Utwórz niestandardowy nagłówek za pomocą wtyczki WordPress

Istnieje wiele popularnych wtyczek, które mogą pomóc w dostosowaniu nagłówka WordPress. W rzeczywistości zbyt wiele, by omówić je w tym artykule.

Mając to na uwadze, jest taki, który warto sprawdzić, ponieważ może być używany nie tylko do dostosowywania nagłówka, ale także jako przydatne narzędzie do wstawiania kodu do „właściwego” obszaru witryny w razie potrzeby. Przywitaj się z wtyczką „Wstaw nagłówki i stopki”.

Wtyczka Wstaw nagłówki i stopki jest przydatna na wiele sposobów. Nie tylko pozwala na dodanie kodu do nagłówka, stopki lub treści, ale także utrzymuje wszystko w jednym miejscu, w "Ustawienia -> Wstaw nagłówki i stopki".

Nie jest to jednak zalecane dla osób niebędących programistami, ponieważ nadal musisz wstawiać skrypty. Jeśli chcesz dostosować swój nagłówek i uniknąć kodowania, zalecamy wtyczkę Add Custom Header Images, którą zapewnia WordPress.

Wszystko, co musisz zrobić po zainstalowaniu i aktywacji, to utworzyć stronę (widoczną lub prywatną) zatytułowaną „Nagłówki” i przesłać do niej obrazy.

Wtyczka a) włącza opcję „Nagłówek” dostosowywania i b) analizuje wszystkie obrazy przesłane na stronę „Nagłówki” i udostępnia je jako sugerowane nagłówki w dostosowywaniu. Całkiem fajne!

Wniosek

Twój nagłówek WordPress jest pierwszą rzeczą, jaką każdy zobaczy w Twojej witrynie. Dlatego warto zadbać o to, aby wyglądała jak najlepiej! Mam nadzieję, że powyższe informacje dały ci kilka wskazówek i wskazówek, jak to zrobić, niezależnie od tego, czy jesteś zadowolony z kodowania, czy nie.