Przejdź do głównej treści

Jak dodać widget do nagłówka bloga WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Czy chcesz dodać widżet WordPress do obszaru nagłówka swojej witryny?

Widżety umożliwiają łatwe dodawanie bloków treści do wyznaczonych sekcji motywu WordPress.

W tym samouczku pokażemy, jak łatwo dodać widżet WordPress do nagłówka witryny.

Uwagi: To jest samouczek na poziomie średnim. Musisz dodać kod do pliki twojego motywu WordPress i opanuj trochę CSS.

Ale przed każdą modyfikacją odkryj naszą 5 WordPress wtyczki do tworzenia kopii zapasowych na blogu lub Jak zainstalować WordPress et Ilu wtyczki należy zainstalować na WordPress.

Wróćmy do tego, dlaczego tu jesteśmy.

Dlaczego i kiedy musisz dodać widżet do nagłówka?

Widżety umożliwiają łatwe dodawanie bloków treści do wyznaczonego obszaru w motywie WordPress. Te wyznaczone obszary są nazywane „ Paski „Lub obszary” widgety".

Obszar widżetów w nagłówku może służyć do wyświetlania reklam, najnowszych artykułów lub cokolwiek chcesz.

Ta konkretna domena jest używana na wszystkich popularnych stronach internetowych do wyświetlania naprawdę ważnych informacji.

Odkryj też Jak dodawać niestandardowe widżety po opublikowaniu w WordPressie

strefa widgetisee w głowie wordpress

Zazwyczaj motywy WordPress dodają paski boczne obok zawartości lub w obszarze stopki. Bardzo niewiele motywów WordPress dodaje obszary widżetów nad zawartością lub w nagłówku.

Radzimy również odkryć nasze Tutorial MailChimp w języku francuskim: kompletny przewodnik do stworzenia newslettera

Dlatego w tym samouczku pokażemy, jak dodać obszar widżetów do nagłówka witryny WordPress.

Krok 1: Tworzenie obszaru widżetów

Najpierw musimy utworzyć niestandardowy obszar widżetów. Ten krok pozwoli Ci zobaczyć niestandardowy obszar widżetów w „ Wygląd> Widgety Na pulpicie WordPress.

Musisz dodać ten kod do pliku functions.php Twojego tematu.

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

Ten kod zapisuje nowy pasek boczny lub obszar widżetów w motywie WordPress.

Jeśli nigdy nie instalowałeś WordPress lokalnie, odkryj Jak zainstalować WordPress lokalnie na komputerze PC / Windows z XAMPP

Możesz przejść do „ Wygląd> Widgety Zobaczysz nowy obszar widżetów oznaczony „ Niestandardowy widget strefy nagłówka ".

nowa strefa widżetów WordPress

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Śmiało, dodaj widżet tekstowy do nowo utworzonego obszaru i zapisz go.

Spróbuj też nasz przewodnik na temat dodawania widżetów.

Krok 2: pokaż widget w nagłówku

Jeśli odwiedzisz swoją witrynę, nie zobaczysz właśnie dodanego widżetu tekstowego.

Ponieważ nie pokazaliśmy jeszcze, jak wyświetlić strefy niestandardowe widżety WordPress.

To właśnie zrobimy na tym etapie.

Tutaj jest również dla ciebie lista Krytyczne wtyczki WordPress 5, które zwiększają zarobki Twojego bloga

Będziesz musiał edytować plik header.php W motywie WordPress i dodaj ten kod w miejscu, w którym chcesz wyświetlić widżety.

<? Php if (is_active_sidebar ( 'custom-header-widget')):?> <Div id = klasa "header-widget-area" = "chw-widget-obszar widget-area" role = "komplementarny"> <? php dynamic_sidebar ("custom-header-widget"); ?> </ div> <? php endif; ?>

Nie zapomnij zapisać zmian.

Następnie możesz odwiedzić swoją stronę internetową, aw nagłówku zobaczysz widżet tekstowy.

z myślą o witrynie demonstracyjnej

Wynik niekoniecznie będzie najbardziej atrakcyjny. Dlatego potrzebujesz CSS, aby wyświetlał się poprawnie.

Krok 3: Nadaj styl nagłówkom CSS

W zależności od motywu WordPress musisz dodać kod CSS, aby kontrolować sposób wyświetlania obszaru nagłówka i widżetu.

Jednym z najłatwiejszych sposobów jest użycie CSS Hero. Pozwala to na użycie intuicyjnego interfejsu użytkownika do modyfikacji CSS motywu WordPress.

Radzimy również to odkryć Co możesz zrobić z wtyczką Yellow Pencil WordPress?

Jeśli nie chcesz używać wtyczki, możesz dodać niestandardowy CSS do motywu WordPress, odwiedzając „ Wygląd »Personalizuj Aby dostosować motyw WordPress.

Przeczytaj także nasz artykuł na temat Wtyczki 10 WordPress w celu poprawy ruchu na blogu

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Umożliwi to wyświetlenie interfejsu dostosowywania WordPress. Będziesz musiał kliknąć kartę « Dodatkowy CSS ".

dodatkowe css WorDPress

Zakładka « Dodatkowy CSS W „ Customizer Umożliwia dodanie niestandardowego kodu CSS podczas oglądania zmian w podglądzie po prawej stronie.

