Želite li stvoriti responzivni izbornik na svom WordPress blogu?

Korisnici mobilnih uređaja danas su brojniji od korisnika stolnih računala. Dodavanje responzivnog izbornika za mobilne uređaje olakšava korisnicima navigaciju na vašem web mjestu.

U ovom ćemo vam vodiču pokazati 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 svoj blog 

Onda se vratimo zašto smo ovdje.

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

Prva metoda: Stvorite mobilni izbornik pomoću WordPress dodatka

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

U ovoj ćemo metodi stvoriti izbornik (s ikonom hamburgera) koji klizi na zaslonu mobitela.

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 dodatak za WordPress .

Nakon aktiviranja dodatka dodavanje nove stavke na izbornik pod nazivom " Osjetljivi Izbornik ". Klikom na nju odvest ćete se na stranicu s postavkama WordPress plugin.

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

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

Posljednja opcija na zaslonu omogućuje vam da za svoj izbornik navedete CSS klasu. To će omogućiti dodatku da sakrije vaš neodgovarajući izbornik na malim zaslonima.

Ne zaboravite da kliknete na « Mogućnosti ažuriranja Da biste spremili svoje postavke.

Također vam predlažemo da otkrijete naše 10 WordPress dodaci za stvaranje izbornika na vašem blogu

Sada možete posjetiti svoje web mjesto i promijeniti veličinu zaslona preglednika kako biste vidjeli odgovarajući izbornik na djelu.

Dodatak « Osjetljivi Izbornik »Nudi mnoge druge opcije koje vam omogućuju da izmijenite ponašanje i izgled vašeg responzivnog izbornika. Te mogućnosti možete istražiti na stranici s postavkama dodatka i prilagoditi ga prema potrebi.

2 metoda: Kako ručno dodati mobilni izbornik

Jedna od najčešćih metoda koja se koristi za prikaz izbornika na mobilnim zaslonima 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, prikazujemo vas kako stvoriti WordPress dodatak.

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

(funkcija () {nav var = document.getElementById ('navigacija do web mjesta'), gumb, izbornik; if (! nav) {return;} gumb = nav.getElementsByTagName ('gumb') [0]; izbornik = nav. getElementsByTagName ('ul') [0]; if (! gumb) {return;} // Sakrij gumb ako izbornik nedostaje ili je prazan ako (! menu ||! 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 s nazivom " navigation.js Na vašem stolu.

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

Zamijeni izraz " vaše-tema » s nazivom vaše mape WordPress tema Trenutno. Ako vaš direktorij tema nema mapu js, trebate je izraditi.

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

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

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '' /js/navigation.js, polje (”jquery '), 20160909' istina.);

Sada moramo dodati navigacijski izbornik u naš WordPress tema. Obično se navigacijski izbornik 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 izbornika definirana vašom WordPress temom zove " osnovni ". U suprotnom, upotrijebite lokaciju definiranu vašom WordPress temom.

Posljednji je korak dodati neki CSS 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 svoje web mjesto i promijeniti veličinu zaslona preglednika kako biste provjerili mijenja li se vaš prilagodljivi izbornik.

Otkrijte i neke premium WordPress dodatke  

Možete koristiti druge WordPress plugins dati moderan izgled i optimizirati rukovanje vašim blogom ili web stranicom.

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

1. UberMenu

UberMenu je a WordPress plugin posvećen stvaranju vrlo prilagodljivog, osjetljivog i korisniku dostupnog megaizbornika. Funkcionalan je nakon instalacije, bez potrebe za bilo kakvom posebnom konfiguracijom.

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

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

Preuzmite | demo | Web hosting

2. LMM

Liquida Mega Menu koji se naziva i LMM je WordPress plugin dizajniran za korisnike i programere. Ima jednostavno i intuitivno sučelje, integrirano u WP nadzornu ploču, što vam omogućuje stvaranje i prilagođavanje neograničene količine mega izbornika, bez ikakvih programerskih vještina.

Dolazi s desecima značajki, bilo za redovite ili napredne korisnike. Kao funkcionalnost, između ostalog nudi: automatsku i ručnu integraciju, podrška za više stranica, vodeći računa o dječjim temama, potpuno prilagodljiv stil za izbornike, prilagodljive lokacije izbornika, ljepljivi izbornik, itd…

Preuzmite | demo | Web hosting

3. 8Degree Fly izbornik

8Degree Fly Menu vrhunski je WordPress dodatak koji vam omogućuje dodavanje platnenog izbornika na vaše web mjesto kako biste mu pružili izgled koji naglašava 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.

Za čitanje također: 10 WordPress dodataka za optimizaciju bočnih traka i ljepljivih zaglavlja

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

Preuzmite | demo | Web hosting

Ostali preporučeni resursi

Također vas pozivamo da se savjetujete sa donjim izvorima kako biste poboljšali i kontrolirali svoju web stranicu i blog.

• Kako preimenovati slike na WordPress blogu
• Kako stvoriti plutajući izbornik na WordPress
• 8 WordPress dodataka za stvaranje megamenu na svom blogu
• Neki savjeti za izradu modernih izbornika za vaš blog
• 6 WordPress dodataka za upravljanje kategorijama i potkategorijama na vašem blogu

Zaključak

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

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

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

...