Dëshironi të krijoni një menu të përgjegjshme në blogun tuaj të WordPress?

Përdoruesit e celularëve janë më shumë se përdoruesit e kompjuterëve desktop këto ditë. Shtimi i një menuje të përgjegjshme celulare e bën më të lehtë për përdoruesit të lundrojnë në faqen tuaj të internetit.

Në këtë tutorial, ne do t'ju tregojmë se si të krijoni me lehtësi një menu të përgjegjshme në WordPress.

Por më parë, nëse nuk keni instaluar kurrë WordPress zbuloni Sa shtojca për të instaluar në WordPress. et Si të kërkoni, instaloni dhe aktivizoni një temë WordPress në blogun tuaj 

Atëherë kthehu pse ne jemi këtu.

Si të krijoni menunë e përgjegjshme të wordpress-it celular

Këtu do të jetë një çështje për të shkuar në thellësi duke ju treguar si metodën me një shtojcë për fillestarët ashtu edhe metodën e kodimit për përdoruesit e përparuar.

Metoda e parë: Krijoni një menu të lëvizshme me një shtojcë WordPress

Kjo metodë është më e lehtë dhe rekomandohet për fillestarët sepse nuk kërkon aftësi të veçanta të kodimit.

Në këtë metodë, ne do të krijojmë një menu (me një ikonë hamburgeri) i cili rrëshqet në ekranin celular.

krijoni një menu të përgjegjshme


Gjëja e parë që duhet të bëni është të instaloni dhe aktivizoni Shtojcë e Menysë Përgjegjëse WordPress . Për më shumë detaje, shikoni udhëzuesin tonë se si të instaloni një shtojcë WordPress .

Pas aktivizimit të shtojcës, shtojca do të shtojë një artikull të ri në menunë, të titulluar " përgjegjshëm Menu ". Klikimi mbi të do t'ju çojë në faqen e cilësimeve të plugin WordPress.

Shtojca e menysë së panelit të përgjegjshëm WordPress

Së pari duhet të futni madhësinë nga e cila duhet të shfaqet menyja e lëvizshme. Default është 800px, e cila duhet të funksionojë për shumicën e faqeve të internetit.

Pas kësaj ju duhet të zgjidhni menunë që dëshironi të përdorni në celular.

Opsioni i fundit në ekran ju lejon të siguroni një klasë CSS për menunë tuaj. Kjo do të lejojë shtojcën të fshehë menunë tuaj jo-përgjegjëse në ekranet e vogla.

Mos harroni të klikoni në « Ndrysho opsionet Për të ruajtur cilësimet tuaja.

Ne gjithashtu ju sugjerojmë të zbuloni tonën 10 plugins WordPress për të krijuar menunë në blogun tuaj

Tani mund të vizitoni faqen tuaj në internet dhe të ndryshoni madhësinë e ekranit të shfletuesit tuaj për të parë menunë e përgjegjshme në veprim.

Site-in-veprim-menu-përgjegjshëm-to-Mobile

Shtojca « përgjegjshëm Menu »Ofron shumë mundësi të tjera që ju lejojnë të modifikoni sjelljen dhe pamjen e menusë tuaj të përgjegjshme. Këto opsione mund t'i eksploroni në faqen e cilësimeve të shtojcës dhe t'i rregulloni sipas nevojës.

Metoda 2: Si të shtoni me dorë një menu të lëvizshme

Një nga metodat më të zakonshme që përdoret për të shfaqur një menu në ekranet mobile është përdorimi i levave.

Kjo metodë kërkon që të shtoni kodin personal në skedarët tuaj WordPress.

Në një nga mësimet tona të mëparshme, ne ju tregojmë si të krijoni një plugin WordPress.

Së pari ju duhet të hapni një redaktues teksti si Notepad dhe ngjisni këtë kod.

