Wskazówki, triki i najlepsze wtyczki do dostosowywania menu WordPress

Opublikowany: 2018-04-04

Menu to jedna z najważniejszych części każdej strony internetowej. Są wszechobecne i prowadzą użytkowników przez Twojego bloga. I chociaż dodanie menu nawigacyjnego w WordPressie jest stosunkowo łatwe, możesz zrobić o wiele więcej, aby dostosować je do swojej witryny.

Niezależnie od tego, czy jest to mała ikona, którą chcesz mieć w menu, czy chcesz, aby obsłużył ją zupełnie inny system, ten przewodnik ma wszystko. Sprawdź wskazówki, triki i niektóre z najlepszych wtyczek do menu, które przygotowaliśmy dla Ciebie w tym przewodniku:

  • Dodaj ikony do swojego menu WordPress
  • Dodaj przycisk logowania/wylogowania do menu
  • Wyświetlaj menu WordPress w dowolnym miejscu
  • Jak dodać pole wyszukiwania do menu WordPress?
  • Jak sprawić, by menu nawigacyjne przykleiło się na górze strony
  • Stwórz swoje lepkie menu nawigacyjne za pomocą wtyczek
  • Jak usunąć pozycje menu najwyższego poziomu w WordPress?
  • Najlepsze wtyczki menu 4 dla WordPress
  • Najlepsze wtyczki menu mobilnego WordPress

Dodaj ikony do swojego menu WordPress

Tworzenie menu w WordPress nigdy nie było łatwiejsze. Wszystko, co musisz zrobić, to wygenerować strony i dodać je obok swojej strony głównej. Twoje główne menu nawigacyjne zostanie wykonane za pomocą zaledwie kilku kliknięć, ale prawdopodobnie będzie wyglądać bardzo prosto.

Istnieje wiele wtyczek, które mogą pomóc w tworzeniu oszałamiającego wizualnie menu nawigacyjnego. Możesz oczywiście samodzielnie je zakodować, jeśli wiesz, jak to zrobić, ale istnieje prostszy sposób na uczynienie zwykłego menu bardziej przyjaznym dla użytkownika – poprzez dodanie ikon.

Ikony stały się czymś, bez czego nie możemy żyć . Kiedy szukasz czegoś w swoim pulpicie WordPress, na pulpicie lub na smartfonie i tablecie, prawdopodobnie jesteś przyzwyczajony do używania ikon. Już po kilkukrotnym korzystaniu z nowej aplikacji jest bardziej prawdopodobne, że zapamiętasz jej ikonę niż cały tekst jej opisu. Dlaczego więc nie umieścić ikony obok pozycji menu i pozwolić ludziom na łatwe poruszanie się po witrynie?

Ikony menu

CENA: Bezpłatnie

Ikony menu

Jeśli nie wiesz, jak to zrobić, nie martw się, dlatego tu jesteś. W tej części przewodnika nie będziemy zawracać Ci głowy niestandardowym kodowaniem, ale po prostu pokażemy Ci zgrabną darmową wtyczkę, którą możesz skonfigurować w ciągu najbliższych kilku minut .

  1. Przejdź do Wtyczki->Dodaj nowy
  2. Wyszukaj „Ikony menu”
  3. Zainstaluj i aktywuj wtyczkę
  4. Przejdź do Wygląd -> Menu
  5. Otwórz swoje menu nawigacyjne
  6. Wybierz stronę w strukturze menu, dla której chcesz wybrać ikonę
  7. Wybierz ikonę, edytuj jej położenie i rozmiar
  8. Zapisz menu

Otóż ​​to! Teraz znajdź kilka fajnych ikon, które chcesz w swoim menu i ciesz się nowym projektem. Podczas gdy nadal pracujesz z ikonami, nie zapominaj, że możesz łatwo dodać favikonę również do swojego bloga WordPress.

Dodaj przycisk logowania/wylogowania do menu

Jedną z wielu uwielbianych przez nas funkcji WordPressa jest łatwy sposób rejestrowania nowych użytkowników. Kontrolowanie różnych ról użytkowników na popularnej platformie nie może być prostsze; istnieją już zarejestrowane role, które możesz przypisać, a nawet możesz utworzyć wiele niestandardowych ról użytkownika na potrzeby swojej witryny.

Rejestracja jest szybka i łatwa, a dbanie o użytkowników może być ciężką pracą . Ale musisz zrobić wszystko, co w Twojej mocy, aby ich wrażenia na stronie były jak najlepsze.