Z powodów związanych z tym samouczkiem zakładamy, że użyjesz tego obszaru, aby dodać pojedynczy widget do wyświetlania banerów reklamowych lub niestandardowy widget menu.

Oto przykład CSS na początek:

div # header-widget-area {width: 100%; background-color: #f7f7f7; border-bottom: 1px solid #eeeeee; text-align: center; } h2.chw-title {margin-top: 0px; text-align: left; transformacja tekstu: wielkie litery; rozmiar czcionki: mały; kolor tła: #feffce; szerokość: 130px; dopełnienie: 5px; }

Oto jak nasz niestandardowy widget pojawi się w nagłówku motywu Twenty Seventeen.

motyw demo dwadzieścia siedemnaście wordpress

Odkryj także niektóre wtyczki premium WordPress

Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Smart4y Tooltip

Smart4y Tooltip to elastyczna wtyczka WordPress dedykowana do tworzenia nowoczesnych podpowiedzi bez żadnej zależności od biblioteki JavaScript. Jest w pełni responsywny i oferuje możliwość wstawiania treści HTML.

Wtyczka Smart4y Tooltip Responsive WordPress

Jego edytor WYSIWYG pozwoli ci wizualnie utworzyć każdą etykietkę bez konieczności wprowadzania kodu, ale jeśli chcesz, zawsze możesz to zrobić.

Odkryj także nasze Wtyczki 10 WordPress do oceny artykułów z Twojego bloga

Inne jego funkcje to: Obsługa strony programu budującego, dość responsywny układ, możliwość ustawiania parametrów globalnych dla wszystkich podpowiedzi lub definiowania określonych parametrów dla każdej podpowiedzi, obsługa predefiniowanych efektów wizualnych, obliczanie położenia podpowiedzi w oknie o zmienionym rozmiarze, szczegółowa dokumentacja itp.

Pobierz | Demo | hosting

2. uzasadnione

Wtyczka uzasadniona WordPress to responsywna wtyczka galerii, która wyrównuje twoje miniatury w wyrównanej siatce za pomocą jQuery, podobnie jak Flickr.

Uzasadnione-plugin-Fotografików,

Zapewnia funkcje, które odróżnią Twoje galerie od galerii konkurencji!

Jego główne cechy to: responsywny układ, specjalne efekty estakady, automatyczne wyrównanie siatki, edytor krótkich kodów, wygląd ecałkowicie konfigurowalny, obsługa pwidzowie i wiele innych ...

Pobierz | Demo | hosting

3. Zaplanuj e-maile

Wtyczka WordPress, jak sugeruje jej nazwa, pozwala zaplanować publikację wiadomości e-mail w witrynie. Opiera się na rozszerzeniach wtyczki WordPress „Follow My Blog Post”. Zaplanuj e-maile Śledź wtyczkę Wordpress My Blog Post

Możesz teraz zaplanować publikację wiadomości e-mail na podstawie godzin, dni lub tygodni.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Przeczytaj także nasz artykuł na temat Wtyczki 10 WordPress do używania map w Twojej witrynie

Oferuje możliwość wysłania połączonego e-maila dla wszystkich powiadomień zamiast każdego e-maila dla każdego powiadomienia, a także pozwala zdefiniować różne szablony e-mail dla różnych e-maili, aby w końcu ułatwić odbiór wiadomości e-mail ,

Pobierz | Demo |hosting

Polecane zasoby

Odkryj inne zalecane zasoby, które będą Ci towarzyszyć w tworzeniu witryny i zarządzaniu nią.

Wnioski

To jest to! To wszystko w tym samouczku, mam nadzieję, że pomoże Ci dodać obszar widżetów w nagłówku motywu WordPress. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych.

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.

...

Ten artykuł zawiera komentarze 8

  1. Cześć! Chciałbym wiedzieć, czy masz szansę powiedzieć mi, jak umieścić „pole informacyjne” podobne do tego, które zostało użyte tutaj na początku tego artykułu, w tym przyciski, które można kliknąć obok „Pobierz” i „Arkusze robocze”, układ jest bardzo ładny. Dziękuję Ci!

  2. Sir, próbowałem tego. Rzeczywiście strona widżetów obecnie definiuje dodawanie widżetów. I dodałem to. Gdy krok 2 nie wprowadza kodu w nagłówku php. Zgadnij 2, jaki jest błąd, proszę pana?

  3. W pierwszym wyświetlonym kodzie, który polega na wygenerowaniu nowej strefy widżetów, zacznij od wpisania „function”, ale powiedziałbym, że zaczyna się od „function”. W rzeczywistości w tym kodzie występuje kilka błędów, które popełniają błąd podczas pisania. Byłbym wdzięczny za poprawienie.

  4. 🙂 Wszystko jest w porządku, tylko nikt w swoich tablicach nie wyjaśnia, gdzie dodać kod do "functions.php !!! To ważne! Każdy używa "różnych" motywów ...

  5. Witam,

    Dziękuję za te wsparcie.

    Udało mi się dodać pasek wyszukiwania w nagłówku niestandardowym. Przez minusy, dostosowanie stylu jest bardziej skomplikowane ...

    Chciałbym zmienić rozmiar, pozycję (że nie zajmuje ona całej szerokości nagłówka), a także kolor tła.

    Z góry dziękuję.

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
6 akcji
udział1
ćwierkanie
Enregistrer5