(funksioni () {nav var = dokument.getElementById ('site-navigacion'), butoni, menuja; nëse (! nav) {kthimi;} butoni = nav.getElementsByTagName ('butoni') [0]; menuja = nav. getElementsByTagName ('ul') [0]; nëse (! butoni) {kthimi; button // Butoni fshehni nëse menuja mungon ose është bosh nëse (! menuja ||! menu.childNodes.l gjatësia) {butoni.style.display = 'asnje'; kthimi;} butoni.onclick = funksioni () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == buton.className.indexOf ('toggled-on')) {buton.className = buton.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} other {butoni.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Tani ju duhet ta ruani këtë skedar me emrin " navigation.js Në tryezën tuaj.

Atëherë duhet të hapni një klient FTP për ta shkarkuar këtë skedar në vendndodhjen "/ wp-content / themes / your-theme / js /" në faqen tuaj të internetit të WordPress.

Zëvendësoni shprehjen " tuaj-theme » me emrin e dosjes tuaj WordPress theme aktuale. Nëse drejtoria juaj e temave nuk ka një dosje js, atëherë duhet të krijoni një të tillë.

Pas ngarkimit të skedarit JavaScript, hapi tjetër është të siguroheni që faqja juaj e internetit WordPress do të ngarkojë skedarët JavaScript. Ju do të duhet të shtoni kodin e mëposhtëm në " functions.php " e juaja WordPress theme.

Zbuloni diçka tjetër Farë mund të bëni me skedarin e funksioneve.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array ( 'jQuery'), 20160909 ', e vërtetë.);

Tani duhet të shtojmë menunë e navigimit në tonë WordPress theme. Zakonisht menyja e navigimit shtohet në " header.php Nga tema juaj e 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>

Ne supozojmë se vendndodhja e menusë e përcaktuar nga tema juaj e WordPress quhet " primar ". Përndryshe, përdorni vendndodhjen e përcaktuar nga tema juaj e WordPress.

Hapi i fundit është të shtojmë CSS në mënyrë që menuja jonë të përdorë klasat e duhura CSS për të kaluar kur shikohet në pajisjet 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;
    }
    
    }

Tani mund të vizitoni faqen tuaj në internet dhe të ndryshoni madhësinë e ekranit të shfletuesit tuaj për të parë nëse menuja juaj e përgjegjshme ndryshon.

Rocking-menu-wordpress-tutorial

Zbuloni gjithashtu disa shtesa premium WordPress  

Mund të përdorni të tjera WordPress plugins për të dhënë një pamje moderne dhe për të optimizuar trajtimin e blogut ose faqes tuaj të internetit.

Ne ju ofrojmë këtu disa shtesa premium WordPress që do t'ju ndihmojnë ta bëni atë.

1. UberMenu

UberMenu është një plugin WordPress dedikuar krijimit të një megamenuje shumë të personalizueshme, të përgjegjshme dhe të aksesueshme nga përdoruesi. Është funksional pas instalimit të tij, pa pasur nevojë për ndonjë konfigurim të veçantë.

Ubermenu wordpress plugin mega menu

Shtë një shtojcë e lehtë për t’u përdorur, por mjaft e fuqishme për të krijuar paraqitje të mega menuve shumë të personalizueshme dhe krijuese.

Shihni edhe tonë 9 plugins WordPress për të krijuar rrjete çmimesh në një blog

Ju do të gjeni ndër të tjera: 3 shabllone menuje, paraqitje plotësisht të përgjegjshme, pajtueshmëri me pajisjet mobile (iPhone, iPad, Android), mbështetje me prekje, etj ...

Shkarko | DEMO | web hosting

2. LMM

Liquida Mega Menu e quajtur edhe LMM është një plugin WordPress projektuar për përdoruesit dhe zhvilluesit. Ka një ndërfaqe të thjeshtë dhe intuitive, të integruar në pultin e WP, duke ju lejuar të krijoni dhe personalizoni një sasi të pakufizuar mega menush, pa asnjë aftësi programimi.

Mega menu e përgjegjshme për wordpress bazuar në bootstrap

Ajo vjen me dhjetëra karakteristika, qoftë për përdoruesit e rregullt apo të përparuar. Si funksionalitete, ofron ndër të tjera: integrim automatik dhe manual, mbështetje për multisite, duke u kujdesur për temat e fëmijëve, stil plotësisht i personalizueshëm për menutë, vendndodhje të personalizueshme të menusë, menu ngjitëse, etj…

Shkarko | DEMO | web hosting

3. 8Degree Fly Menu

8Degree Fly Menu është një shtesë WordPress premium që ju lejon të shtoni një menu kanavacë në faqen tuaj të internetit, në mënyrë që t'i jepni një pamje që nxjerr në pah dhe lehtësisht informacionin tuaj. Ai përdor funksionin e paracaktuar të menusë WordPress për të krijuar menutë e tij.

8 shkallë menu fluturuese e përgjegjshme jashtë shtojcë menu kanavacë për wordpress

Do të keni mundësi të shtoni elemente shtesë në artikujt e parazgjedhur të menusë, të tilla si ikonat, parullat e menusë, një kokë pseudo-grupimi dhe një përshkrim të gjatë.

Për të lexuar gjithashtu: 10 shtesa WordPress për të optimizuar shiritat anësorë dhe kokat ngjitëse

Ajo gjithashtu vjen me një redaktor WYSIWYG për t'ju ndihmuar të kuptoni përshkrimin tuaj të gjatë në një mënyrë miqësore për përdoruesit. Me këtë redaktues mund të përdorni gjithashtu kode të shkurtra.

Shkarko | DEMO | web hosting

Burime të tjera të rekomanduara

Ne gjithashtu ju ftojmë të konsultoheni me burimet më poshtë për të vazhduar më tej në kontrollin dhe kontrollin e faqes dhe blogut tuaj.

Përfundim

Kështu që ! Kjo është ajo për këtë tutorial, shpresoj se do t'ju lejojë të krijoni një menu për përdoruesit e celularëve. ndjehuni të lirë të ndani këshillën me miqtë tuaj në rrjetet tuaja sociale.

Megjithatë, gjithashtu do të jeni në gjendje të konsultoheni me ne RESSOURCES, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress.

Por, ndërkohë, na tregoni për tuajat komente dhe sugjerime në pjesën e dedikuar.

...