Jedną z wielu rzeczy, które możesz dla nich zrobić, jest umożliwienie łatwego logowania i wylogowania się z witryny. Aby linki logowania/wylogowania były zawsze w zasięgu rąk użytkowników, możesz umieścić te linki bezpośrednio w menu głównym. Po pierwsze, posiadanie tych linków w menu jest bardzo praktyczne, a po drugie, Twoi użytkownicy prawdopodobnie przyzwyczaili się do funkcji różnych innych aplikacji, które używają tego samego sposobu logowania i wylogowywania.

W takim przypadku nie ma potrzeby pobierania kolejnej wtyczki. Prosta funkcja WordPressa, którą pokażemy w tej części artykułu, może wykonać dla Ciebie świetną robotę . Automatycznie umieści właściwy link w Twoim menu. Oznacza to, że gdy użytkownik jest wylogowany, otrzyma link „zaloguj się” i odwrotnie. Ani ty, ani użytkownik nie będziecie musieli ponownie martwić się o przyciski logowania.

Jeśli chcesz dodać tę prostą, ale zgrabną funkcję logowania do menu, oto, co musisz zrobić:

  1. Otwórz functions.php
  2. Skopiuj i wklej następujące informacje:
 funkcja add_login_logout_link($items, $args) {
$loginoutlink = wp_loginout('index.php', false);
$items .= '<li>'. $loginoutlink .'</li>';
zwróć $items;
}
add_filter('wp_nav_menu_items', 
„add_login_logout_link”, 10, 2);
  1. Zapisz zmiany

Podobnie jak w przypadku większości naszych fragmentów, wystarczy skopiować i wkleić funkcję do pliku. Gdy skończysz, możesz przejść dalej i ponownie załadować stronę główną. Ponieważ nadal jesteś zalogowany, otrzymasz link „wyloguj” w ostatnim miejscu głównego menu. Koniecznie sprawdź całą funkcję, więc spróbuj się wylogować i zalogować ponownie, aby upewnić się, że wszystko jest w porządku.

Teraz, gdy skończyłeś z tą małą funkcją, nie zapominaj, że możesz łatwo przekierować użytkowników na inną stronę po pomyślnym zalogowaniu, a nawet wyświetlić zawartość tylko zalogowanym lub wylogowanym użytkownikom.

Ponadto, teraz, gdy masz dostosowane menu, możesz być zainteresowany pokazaniem go w dowolnym miejscu w witrynie, podając niestandardowy krótki kod.

Uwielbiamy dostosowywać WordPressa za pomocą małych fragmentów, takich jak ten, a Ty?

Wyświetlaj menu WordPress w dowolnym miejscu

Po tym, jak WordPress osiągnął wersję 3.0, wiele rzeczy stało się łatwiejszych w użyciu. Spośród różnych nowych funkcji, tworzenie menu nawigacyjnego stało się dostępne dla każdego, a dziś każdy może tworzyć własne menu za pomocą kilku prostych kliknięć myszką.

Podczas gdy tworzenie menu, w którym można łatwo połączyć dowolny post, stronę, kategorię lub dowolny link zewnętrzny, jest bułką z masłem, pokazywanie menu w różnych miejscach w witrynie może być nieco większe dla tych, którzy nie są zainteresowani tworzeniem WordPressa.

W zależności od używanego motywu WordPress, możesz łatwo wyświetlić nowo utworzone menu u góry strony, gdzie wszyscy jesteśmy przyzwyczajeni do wyszukiwania nawigacji. Możesz mieć opcję umieszczenia menu na pasku bocznym lub nawet w dolnej części stopki, ale co, jeśli chcesz wyświetlić menu w swoich postach, stronach, a nawet w widżecie?

Nie, nie musisz tworzyć niestandardowych list ani ponownie wpisywać całego kodu HTML, aby replikować linki; możesz skorzystać ze skrótów i umieścić istniejące menu w dowolnym miejscu!

W kolejnych wierszach pokażemy Ci, jak to zrobić i jesteśmy pewni, że spodoba Ci się nowa funkcja „menu w krótkim kodzie”.

Utwórz krótki kod i wyświetlaj menu WordPress w dowolnym miejscu

  1. Otwórz plik functions.php
  2. Skopiuj i wklej kod, który zarejestruje krótki kod:
 function menu_function($atts, $content = null) {
wyciąg(
shortcode_atts(
array( 'nazwa' => null, ),
$atts
)
);
zwróć wp_nav_menu(
szyk(
'menu' => $nazwa,
'echo' => fałsz
)
);
}
add_shortcode('menu', 'menu_function');
  1. Zapisz zmiany

