Nagłówek witryny jest pierwszą rzeczą, którą widzą odwiedzający, dlatego ważne jest, aby stworzyć dobre wrażenie. Przyciągający wzrok nagłówek zachęci ludzi do dalszej eksploracji.

Większość nagłówków witryny będzie zawierać kombinację niektórych z następujących:

  • Tytuł strony, Opis strony i / lub logo
  • Nawigacja
  • Ikony mediów społecznościowych
  • Hero images
  • W niektórych tematach obszar widżetu nagłówka

Podobnie można przeoczyć stopkę witryny, ale może zawierać wiele przydatnych informacji. Tutaj możesz umieścić przydatne linki i wzmacniacze wiarygodności. Nie ignoruj treści stopki: powiadomienie “Prawa autorskie 2016” w stopce sprawia, że wyglądasz jakbyś nie aktualizował swojej witryny od tego czasu.

Stopki mogą zawierać:

  • Obszary widgetów (“Grube stopki” stały się popularne w ostatnich latach)
  • Informacje o prawach autorskich z bieżącym rokiem, lub starszy rok do bieżącego roku
  • Podziękowania np. “Proudly powered by WordPress”
  • Linki np. polityka prywatności, Regulamin, Mapa strony lub niestandardowe menu.
  • Ikony mediów społecznościowych
  • Dane kontaktowe
  • E-mail newsletter Zapisz się formularze
  • Znaki zaufania witryny
  • A powrót do góry link

Czasami lepiej jest użyć niestandardowego kodu, aby zmienić nagłówek lub stopkę. Jeśli dodajesz obszar widżetu nagłówka do motywu podrzędnego, musi on być zgodny z układem motywu.

W innych przypadkach szybsze i łatwiejsze jest użycie wtyczki do modyfikacji nagłówka lub stopki. W rzeczywistości zaskakujące jest to, jak wiele ulepszeń nagłówka i stopki wymyślili Programiści wtyczek!

Różnica między < head > i < header>

Obszar nagłówka to górna część strony przed główną treścią, po < body> tag. Może być oznaczony jako < div id = "header"> lub z HTML5, < header> tag.

Na < head> element przychodzi po < html> tag i przed < body> tag. Przechowuje informacje, takie jak tytuł strony, meta informacje, skrypty i style używane na stronie.

Żadnej z tych informacji w < head> pokazuje Na Rzeczywistej stronie jako renderowane, więc ściśle mówiąc nie jest częścią nagłówka. Ale wiele wtyczek otagowanych jako” header ” wtyczki faktycznie cel < head> sekcji.

Co mogą dodawać lub zmieniać wtyczki w nagłówkach i stopkach?

  • Paski powiadomień, w tym wiadomości, ikony mediów społecznościowych i linki kontaktowe
  • Ulepszenia nawigacji np. mega Menu (link) i ikony menu
  • Stickiness-mocowanie elementów nagłówka do góry ekranu podczas przewijania
  • Niestandardowe nagłówki (obrazy)
  • Tekst zastępczy lub kod HTML
  • Formularze rejestracji e-mail

Wtyczki nagłówka i stopki

Kompilując tę listę Szukałem wtyczek, które:

  • Nie wymaga konkretnego motywu lub wtyczki do pracy.
  • Praca po wyjęciu z pudełka tzn. nie wymagała modyfikacji plików szablonów motywów.

Do testów użyłem motywu BasePress.

Motyw BasePress pokazujący nagłówek i stopkę

Przy minimalnej konfiguracji nagłówek zawiera:

  • Tytuł strony
  • Opis strony <url>
  • Nawigacja

Stopka pokazuje informację o prawach autorskich, rok i link do twórcy tematu.

Opcjonalnie ten motyw może zawierać do widżetów stopki 4.

Reklama

  • Ad Inserter

    Aktywne instalacje: 100,000+

    Chcesz zarabiać na swojej stronie reklamami? Spróbuj Wstawić Reklamę. Wstrzykuje reklamy przed lub po nagłówek Oznacz lub w stopce witryny, a także w wielu innych lokalizacjach.

    Wtyczka Ad Inserter Pro umożliwia bardziej precyzyjne umieszczanie reklam oraz wiele innych funkcji.

    Niektóre z poniższych wtyczek pozwalają również dodać kod reklamowy lub sprawdzić inne wtyczki, które umieszczają reklamy.

    Zainteresowany Inserter reklam?

    Szczegóły

Minutnik

  • YITH topbar Countdown

    Aktywne instalacje: 1,000+

    Stworzenie poczucia pilności może być skuteczną strategią marketingową, szczególnie w przestrzeni ecommerce, gdzie zapasy mogą być rzadkie lub zbliżające się wakacje.

    YITH topbar Countdown zachęca do kupowania lub zapisywania się, podkreślając ograniczoną sprzedaż lub promocje lub czas do wydarzenia. Możesz dostosować pasek, aby pasował do kolorów marki i kroju pisma.

    A top bar with a countdown to a sale
    Górny pasek z odliczaniem do wyprzedaży

    Wskazówka: wprowadź datę “odliczanie do” w formacie MM/dd / RRRR. Jeśli użyjesz selektora daty, licznik nie będzie odliczał prawidłowo.

    Zainteresowany YITH topbar Countdown?

    Szczegóły

