Da li želite da kreirate responzivni meni na svom WordPress blogu?

Korisnici mobilnih uređaja danas su brojniji od korisnika računara. Dodavanje prilagodljivog izbornika za mobilne uređaje olakšava korisnicima navigaciju na vašoj web lokaciji.

U ovom tutorialu pokazat ćemo vam kako lako stvoriti responzivan izbornik na WordPressu.

Ali prije, ako nikad niste instalirali WordPress, otkrijte Koliko dodataka za instaliranje na WordPress. et Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu 

Onda se vratimo na pitanje zašto smo ovde.

Ovdje će biti pitanje dubljeg prikazivanja pokazujući vam i metodu s dodatkom za početnike i metodu kodiranja za napredne korisnike.

Prvi način: Kreirajte mobilni meni sa WordPress dodatkom

Ova metoda je lakša i preporučuje se početnicima jer ne zahtijeva posebne vještine kodiranja.

U ovoj metodi kreiraćemo meni (sa ikonom hamburgera) koji klizi na mobilnom ekranu.

Prvo što morate učiniti je instalirati i aktivirati Dodatak za WordPress Responsive Menu . Za više detalja, pogledajte naš vodič o tome kako instalirati WordPress dodatak .

Nakon aktiviranja dodatka, dodatak će na meniju dodati novu stavku pod nazivom " Odgovarajući Menu ". Klikom na nju odvest ćete se na stranicu postavki WordPress dodatak.

Prvo morate unijeti veličinu od koje će se pojaviti izbornik za mobilne uređaje. Zadana vrijednost je 800 piksela, što bi trebalo raditi za većinu web lokacija.

Nakon toga morate odabrati izbornik koji želite upotrebljavati na mobilnom uređaju.

Zadnja opcija na ekranu omogućava vam da za svoj meni navedete CSS klasu. To će omogućiti dodatku da sakrije vaš neodgovarajući izbornik na malim ekranima.

Ne zaboravite da kliknete na « update opcije Da biste spremili svoje postavke.

Takođe vam predlažemo da otkrijete naše 10 WordPress dodaci za kreiranje menija na vašem blogu

Sada možete posjetiti svoju web stranicu i promijeniti veličinu ekrana preglednika kako biste vidjeli odgovarajući meni u akciji.

Dodatak « Odgovarajući Menu »Nudi mnoge druge opcije koje vam omogućavaju da izmijenite ponašanje i izgled vašeg responzivnog menija. Ove opcije možete istražiti na stranici s postavkama dodatka i prilagoditi ga prema potrebi.

2 metoda: Kako ručno dodati mobilni meni

Jedna od najčešćih metoda koja se koristi za prikaz izbornika na mobilnim ekranima je upotreba poluge.

Ova metoda zahtijeva od vas da dodate prilagođeni kôd u svoje WordPress datoteke.

U jednom od naših prethodnih vodiča pokazujemo vas kako kreirati WordPress dodatak.

Prvo morate otvoriti uređivač teksta kao što je Notepad i zalijepiti ovaj kod.

