Wtyczki 18 do dostosowywania nagłówka i stopki witryny

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.

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.

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.

  

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

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.

  

  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.

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

• 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

• 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ę.

• 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.

  

  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.

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).

  

  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.

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.

  

  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ę.

• 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.

  

• 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.

• 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.

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.

  

   

• 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.

  

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

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.

  

Sticky headers

• Sticky Menu (lub cokolwiek! Na Przewijaku)

  

  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.

  

   

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

Tagi:

• stopki
• nagłówki