Vrei să creezi un meniu receptiv pe blogul tău WordPress?

Utilizatorii de telefoane mobile depășesc numărul de utilizatori de desktop în aceste zile. Adăugarea unui meniu mobil receptiv facilitează navigarea utilizatorilor pe site-ul dvs. web.

În acest tutorial, vă vom arăta cum puteți crea cu ușurință un meniu cu reacție pe WordPress.

Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Câte plugin-uri de instalat pe WordPress. et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

Cum să creați un meniu wordpress adaptabil pentru mobil

Aici va fi vorba de a merge mai în profunzime, arătându-vă atât metoda cu un plugin pentru începători, cât și metoda de codare pentru utilizatorii avansați.

Prima metodă: creează un meniu mobil cu un plugin WordPress

Această metodă este mai ușoară și recomandată pentru începători, deoarece nu necesită abilități speciale de codare.

În această metodă, vom crea un meniu (cu o icoană cu hamburger) care alunecă pe ecranul mobilului.

creați un meniu receptiv


Primul lucru pe care trebuie să-l faceți este să instalați și să activați fișierul Plugin pentru meniul WordPress Responsive . Pentru mai multe detalii, consultați ghidul nostru despre cum să instalați un plugin WordPress .

După activarea pluginului, pluginul va adăuga un nou element în meniu, intitulat " Meniul receptiv ". Făcând clic pe acesta, veți ajunge la pagina de setări a WordPress plug-in.

Plugin pentru meniul tabloului de bord cu receptivitate WordPress

Mai întâi trebuie să introduceți dimensiunea de la care ar trebui să apară meniul mobil. Valoarea implicită este 800 px, care ar trebui să funcționeze pentru majoritatea site-urilor web.

După aceea, trebuie să selectați meniul pe care doriți să-l utilizați pe mobil.

Ultima opțiune de pe ecran vă permite să furnizați o clasă CSS pentru meniul dvs. Aceasta va permite pluginului să-și ascundă meniul care nu răspunde pe ecrane mici.

Nu uitați să faceți clic pe « Opțiuni de actualizare Pentru a salva setările.

Vă sugerăm, de asemenea, să ne descoperiți 10 plugin-uri WordPress pentru a crea meniuri pe blogul dvs.

Acum puteți vizita site-ul dvs. web și puteți redimensiona ecranul browserului pentru a vedea meniul receptiv în acțiune.

Site-in-action-meniu receptiv-mobil

Pluginul « Meniul receptiv »Oferă multe alte opțiuni care vă permit să modificați comportamentul și aspectul meniului dvs. receptiv. Puteți explora aceste opțiuni în pagina de setări a pluginului și o puteți ajusta după cum este necesar.

Metoda 2: Cum să adăugați manual un meniu mobil

Una dintre cele mai frecvente metode utilizate pentru a afișa un meniu pe ecranele mobile este utilizarea pârghiei.

Această metodă necesită să adăugați cod personalizat la fișierele dvs. WordPress.

În unul dintre tutorialele noastre anterioare, vă prezentăm cum să creezi un plugin WordPress.

Mai întâi trebuie să deschideți un editor de text precum Notepad și să lipiți acest cod.