(funkcija () {nav var = document.getElementById ('navigacija po web lokaciji'), dugme, meni; ako (! nav) {return;} dugme = nav.getElementsByTagName ('dugme') [0]; meni = nav. getElementsByTagName ('ul') [0]; ako (! dugme) {return;} // sakrij dugme ako meni nedostaje ili je prazan ako (! meni ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = funkcija () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('uključeno')) {button.className = button.className.replace ('uključeno', ''); menu.className = menu.className.replace ('preklopljen -on ',' ');} else {button.className + =' uključeno '; menu.className + =' uključeno ';}};}) (jQuery);

Sada ovu datoteku morate spremiti sa imenom " navigation.js Na tvom stolu.

Zatim morate otvoriti FTP klijent da biste preuzeli ovu datoteku na lokaciju "/ wp-content / themes / your-topic / js /" na vašoj WordPress web lokaciji.

Zamijenite izraz " your-tema » sa nazivom fascikle vašeg WordPress tema struja. Ako vaš direktorij tema nema js folder, morate ga kreirati.

Nakon učitavanja JavaScript datoteke, sljedeći korak je osigurati da vaša WordPress web lokacija učita JavaScript datoteke. Morat ćete dodati sljedeći kôd u " functions.php " od tebe WordPress tema.

Otkrijte nešto drugo Šta možete učiniti sa datotekom function.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array ( 'jQuery'), 20160909 ', istina.);

Sada moramo dodati navigacijski meni u naš WordPress tema. Obično se navigacijski meni dodaje u " header.php Od vaše WordPress teme.

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

Pretpostavljamo da se lokacija menija definirana vašom WordPress temom zove “ primarno ". U suprotnom, koristite lokaciju definiranu vašom WordPress temom.

Posljednji korak je dodavanje malo CSS-a tako da naš izbornik koristi prave CSS klase za prebacivanje kada se gledaju na mobilnim uređajima.

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

Sada možete posjetiti svoju web stranicu i promijeniti veličinu ekrana preglednika kako biste vidjeli hoće li se vaš prilagodljivi meni prebaciti.

Otkrijte i neke premium WordPress dodatke  

Možete koristiti druge WordPress plugins da date moderan izgled i da optimizujete rukovanje vašim blogom ili web sajtom.

Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.

1. UberMenu

UberMenu je a WordPress dodatak posvećen kreiranju veoma prilagodljivog, prilagodljivog i korisniku dostupnog megamenija. Funkcionalan je nakon instalacije, bez potrebe za bilo kakvom posebnom konfiguracijom.

To je dodatak jednostavan za upotrebu, ali dovoljno moćan da kreira vrlo prilagodljive i kreativne mega rasporede menija.

Pogledajte i naše 9 WordPress dodataka za stvaranje cjenovnih mreža na blogu

Naći ćete između ostalog: 3 predloška izbornika, potpuno odzivan izgled, kompatibilnost s mobilnim uređajima (iPhone, iPad, Android), dodirnu podršku itd.

download | Demo | web hosting

2. LMM

Liquida Mega meni koji se naziva i LMM je a WordPress dodatak dizajniran za korisnike i programere. Ima jednostavan i intuitivan interfejs, integrisan u WP kontrolnu tablu, omogućavajući vam da kreirate i prilagodite neograničenu količinu mega menija, bez ikakvih veština programiranja.

Ima desetine funkcija, bilo za redovne ili napredne korisnike. Kao funkcionalnost, između ostalog nudi: automatsku i ručnu integraciju, podrška za multisite, vodeći računa o dečjim temama, potpuno prilagodljiv stil za menije, prilagodljive lokacije menija, lepljivi meni, itd…

download | Demo | web hosting

3. 8Degree Fly meni

8Degree Fly Menu vrhunski je WordPress dodatak koji vam omogućava dodavanje platnenog menija na vaše web mjesto kako biste mu pružili izgled koji ističe i lako daje vaše podatke. Za izradu svojih izbornika koristi zadanu funkciju WordPress izbornika.

Moći ćete dodati dodatne elemente u zadane stavke izbornika, poput ikona, slogana izbornika, zaglavlja pseudo-grupiranja i dugog opisa.

Pročitajte takođe: 10 WordPress dodataka za optimizaciju bočnih traka i ljepljivih zaglavlja

Takođe dolazi sa WYSIWYG uređivačem koji će vam pomoći da shvatite svoj dugi opis na jednostavan način za upotrebu.Ovim ovim uređivačem možete koristiti i kratke kodove.

download | Demo | web hosting

Ostali preporučeni resursi

Također vas pozivamo da se konzultirate sa resursima u nastavku kako biste otišli dalje u nadzor i kontrolu vaše web stranice i bloga.

• Kako preimenovati slike na WordPress blog
• Kako stvoriti plutajući meni na WordPress
• 8 WordPress plugins za kreiranje megamenu na vašem blogu
• Neki saveti za kreiranje modernih menija za svoj blog
• 6 WordPress plugins za upravljanje kategorijama i potkategorijama na vašem blogu

zaključak

Dakle! To je to za ovaj tutorijal, nadam se da će vam omogućiti da kreirate meni za mobilne korisnike. osjećaj se slobodno da podijelite savjet sa svojim prijateljima na svojim društvenim mrežama.

Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada WordPress bloga

Ali, u međuvremenu, recite nam nešto o svom komentari i prijedloge u posebnom odjeljku.

...