Metsästys Vertical valikosta ...
Osa 1 Tämän opetusohjelman kuvataan askel askeleelta rakentamassa vaaka monikerroksellisten valikko Wordpress Thesis teema . Osa 2 jatkuu vahvistamaan tätä toiminnallisuutta. Täällä me lisäämme "dark"-versio vaaka navigointipolku ja opetan sinulle, miten vaihtaa "kirkas" ja "dark"-versio. Osa 2 on pääjoukko Osa 1. Se sisältää kaikki osasta 1 + lisää uusia hienoja juttuja.
Pääajatuksena että halusin hetkellä lisätä pystysuora valikosta Thesis teema (ja Wordpress yleensä). Etsin todella joustava, SEO friendly ja multi-selain yhteensopiva pysty valikko, jonka avulla voidaan luoda rajattomasti pesiviä tasoilla.
Web on tonnia sivuja aiheesta, mutta kun aloin kokeilla kaikkia näitä näytteitä - he joko hajosi, hajonnut, tuettu vain rajallinen määrä tasoja tai misbehaved Gates + Ballmer n junksplorer 6. Lopulta pääsin takaisin yrittänyt ja luotettu Dynamic Drive valikot kuin niiden vertikaalisen näytteet osoittautuivat mukava tapaus, joka sopii minun tiukat vaatimukset. Jouduin merkittävästi muokata niitä vaikka varmista, että se sopii Thesis malli.
Pyrkimys täydellisyyteen jatkuu ...
Käytin noin 16 tuntia etsimistä, kokoonpano, testaus, kiinnitys-, kiillotus-ja viritys pysty valikon CSS ja. Js-koodi ja 3 / 4 ajasta kului tee sitä työtä MSIE 6.
Anyways, olin tyytyväinen lopputulokseen. Johti vertikaalinen navigointivalikon on kaikki samat edut että horisontaalinen menu on.
Ottaa kyky lisätä pystysuoraan valikko on erittäin tärkeää noin 70-80% portaaleja Webissä. Vaaka valikoissa on rajoitettu "tilaa" sijoittaa monta menu valintoja, mutta pystysuora valikko ei ole tätä rajoitusta, ja se auttaa valtavasti. Joten tässä sitä mennään.
Paljon vaiheita, jotta se tapahtuisi jo kuvattu osassa 1 opetusohjelma joten tämä tekee sen hieman lyhyempi, mutta paljon enemmän ominaisuuksia sisältävä tuloksia.
Joten tässä se menee:
Building SEO friendly, Pysty, monitasoinen, hierarkkisesti sisäkkäin valikko Wordpress ja Thesis teema . Askel askeleelta
(... Mitä koskaan ajatellut mahdollista ...)
- Asenna exec PHP plugin ja aktivoi se. Tarvitsemme sitä, koska aion käyttää PHP tekstin sisällä Widget päästämään pystysuoraan valikosta "HTML-koodin.
- Älä vaiheet 1-6 alkaen osa 1 opetusohjelma . Periaatteessa sinun täytyy asentaa ja aktivoida käyttöä NAVT plugin + visuaalisesti rakentaa valikosta. Varmista, että valikko ryhmän nimi on "menu1". Tämä nimi on kovakoodattu vuonna custom_functions.php
- Klikkaa "vaihde" kuvaketta "menu1 ryhmä muokata sitä ominaisuuksia:
- Seuraa Steps 7,1 -7,3 1 osan Tutorial asettaa "Options", "Näytä" ja "CSS" välilehtiä asetukset.
- Nyt klikkaa "Theme"-välilehti tämän ikkunan. Me korvaa useita asetuksia siellä (jos olet seurannut vaihe 1). Tämä on ok - et menetä mitään - mutta nämä muutokset ovat tarpeen, koska olen muuttanut koodia vaiheesta 1 alkaen.
Näin tämä dialogi on täytettävä:- Sisällä "Theme XPath:" alue Syötä koodi (se komentoja korvaa tag nämä luokat):
.jquerycssmenu, .jqueryslidemenu - Aseta "Action" ja "Korvaa"
- Sisällä "Lisää tunnisteita ennen navigoinnin ryhmä" alue Syötä koodi:
<div class='jquerycssmenu' style='margin-top:5px;'> - Sisällä "Lisää tunnisteita jälkeen navigointi ryhmä" alue Syötä koodi:
<br style='clear: left' /></div> - Napsauta [Save / sulje]-painiketta.
- Sisällä "Theme XPath:" alue Syötä koodi (se komentoja korvaa tag nämä luokat):
- Mene nyt Wordpress admin paneeli -> Ulkoasu -> Widgets.
- Vedä "Text" widget (isosta "Käytettävissä olevat widgetit" alue) tulee "sivupalkki 1" alue oikealla. Tulemme lisäämään koodi Teksti widgetin, joka auttaa meitä näkyä pystysuora valikosta.
HUOM: Oletan sinulla on "Sidebar 1" olemassa. Thesis vaihtoehtoja voit sammuttaa sen - mutta vuoksi tämän opetusohjelman anna tehdä se. - Kun vetää ja pudottaa tämä vekotin - se avautuu kuin kukka (en tunne romanttista Nyt MSIE taistelu on ohi).
- In "Title" ala tulla "Maailman paras vertikaalinen valikosta" ... No, vapaasti käyttää luovuutta - että teksti menee edellä oman vastasyntyneen pysty valikosta.
- Suurissa alue teksti - Kirjoita tämä PHP-koodi:
<?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?> - Paina [Tallenna]-painiketta, valitse "Sulje"-linkkiä.
- Lataa päivitetty joukko tiedostoja täällä .
Tämä arkisto sisältää:- Päivitetty versio "kirkas" horisontaalinen valikko code
- "Dark" versio horisontaalinen menu
- Vertical ruokalistamerkinnät
- Päivitetty versio custom_functions.php
- Nyt sinun pitää purkaa tämä arkistoon ja lähettää se "custom" hakemistoon Thesis teema .
Huomaa: Jos olet tehnyt mitään räätälöinnit sisällä custom_functions.php - sinun täytyy yhdistää ne. Jos ei - vapaasti korvata sen minun versioni. - Voila! Nyt voit ladata sivuston ja sama "kirkas" horisontaalinen valikko + Neato pysty valikon vasemmassa sivupalkissa.
- BONUS tehtävä: Let muutos "kirkas" horisontaalinen valikko päälle "pimeä" värimaailman.
- Sisällä custom_functions.php tiedosto:
korvata tämä koodi:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
tällä koodilla:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Pohjimmiltaan olemme kommentoimalla pois yksi rivi ja uncommenting toinen. - Mene nyt Wordpress admin-> Työkalut-> NAVT Luettelot ja klikkaa edellä "Gear" kuvaketta muokata ominaisuuksia teidän "menu1 ryhmään.
- Klikkaa "Theme" välilehti.
- Sisällä "Lisää tunnisteita ennen navigoinnin ryhmä" alue Syötä koodi:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Nyt - lataa sivu - ja sinun tärkein horisontaalinen navigointivalikkoon "maagisesti" tuli pimeä, jotain sen tapaista:
Thesis teema - monikerroksellisten CSS menu - tumma paletti
Tumma väripaletti saattaa soveltua paremmin joidenkin sivustojen kuin valon värin yksi. Joten nyt sinulla on valinnanvapaus elämääsi!
- Palatakseni "kirkas" väriteema - vain kumoa edellä "Bonus" vaiheita.
- Sisällä custom_functions.php tiedosto:
- Johtopäätös:
Rakastan Thesis Theme , rakastan Wordpress ja rakastan sitä, että olemme tapoja lisätä kunnon valikoidensa meidän portaaleja.
20 dollaria
Enjoy!
Gleb Esman
comments } { 5 kommenttia }
