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.
Note: 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
Z reguły, 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 ".
Ś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.
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 ".
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.
Odkryj także niektóre wtyczki premium WordPress
Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.
Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.
1. Smart4y Tooltip
Smart4y Tooltip to WordPress Plugin elastyczne narzędzie dedykowane do tworzenia nowoczesnych podpowiedzi bez zależności od biblioteki Javascript. Jest w pełni responsywny i oferuje możliwość wstawiania treści HTML.
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
Le WordPress Plugin Justified to responsywna wtyczka galerii, która wyrównuje Twoje miniatury w wyjustowanej siatce za pomocą jQuery, tak jak na Flickr.
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…
3. Zaplanuj e-maile
ce WordPress Plugin jak sama nazwa wskazuje, pozwala zaplanować publikację wiadomości e-mail na Twojej stronie internetowej. Jest częścią rozszerzeń wtyczki WordPress „Śledź mój post na blogu”.
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
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. .
Polecane zasoby
Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.
- Jak tworzyć dokumenty programu Excel i Word w programie WordPress
- Jak dostosować logo WordPress na desce rozdzielczej
- Jak znaleźć pliki do edycji z motywu WordPress
- Jak dostosować CSS witryny WordPress
Podsumowanie
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.
...
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!
Kod dodający header.php nie działa
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?
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.
OK.
🙂 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…
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.
Witaj Thomas,
To wymaga trochę wiedzy CSS. Ale polecam tę doskonałą wtyczkę do WordPressa: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand