Pošto sam dobio dosta upita vezanih uz ovu temu odlučio sam napraviti kratki tutorial da riješimo ovo pitanje jednom zauvjek. Za one koji ne kuže, riječ je o izborniku kakav se nalazi pri vrhu ove stranice i njega se ne dobije odmah integriranog u Magazeen temu. Ne želim reći da je ovo najbolji način da se to napravi, ali to je način na koji sam ja napravio moj padajući izbornik. Najvjerovatnije postoje i jednostavniji načini, ali šta je tu je, nadam se da će vam pomoći.

Za početak, što će nam trebati da ovo napravimo:

1. Prvo i osnovno Rayns Suckerfish Drop Down Menu (u daljnjem tekstu RSDDM)
2. Bilo koji tekst editor pošto ćemo morati malo prčkati po kodu
3. Dobra volja

Za početak skinite RSDDM. Odpakirajte ga, i pomoću FTP-a ga snimite u wp-content/plugins mapu. Ulogirajte se u svoju WordPress administraciju i aktivirajte RSDDM (Nadam se da ovo nemoram objašnjavati, ako neko ima problema neka pročita upute na stranici sa koje smo skinuli RSDDM).

Što smo sada napravili? Pa jednostavno smo instalirali plugin za wordpress koji pravi Dropdown menije. Sada trebamo taj plugin prilagoditi da radi za našu Magazeen temu.

Iz mape wp-content/themes/magazeen/ otvorite datoteku koja se zove header.php. E sad u toj datoteci bi na liniji 52 trebali pronaći sljedeći kod:

<ul class="pages">
<li<?php if( is_home() ) : ?> class="current_page_item"<?php endif; ?>><a href="<?php bloginfo( 'url' ); ?>" title="<?php bloginfo( 'title' ); ?>">Home</a></li> <?php wp_list_pages( 'title_li=&amp;amp;depth=1' ); ?>
</ul>

E sad taj kod zamjenite sa sljedećim kodom:

<ul class="pages">
<?php suckerfish(); ?>
</ul>

Ok super, sad smo rekli da nam se umjesto defaultnog izbornika Magazeen teme prikazuje RSDDM, ali kao što ćete vidjeti ako pogledatu svoju stranicu, sad taj izbornik baš i ne izgleda onako kako bismo željeli, zato moramo malo promjeniti CSS od RSDDM-a. Da bi promjenili CSS moramo se prijaviti u našu WP administraciju i otići na Settings – > Suckerfish, ovo je za 2.7.1 verzju WP-a, ako imate neku stariju verziju morat ćete to sami pronaći, pošto ja neznam gdje se točno tamo nalazi. Kada odete na tu lokaciju vidjet ćete ovako nešto:

E sad u kućicu u kojoj piše Enter your CSS here unesite ovo:

#suckerfishnav {background:none;font-size:13px;font-family:Arial,Helvetica,sans-serif;font-weight:bold}
#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:20px;padding:0;margin:0 0 1px 0;width:100%}
#suckerfishnav a {display:block;color:#fff;text-decoration:none;padding:0px 25px}
#suckerfishnav li {float:left;padding:0}
#suckerfishnav li ul {position:absolute;left:-999em;height:auto;width:130px;font-weight:normal;margin:0;line-height:1;-moz-opacity:1;opacity:1;khtml-opacity:1; z-index:999; border-top:1px solid #dde4e7;border-bottom:1px solid #c2cfd5;border-left:1px solid #c2cfd5;border-right:1px solid #c2cfd5;}
#suckerfishnav li li {padding-right:1px;width:124px;border-bottom:1px solid #c2cfd5}
#suckerfishnav li li a {padding:3px 10px}
#suckerfishnav li ul li {font-weight:normal;font-family:Arial, helvetica,sans-serif}
#suckerfishnav li ul li a {font-size:13px; color:#000}
#suckerfishnav li:hover ul li a {color:#000}
#suckerfishnav li ul ul {margin:-20px 0 0 131px}
#suckerfishnav li ul li:hover {background:none}
#suckerfishnav li ul li:hover a {color:#000}
#suckerfishnav li ul li:hover li a {color:#000}
#suckerfishnav li ul li li:hover a {color:#000}
#suckerfishnav li ul li ul li:hover ul li a {color:#000}
#suckerfishnav li ul li ul li:hover ul li:hover a {color:#000}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {left:-999em}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {left:auto;background:#dde4e7;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {background:none;}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#000}

I sada bi trebali dobiti padajući izbornik koji izgleda kao i moj. Ja neću tu objašnjavati svaku liniju koda, to je samo CSS kod pomoću kojeg vizualno oblikujete kako izgleda vaš izbornik, ja sam ga pokušao napraviti da se što više uklapa u Magazeen temu.

