East Weekend Fest 2012

Padajući meni na Vordpresu

VordpresPovremeno javi se potreba da uredim neki sajt baziran na Vordpresu (Wordress – za širi auditorijum koji piše nećiriličnim pismom :P ) i tako sam došao do zahteva za kreiranje padajućeg menija (izbornika) sa mešavinom linkova ka kategorijama, zasebnim tekstovima ili stranicama. Konkretno, radi se o sajtu Udruženja Istok i načinu na koji sam primenio opciju „Izbornici“ u kombinaciji sa funkcijom wp_nav_menu – nakon toga problem rešen k’o od šale!

Prelged padajućeg menija

Ovo je prilično jednostavno štimovanje kako bi se od uobičajne „linijske“ navigacije dobrio padajući meni (dropdown menu) koji se uklapa u temu koju koristite za svoj blog/sajt baziran na Vordpresu. Recept za to je sledeći:

1. Kreiranje menija, stavki menija i podmenija

Meni IzgledPrvi korak je kreiranje Izbornika. Iz glavnog menija pod oblašću Izgled, odaberite opciju Izbornici. Na novo-otvorenoj stranici unesite ime novog Izbornika i  kliknete na dugme „Napravi izbornik„. Nakon toga potrebno je odabrati koje stavke želite da postavite u navedeni izbornik. Ovo vršite iz druge kolone, gde su redom raspoređene Stranice sa vašeg sajta/bloga, potom Kategorije i Prilagođene veze. Jednostavnim odabirom i pritiskom na dugme „Dodaj u izbornik“ se ubacuju stavke u vaš Izbornik.

Primer jednog izbornika sa stavkama menija dat je na sledećoj slici. Primećujete da se stavke izbornika u odnosu na ime izbornika (na slici imenovan sa Bornet) pomerene udesno. Ovim je omogućeno kreiranje podmenija u okviru jednog izbornika.

Primer jednog izbornika sa stavkama2. Pozivanje funkcije za prikaz menija

Obično svaki blog/sajt ima navigaciju u zaglavlju stranice. Obično su tu izlistane stranice i kategorije. Ovo se vrši pomoću funkcija wp_list_pageswp_list_categories, međutim da bi prikazali izbornik potrebno je pozvati funkciju wp_nav_menu, koja je u ovom slučaju došla na mestu poziva predhodne dve navedene funkcije. Poziv ove funkcije u mom slučaju izgleda ovako:

<?php wp_nav_menu( array(‘items_wrap’ => ‘%3$s’, ‘container_id’ => ‘nav’,'container_class’ => ‘main-navigation’, ‘menu’ => ‘East Weekend Fest’ )); ?>

Pa da prevedem šta ova kobaja znači:

  • ‘items_wrap’ => ‘%3$s’ – uklanja <ul> oznake
  • ‘container_id’ => ‘nav’ – id dodeljene klase – evo glavnog krivca zašto se meni uklapa u temu :)
  • ‘container_class’ => ‘main-navigation’ – klasa koja se dodeljuje meniju
  • ‘menu’ => ‘East Weekend Fest’  – ima izbornika koji želite da prikažete

To je od prilike recept za kreiranje padajućeg menija, pa ko voli nek izvoli :) Inače nadam se da kolege iz Udruženja Istok neće da me linčuju jer sam koristio slike sa sajta istog, jer na sopstvenom blogu nemam potrebu za ovim :)

Možete ostaviti komentar, ili vezu na vašem sajtu.

Ostavite komentar

Prijavi se na RSS Feed Pratite me na Tviteru!