Stopka kredyty

  • Usuń Kredyt Stopki

    Aktywne instalacje: 30,000+

    Zmęczony “dumnie zasilany przez WordPress” lub podobny? Porzuć kredyty całkowicie za pomocą tej wtyczki lub zastąp je wybranym tekstem lub HTML.

    BasePress' original footer credit has been removed and replaced
    Oryginalna stopka basepress została usunięta i zastąpiona

    Znalezienie odpowiedniego kodu do usunięcia może potrwać metodą prób i błędów. Dla BasePress musiałem wpisać stopkę i link, ale nie otaczający

    tagi.

    Zainteresowany usunięciem stopki kredytu?

    Szczegóły

Kod nagłówka i stopki

  • Prosty Nagłówek Stopka HTML

    Aktywne instalacje: 4,000+

    Ta wtyczka robi dokładnie to, co mówi na puszce, umożliwiając dodawanie fragmentów HTML do nagłówka lub stopki lub skryptów w lub pod

    tag. Skrypty mogą zawierać kod analytics lub niestandardowy Javascript.

    Interesuje Cię prosty Nagłówek Stopka HTML?

    Szczegóły
  • Zastrzyki głowy, stopki i postu

    Aktywne instalacje: 100,000+

    Bardzo podobny do poprzedniej wtyczki, ale ma więcej funkcji:

    • Dodaj kod przed, PO i w postach
    • Dodaj kod przed i po stronach
    • Użyj PHP, JavaScript i shortcodes

    Interesują Cię zastrzyki Head, Footer i Post?

    Szczegóły
  • SOGO Dodaj skrypt do poszczególnych stron Nagłówek Stopka

    Aktywne instalacje: 20,000+

    Kolejna wtyczka do dodawania treści do nagłówka i stopki, ale z logiką warunkową, więc zawartość może wyświetlać się tylko na określonym typie postu lub na poszczególnych postach/stronach.

    Jest to przydatne, jeśli potrzebujesz skryptu na jednej stronie, ale nie chcesz, aby ładował się na każdej stronie, co może potencjalnie spowolnić witrynę.

    Zainteresowany skryptem dodawania SOGO do poszczególnych stron nagłówka stopki?

    Szczegóły
  • Branda

    WPMU DEV ‘ s Branda to darmowa wtyczka do WordPress whitelabeling, która wykorzystuje edytor wizualny do dodawania globalnej zawartości nagłówka i stopki.

    Logo nagłówka wyrównane do środka dodane z Brandą

    Oprócz zmiany nagłówka i stopki, Branda ma wiele innych funkcji, w tym opcję dostosowania układu panelu administracyjnego i schematu kolorów, a także stronę logowania witryny.

    Interesuje Cię Branda?

    Szczegóły

Obrazy nagłówka

  • Unikalne Nagłówki

    Aktywne instalacje: 20,000+

    Dobrze dobrane obrazy mogą dodać dodatkowej atrakcyjności wizualnej do obszaru nagłówka.

    Unikalne nagłówki pokazują różne obrazy nagłówków na różnych stronach, w zależności od konfiguracji i obsługi motywu.

    Twój motyw musi używać WordPress niestandardowe nagłówki aby korzystać z tej wtyczki. BasePress ma tę funkcję; niestandardowe nagłówki są wyświetlane na stronie głównej i stronach archiwalnych.

    Możesz dostosować obraz nagłówka na postach, stronach, kategoriach i archiwach tagów (BasePress pokazuje tylko nagłówki na dwóch ostatnich).

    The custom header on a category archive page can be different from that on other pages
    Niestandardowy nagłówek na stronie Archiwum kategorii może być inny niż na innych stronach

    Unikalne nagłówki nie przycinają obrazów, aby pasowały do motywu, więc upewnij się, że przesłałeś prawidłowy rozmiar obrazu, aby uniknąć rozciągania – 1600 x 640 px w przypadku mojego motywu. Sprawdź rozmiar nagłówka motywu w narzędziu dostosowania.

    Interesują Cię unikalne nagłówki?

    Szczegóły