Zaraz po zapisaniu zmian będziesz mógł wyświetlać menu WordPress w dowolnym miejscu. Wszystko, co musisz zrobić, to zapisać krótki kod, w którym musisz określić nazwę menu, z którego będziesz korzystać:

[nazwa menu=”menu główne”]

W większości przypadków twoje menu główne będzie miało dołączoną nazwę „menu główne”. Ale jeśli zamierzasz użyć innego menu, po prostu wpisz jego nazwę w krótkim kodzie. Nie musisz znać na pamięć każdej nazwy menu; zamiast tego przejdź do Wygląd -> Menu i przeglądaj listę menu lub utwórz nowe.

Ponieważ teraz możesz wyświetlać menu WordPress praktycznie w dowolnym miejscu, możesz tworzyć liczne nawigacje, których będziesz używać w swojej witrynie opartej na WordPressie. Możesz mieć jeden w poście, inny w plikach szablonów, widżecie tekstowym itp.

Jak dodać pole wyszukiwania do menu WordPress?

O ile nie usuniesz tej funkcji, WordPress umożliwia odwiedzającym przeszukiwanie całej witryny. Kilka razy wspominaliśmy o tej fajnej funkcji i pokazaliśmy różne rzeczy, które możesz zrobić ze swoimi stronami wyszukiwania. Na przykład możesz łatwo przekierować użytkowników do posta, jeśli zostanie znaleziony tylko jeden wynik, lub nawet skonfigurować niestandardową wyszukiwarkę Google.

Jeśli przeglądałeś standardowe widżety WP, prawdopodobnie zauważyłeś, że istnieje widżet wyszukiwania gotowy do umieszczenia na pasku bocznym . Ale co, jeśli chcesz, aby zamiast tego obok menu pojawiło się pole wyszukiwania?

W kolejnych wierszach pokażemy Ci funkcję, która zabierze Twoje codzienne pole wyszukiwania i umieści je w menu nawigacyjnym.

Dodaj pole wyszukiwania do menu:

  1. Otwórz functions.php
  2. Skopiuj i wklej następujące informacje:
 add_filter( 'wp_nav_menu_items','add_search_box', 
10, 2);
function add_search_box( $items, $args ) {
$items .= '<li>' . get_search_form(fałsz) . 
'</li>';
zwróć $items;
}
  1. Zapisz zmiany

Aby mieć pewność, że kod będzie działał dla Ciebie, upewnij się, że masz już dodane menu nawigacyjne do swojej witryny.

Kod jest dość prosty, a jego jedyną funkcją jest dodanie pola wyszukiwania do menu nawigacyjnego . Najprawdopodobniej Twoje pole wyszukiwania nie zostanie wyrównane tam, gdzie chcesz. Oznacza to, że będziesz musiał powiedzieć WordPressowi, gdzie umieścić pole wyszukiwania:

  1. Dodaj klasę do tagu <li> znajdującego się w trzecim wierszu kodu:
 $items .= '<li class=”pozycja-wyszukiwania”>' . 
get_search_form(fałsz) . '</li>'
  1. Zapisz zmiany
  2. Otwórz style.css
  3. Skopiuj i wklej kod CSS:
 .pozycja w polu wyszukiwania {
margines górny: 15px;
margines prawy: 20px;
}
  1. Zmień kod według własnych upodobań
  2. Zapisz zmiany

Mamy nadzieję, że zagnieździłeś pudełko idealnie obok swojego menu. Nie zajmuje wiele czasu, aby zmieścić pudełko tam, gdzie chcesz. Nie zapomnij o stylizacji samego pola wyszukiwania i ciesz się tą funkcją.

Jeśli chcesz mieć większą kontrolę nad menu i polem wyszukiwania, dowiedz się, jak dodawać ikony do menu i jak dodać opcję wyszukiwania głosowego dla odwiedzających, którzy lubią dyktować swoje wyszukiwane hasła. Z menu i opcjami wyszukiwania możesz zrobić znacznie więcej, więc przetestuj nasze pole wyszukiwania i dowiedz się czegoś nowego.

Jak sprawić, by menu nawigacyjne przykleiło się na górze strony

