Jak dodać widżet WordPress do nagłówka witryny

Czy chcesz dodać widżet WordPress do obszaru nagłówka witryny? Widżety umożliwiają łatwe dodawanie bloków treści do wyznaczonych sekcji motywu. W tym artykule pokażemy, jak łatwo dodać widżet WordPress do nagłówka witryny.

Uwaga: Jest to samouczek na poziomie średniozaawansowanym. Będziesz musiał dodać kod do plików motywów WordPress i napisać CSS.

Dlaczego I Kiedy potrzebujesz widżetu nagłówka na swojej stronie?

Widżety umożliwiają łatwe dodawanie bloków treści do wyznaczonego obszaru w szablonie WordPress. Te wyznaczone obszary nazywane są paskami bocznymi lub obszarami gotowymi do widgetów.

Obszar gotowy do widgetu w nagłówku lub przed treścią może być używany do wyświetlania reklam, najnowszych artykułów lub czegokolwiek innego.

Ten konkretny obszar nazywa się „Below the fold” i wszystkie popularne witryny używają go, aby pokazać naprawdę ważne rzeczy.

Zazwyczaj motywy WordPress dodają paski boczne obok treści lub w obszarze stopki. Niewiele motywów WordPress dodaje obszary gotowe do widżetów nad treścią lub w nagłówku.

Dlatego w tym artykule omówimy, jak Dodać obszar widżetów do nagłówka witryny WordPress.

Punkt 1. Tworzenie obszaru widżetu nagłówka

Po pierwsze, musimy utworzyć niestandardowy obszar widżetów. Ten krok pozwoli Ci zobaczyć Niestandardowy obszar widżetu na Wygląd ” Widgety strona w panelu WordPress.

Musisz dodać ten kod do funkcji motywu.plik php.

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 pasek boczny lub gotowy obszar widgetu dla Twojego motywu.

Możesz teraz przejść do Wygląd ” Widgety strona, a zobaczysz nowy obszar widżetu o nazwie „Niestandardowy obszar widżetu nagłówka”.

Śmiało, dodaj widżet tekstowy do nowo utworzonego obszaru widżetu i zapisz go. Zobacz nasz przewodnik, jak dodawać i używać widżetów w WordPress, aby uzyskać szczegółowe instrukcje dotyczące dodawania widżetów.

Krok 2: Wyświetl Niestandardowy Widżet Nagłówka

Jeśli teraz odwiedzisz swoją witrynę, nie będziesz mógł zobaczyć widżetu tekstowego, który właśnie dodałeś do nowo utworzonego widżetu nagłówka.

Dzieje się tak dlatego, że jeszcze nie powiedzieliśmy WordPressowi, gdzie wyświetlać ten obszar widżetów.

Zróbmy to w tym kroku.

Będziesz musiał edytować nagłówek.plik php w szablonie i dodaj ten kod, w którym chcesz wyświetlić Niestandardowy obszar widżetu.

<?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;?>

Nie zapomnij zapisać zmian.

Możesz teraz odwiedzić swoją stronę internetową, a zobaczysz obszar widżetu nagłówka.

Zauważysz, że wygląda trochę matowy. To tam będziesz potrzebował CSS, aby wyglądał lepiej.

Krok 3: stylizuj obszar widżetu nagłówka za pomocą CSS

W zależności od motywu, będziesz musiał dodać CSS, aby kontrolować, jak Obszar widżetu nagłówka i każdy widżet w nim jest wyświetlany.

Łatwiejszym sposobem jest użycie wtyczki CSS Hero. Pozwala na użycie intuicyjnego interfejsu użytkownika do zmiany CSS dowolnego motywu WordPress. Więcej szczegółów znajdziesz w naszej recenzji CSS Hero.

Jeśli nie chcesz używać wtyczki, możesz dodać niestandardowy css do swojego motywu, odwiedzając Wygląd ” Dostosuj strona.

Spowoduje to uruchomienie interfejsu dostosowywania motywów WordPress. Musisz kliknąć kartę „dodatkowy CSS”.

Dodatkowa zakładka CSS w edytorze motywów umożliwia dodawanie niestandardowego CSS podczas oglądania zmian pojawiających się w podglądzie na żywo.

Ze względu na ten samouczek Zakładamy, że będziesz używać tego obszaru tylko do dodawania pojedynczego widżetu do wyświetlania banerów reklamowych lub niestandardowego widżetu menu.

Oto kilka przykładowych CSS, które pomogą Ci zacząć.

div#header-widget-area {
    Szerokość: 100%;
    background-color: #f7f7f7;
border-bottom: 1px solid #eeeeee;
    text-align: center;
}	
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: wielkie litery;
    font-size: small;
    background-color: # feffce;
    width: 130px;
    padding: 5px;
    }

Tak wyglądał nasz Niestandardowy obszar widżetu nagłówka na domyślnym motywie Twenty Seventeen.

Być może będziesz musiał dostosować CSS, aby pasował do Twojego motywu. Zapoznaj się z naszym przewodnikiem na temat dodawania niestandardowych stylów do widżetów WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać widżet WordPress do nagłówka Twojej witryny. Możesz również zobaczyć naszą listę 25 najbardziej przydatnych widżetów WordPress dla Twojej witryny.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.