W artykule:
Udostępnienie witryny WordPress na urządzeniach mobilnych rozpoczyna się-ale nie kończy – wraz z instalacją responsywnego motywu.
Nawigacja jest niezwykle ważna dla doświadczenia użytkownika dowolnej witryny, a wymuszanie menu zaprojektowanych dla znacznie większych urządzeń na użytkownikach mobilnych może cofnąć całą dobrą pracę responsywnego projektu.
Oto pięć prostych kroków, aby dodać menu specyficzne dla urządzeń mobilnych do responsywnego szablonu i zapewnić niesamowite wrażenia wizualne dla użytkowników mobilnych.
Istnieje wiele powodów, dla których mniejsze ekrany zasługują na własną nawigację:
- Ograniczone Nieruchomości: długie menu może po prostu nie pasować do ekranu mobilnego. Menu na mniejszych urządzeniach muszą być krótsze i głębsze niż ich odpowiedniki na pulpicie.
- Zmiana Priorytetu stron dla użytkowników mobilnych: być może użytkownicy mobilni mają inny zestaw popularnych stron niż użytkownicy komputerów stacjonarnych(sprawdź teraz swoje analizy!) i dlatego warto nadać tym stronom wyższy priorytet w nawigacji.
- Dostarczanie mobilnych wersji stron: możesz chcieć dostarczyć inną wersję tej samej strony dla użytkowników mobilnych i zmiana linku strony w nawigacji pozwala to zrobić.
Dostępne są dwie opcje dostarczania menu specyficznych dla platformy. Jednym z nich jest określenie platformy z przeglądarki wykonującej żądanie, a następnie wyjście z odpowiedniego menu. Drugim jest wypisywanie wszystkich menu, a następnie Korzystanie z @ media zapytania w arkuszu stylów, aby wyświetlić tylko odpowiednie menu. Podczas gdy @ media podejście do zapytań oznacza wyprowadzanie HTML, które nie może być używane, jest zgodne z responsywnym projektem, więc jest to opcja, którą przyjrzymy się tutaj. Będziemy pracować z motywem TwentyThirteen dostarczonym z WordPress 3.6.
Krok 1-Utwórz motyw potomny
Jeśli nie masz jeszcze motywu potomnego, utwórz go teraz! Oprócz tego, że jest to najlepsza praktyka, znacznie ułatwia dostosowywanie, utrzymuje oryginalny motyw w takcie i pozwoli Ci zaktualizować oryginalny motyw bez utraty wszystkich modyfikacji. Kopiuj w poprzek nagłówek.php z bieżącego motywu i utwórz pusty funkcje.php.
Krok 2-Dodaj nową lokalizację Menu
Dodanie lokalizacji menu do naszego mobilnego menu sprawi, że rozwiązanie będzie znacznie bardziej elastyczne. Praca z lokalizacją menu zamiast z konkretnym menu umożliwi przypisanie nowych menu do lokalizacji bez konieczności aktualizowania arkusza stylów. Aby dodać nową lokalizację menu, dodaj następujące funkcje.php:
function extra_setup () {
register_nav_menu ('primary mobile', __( 'Navigation Mobile', 'twentythirteen' ));
}
add_action ('after_setup_theme', 'extra_setup');
Teraz, kiedy idziesz do Wygląd > Menu w zapleczu instalacji WordPress zobaczysz teraz dwie lokalizacje menu jako możliwe opcje menu. Utwórz menu i przypisz je do nowej lokalizacji, aby mieć coś do przetestowania.
Krok 3-Dodaj nową lokalizację do nagłówka
Otwórz nagłówek.php, znajdź istniejące połączenie do wp_nav_menu i dodać następujące bezpośrednio pod:
'primary mobile', 'menu_class' => 'nav-menu'));?>;
To wywołanie generuje kod HTML dla naszej nowej lokalizacji menu.
Krok 4-Ustaw klasy CSS dla menu
Aby pokazać odpowiednie menu, wykorzystamy @ media zapytania do przełączania wyświetlania menu głównego i mobilnego.
Domyślnie WordPress zawija menu w tag div z nazwą klasy pochodzącą od nazwy menu. Chociaż moglibyśmy po prostu użyć tych nazw klas w naszym arkuszu stylów, oznaczałoby to konieczność aktualizacji arkusza stylów za każdym razem, gdy inne menu jest przypisane do lokalizacji. Aby zmaksymalizować elastyczność, ustawimy własną, bardziej ogólną nazwę klasy dla kontenera menu. Możemy to zrobić bardzo prosto za pomocą wp_nav_menu_args filtr.
Wróć do swojego funkcje.php plik i dodaj następujące:
function set_container_class ($args) {
$args ['container_class'] = str_replace ('',' -', $args ['theme_location']).'- nav'; return $args;
}
add_filter ('wp_nav_menu_args', 'set_container_class')
Wszystko co tutaj robimy to ustawianie container_class do lokalizacji tematu (zastąpienie spacji myślnikami) i dodanie ’- nav’. Zarejestrowaliśmy lokalizacje podstawowe oraz podstawowa komórka więc WordPress będzie teraz wyprowadzać nasze 2 menu zawinięte w < div class=”primary-nav”> oraz < div class = „primary-mobile-nav”> elementy odpowiednio.
Krok 5-Zmień arkusz stylów, aby kontrolować wyświetlanie Menu
Naszym ostatnim krokiem jest dodanie stylizacji, aby pokazać tylko odpowiednie menu. Otwórz styles.css i dodać następujące:
.primary-mobile-nav {
Wyświetlacz: Brak;
}
@ media (max-width: 643px) {
.primary-nav {
Wyświetlacz: Brak;
}
.primary-mobile-nav {
wyświetlacz: blok;
}
}
Ogólnie rzecz biorąc, nie chcemy, aby menu mobilne się pokazywało, więc ukryjemy je domyślnie, ustawiając jego wyświetlacz atrybut do brak.
Aby upewnić się, że wyświetlamy menu mobilne (i ukrywamy Menu główne) tylko wtedy, gdy osiągniemy określony rozmiar ekranu, umieszczamy instrukcje wyświetlania w odpowiednim @ media zapytanie. Dla motywu TwentyThirteen jest to 643px, ale musisz sprawdzić arkusz stylów motywu, aby zobaczyć, który @ media zapytanie aktywuje małe menu.
Oczywiście możesz dodać dowolną liczbę menu i wyświetlać wiele rozmiarów ekranu, dodając więcej menu w krokach drugim i trzecim oraz aktualizując arkusz stylów o odpowiednie @ media zapytania.
Wystarczy pięć szybkich i łatwych kroków, aby dodać niesamowite menu mobilne do responsywnego motywu WordPress i zapewnić użytkownikom spoza komputera znacznie lepsze i bardziej dostosowane wrażenia.
Jakie inne kroki należy podjąć, aby poprawić komfort korzystania z urządzeń mobilnych dla odwiedzających? Czy w ogóle podejmujesz jakieś kroki? Powiedz nam w komentarzach poniżej.
Tagi:
