Pyrkimys täydellinen Vertical menu ...
Osa 1 Tämän oppaan kuvataan askel askeleelta rakentamassa horisontaalinen monitasoista sisäkkäisten valikosta Wordpress Thesis Theme . Osa 2 jatkaa edelleen vahvistaa tätä toimintoa. Täällä me lisäämme "dark"-versio horisontaalisia navigation menu ja opetan sinulle, miten siirtyä "kirkas" ja "dark"-versio. Osa 2 on pääjoukko 1 osan. Se sisältää kaikki osasta 1 + lisää uusia hienoja juttuja.
Keskeisenä ajatuksena, että halusin esitellä on lisännyt pystysuora valikosta Thesis Theme (ja Wordpress yleensä). Etsin todella joustava, SEO friendly ja multi-selaimen kanssa pystysuora menu olisi mahdollista luoda rajaton pesivien tasolla.
WEB on tonnia sivua aiheesta, mutta kun aloin kokeilla kaikkia näitä näytteitä - ne joko hajosivat, kariutunut, tukee vain rajoitettua määrää tasolle tai häirinneet Gatesin + Ballmer: n junksplorer 6. Lopulta sain takaisin yrittänyt ja luotettu Dynamic Drive valikot kuin pystysuunnassa näytteet osoittautuivat mukava tapaus, joka sopii minun tiukat vaatimukset. Minun oli merkittävästi muuttaa niitä kuitenkin varmistaa, että se sopii Thesis malli.
Pyrkimys täydellisyyteen jatkuu ...
Olen käyttänyt noin 16 tuntia tutkiva, kokoonpano, testaus, kiinnitys-, kiillotus-ja viritys pystysuora valikon CSS ja. Js-koodin ja 3 / 4 ajasta kului tehdä sitä työtä MSIE 6.
Anyways, olin tyytyväinen lopputulokseen. Johtanut vertikaalinen navigointivalikko on kaikki samat edut että horisontaalinen menu on.
Ottaa kyky lisätä vertikaalisen menu on hyvin tärkeää, noin 70-80% portaaleja Webissä. Horisontaaliset 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 toimenpiteitä, jotta se tapahtuisi jo kuvattu osassa 1 opetusohjelma , joten tämä tekee sen vähän lyhyempää, mutta paljon enemmän monipuolinen tuloksia.
Joten tässä sitä mennään:
Rakennus SEO friendly, pystysuora, monitasoinen, hierarkkisesti sisäkkäisiä valikon Wordpress ja Thesis Theme . Askel askeleelta
(... Mitä et koskaan ajatellut mahdollista ...)
- Asenna exec php plugin ja aktivoida sitä. Tarvitsemme sitä, koska aion käyttää PHP tekstin sisällä vekotin päästää vertikaalinen valikosta "HTML-koodin.
- Älä vaiheet 1 - 6 osa 1 opetusohjelma . Periaatteessa sinun täytyy asentaa ja aktivoida käyttöön NAVT plugin + visuaalisesti rakentaa valikon. Varmista, että valikossa ryhmän nimi on "menu1". Tämä nimi on hardcoded vuonna custom_functions.php
- Klikkaa "testaamassa" kuvaketta "menu1 ryhmään muokata sitä ominaisuuksista:
- Seuraa vaiheet 7,1 -7,3 osan 1 opetusohjelman asettaa "Options", "Näytä" ja "CSS" välilehdet 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.
Tässä miten tämä dialogi on täytettävä:- Sisäpuolella "Theme XPath:" ala tulla tämä koodi (se komennot korvaa tag näihin luokkiin):
.jquerycssmenu, .jqueryslidemenu - Aseta "Action" ja "Korvaa"
- Sisäpuolella "Lisää koodit ennen navigoinnin ryhmään alue tulee tämä koodi:
<div class='jquerycssmenu' style='margin-top:5px;'> - Sisäpuolella "Lisää koodit siirtymisen jälkeen ryhmä" ala tulla tämä koodi:
<br style='clear: left' /></div> - Klikkaa [Tallenna / Sulje]-painiketta.
- Sisäpuolella "Theme XPath:" ala tulla tämä koodi (se komennot korvaa tag näihin luokkiin):
- Nyt mene Wordpress admin paneeli -> Ulkoasu -> Widgets.
- Vedä "Text" widget (isosta "Saatavana widgetit" alue) tulee "sivupalkki 1" alueen oikealla. Aiomme lisätä koodin teksti widgetin, jonka avulla voimme toteutumatta pystysuora valikosta.
HUOM: Oletan olet "Sidebar 1" olemassa. Opinnäytetyö vaihtoehtoja voit sammuttaa sen - mutta vuoksi tämä opetusohjelma antaa tehdä se. - Kun vetää ja putosi tämä vekotin - se avautuu kuin kukka (en tunne romanttista nyt MSIE Taistelu on ohi).
- In "Title" ala tulla "maailman paras vertikaalinen menu" ... No, voit käyttää luovuutta - että teksti menee yläpuolella vastasyntyneen pystysuora valikosta.
- Kun iso 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äivitettävä tiedostoja täällä .
Tämä arkisto sisältää:- Päivitetty versio "kirkas" horisontaalinen menu koodi
- "Dark"-versio horisontaalinen menu
- Vertical menu koodit
- Päivitetty versio custom_functions.php
- Nyt sinun on pura tämä arkisto ja lähettää se "custom" hakemistoon Thesis Theme .
Huomaa: Jos olet tehnyt muokkaukset sisällä custom_functions.php - sinun täytyy yhdistää niitä. Jos ei - voit korvata sen minun versioni. - Voila! Nyt voit ladata sivuston ja sama "kirkas" horisontaalinen valikko + neato pystysuora valikko vasemmassa sivupalkissa.
- BONUS tehtävä: Anna muutos "kirkas" horisontaalinen menu päälle "dark" 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ämä koodi:
//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. - Nyt mene Wordpress admin-> Työkalut-> NAVT luettelot ja valitse mainitun "pyydykset ikoni muokata ominaisuuksissa" menu1 ryhmään.
- Klikkaa "Theme"-välilehti.
- Sisäpuolella "Lisää koodit ennen navigoinnin ryhmään alue tulee tämä koodi:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Nyt - ladata sivun - ja teidän tärkeimpiä horisontaalisia navigation menu "maagisesti" tuli tumma, jotain että:
Diplomityö teema - monitasoinen sisäkkäisiä CSS menu - tumma paletti
Tumma väripaletti saattaa soveltua paremmin joidenkin sivustojen kuin vaaleat yksi. Joten nyt sinulla on valinnanvapaus elämääsi!
- Palatakseni "kirkas" värit - vain kumota edellä "Bonus" toimia.
- Sisällä custom_functions.php tiedosto:
- Päätelmä:
Rakastan Thesis Theme , rakastan Wordpress ja rakastan sitä, että meillä on keinoja lisätä kunnon navigoinnin meidän portaaleihin.
20 dollaria
Nauti!
Gleb Esman
comments } ( 5 kommenttia )