Modyfikacja Menu

  • Ikony Menu by Themeisle

    Aktywne instalacje: 100,000+

    Ikony Menu mogą zwiększyć użyteczność, jeśli współpracują z odpowiednimi etykietami nawigacyjnymi.

    Ta wtyczka dodaje zestawy ikon, w tym Dashicons, Font Awesome i Genericons. Obsługiwane są również obrazy SVG i niestandardowe.

    Navigation with a mix of Genericons and Font Awesome icons
    Nawigacja z mieszanką Genericons i Font Awesome Ikony

    Może być konieczne dodanie niestandardowego CSS, aby zmienić wyświetlanie menu. Potrzebowałem tego, żeby moje menu nie wylało się na drugą linię.

    Interesują Cię ikony Menu by Themeisle?

    Szczegóły
  • Dodaj wyszukiwanie do Menu

    Aktywne instalacje: 9,000+

    Szczególnie w przypadku większych witryn o dużej zawartości przydatna jest funkcja wyszukiwania w nagłówku. Dodanie wyszukiwania do nawigacji ma sens, ponieważ w prawym górnym rogu znajduje się miejsce, w którym wielu użytkowników spodziewałoby się go znaleźć.

    Ta wtyczka dodaje ikonę lub pole wyszukiwania do wybranego menu. Możesz wybrać styl wyświetlania wyszukiwania i pokazać lub ukryć go na urządzeniach mobilnych.

    Search in menu, dropdown style
    Szukaj w menu, styl rozwijany

    Chcesz dodać wyszukiwanie do Menu?

    Szczegóły
  • If Menu

    Aktywne instalacje: 30,000+

    Czasami masz elementy nawigacji, które chcesz pokazać tylko niektórym użytkownikom. Jeśli Menu wyświetla elementy menu warunkowo-na przykład, jeśli użytkownik ma określoną rolę, przegląda post lub jest na urządzeniu mobilnym.

    Zainteresowany If Menu?

    Szczegóły
  • Max Mega Menu

    Aktywne instalacje: 200,000+

    Zainstaluj Max Mega Menu, aby stworzyć stylowe mega menu lub po prostu użyj go, aby zmienić styl nawigacji w nagłówku.

    Aby uzyskać więcej informacji na temat korzystania z tej wtyczki, przeczytaj Jak dodać wspaniałe Mega Menu do swojej witryny WordPress.

    Interesuje Cię Max Mega Menu?

    Szczegóły

Paski powiadomień

  • Speed Contact Bar

    Aktywne instalacje: 10,000+

    Speed Contact Bar jest najlepiej stosowany w nagłówku, gdy chcesz, aby odwiedzający szybko się skontaktowali – na przykład, jeśli prowadzisz firmę usługową.

    Pasek wyróżnia się dobrze, numer telefonu jest skonfigurowany do wybierania bezpośrednio, jeśli korzystasz z telefonu komórkowego, i ma wiele opcji projektowania.

    Speed Contact Bar in the header
    Pasek prędkości styku w nagłówku

     

    Interesuje Cię Speed Contact Bar?

    Szczegóły
  • Pasek Powiadomień 8 Stopni

    Aktywne instalacje: 4,000+

    Paski powiadomień mogą ostrzegać odwiedzających o ofertach, danych kontaktowych, linkach do mediów społecznościowych i innych interesujących miejscach. Ten pasek może być wyświetlany w nagłówku lub stopce.

    Footer notification bar with social icons and message
    Pasek powiadomień stopki z ikonami społecznościowymi i wiadomościami

    Aktualizacja premium ($17) pozwala na wiele pasków, wyświetlanie warunkowe, tweety i wiele innych.

    Zainteresowany 8 Degree Notification Bar?

    Szczegóły

Wstążki i banery

  • Pokaż Wstążkę Wsparcia

    Aktywne instalacje: 400+

    Czy masz powód do podkreślenia? Ta wtyczka dodaje baner, wstążkę lub przycisk do nagłówka, który może łączyć się w dowolnym miejscu. Domyślnie będzie on wyświetlany w prawym górnym rogu strony, ale można go przenieść do dowolnego rogu i stylizować, aby pasował do marki.

    Support Ribbon example
    Przykład wstążki wsparcia

    Zainteresowany wstążką wsparcia pokazowego?

    Szczegóły

Sticky headers

  • Aktywne instalacje: 50,000+

    Istnieją dowody na to, że lepka nawigacja jest korzystniejsza dla użytkowników witryn o określonym wezwaniu do działania, treści o długiej formie oraz dla młodych i starych odbiorców.

    Nie wszystkie motywy obsługują tę funkcję, ale wtyczka Sticky Menu jest łatwym rozwiązaniem, aby pasek nagłówka był zawsze na górze podczas przewijania. Użyj Inspektora przeglądarki, aby znaleźć odpowiednią sekcję do trzymania.

    Sticky navigation (header#masthead) na BasePress

     

    Zainteresowany Sticky Menu (lub cokolwiek! Na Zwoju)?

    Szczegóły

Podsumowując

Jak widać, nagłówek i stopka mogą być główną nieruchomością na twojej stronie.

Chociaż nie chcesz przeciążać ich treścią, dobrze dobrane funkcje nagłówka i stopki mogą to ułatwić:

  • Aby odwiedzający mogli się z Tobą skontaktować
  • Aby powiększyć swoją listę e-mailową
  • Zarabiaj na swojej stronie
  • Popraw doświadczenie użytkownika
  • Marka witryny bardziej skutecznie
Czego użyłeś do wzmocnienia nagłówka i stopki? Jakie to miało skutki?

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…