Prawdopodobnie widziałeś strony internetowe, w których menu nawigacyjne przyklejają się na górze strony i śledzą Cię na każdym kroku Twojej przygody z przewijaniem . Ta funkcja może być czymś, co chcesz umieścić na swojej witrynie WordPress, a w tej części przewodnika pokażemy Ci, jak ją utworzyć.

Nie tylko ma funkcjonalną stronę, w której menu jest zawsze pod ręką, ale może też wyglądać bardzo pięknie i płynnie.

Jeśli masz trochę wiedzy na temat CSS, nie będziesz miał problemów z przyklejeniem menu. Wystarczy dodać fragment kodu do pliku Style.css, aby móc cieszyć się nową funkcją menu.

  1. Otwórz arkusz stylów (style.php)
  2. Znajdź .nav-menu lub .genesis-nav-menu (lub podobne, w zależności od używanego motywu)
  3. Użyj następującego kodu dla kontenera menu głównego:
 .nav-menu {
pozycja:stała;
tło: #333;
góra: 0px;
po prawej: 0px;
lewy: 0px;
indeks z:99;
}

Jak można się domyślić z kodu, ważna część znajduje się w drugiej linii, w której musisz poprawić pozycję swojego menu . Następnie możesz ustawić górny, prawy i lewy element na 0 pikseli lub przesunąć je na dowolną odległość od góry lub od lewego i prawego marginesu strony (na przykład: top: 10px spowoduje umieszczenie menu o 10 pikseli od górny margines witryny).

  1. Zaktualizuj swój plik i ciesz się lepkim menu nawigacyjnym

Jeśli nie lubisz bawić się kodem, możesz użyć wtyczek, aby Twoje menu były lepkie.

Stwórz swoje lepkie menu nawigacyjne za pomocą wtyczek

Nauczyliśmy Cię, jak utworzyć lepkie menu nawigacyjne, po prostu zmieniając wiersz kodu CSS w swoim motywie. Ale bez względu na to, jak łatwe może to być, nie każdy lubi przeglądać pliki WordPress i samodzielnie edytować kod. Jeśli jesteś tego typu osobą lub potrzebujesz większej kontroli nad menu, nie martw się. Możesz łatwo skonfigurować swoje menu i sprawić, by było lepkie, używając wtyczek . W tej części artykułu pokażemy Ci jedne z najlepszych.

Przyklejone rozszerzenie UberMenu

CENA: $8

Przyklejone rozszerzenie UberMenu

UberMenu Sticky Extension to dodatek do wtyczki UberMenu, co oznacza, że ​​musisz najpierw zainstalować tę wtyczkę, aby rozszerzenie działało. Rozszerzenie sprawia, że ​​wszystko jest proste; po instalacji jesteś gotowy, aby Twoje menu było lepkie. Bez względu na to, gdzie umieścisz swoje menu, gdy użytkownik zacznie przewijać, menu pozostanie na górze strony i będzie łatwo dostępne.

Aby upewnić się, że użytkownicy mobilni mogą uzyskać dostęp do każdej części menu, przyklejona opcja znika po wykryciu urządzenia mobilnego. Nie ma tu wiele do dodania – sprawdź demo na oficjalnej stronie, a jeśli masz już UberMenu, śmiało spraw, aby Twoje menu było przyklejone.

mojeStickymenu

CENA: GRATIS – DEMO

mojeStickymenu

Ta wtyczka jest przeznaczona do użytku w motywie Twenty Thirteen. Ale jeśli trochę go poprawisz, możesz go użyć w dowolnym motywie. Domyślnie używa klasy CSS nawigacji „.navbar” motywu. Więc jeśli chcesz użyć go w innym motywie, musisz znaleźć klasę, której motyw używa do opisania menu nawigacyjnego i zmienić nazwę tej klasy.

Jeśli Twój motyw jest responsywny, wtyczka również będzie responsywna. Jeśli chcesz go bardziej zmodyfikować, możesz wprowadzić własne style CSS i jeszcze bardziej spersonalizować lepkie menu.

Sticky Menu (lub cokolwiek!) w Scroll

CENA: Bezpłatnie

Sticky Menu (lub cokolwiek!) w Scroll

Ta wtyczka pozwoli Ci umieścić menu na górze i sprawić, by było lepkie. Ale nie tylko to, wtyczka pozwoli ci sprawić, że dowolny element będzie przyklejony, po prostu poprzez znalezienie odpowiedniego selektora dla elementu. Oznacza to, że możesz umieścić swoje logo, a nawet cały nagłówek, u góry strony, podczas gdy użytkownicy przewijają Twoją witrynę. Aby wszystko działało, musisz wiedzieć trochę o HTML i CSS, aby znaleźć odpowiedni selektor.

