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 701.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 w wyznaczonych sekcjach motywu WordPress.

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

Uwagi: To jest samouczek na poziomie średnio zaawansowanym. Będziesz musiał 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 noszą nazwę „ 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 treści lub w obszarze stopki. Bardzo niewiele motywów WordPress dodaje obszary widżetów nad treś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: Utwórz obszar widżetów

Przede wszystkim musimy stworzyć niestandardowy obszar widżetów. Ten krok pozwoli Ci zobaczyć niestandardowy obszar widżetów w „ Wygląd> Widżety Na pulpicie WordPress.

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

function bpc_widgets_init () {register_sidebar (array ('name' => 'Niestandardowy obszar widżetu nagłówka', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } 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ś lokalnie WordPress, dowiedz się Jak zainstalować WordPress lokalnie na komputerze PC / Windows z XAMPP

Możesz przejść do „ Wygląd> Widżety 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.


 
 
 
 

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 będziesz musiał dodać kod CSS, aby kontrolować sposób wyświetlania nagłówka i obszaru widżetów.

Jednym z najłatwiejszych sposobów jest użycie CSS Hero. Ta ostatnia umożliwia 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

Umożliwi to wyświetlenie interfejsu WordPress Customizer. Konieczne będzie kliknięcie przycisku „ Dodatkowy CSS ".

dodatkowe css WorDPress

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]

Zakładka « Dodatkowy CSS W „ Customizer Umożliwia dodawanie niestandardowego arkusza CSS podczas przeglą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 do WordPressa przeznaczona do tworzenia nowoczesnych podpowiedzi bez 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

Jego inne cechy to: Obsługa strony programu budującego, dość responsywny układ, możliwość definiowania parametrów globalnych dla wszystkich podpowiedzi lub definiowania określonych parametrów dla każdej podpowiedzi, obsługa predefiniowanych efektów wizualnych, obliczanie pozycji 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

ta wtyczka WordPress, jak sama nazwa wskazuje, pozwala zaplanować publikację e-mail w Twojej witrynie. Jest częścią wtyczek wtyczki WordPress „Follow My Blog Post”. Zaplanuj e-maile Śledź wtyczkę Wordpress My Blog Post

Będziesz teraz mógł zaplanować publikację swoich e-maili według godzin, dni lub tygodni.

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

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]

Oferuje możliwość wysyłania połączonych e-maili dla wszystkich powiadomień zamiast każdego e-maila dla każdego powiadomienia, a także pozwala zdefiniować różne szablony e-maili dla różnych e-maili, aby ostatecznie odbiór wiadomości e-mail był bardziej strawny. .

PobierzDemo |hosting

Polecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać 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 możesz mi powiedzieć, jak umieścić „pole informacyjne” podobne do tego, które zostało użyte tutaj na początku tego artykułu, zawierające przyciski, które można kliknąć obok „Pobierz” i „Arkusze kalkulacyjne”, układ jest bardzo ładny. Dziękuję Ci!

  2. Sir, próbowałem. Rzeczywiście, strona widżetów jest wyjściem definiującym dodawanie widżetów. I dodałem to. Gdy krok 2 nie udaje się wprowadzić kodu w nagłówku php. Chyba 2, jaki jest błąd, sir?

  3. W pierwszym pokazanym kodzie, który ma wygenerować nowy obszar widżetów, zacznij od wpisania „function”, ale powiedziałbym, że zaczyna się od „function”. W rzeczywistości ten kod ma kilka błędów, które powodują, że jest błędny podczas pisania. Byłbym wdzięczny za poprawienie tego.

  4. 🙂 Wszystko jest w porządku, tylko nikt w ich radach nie wyjaśnia, gdzie dodać kod do „functions.php !!! " To jest ważne! Każdy używa „innych” motywów…

  5. Witam,

    Dziękuję za te wsparcie.

    Wiedziałem, jak dodać pasek wyszukiwania w spersonalizowanym nagłówku. Z drugiej strony personalizacja stylu jest bardziej skomplikowana ...

    Chciałbym zmienić rozmiar, pozycję (aby nie zajmowała całej szerokości nagłówka) oraz kolor tła.

    Merci d'avance.

Zostaw komentarz

Twoj adres e-mail nie bedzie 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