Chcesz stworzyć responsywne menu na swoim blogu WordPress?

Obecnie liczba użytkowników mobilnych przewyższa liczbę użytkowników komputerów stacjonarnych. Dodanie responsywnego menu mobilnego ułatwia użytkownikom poruszanie się po Twojej witrynie.

W tym samouczku pokażemy, jak łatwo utworzyć responsywne menu w WordPress.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Ile wtyczek zainstalować na WordPress. et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Jak stworzyć responsywne mobilne menu wordpress

Tutaj będzie kwestia zagłębienia się, pokazując zarówno metodę z wtyczką dla początkujących, jak i metodę kodowania dla zaawansowanych użytkowników.

Pierwsza metoda: utwórz menu mobilne za pomocą wtyczki WordPress

Ta metoda jest łatwiejsza i zalecana dla początkujących, ponieważ nie wymaga żadnych specjalnych umiejętności kodowania.

W tej metodzie utworzymy menu (z ikoną hamburgera), który przesuwa się na ekranie telefonu komórkowego.

stworzyć responsywne menu


Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować Wtyczka WordPress Responsive Menu , Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress .

Po aktywowaniu wtyczki wtyczka doda w menu nowy element o nazwie „ responsive Menu ". Kliknięcie go przeniesie Cię do strony ustawień WordPress Plugin.

Wtyczka responsywnego menu pulpitu WordPress

Najpierw musisz wprowadzić rozmiar, z którego ma się pojawić menu mobilne. Wartość domyślna to 800 pikseli, co powinno działać w przypadku większości witryn internetowych.

Następnie musisz wybrać menu, którego chcesz używać na telefonie komórkowym.

Ostatnia opcja na ekranie umożliwia podanie klasy CSS dla twojego menu. Umożliwi to wtyczce ukrycie niereagującego menu na małych ekranach.

Nie zapomnij kliknąć « Opcje aktualizacji Aby zapisać ustawienia.

Sugerujemy również, abyś odkrył nasze Wtyczki 10 WordPress do tworzenia menu na blogu

Możesz teraz odwiedzić swoją witrynę internetową i zmienić rozmiar ekranu przeglądarki, aby zobaczyć responsywne menu w akcji.

Site-in-action-menu-czuły do ​​telefonu komórkowego

Wtyczka « responsive Menu »Oferuje wiele innych opcji, które pozwalają modyfikować zachowanie i wygląd responsywnego menu. Możesz zapoznać się z tymi opcjami na stronie ustawień wtyczki i dostosować je w razie potrzeby.

Metoda 2: Jak ręcznie dodać menu mobilne

Jedną z najczęstszych metod wyświetlania menu na ekranach urządzeń mobilnych jest użycie dźwigni.

Ta metoda wymaga dodania niestandardowego kodu do plików WordPress.

W jednym z naszych poprzednich samouczków pokażemy Ci jak stworzyć wtyczkę WordPress.

Najpierw musisz otworzyć edytor tekstu, taki jak Notatnik, i wkleić ten kod.

(function () {nav var = document.getElementById ('site-navigation'), przycisk, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Ukryj przycisk, jeśli brakuje menu lub pusty, jeśli (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', '')); menu.className = menu.className.replace ('przełączony -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Teraz musisz zapisać ten plik pod nazwą „ navigation.js Na twoim biurku.

Następnie musisz otworzyć klienta FTP, aby pobrać ten plik do lokalizacji „/ wp-content / themes / your-theme / js /” na swojej stronie WordPress.

Zamień wyrażenie „ Twój-theme » z nazwą folderu Twojego WordPress obecny. Jeśli twój katalog motywów nie ma folderu js, musisz go utworzyć.

Po przesłaniu pliku JavaScript następnym krokiem jest upewnienie się, że witryna WordPress załaduje pliki JavaScript. Będziesz musiał dodać następujący kod do „ functions.php »Z twojego WordPress.

Odkryj coś innego Co możesz zrobić z plikiem functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () /js/navigation.js "tablica (” jQuery ') 20160909' prawdziwa.);

Teraz musimy dodać menu nawigacyjne w naszym WordPress. Zwykle menu nawigacyjne dodawane jest w „ header.php Twojego motywu WordPress.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

Zakładamy, że lokalizacja menu zdefiniowana przez motyw WordPress nazywa się „ pierwotny ”. W przeciwnym razie użyj lokalizacji określonej przez motyw WordPress.

Ostatnim krokiem jest dodanie CSS, tak aby nasze menu korzystało z odpowiednich klas CSS do przełączania podczas przeglądania na urządzeniach mobilnych.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

Możesz teraz odwiedzić swoją witrynę internetową i zmienić rozmiar ekranu przeglądarki, aby sprawdzić, czy Twoje responsywne menu się przełącza.

Rocking-menu-wordpress-tutorial

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

UberMenu to WordPress Plugin poświęcony tworzeniu wysoce konfigurowalnego, responsywnego i dostępnego dla użytkownika megamenu. Działa po instalacji, bez potrzeby jakiejkolwiek konkretnej konfiguracji.

Wtyczka mega menu Ubermenu wordpress

Jest to łatwa w użyciu wtyczka, ale wystarczająco potężna, aby tworzyć wysoce konfigurowalne i kreatywne układy mega menu.

Zobacz także nasze 9 wtyczek WordPress do tworzenia siatek cen na blogu

Znajdziesz między innymi: 3 szablony menu, w pełni responsywny układ, kompatybilność z urządzeniami mobilnymi (iPhone, iPad, Android), obsługę dotykową itp ...

Pobierz | Demo | hosting

2. LMM

Liquida Mega Menu, zwana także LMM, to WordPress Plugin przeznaczony dla użytkowników i programistów. Posiada prosty i intuicyjny interfejs, zintegrowany z pulpitem WP, pozwalający na tworzenie i dostosowywanie nieograniczonej liczby mega menu, bez umiejętności programowania.

Lmm responsywne mega menu oparte na bootstrapie

Zawiera dziesiątki funkcji, zarówno dla zwykłych, jak i zaawansowanych użytkowników. Jako funkcjonalności oferuje między innymi: automatyczną i ręczną integrację, obsługa wielu lokalizacji, dbanie o motywy dla dzieci, całkowicie konfigurowalny styl menu, konfigurowalne lokalizacje menu, przyklejone menu itp.

Pobierz | Demo | hosting

3. 8Degree Menu Fly

8Degree Fly Menu to wysokiej jakości wtyczka WordPress, która umożliwia dodanie menu płótna do Twojej witryny, aby nadać jej wygląd, który podkreśla i łatwo Twoje informacje. Używa domyślnej funkcji menu WordPress do tworzenia swoich menu.

8degree fly menu responsywne z menu plugin menu dla wordpress

Będziesz mógł dodawać dodatkowe elementy do domyślnych pozycji menu, takie jak ikony, slogany menu, pseudo-grupujący nagłówek i długi opis.

Aby przeczytać także: 10 wtyczek WordPress do optymalizacji pasków bocznych i lepkich nagłówków

Jest również wyposażony w edytor WYSIWYG, który pomaga uchwycić długi opis w przyjazny dla użytkownika sposób. Za pomocą tego edytora możesz także używać skrótów.

Pobierz | Demo | hosting

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

Wnioski

Więc ! To tyle w przypadku tego samouczka, mam nadzieję, że pozwoli Ci stworzyć menu dla użytkowników mobilnych. nie krępuj się podziel się wskazówką ze znajomymi w 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.

Ale w międzyczasie opowiedz nam o swoim commentaires i sugestie w dedykowanej sekcji.

...