Jak usunąć pozycje menu najwyższego poziomu w WordPress?

Prawdopodobnie już wiesz, że WordPress jest wysoce konfigurowalny. Jeśli wiesz, jak kodować lub przynajmniej znaleźć odpowiednie wtyczki, możesz przekształcić zarówno swój backend, jak i frontend i zaprezentować unikalną witrynę swoim odwiedzającym i autorom.

W tej części pokażemy Ci prosty kod, który pozwoli Ci usunąć pozycje menu najwyższego poziomu ze stron administracyjnych WordPress.

Kod, który znajdziesz poniżej, spowoduje usunięcie wszystkich elementów menu najwyższego poziomu wszystkim użytkownikom, a nie administratorom . Zanim przejdziesz dalej, powinieneś wiedzieć, że ten fragment kodu usuwa tylko elementy menu, ale te elementy będą nadal dostępne dla każdego, kto zna poprawną ścieżkę do strony ustawień. Jeśli chcesz całkowicie ograniczyć dostęp do niektórych stron menu, będziesz musiał zmienić możliwości użytkownika.

Usuń pozycje menu najwyższego poziomu:

  1. Otwórz plik functions.php
  2. Skopiuj i wklej następujący kod:
 if (!current_user_can( 'manage_options' )) {
add_action( 'menu_admin', 'moje_usuń_menu', 999 );
}
funkcja moje_usuń_menu() {
remove_menu_page( 'index.php' ); //Deska rozdzielcza
remove_menu_page( 'edit.php' ); //Posty
remove_menu_page( 'upload.php' ); //Głoska bezdźwięczna
remove_menu_page( 'edit.php?post_type=page' ); //Strony
remove_menu_page( 'edit-comments.php' ); //Uwagi
remove_menu_page( 'motywy.php' ); //Wygląd zewnętrzny
remove_menu_page( 'plugins.php' ); //Wtyczki
remove_menu_page( 'users.php' ); //Użytkownicy
remove_menu_page( 'tools.php' ); //Narzędzia
remove_menu_page( 'opcje-general.php' ); //Ustawienia
}
  1. Zapisz zmiany

Ponieważ ten kod usuwa wszystkie menu najwyższego poziomu, których prawdopodobnie nie chcesz robić, możesz zmodyfikować kod do swoich potrzeb. Każda linia „remove_menu_page” odpowiada za usunięcie jednej strony (co jest opisane w nawiasach oraz w komentarzu obok linii kodu). Po prostu dodaj lub usuń stronę, która ma być nieobecna w menu i jeszcze raz zapisz zmiany.

Teraz, gdy nauczyłeś się, jak usuwać strony najwyższego poziomu z menu, możesz chcieć usunąć tylko niektóre podstrony, które znajdują się pod podstronami najwyższego poziomu.

Najlepsze wtyczki menu 4 dla WordPress

Kiedy już zaczniesz budować swoją nową stronę internetową, prędzej czy później będziesz potrzebować menu. Możesz go utworzyć za pomocą standardowej opcji menu w WordPress, ale jeśli chcesz bardziej profesjonalną, będziesz musiał znać swoje kody HTML i CSS. Oznacza to również, że poświęcisz trochę czasu na zaprojektowanie wszystkiego tak, aby działało idealnie i jednocześnie pięknie wyglądało.

Ale jeśli potrzebujesz szybszego rozwiązania lub po prostu nie wiesz, jak zakodować własne, wymyślne menu, WordPress pozwala zainstalować kilka świetnych wtyczek, które są przeznaczone do tworzenia wspaniałych menu za pomocą kilku kliknięć. Bez szczególnej kolejności, oto niektóre z najlepszych wtyczek menu dla WordPress.

Uber Menu

CENA: 20 USD – DEMO

Uber Menu

Z ponad 43 000 sprzedaży, Uber Menu jest jedną z najpopularniejszych wtyczek do WordPressa . Gdy otworzysz stronę demonstracyjną i zobaczysz, jak wygląda menu utworzone za pomocą tej wtyczki, zrozumiesz, dlaczego jest tak popularne. A kiedy zaczniesz wymieniać jego funkcje, prawdopodobnie będziesz chciał go dla siebie.