E sad ovaj zadnji dio je malo teži zato što ovisi o tome što želite staviti u svoj izbornik, pa ću ja to pokušati objasniti na mom primjeru. Kao što vidite ako pogledate svoju stranicu, najvjerovatnije ste dobili neke defaultne postavke izbornika, i nekim ljudima će to odgovarati, ali meni recimo nije. Ja sam htio da mi kategorija Tutoriali bude padajući izbornik koji će prikazivati podkategorije te glavne kategorije. Da bi to napravio morao sam malo zaprljati ruke.

Otišao sam u wp-content/plugins/ryans-suckerfish-wordpress-dropdown-menu i otvorio datoteku ryans-suckerfish.php. E sad u toj datoteci imate 6 grupa linija koda koje otprilike ovako izgledaju:

if (get_option('suckerfish_menuitem1') == 'Pages') {wp_list_pages('title_li=');}
	if (get_option('suckerfish_menuitem1') == 'Pages Dropdown') {echo '<li><a href="#">Pages</a><ul>' , wp_list_pages('title_li=') , '</ul>';}
	if (get_option('suckerfish_menuitem1') == 'Category') {wp_list_categories('title_li=');}
	if (get_option('suckerfish_menuitem1') == 'Categories Dropdown') {echo '<li><a href="#">Categories</a><ul>' , wp_list_categories('title_li=') , '</ul></li>';}
	if (get_option('suckerfish_menuitem1') == 'Home') {echo '<li><a href="' , bloginfo('url') , '/">Po&amp;amp;#269;etna</a></li>';}
	if (get_option('suckerfish_menuitem1') == 'Blogroll') {wp_list_bookmarks('title_li=&amp;amp;categorize=0');}
	if (get_option('suckerfish_menuitem1') == 'Blogroll Dropdown') {echo '<li><a href="#">Blogroll</a> <ul>' , wp_list_bookmarks('title_li=&amp;amp;categorize=0') , '</ul></li>';}
	if (get_option('suckerfish_menuitem1') == 'Archives (months)') {wp_get_archives('type=monthly');}
	if (get_option('suckerfish_menuitem1') == 'Archives (years)') {wp_get_archives('type=yearly');}
	if (get_option('suckerfish_menuitem1') == 'Archives (months) Dropdown') {echo '<li><a href="#">Archives</a><ul>' , wp_get_archives('type=monthly') , '</ul></li>';}
	if (get_option('suckerfish_menuitem1') == 'Archives (years) Dropdown') {echo '<li><a href="#">Archives</a><ul>' , wp_get_archives('type=yearly') , '</ul></li>';}

E sad ako bolje pogledate taj kod vidjet ćete da svaka linija počinje sa if (get_option(‘suckerfish_menuitem1′), ovo menuitem1 na kraju označava na kojoj poziciji će se nalaziti padajući izbornik. Ima sve ukupno 6 pozicija. Znači možete imati maksimalno 6 padajućih izbornika.

Kao što vidite kod mene se prvi padajući izbornik pojavljuje na drugoj poziciji. Da bi on proradio morao sam ovaj kod:

if (get_option('suckerfish_menuitem2') == 'Categories Dropdown') {echo '<li><a href="#">Categories</a><ul>' , wp_list_categories('title_li=') , '</ul></li>';}

Zamjeniti sa:

if (get_option('suckerfish_menuitem2') == 'Categories Dropdown') {echo '<li><a href="#">Tutoriali</a><ul>' , wp_list_categories('title_li&amp;amp;include=7,5,14,13,10') , '</ul></li>';}

Tu sam promjenio ime Categories u Tutoriali i napisao naredbu wp_list_categories, pomoću koje sam odredio koje će mi se kategorije, odnosno podkategorije prikazivati u tom izborniku. Te kategorije su označene brojevima 7, 5, 14, 13, 10. Te je brojeve WP dodjelio mojim podkategorijama i na svakom blogu će biti različiti.

I da bi to sve proradilo morao sam otići u Settings -> Suckerfish

I u ovim padajućim izbornicima pod Menu Item #2 sam izabrao Categories Dropdown, zato što je Categories Dropdown definiran u onoj liniji koda koju sam izmjenio (if (get_option(‘suckerfish_menuitem2′) == ‘Categories Dropdown…)

Eto to je otprilike to, znam da je malo komplicirano, al ako netko zna za bolji način neka svakako javi. Sva pitanja možete postavljati u komentare. Uživajte

Povezani članci