(function () {nav var = document.getElementById ('site-navigation'), buton, meniu; if (! nav) {return;} buton = nav.getElementsByTagName ('buton') [0]; meniu = nav. getElementsByTagName ('ul') [0]; if (! buton) {return;} // Butonul Ascunde dacă meniul lipsește sau este gol dacă (! meniu ||! 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 ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Acum trebuie să salvați acest fișier cu numele " navigation.js Pe biroul tău.

Apoi, trebuie să deschideți un client FTP pentru a descărca acest fișier în locația „/ wp-content / theme / your-theme / js /” de pe site-ul dvs. WordPress.

Înlocuiți expresia " dvs. temă » cu numele folderului dvs WordPress temă actual. Dacă directorul dvs. de teme nu are un folder js, atunci trebuie să creați unul.

După încărcarea fișierului JavaScript, următorul pas este să vă asigurați că site-ul dvs. WordPress va încărca fișierele JavaScript. Va trebui să adăugați următorul cod la „ functions.php »Dintre ale tale WordPress temă.

Descoperă altceva Ce puteți face cu fișierul funcții.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js, array (“jquery '), 20160909', adevărat.);

Acum trebuie să adăugăm meniul de navigare în programul nostru WordPress temă. De obicei, meniul de navigare este adăugat în „ header.php Din tema dvs. 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>

Presupunem că locația meniului definită de tema dvs. WordPress se numește „ primar ". În caz contrar, utilizați locația definită de tema dvs. WordPress.

Ultimul pas este să adăugăm CSS, astfel încât meniul nostru să utilizeze clasele CSS potrivite pentru a comuta atunci când este vizualizat pe dispozitive mobile.

/* 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;
    }
    
    }

Acum puteți să vă vizitați site-ul web și să redimensionați ecranul browserului pentru a vedea dacă meniul dvs. receptiv se comută.

Balansoar-meniu WordPress-Tutorial

Descoperiți și câteva plugin-uri premium WordPress  

Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. UberMenu

UberMenu este un WordPress plug-in dedicat creării unui megameniu extrem de personalizabil, receptiv și accesibil utilizatorului. Este funcțional după instalare, fără a fi nevoie de nicio configurație anume.

Plugin Ubermenu wordpress mega menu

Este un plugin ușor de utilizat, dar suficient de puternic pentru a crea aspecte de mega meniu extrem de personalizabile și creative.

Vezi și nostru 9 plugin-uri WordPress pentru a crea grile de preț pe un blog

Veți găsi printre altele: 3 șabloane de meniu, aspect complet receptiv, compatibilitate cu dispozitive mobile (iPhone, iPad, Android), suport tactil etc.

Descarca | Demo | web hosting

2. LMM

Liquida Mega Menu numit și LMM este un WordPress plug-in conceput pentru utilizatori și dezvoltatori. Are o interfață simplă și intuitivă, integrată în tabloul de bord WP, ​​permițându-vă să creați și să personalizați o cantitate nelimitată de mega meniuri, fără abilități de programare.

Mega meniu LMP wordpress receptiv bazat pe bootstrap

Acesta vine cu zeci de funcții, fie pentru utilizatorii obișnuiți, fie pentru utilizatorii avansați. Ca funcționalități, oferă printre altele: integrare automată și manuală, suport pentru mai multe site-uri, având grijă de temele copiilor, stil complet personalizabil pentru meniuri, locații de meniu personalizabile, meniu lipicios etc...

Descarca | Demo | web hosting

3. 8Degree Fly Menu

8Degree Fly Menu este un plugin premium WordPress care vă permite să adăugați un meniu canvas pe site-ul dvs. web, pentru a-i oferi un aspect care să evidențieze și ușor informațiile dvs. Folosește funcția implicită de meniu WordPress pentru a-și crea meniurile.

8Degree fly menu responsive off meniul plugin pentru wordpress

Veți putea adăuga elemente suplimentare la elementele implicite din meniu, cum ar fi pictograme, sloganuri de meniu, un antet de pseudo-grupare și o descriere lungă.

Pentru a citi, de asemenea: 10 plugin-uri WordPress pentru a optimiza barele laterale și anteturile lipicioase

De asemenea, vine cu un editor WYSIWYG pentru a vă ajuta să înțelegeți descrierea lungă într-un mod ușor de utilizat. Cu acest editor puteți utiliza și shortcodes.

Descarca | Demo | web hosting

Alte resurse recomandate

De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.

Concluzie

Asa de ! Atât pentru acest tutorial, sper că vă va permite să creați un meniu pentru utilizatorii de telefonie mobilă. simte-te liber sa împărtășiți sfatul prietenilor dvs. de pe rețelele de socializare.

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.

Dar, între timp, spuneți-ne despre dvs. comentarii și sugestii în secțiunea dedicată.

...