Menu utworzone za pomocą menu Uber będą responsywne i obsługujące dotyk dla odwiedzających mobilnych. Możesz tworzyć piękne układy i umieszczać ikony, obrazy, filmy i mapy w swoim menu. Cały formularz można umieścić w podmenu, dzięki czemu można utworzyć formularz kontaktowy bez konieczności dodawania do tego dodatkowej strony. Wtyczka jest wysoce konfigurowalna i możesz bawić się ponad 50 ustawieniami stylu z podglądem na żywo. Możesz automatycznie tworzyć podmenu z innych treści, tworzyć zakładki pod menu i wiele, wiele więcej.

  • Dynamiczne generowanie pozycji
  • Podmenu z zakładkami
  • Ulepszony interfejs użytkownika

Morph: Konfigurowalne wysuwane menu WordPress

CENA: 20 USD – DEMO

Morph

Morph to wysuwane menu przeznaczone na urządzenia mobilne. Ale, jak widać na stronie demonstracyjnej, jeśli otworzysz ją na komputerze osobistym, wygląda ona naprawdę świetnie również na pulpicie.

Korzystając z tej wtyczki, możesz ukryć menu i wywołać je jednym kliknięciem . W obszarze menu możesz utworzyć standardowe menu rozwijane, dodawać zdjęcia, przyciski wyszukiwania, a cały obszar jest widżetowany, co oznacza, że ​​możesz osadzić wszystko, czego potrzebujesz i chcesz. Wtyczka jest bardzo konfigurowalna, dzięki czemu możesz wybierać żądane kolory, zmieniać wysokość obrazu i dodawać lub usuwać elementy zgodnie z własnymi potrzebami. Jeśli zamierzasz używać go na urządzeniach mobilnych, możesz łatwo ustawić rozdzielczości, dla których będzie się pojawiać menu.

  • Świetnie działa zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych
  • Dodaj/usuń konfigurowalne elementy
  • Może być wyzwalany przez dowolny element

Menu bohatera

CENA: 19 USD – DEMO

Menu bohatera

Niezależnie od tego, czy chcesz proste menu, czy złożone „Mega Menu”, możesz je utworzyć za pomocą wtyczki Hero Menu. Każde menu, które utworzysz, będzie responsywne i będzie wyglądać świetnie na każdym urządzeniu; jeśli zdecydujesz się utworzyć mega menu, elementy mogą być pokazywane lub ukrywane, dzięki czemu nie musisz się martwić o układ na mniejszych ekranach.

Dostępna jest specjalna obsługa dotykowa dla systemów Android, iOS i Windows Phone. Wybierz pasek nawigacyjny o pełnej lub stałej szerokości, do którego możesz łatwo dodawać dodatkowe elementy, korzystając z techniki przeciągnij i upuść . Istnieje ponad 60 gotowych schematów kolorów i możesz swobodnie korzystać z każdego z bezpłatnych czcionek Google. Spraw, aby menu było lepkie, wybierz odległość aktywacji… ta świetna wtyczka może zaoferować znacznie więcej, więc koniecznie sprawdź całą listę funkcji w CodeCanyon.

  • Konstruktor struktury menu Drag&Drop
  • Stwórz proste menu lub złożone mega menu
  • Specjalna nawigacja mobilna

Pasek Multi-X

CENA: 16 USD – DEMO

Pasek Multi X

Pasek Multi-X jest wtyczką modułową i pozwala umieścić praktycznie wszystko, co chcesz na pasku nawigacyjnym. Oprócz pozycji menu możesz umieścić na pasku do 8 pozycji – czy jest to formularz kontaktowy, formularz wyszukiwania, ikony udostępniania społecznościowego, obszar widżetów itp.

Do wyboru są dwa różne motywy oraz motyw niestandardowy, w którym można ustawić własne kolory, podczas gdy gradient będzie obliczany automatycznie. Pasek nawigacyjny może być umieszczony jako stałe lub przewijane menu. Jeśli jesteś programistą, będziesz chciał wiedzieć, że jest gotowy zestaw hooków, jeśli chcesz stworzyć nową wtyczkę z paska Multi-X. Ta wtyczka oferuje dużo, dużo więcej, więc koniecznie zapoznaj się ze wszystkimi funkcjami CodeCanyon.

  • 8 wbudowanych modułów funkcjonalnych
  • 2 motywy kolorystyczne + motyw niestandardowy
  • Pozycja górna lub dolna

Najlepsze wtyczki menu mobilnego WordPress

Wszyscy wiemy, jak daleko zaszła technologia. Smartfony i tablety stały się nieuniknione, a liczba posiadaczy urządzeń mobilnych rośnie. Sieci WiFi obejmują każdą część naszych miast, a jeśli jej nie ma, zawsze możesz podłączyć swoje urządzenie mobilne do Internetu za pośrednictwem swojego dostawcy. Oznacza to, że liczba internautów korzystających z urządzeń mobilnych jest wyższa niż kiedykolwiek i musisz się nimi zająć, jeśli prowadzisz witrynę internetową.

Jeśli tworzysz witrynę mobilną lub chcesz ją ulepszyć, zdecydowanie musisz utworzyć specjalne menu mobilne, które dostosuje się do każdego rozmiaru ekranu i ułatwi użytkownikom mobilnym nawigację .

W przypadku WordPressa to zadanie nie jest takie trudne, jak mogłoby się wydawać. Nie musisz umieć kodować ani konfigurować menu. Wszystko czego potrzebujesz to wtyczka, którą możesz łatwo zainstalować i dostosować do swoich potrzeb.

W tej części przewodnika pokażemy Ci niektóre z najlepszych wtyczek premium, które mogą stworzyć mobilne menu dla Twojej witryny WordPress. Przewińmy więc w dół i spójrzmy.

Dotykowy

CENA: 18 USD – DEMO

Dotykowy

Ta wtyczka premium utworzy czysty nagłówek mobilny z osadzonym w nim menu mobilnym. Animacje są bardzo proste i mogą wyglądać naprawdę ładnie i płynnie na ekranie smartfona. Dzięki Tactile możesz utworzyć wielopoziomowe menu akordeonowe, jednopoziomowe menu poziome, które można przesuwać, lub utworzyć widżetowy pasek boczny, który może przejść do Twojej witryny .

Wszystko można dostosować, co oznacza, że ​​możesz pomalować elementy na dowolny kolor, zmienić tło i ustawić ich kolory, krycie i wiele więcej. Twoje menu może być ustalone lub ustawione bezwzględnie. Jeśli chcesz mieć jeszcze większą kontrolę nad urządzeniami mobilnymi, możesz ustawić rozdzielczości, dla których to menu będzie aktywowane.

  • Kilka typów menu
  • Funkcje wyszukiwania
  • Pozycjonowanie stałe/bezwzględne

DotknijDotknij

CENA: 10 USD – DEMO

Dotknij-Dotknij

TapTap da Ci możliwość tworzenia unikalnego mobilnego menu dla Twojej witryny WordPress. Jak widać na stronie demonstracyjnej, możesz stworzyć prawie wszystko, co sobie wyobrazisz, a Twoje menu będą wyglądać naprawdę schludnie. Dzięki tej wtyczce możesz tworzyć wielopoziomowe menu, decydować, które elementy chcesz pokazać, dodawać opisy lub włączać zintegrowaną opcję wyszukiwania .

Do wyboru są dwa projekty przycisków menu i kilka animacji. Pozycja Twojego menu może być stała lub możesz użyć pozycjonowania bezwzględnego. Wybierz style tła i baw się wieloma opcjami stylizacji, aby idealnie dopasować menu do swojego motywu. Wreszcie, TapTap pozwoli Ci wybrać rozdzielczości, w których będzie się wyświetlać. Czego więcej można chcieć od mobilnego menu nawigacyjnego?

  • Menu wielopoziomowe
  • 2 projekty przycisków menu i animacje
  • Pozycjonowanie stałe/bezwzględne

Mobi

CENA: 16 USD – DEMO

Mobi

Mobi to kolejna prosta, ale świetna wtyczka WordPress gotowa do pomocy w witrynach mobilnych. Dzięki temu dodatkowi Twój responsywny motyw będzie miał jeszcze lepszą nawigację. Po utworzeniu menu za pomocą intuicyjnego kreatora menu przeciągnij i upuść , możesz umieścić je na górze lub na dole swojej witryny.

Wszystkie pozycje menu można dostosować i możesz dowolnie dodawać ikony mediów społecznościowych do paska nawigacyjnego. Istnieje ponad 700 czcionek ikon i możesz ukończyć swój projekt, korzystając z jednej z czcionek Google. W razie potrzeby możesz kontrolować widoczność użytkowników dla gości i zalogowanych użytkowników.

  • Personalizacja przeciągnij i upuść
  • Pozycjonowanie w górnym lub dolnym menu
  • Widoczność użytkownika dla gości i zalogowanych użytkowników

Wah-menu

CENA: 44 USD – DEMO

Wah-wah

