Pyrkimys täydellinen Vertical valikon ...
Osa 1 Tämän oppaan kuvataan askel askeleelta rakentamassa vaaka monikerroksellisten valikosta WordPress Thesis Theme . Osa 2 jatkuu parantaa tämän toiminnon. Täällä me lisäämme "dark"-versio horisontaalisia navigation menu, ja opetan sinulle, miten vaihtaa "kirkas" ja "dark"-versio. Osa 2 on pääjoukko 1 osan. Se sisältää kaikki Osan 1 + lisää uusia juttuja.
Tärkein ajatus, että halusin esitellä on lisätä pystysuunnassa valikon Thesis Theme (ja WordPress yleensä). Etsin todella joustava, SEO ystävällisiä ja multi-selain yhteensopiva pystysuunnassa valikon, jonka avulla voidaan luoda rajaton pesiviä tasoja.
WEB sisältää runsaasti sivuja aiheesta, mutta kun aloin kokeilla kaikkia näitä näytteitä - ne joko hajosi, hajonnut, tukee vain rajallinen määrä tasoja tai häirinneet Gates + Ballmer n junksplorer 6. Lopulta pääsin takaisin yrittänyt ja luotettu Dynamic Drive valikot kuin pystysuunnassa näytteet osoittautui mukava tapaus, joka sopii minun tiukat vaatimukset. Jouduin merkittävästi muuttaa niitä kuitenkin varmistaa, että se sopii Thesis malli.
Pyrkimys täydellisyyteen jatkuu ...
Käytin noin 16 tuntia etsimistä, kokoonpano, testaus, kiinnitys-, kiillotus-ja tuning pystysuunnassa valikon ja CSS. JS-koodin ja 3/4 ajasta kului mikä työskennellä MSIE 6.
Anyways, olin tyytyväinen lopputulokseen. Tuloksena pysty 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 valikot ovat vain "tilaa" majoittaa monia menu valintoja, mutta pystysuunnassa valikko ei ole tätä rajoitusta, ja se auttaa valtavasti. Joten tässä mennään.
Paljon toimenpiteitä, jotta se tapahtuisi jo kuvattu osassa 1 opetusohjelma joten tämä tekee sen hieman lyhyempi, mutta paljon enemmän monipuolinen tuloksia.
Joten tässä se menee:
Rakennus SEO friendly, pystysuora, monitasoinen, hierarkkisesti sisäkkäin valikosta WordPress ja Thesis Theme. Step by Step
(... Mitä koskaan ajatellut mahdollista ...)
- Asenna exec PHP plugin ja aktivoi se. Me tarvitsemme sitä, koska aion käyttää PHP sisälle tekstin widget päästämään pystysuoraan menu "HTML-koodin.
- Tee vaiheet 1 - 6 osa 1 opetusohjelma . Periaatteessa sinun täytyy asentaa ja aktivoida käyttämään NAVT plugin + visuaalisesti rakentaa valikosta. Varmista, että valikko ryhmän nimi on "menu1". Tämä nimi kovakoodattu in custom_functions.php
- Klikkaa "vaihteen" kuvaketta "menu1 ryhmään muokata sen ominaisuuksia:
- Seuraa vaiheet 7,1 -7,3 1 osan opetusohjelman asettaa "Options", "Näytä" ja "CSS" välilehtiä asetukset.
- Nyt klikkaa "Theme"-välilehti tämän ikkunan. Me korvaa useita asetuksia siellä (jos on seurannut vaihe 1). Tämä on ok - et menetä mitään - mutta nämä muutokset ovat tarpeen, koska olen muuttanut koodia vaiheesta 1.
Seuraavassa kerrotaan, miten tämä dialogi on täytettävä:- Sisällä "Theme XPath:" alue syöttämällä koodin (se käskee korvaamaan mitään tag näitä luokat):
.jquerycssmenu, .jqueryslidemenu - Aseta "Action" ja "Korvaa"
- Sisällä "Lisää koodit ennen navigoinnin ryhmä" ala tulla tämä koodi:
<div class='jquerycssmenu' style='margin-top:5px;'> - Sisällä "Lisää koodit jälkeen navigointi ryhmä" ala tulla tämä koodi:
<br style='clear: left' /></div> - Napsauta [Tallenna / sulje]-painiketta.
- Sisällä "Theme XPath:" alue syöttämällä koodin (se käskee korvaamaan mitään tag näitä luokat):
- Nyt mene WordPress admin panel -> Ulkoasu -> Widgets.
- Vedä "Text" widget (isosta "Käytettävissä widgetit" alue) tulee "sivupalkin 1" alue oikealla. Aiomme lisätä koodin Teksti vekotin, joka auttaa meitä toteutumatta pysty valikkoon.
HUOM: Oletan sinulla on "Sidebar 1" olemassa. Opinnäytetyö vaihtoehtoja voit sammuttaa sen - mutta vuoksi tämä opetusohjelma anna tee se. - Kun vetää ja pudottaa tämä vekotin - se avautuu kuin kukka (tunnen romanttinen nyt MSIE taistelu on ohi).
- In "Title" ala tulla "maailman paras vertikaalinen menu" ... No, vapaasti käyttää luovuutta - että teksti menee yläpuolella vastasyntyneen pystysuunnassa valikon.
- Kun iso alue tekstille - kirjoita tämä PHP:
<?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 asettaa tiedostojen täältä .
Tämä arkisto sisältää:- Päivitetty versio "kirkas" horisontaaliset valikosta code
- "Dark" versio horisontaalisen valikon
- Vertical ruokalistamerkinnät
- Päivitetty versio custom_functions.php
- Nyt sinun täytyy purkaa tämän tiedoston ja ladata se "custom" hakemistoon Thesis Theme.
Huomaa: Jos olet tehnyt mitään räätälöinnit sisältä custom_functions.php - sinun täytyy yhdistää ne. Jos ei - vapaasti korvata sen oman version. - Voila! Nyt voit ladata sivuston ja sama "kirkas" horisontaalinen valikko + Neato pystysuunnassa valikon vasemmassa sivupalkissa.
- BONUS tehtävä: Let vaihtaa "kirkas" horisontaalinen menu päälle "pimeä" värimaailman.
- Inside custom_functions.php tiedostoon:
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 me kommentointi on yhden rivin ja uncommenting toinen. - Nyt mene WordPress admin-> Tools-> NAVT luettelot ja valitse edellä "vaihde" kuvaketta muokata ominaisuuksia teidän "menu1 ryhmään.
- Klikkaa "Theme"-välilehti.
- Sisällä "Lisää koodit ennen navigoinnin ryhmä" ala tulla tämä koodi:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Nyt - lataa sivu - sekä keskeiset horisontaaliset navigation menu "maagisesti" tuli pimeä, jotain että:
Thesis Theme - monikerroksellisten CSS menu - tumma paletti
Tumma väripaletti saattaa soveltua paremmin tietyille sivustoille kuin vaaleat yksi. Joten nyt sinulla on valinnanvapaus elämääsi!
- Palatakseni "kirkas" värimaailma - aivan kumoa edellä "Bonus" vaiheita.
- Inside custom_functions.php tiedostoon:
- Johtopäätös:
Rakastan Thesis Theme, rakastan WordPress ja rakastan sitä, että meillä on keinoja lisätä kunnon valikoidensa meidän portaaleja.
20 dollaria
Enjoy!
Gleb Esman
{Kommentteja tästä merkintä on suljettu}
