Pogledajmo rješavanje jednog trivijalnog problema s kojim se programeri s vremena na vrijeme susreću. Dešava se da na stranicama trebate prikazati dva menija odjednom, koji su međusobno povezani: jedan je gornji horizontalni meni 1. nivoa, a drugi je na bočnoj traci 2. nivoa. Štaviše, u bočnom meniju se prikazuju samo one podstavke za koje je u glavnom meniju odabran odgovarajući nadređeni element. Na primjer, ako imate listu zemalja u zaglavlju vaše stranice, onda odabirom, recimo, Italije, dobit ćete samo listu talijanskih gradova u bočnoj traci.
Teoretski, takav trik možete implementirati pomoću funkcije i nekog lukavog PHP koda, ali predlažem korištenje gotovog rješenja - widget menija za WordPress pod nazivom Advanced Sidebar Menu. Ovo je što je moguće jednostavnije i ne morate unositi nikakve promjene u predložak.
Dodatak možete preuzeti ovdje ili ga instalirati preko admin panela. Glavna funkcija je kreiranje i prikaz dinamičkog bočnog menija, uzimajući u obzir odnos “roditelj/nasljednik” za stranice i kategorije stranice.
Ne morate vršiti nikakva dodatna podešavanja nakon instalacije; u odjeljku "Izgled" - "Widgeti" jednostavno će se pojaviti 2 nova elementa: meni naprednih stranica bočne trake i meni naprednih kategorija bočne trake. Postavke za ove widgete menija za WordPress su slične, plus ili minus:
- Naslov — naslov vidžeta.
- Uključi roditeljsku stranicu - da li dodati roditeljski element u meni.
- Uključi roditelja čak i bez djece - da li uključiti stranice bez podstranica.
- Poredaj po—opcije sortiranja (redni broj, naslov, datum).
- Koristite stil ovog dodatka - koristite stilove iz dodatka.
- Stranice koje treba isključiti (ids) - stranice koje treba isključiti.
- Uvijek prikazuj podstranice - uvijek prikaži podstranice.
- Nivoi za prikaz — broj nivoa menija za prikaz.
Kao što možete vidjeti na slici iznad, za kategorije je sve u osnovi isto, ali bez sortiranja i nivoa. Osim toga, dodata je opcija za prikaz elementa na stranici s punim tekstom objave (Prikaži kategorije na pojedinačnim objavama).
Dakle, u većini slučajeva, samo trebate dodati widget menija za WordPress na svoju bočnu traku i on će odmah početi raditi. Naravno, stranica mora imati odgovarajuću hijerarhiju sa podstranicama. Da budem iskren, nije sasvim jasno kako postaviti zavisni meni za složene projekte sa roditeljskom stranicom, počevši od 2. nivoa. Opis modula kaže da trebate dodijeliti roditeljsku stranicu/kategoriju, ali nisam vidio ništa slično u postavkama. S druge strane, ovakve situacije su izuzetno rijetke; u pravilu često imate samo 2 menija (bočni i glavni), pa je widget Advanced Sidebar Menu potpuno prikladan.
Na kraju, treba napomenuti da Pro modul ima verziju sa naprednijim postavkama (opcije dizajna, stil harmonike za menije itd.). Savjetujem programerima da pogledaju stranicu Developer Docs gdje se prikupljaju informacije o posebnim filterima/funkcijama za složenije slučajeve korištenja dodatka.
Ako i dalje imate bilo kakvih pitanja o bočnom meniju u WordPress-u ili znate druge prikladne widgete menija za rješavanje ovog problema, pišite u komentarima.
jQuery Vertical Mega Menu Widget
- besplatni dodatak dizajniran za kreiranje vertikalnog padajućeg menija na bočnoj traci. Dodatak je općenito namijenjen WordPress-u, ali je jasno skrojen za e-trgovinu i može se koristiti ne samo sa WooCommerce-om, već i sa drugim dodacima za e-trgovinu.
Vidio sam nekoliko različitih dodataka za kreiranje različitih vrsta strukturiranih, padajućih menija bočne trake, ali ovaj dodatak se ističe. Većina njih automatski kreira menije na osnovu objava na blogu i kategorija, na osnovu datuma i meseca. Zgodno ako samo imate blog.
Dotični plugin vam omogućava da kreirate apsolutno sve menije na osnovu stranica, proizvoda, kategorija, oznaka - bilo čega! To je upravo ono što vam je potrebno za katalog proizvoda, iako ćete morati malo popetljati - artikli se dodaju ručno.
Nakon preuzimanja, instaliranja i aktivacije dodatka, prvo što treba učiniti je kreirati potreban meni koji će biti prikazan kroz dodatak. U postavkama stranice idite na karticu "Izgled" -> "Meni" i kreirajte novu - pa, recimo, "menu2". Zatim ga popunjavamo kako želimo, praveći ugniježđene stavke. Kasnije možete eksperimentirati, prva stvar je stvoriti barem nešto. Svaka stavka se izrađuje ručno po referenci. Odnosno, ako umetnete stranicu kataloga u meni, link ka katalogu će raditi, ali pozicije iz kataloga se neće automatski pojaviti u meniju. Za najveći efekat, preporučuje se da napravite stavke menija na tri nivoa, tada će dodatak pokazati svoje najbolje performanse.
Nakon što je meni kreiran, potrebno je da dodatak počne da ga prikazuje. Idite na “Izgled” -> “Widgeti”, tamo pronađite novi widget “jQuery Vertical Mega Menu” i postavite ga na pravo mjesto na bočnoj traci. Ovdje možete malo prošetati po postavkama, iako je sada glavna stvar da odaberete naš unaprijed kreirani meni “menu2” i kliknete “Sačuvaj”. Jelovnik je kreiran i može se pogledati na web stranici!
Meni– jedan od najvažnijih elemenata na bilo kojoj web stranici. Jednostavnost i lakoća navigacije je ono što određuje koliko će posjetitelju biti ugodno da se kreće po stranici. Postoje 2 vrste menija u WordPress-u: vertikalni i horizontalni. U ovom članku ćemo razmotriti sljedeća pitanja: Kako kreirati? Kako dodati meni u temu koja ga nema? Prikazivanje menija, kreiranje ugnježđenih stranica, kao i opšta podešavanja u WordPress-u.
Horizontalni meni je ugrađen u većinu modernih WordPress tema. Neki predlošci vam omogućavaju da napravite dodatna podešavanja navigacije, dok drugi ne. Podrazumevano, sve dodate stranice će biti prikazane u meniju.
Često se početnici WP korisnici pitaju da li kako kreirati padajući meni na više nivoa, bilo vertikalno ili horizontalno.
Horizontalni ili vertikalni padajući meniji na više nivoa implementiraju se dodjeljivanjem određene hijerarhije stranica. U skladu s tim, to se može učiniti u fazi kreiranja ili prilikom uređivanja stranica u odjeljku "Stranice" na WP admin panelu, gdje možete pronaći blok sa sljedećim postavkama:
Dakle, da biste kreirali ugniježđenje na više nivoa, morate dodijeliti roditeljsku stranicu drugoj stranici.
Za organizaciju strukture prikazane na slici iznad, bilo je potrebno dodijeliti nadređenu stranicu “Primjer stranice” stranicama “Sub 1” i “Sub 2”, kao i stranicama “Sub Sub 1” i “Sub Sub 2 ” na roditeljsku stranicu “Sub 1” . Mislim da je princip konstrukcije jasan.
Kako dodati vlastiti horizontalni meni
Šta učiniti ako je tema (šablon) ne podržava horizontalni prikaz menija?
Slučajevi nepostojanja ugrađenog menija u temi su izuzetno rijetki, ali se dešavaju. To je zbog činjenice da u takvim predlošcima funkcija prikaza izbornika jednostavno nije navedena:
Samo treba da dodate ovu liniju na željeno mesto u šablonu, bilo da se radi o zaglavlju, podnožju ili bočnoj traci, koji se nalaze u datotekama Header.php, Footer.php, Sidebar.php vaše teme. Vrijedi odmah umotati funkciju u oznake , ove html 5 oznake utiču na optimizaciju sajta, a takođe će omogućiti lako dodeljivanje stilova za meni. Odnosno ovako:
Spomenuo sam da ćete morati da dodelite CSS stilove, to je sasvim logično, jer programeri teme to nisu uradili i nema menija u njemu podrazumevano. A oni koji imaju problema sa CSS-om mogu i imaće određene poteškoće. Za ove ljude, savjetovao bih da se obrate pretraživačima sa zahtjevom „horizontalni meni“ i pronađu odgovarajuće stilove za predložak stranice.
Kao primjer, objavit ću jednu verziju crnog padajućeg menija na više nivoa -. Nakon što preuzmete datoteku, otvorite je, kopirajte sadržaj i zalijepite je u datoteku style.css koja se nalazi u folderu vaše WordPress teme. Možete vidjeti demo meni.
WordPress vertikalni meni
Horizontalni meni smo sredili, ali sa padajućim vertikalnim menijem... sa njim je sve mnogo jednostavnije, implementira se pomoću dodataka. Ima ih dosta, evo nekoliko njih:
- jQuery dodatak menija harmonike
- jQuery Vertical Mega Menu Widget
- jQuery Drill Down iPod meni Widget
- jQuery Mega Menu Widget
Ako padajući meni nije potreban, onda se sav posao svodi na to da samo trebate koristiti widget "Prilagođeni meni", nakon što su ga prethodno kreirali.
Kako napraviti meni u WordPress-u
Kreiranje menija je vrlo jednostavno, potrebno je da odete na karticu "Izgled" - "Meni", unesete ime i kliknete "Kreiraj".
WP programeri su se pobrinuli za svoje korisnike i učinili sve kako bi im bilo ugodno korištenje proizvoda, tako da neće biti nepotrebnih komentara. Pomoću lijeve kolone možete dodati potrebne stavke u meni. Ove stavke uključuju:
- Stranice;
- Proizvoljne veze;
- Kategorije
Nakon što se stavke dodaju u meni, potrebno je kreirati ugniježđenje i organizirati sve veze. To se radi vrlo jednostavno: prevlačenjem stavki sređujete ih po željenom redoslijedu, a ako trebate navesti nadređenu stranicu, potrebno je prevući željenu stavku ispod nadređenog elementa.
Želite da kreirate složene menije na više nivoa za svoju web stranicu bez previše petljanja oko toga? Postoji rješenje. Sastavljanje i dizajniranje menija web stranice je jednostavno korištenjem posebnih dodataka za WordPress.
WordPress teme pružaju odlične mogućnosti za razvoj sjajnih web stranica. Međutim, savremeni meniji za navigaciju se razlikuju od menija koji su se koristili pre nekoliko godina. Međutim, WordPress teme i dalje pružaju menije koji rade s konceptom teme.
Ovo nije uvijek prikladno za velike web stranice s mnogo stranica koje sadrže različite proizvode ili usluge.
Posebni dodaci menija za WordPress pomoći će vam da dodate praktičnu, prilagodljivu navigaciju na svoju web stranicu.
WordPress responzivni meniji
Meni web stranice jedan je od najvažnijih elemenata jer vam pomaže da se krećete kroz stranice. Izbornik definira izbore koji se prikazuju korisnicima. Klikom na odabranu stavku menija korisnik odlazi na određenu web stranicu ili izvršava radnju.
I sa estetske i sa navigacijske tačke gledišta, vizuelno privlačan meni je ključan za dizajn veb stranice.
Izbornici dolaze u različitim tipovima, a idealno bi bilo da odaberete jedan na osnovu broja stranica i ukupnog dizajna vaše stranice.
Horizontalno se prikazuju na vrhu web stranice, a preostali prostor rezerviran za glavni sadržaj. Intuitivno je, jer većina ljudi radije čita tekst horizontalno.
Vertical koristi se samostalno ili u kombinaciji sa horizontalnim menijem. Uglavnom se koristi kada sadržaj ne može biti postavljen horizontalno preko cijele stranice.
Padajući meni može se koristiti i sa horizontalnim i okomitim. Oni odvajaju vidljive stavke glavnog menija od stavki podmenija koje se pojavljuju samo kada pređete mišem.
Mega meni su veliki dvodimenzionalni paneli grupirani prema opcijama navigacije. Ovo je relativno nov koncept koji postaje sve popularniji jer je cijeli meni odmah vidljiv bez skrolovanja. To je kombinacija jednostavnih menija i padajućih menija, sličnih traci u Microsoft Officeu.
Dodaci za WordPress meni
Danas ćemo vam predstaviti dodatke koji vam omogućavaju da kreirate samo posljednju vrstu menija.
Sam WordPress pruža ugrađenu funkcionalnost za kreiranje različitih tipova menija. Međutim, ove funkcije su opšte i ne dozvoljavaju implementaciju mega menija.
Specijalni WordPress dodaci se integrišu sa postojećim WordPress sistemom menija i pružaju dodatnu funkcionalnost. Dodaci vam pomažu da kreirate mega menije profesionalnog izgleda.
Većina dodataka ima ugrađenu administrativnu ploču za dodavanje ili promjenu stavki menija koje su stilizirane tako da odgovaraju dizajnu vaše web stranice. Postoje postavke za fontove, boje, teksturu pozadine, ikone itd. Elementi kratkog koda vam omogućavaju da dodate kontakt forme, slike, video zapise, Google mape i dinamički sadržaj u svoj meni.
Većina dodataka WordPress Mega Menu optimizirana je za rad s više uređaja. Ovi dodaci uključuju podršku za višestruke menije, efekte lebdenja i druge animacije.
Max Mega Menu je kompletan dodatak za upravljanje menijima. Sa potpunom lakoćom, možete promijeniti svoj postojeći meni u prikladan, potpuno pristupačan i prilagodljiv. Opcije uključuju ugrađene postavke za ponovnu instalaciju, dodavanje vidžeta, promjenu ponašanja i pretvaranje jednostavnog menija u mega meni. Ovaj dodatak ima ugrađen uređivač u svojoj besplatnoj verziji. Max Mega Menu Pro dodaje funkcije kao što su vertikalni, hamburger meni, logo meni, podrška Google fontovima, WooCommerce i EDD podrška.
Ovo je prilagođeni dodatak za WordPress. Interfejs je jednostavan za korištenje i nudi mnogo prilagodljivih opcija. Različite opcije prilagođavanja menija uključuju tip menija, pozadinsku sliku, animaciju menija, poravnanje i položaj menija, veličinu ekrana. U besplatnoj verziji, dodatak pruža funkcije kao što su logotipi menija, preuređivanje komponenti uključujući skripte, prilagođeni pokretači menija. Napredna i Pro funkcionalnost pruža podršku za pregled dizajna, animaciju stavke menija, ugrađenu naslovnu traku itd.
Prilagodljivi dodatak za mobilni meni. Dodatak vam omogućava da transformišete vaš postojeći WordPress meni u nešto elegantno, jednostavno za upotrebu i prilagodljivo. Ovaj dodatak se lako integriše sa WordPress sistemom menija i radi na svim vrstama mobilnih uređaja. Besplatna verzija pruža administratorsko sučelje lako za korištenje. Nudi mnogo opcija i mogućnost prikazivanja kategorija, potkategorija i postova. Dodatak pruža ugrađenu podršku za dodavanje boja, logotipa i skrivanje određenih elemenata na mobilnim uređajima.
Dodatak Nextend Accordion Menu je jednostavan za korištenje, prilagodljiv i jednostavan za integraciju. Hamburger meni vam omogućava da koristite različite nivoe podmenija. Pruža potpunu kontrolu nad menijima, nivoima, bojama, efektima animacije. Može se koristiti za kreiranje "hamburgera" iz bilo kojeg WordPress menija. Lite verzija dolazi sa jednom temom. 3 dodatne teme su dostupne za kupovinu uz PRO verziju dodatka. Lista moćnih funkcija takođe uključuje potpunu kontrolu nad bojama, pozadinom, slikama, fontovima. Dodato je i više nivoa menija i ugrađena podrška za Google fontove.
Dodatak Mega Menu od WooRockets je moćan dodatak koji je orijentisan na korisnika. Pruža vam posvećenog i intuitivnog graditelja. Pruža potpunu kontrolu nad dizajnom i prilagođavanjem menija. Podržani su orijentacija menija i opcije prikaza ikona, pregled u realnom vremenu i profili za podešavanja menija. Također možete zalijepiti sadržaj i ugraditi Google fontove sa panela dodataka.
Gore navedeni dodaci su dobro poznati i visoko ocijenjeni WordPress dodaci. Uz njihovu pomoć lako možete kreirati mega cool meni na svojoj web stranici.
Pozdrav svima, danas želim da vam kažem kako možete dodati meni u WordPress. Čini se da to nije težak zadatak, ali dobrih 10 - 15% pitanja se odnosi upravo na meni, jer uprkos činjenici da WordPress ima posebnu funkciju wp_nav_menu- programeri šablona se stalno muče s glupostima i to rade preko dobro poznatog mjesta. Zatim ću vam pokazati uputstva korak po korak kako da kreirate predložak menija.
Kao primjer, predlažem da zajedno sa mnom napravite jednostavan horizontalni WordPress meni na jednom nivou.
Ako ste tražili informacije o WordPress padajućim menijima, savjetujem vam da obratite pažnju na ove članke:
Ovi članci opisuju mehanizam za kreiranje menija; sve što treba da uradite je da kopirate html i CSS iz primera i prikažete meni za WordPress preko php-a kao što je opisano ispod u ovom članku.
Navigacija stranice:
Prvo, potreban nam je HTML kod za meni, i to je ono što ćemo učiniti.
WordPress horizontalni meni koristeći HTML+CSS
Neću trošiti mnogo vremena na kreiranje Html-a i CSS-a za naš meni. Pokušat ću jednostavno dati dijelove koda i njihov kratak opis.
HTML kod za naš meni će biti najjednostavniji:
Ovo je podrazumevana ul lista koju generiše WordPress meni.
Stilovi za ovaj horizontalni meni će takođe biti jednostavni, iako ovde možete pronaći kod za rastezanje menija na punu širinu bloka.
CSS stilovi
#nav1( position:relative; width:100%; height:62px; background:#0076c6; border-bottom:5px solid #e5eef4; box-sizing:border-box; z-index:11; font-family:Arial, sans-serif; ) #nav1 ul( display:block; list-style:none; margin:0px; padding:0px; text-align:justify; font-size:1px; line-height:1px; width:100%; visina:57px; ) #nav1 ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #nav1 ul li( display:inline-block; width:auto; visina: auto; font-size:15px; line-height:1.4em; vertical-align:top; ) #nav1 ul li a( display:block; width:auto; height:57px; box-sizing:border-box; padding: 18px 20px 0px 20px; font-size:15px; boja:#ffffff; ) #nav1 ul li a:hover( background:#11476C; text-decoration:none; )
Horizontalni WordPress meni koji se proteže cijelom širinom bloka.
Ovako izgleda meni u pretraživaču:
CSS kod mora biti kopiran u vašu temu u style.css. Html kod se takođe može kopirati na željeno mesto u temi, obično je to header.php + moraćete malo da prilagodite CSS stilove kako bi meni izgledao onako kako vam treba na sajtu.
Kako dodati šablon menija u wordpress
Nadam se da ste kopirali CSS i HTML u svoj šablon. Sada moramo prilagoditi naš kod.
1) Otvorite mjesto gdje se nalazi meni i umjesto toga
- Dom
- O nama
- Recenzije
- Vijesti
- Članci
- Odgovor na pitanje
- Kontakti
Postavili smo sljedeći poziv WordPress funkcije:
"menu1", "container"=>false, "depth"=>"1", "echo"=>"1")); ?>
Kao rezultat, dobićemo nešto ovako:
Obratite pažnju na naziv “menu1”, sa upravo ovim identifikatorom moramo rezervisati prostor za meni.
"container"=>false – kažemo da ne moramo da umotamo naš meni u kontejner.
"depth"=>"1" – prikazuje samo 1 nivo menija
"echo"=>"1" – šablon menija se odmah prikazuje. Ako navedete 0, možete prebaciti meni u varijablu.
2) Otvaramo datoteku functions.php vašeg predloška i tamo registrujemo naš meni, ali prvo vrijedi provjeriti da li je funkcija register_nav_menus već u upotrebi. Da biste to učinili, koristite pretragu Ctrl+F. Ako još uvijek ne postoji takva funkcija, dodajte sljedeći kod:
"Vrh menija"); ?>
Kao što razumijete, “menu1” je ime identifikatora; ako ga ovdje preimenujete, morat ćete ga preimenovati u prethodnoj funkciji.
WordPress meni za dodavanje u admin području
3)
Idemo na admin panel stranice, sada trebamo kreirati i dodati meni u WordPress. Morate otići na ovu adresu your_site/wp-admin/nav-menus.php 
I kreiramo novi meni. Nazvao sam ga "Top", kliknite na kreirajte like na mojoj koži:
Sada imate prozor u koji možete dodati stavke menija. Pogledajmo skin ispod, dodao sam nekoliko stranica, a također označio okvir za potvrdu pored "Menu top", a ovo je, koliko se sjećamo, naš "menu1". 
4) Sačuvajte meni i pogledajte rezultat. Ako ste sve uradili kako treba, trebali biste imati potpuno funkcionalan WordPress horizontalni meni.
Problemi sa WordPress menijem
U verziji WordPress 4.4 počeli su strašni problemi sa menijem, i to:
- Nema razmaka između stavki menija;
- meni se ne proteže po cijeloj širini bloka;
- Razdjelnici su pogrešno dodani.
Općenito, u novoj verziji, programeri su se malo vozili i odlučili ispraviti predložak menija, zbog čega na Internetu sve više možete pronaći upite „Meni Wordpress 4.4 ne radi“, „problemi s Wordpress menijem“ .
Sada ću vam pokazati kod koji rješava ovaj problem:
Trebalo bi da bude napisano na samom kraju datoteke functions.php vaše teme. Koristeći ovaj jednostavan kod, možete vratiti ispravan rad menija.
To je sve za mene. U ovoj lekciji sam vam rekao kako je lako dodati horizontalni meni u WordPress, a takođe sam dao kod za kreiranje šablona WordPress menija.
Savjetujem vam da pročitate članak, a bit ću vam zahvalan i ako kliknete na dugme podijeli