Wah-menu to dokowalne menu idealne dla witryn mobilnych, specjalnie zaprojektowane do nawigacji dotykowej na iPadzie. Dzięki tej wtyczce premium możesz dodać do 8 linków menu, które będą ładnie umieszczone z boku witryny WordPress.

Po kliknięciu określonej ikony w menu pojawi się podmenu, które pozwala na HTML, osadzone filmy, mapy i prawie wszystko, co chcesz. Wtyczka jest wysoce konfigurowalna, co oznacza, że ​​możesz wybierać spośród 8 kolorów akcentów, bawić się szerokością menu, ikonami, linkami itp. Tworzenie menu jest bardzo łatwe dzięki edytorowi WYSIWYG. Niezależnie od tego, czy wybierzesz ciemny, czy jasny motyw, możesz mieć pewność, że będzie ładnie wyglądać.

  • Edytor WYSIWYG
  • Podmenu z obsługą HTML, osadzonych filmów itp.
  • Opcja stanu poza lub zadokowany

Menu stylu ścieżki

CENA: 12 USD – DEMO

Styl ścieżki

Ta wtyczka premium różni się nieco od zwykłej wtyczki przeznaczonej do tworzenia menu. Zamiast klasycznego paska menu lub menu paska bocznego menu stylu ścieżki tworzy przycisk . Po aktywowaniu przycisku wyświetli się menu wokół przycisku w okręgu, rozwinie je w dowolnym kierunku, a nawet uporządkuje ikony w łuk.

Jeśli istnieje wiele poziomów menu, przycisk utworzy przycisk Wstecz, który umożliwi użytkownikom ponowne przejście do menu głównego. Istnieje mnóstwo opcji dostosowywania i tworzenia menu; możesz po prostu użyć standardowego edytora menu WordPress. Jeśli szukasz unikalnego mobilnego menu, daj szansę menu Path Style.

  • Utwórz menu wokół przycisku
  • Wysoce konfigurowalny
  • Użyj standardowego menu WP do edycji menu

Scrollnav

CENA: 10 USD – DEMO

Scrollnav

Kolejna unikalna wtyczka do menu, która daje Ci kilka świetnych funkcji i może świetnie wyglądać na Twojej stronie. Scrollnav składa się z koła, które zawiera kilka opcji menu . Na środku przycisku znajduje się link do strony głównej, górny link logicznie przenosi Cię na górę strony, znajduje się pole wyszukiwania, niestandardowe menu i niestandardowa część koła z linkiem.

Niestandardowe menu zapewni wystarczająco dużo miejsca, aby stworzyć całe menu z podmenu, będzie wyglądać świetnie i zapewni bardzo potrzebne miejsce na Twojej mobilnej stronie internetowej. Do wyboru jest kilka schematów kolorów i wszystko jest łatwe do skonfigurowania. Zdecydowanie powinieneś sprawdzić stronę demonstracyjną, aby zobaczyć, jak działa ta mała wtyczka.

  • Okrągły przycisk z różnymi funkcjami
  • Niestandardowe menu i niestandardowa część łącza
  • Kilka schematów kolorystycznych

Przewiń do menu

CENA: 24 USD – DEMO

Przewiń do menu

Ta prosta wtyczka premium zapewni Ci fajne menu paska bocznego, które jest zbudowane dla nawigacji dotykowej iOS i Android. Po utworzeniu menu będzie ono zawierało ikony, które prowadzą do innej części strony i automatycznie się przewijają.

Należy pamiętać, że ScrollTo nie jest pełnym menu nawigacyjnym , ale przewija się tylko do innej części tej samej strony. Możesz wybierać spośród ponad 750 ikon lub użyć własnych obrazów jako elementów menu i jest dodatkowe miejsce na reklamy. Aby wszystko działało, musisz mieć podstawową wiedzę na temat HTML, abyś mógł postępować zgodnie z instrukcjami. Może to zająć jeszcze kilka minut, ale efekt końcowy wygląda świetnie.

  • Obsługa dotykowa
  • Ponad 750 ikon + niestandardowe obrazy
  • Dodatkowa przestrzeń reklamowa

Wniosek

Mamy nadzieję, że do tej pory zdałeś sobie sprawę, że ciężko jest prowadzić stronę internetową bez menu. Nawet jeśli używasz one-pagera, nadal będziesz potrzebować nawigacji między sekcjami. Tak więc, gdy już tu jesteś, poświęć trochę czasu na dostosowanie menu WordPress i jak najlepsze.