Quest for perfect ... Valikko

Tämä on osa 1 ja opetusohjelma
Osa 2 Tämän oppaan opettaa kuinka rakentaa vertikaalisen valikosta + tumma väripaletti on horisontaalinen

Olen päättänyt saada Thesis teema, sillä eräs asiakkaista ilmoitti minulle yhteensopivuusongelmista välillä Työn ja minun WordPress jäsenyys sivuston plugin MemberWing. I doubt, ja päätti ottaa tarkemmin Työn ja todella vaivautunut katsomaan videoita etusivulla väitetään, sivuston - Diythemes.com.
Mitä minuun eniten huomiota yksityiskohtiin, käyttäjäystävällisyyttä ja ennen kaikkea - SEO ominaisuuksia, jotka ovat niin hyvin ajateltu.
MemberWing jäsenyys plugin on suunniteltu maasta ylös jäsenyyden sivustoja, jotka pitäisi vetää yhtä paljon SEO mehua kuin mahdollista. Joten olen kiinnittänyt paljon huomiota monien SEO lisälaitteita ja täydellisyyttä ja MemberWing. Monet oman asiakkaat ovat kiinnostuneita eri teemoja käyttää ja joiden teema oli niin SEO optimoitu syvältä sisältä olisi sopii erinomaisesti jäseneksi portaali yrittäjille.

Yhdistämällä SEO toimivalta MemberWing kanssa SEO toimivalta Thesis Theme antaisi parasta sijoitusta mahdollisuudet asiakkaani. Joten sain Työn ja soitti sen päivän.

Se on hyvä teema kaikin tavoin. Navigation osa sitä, vaikka on vähän rajoitettu toiminto. Alkaen Työn 1.5 + on yksi taso valikossa vain. Oma yleensä halu on voitava mukauttaa valikkoon niin paljon kuin tarvitaan. Jotkut sivustot ovat vain muutamia sivuja, monet muut ovat tonnia staattisia sivua + zillions artikkeleita / virkaa + paljon luokkia.
Niin ihanteellinen maailma ottaa mahdollisuuden luoda komeita hierarkkisesti järjestetty käyttäjäystävällinen navigointivalikko on oltava. Thesis oikeus suoralta kädeltä on hyvän näköinen valikkoon, mutta huomasin, että kaikki Thesis perustuvat sivustot ovat etsiskellä kuin kaksoset. Customizing Opinnäytetyö Navigointivalikon ei todellakaan ole helppoa, joten useimmat ihmiset jätä se on. Ei ole mitenkään muuttaa järjestystä luokkien valikossa tai kantaa niitä sivujen välillä. Ja vielä, kyky luoda sisäkkäisiä valikko rakenteet puuttuvat. Joten päätin, mitä voitaisiin tehdä asialle.
Kun yrittää noin puoli tusinaa menu-valikkoon liittyvät plugins asetan valinta Wordpress Navigation List Plugin NAVT.
NAVT plugin on lähinnä Järjestämätön lista generaattorin super fancy ja hieman vaikeasti kuva untraditional admin interface. Mitä harhaanjohtavaa siitä, että se ei itse luo fancy näköinen valikoihin itse. Se vaikein osa työtä, vaikka - antaa sinulle mahdollisuuden visuaalisesti vetää yhteen ja luoda Järjestämätön lista - runko valikon-to-be. Ja voit luoda useita valikoita liikaa. Asiakas voi vetää kaikenlaisia Wordpress tavaraa tulee navigointivalikkoon: sivua, virkaa, artikkelit, luokat, käyttäjät, koodi lohkot, ulkoiset linkit, välilevyt, erottimet ja yhdistelemme ja pesiä sekä järjestää ja muokata niitä millään puumaista rakennetta sinulle haluta.
NAVT tuottaa sinulle johtanut HTML Järjestämätön lista. Toinen kauneus NAVT on, että voit lisätä uuden valikon omalle teeman kautta kuuluisa JQuery perustuu logiikkaan, mutta ei tarvitse muuttaa koodia! NAVT avulla voit määrittää: "Korvaa tällä # osa minun uusi NAVT valikosta". # tekijä voisi olla ID tai luokan tietä valikon tai div elementti tunniste, jota syntyy nykyisen teeman. Joten NAVT tämä korvaa sinulle pakottamatta voit mennä teema koodi ja tehdä siitä sotkuinen kuin se jo on. Jos tämä kaikki kuulostaa omituiset - ei hätää - Minä opastaa sinut askel askeleelta pian. Haastava osa NAVT kaikille on, että sinun täytyy keksiä todellisia CSS + kuvia + javascript-koodi valikon itse. Ja se on sinun selvittää, missä ja miten yhdistää nämä tiedostot ja tee tätä kamaa oikein saada kytketty yhteen.
Terveisin tietämättä JQuery + noin PHP + CSS + ottaa kunnon kokemusta Wordpress - tämä asia on vaikea vetää.
Mielellään Tiedän, että tämä aine vähän joten päätin urheasti ja ohjaa ihmiskuntaa vapauden rakentaa parhaista parhaat navigoinnin Wordpress. Minä vain tarpeen selvittää lähteiden joitakin komeita vaaka CSS valikoissa. Otin Dynamic Drive verkkosivuilla niiden parhaat valikoimat, demoja ja lähteistä.

Olen omistettu päivä tutkimuksen Työn ja leikkiä NAVT plugin. Lopussa Olen ylpeä luonut mukautettuja, joustava, SEO optimoitu, monitasoinen, sisäkkäisiä nagivation rakenne minun Wordpress + tutkielma perustuu sivusto.

Luettelo piirteitä monitasoista, sisäkkäisiä Wordpress navigation Menu Thesis Theme
(You Got to love this stuff):

• Professional, puhdas näyttävät ja tuntuvat.
• Tuki kaikki nykyaikaiset selaimet, kuten MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome sekä JavaScript ei ole javascript-tilat.
• Sulavasti downgradable non-JavaScript-selaimissa. Olet valikko on käytettävissä, visuaalisesti samankaltaisia ja työskentelee myös javascript pois päältä selaimia (vaikkakin vain ylätason valikkoon tulee näkyviin eikä flyouts tapahtuu luonnollisesti, koska ne tehdään javascript).
• SEO friendly ominaisuudet - Järjestämätön lista menu koodi luodaan HTML-. Googlen ja muiden hakukoneiden robotit voivat indeksoida liikkuminen ja linkkejä sisäsivut.
• Tuki rajoittamaton pesivien tasoja ja sublevels.
• Tuki järjestyksen tai sivuja, virkaa (via käyttäjän määritelty URI), luokat, käyttäjät, tullikoodeksin lohkot ja ulkoisia linkkejä-valikosta.
• Tuki teksti-ja kuva-valikon osia. (En ole vielä kokeilla näitä tosin).
• Valikko rakenne ja sisältö on visuaalisesti säädettävissä kautta NAVT admin-alueella.
• Compact: jQuery perustuu flyouts varten sisäkkäin tasolla.
• Nopeat: jQuery valikko ladataan Googlen palvelimet (I'd love Työn itse tekemään saman eikä vetämällä sitä paikallisesti). Tämä nopeuttaisi asioita hieman.
• Skaalautuvuus - Tällainen valikko on muokattavissa ja configurable milloin tahansa kautta NAVT plugin-asetuksia ilman tarvetta koodaus tahansa.

Olen käyttänyt tätä erinomaista valikkoon Dynamic Drive portaalin perusta. Olin muokata JavaScript-koodi vähän samoin kuin myös kimpale PHP huomioon custom_functions.php tehdä työtä Thesis. Myös useita jo olemassa olevia sivuja, luokkia ja virkoja sivustoni käytettiin koota valikon rakenteeseen. Sivustosi erityispiirteet on erilainen - mutta käsitteet ovat samat.
Joten edetä, on me?

Askel askeleelta ohjeita asennuksen NAVT perustuva pesiä, customizable, monitasoinen, SEO friendly
ja pelkkää hävytön etsiskellä navigointivalikko Wordpress ja Thesis Theme

1. Siirry Wordpress admin-paneeli. Plugins-> Lisää uusi haku "navt". Plugin näkyy. Napsauta [Install], [Asenna], "Aktivoi Plugin".
2. Työkalut-> NAVT luettelot, Inside "Navigation Group alueen löytää" Ryhmän nimi "ja kirjoittaa:" menu1 "-kentässä, paina [Luo]-painiketta. "Menu1" suorakulmion ala sai luotu.
   Tämä "menu1" alue on tärkein leikkipuisto valikon rakentamiseen. Sinulta vetämällä ja pudottamalla tässä valikon osia.
3. In "omaisuutta" alan löytää "muut" ListBox ja klikkaa "Koti" valinta. "Home" thingie näkyy sisällä "määrittämätön" alueella. Outoa, vai? Ei hätää, niin kauan kuin se toimii - ja se meille.
4. Vedä tämä "Koti" thingie osoitteesta saamiset "alue," menu1 "suorakulmion alueella. Se tulee "Koti" kohteen valikosta.
   • Toista vaiheet 3-4 joitakin sivuja "Sivut" alueella, sekä luokkien "luokkiin" alueella. Vedä muut kohteet, jotka haluat olla valikon sisällä "menu1" suorakaide. Voit klikata sivuja, luokat, käyttäjien ja joitakin mukautettuja osia, kuten "luettelon jakaja" ja "code block". Koodieston on rento tapa lisätä mukautettuja katkelmien sisällä valikosta.
   • Voit vetää valikon sisällä "menu1" alueen järjestää niiden järjestyksen.
   • Asiakas voi muuttaa hierarkkinen asema jokaisen valikkokohta "<" ja ">" nuolet.
   • Klikkaamalla tekstiä nimi jokaisen valikon - avaa mielessä käsittämätön ylimääräisiä customization valintaikkuna tähän kohtaan. Olen enimmäkseen käytetään oletuksena, mutta teknisesti voit hulluksi ja alkaa tehdä kuva-valikon valinnat ja lisää palat HTML-koodin siihen. Edetä varovaisesti tosin.
   • Varten linkless unclikable alavalikot, joka toimii "vanhemmat" muiden "sub-lapset" olen käyttänyt "koodieston" tyyppi. Esimerkiksi räätälöidessään kuten koodieston tuote tulin termiä Valikkokohta alias "=" MemberWing "ja" Enter koodieston: "=" <a href='#'> MemberWing </ a> ". Ottaa href = "#" avulla ei ole valittavissa, vaan toimii pätevä "emo"-valikon.
5. Here's how my NAVT "menu1" rakentaa rakenne näytti lähes päätökseen:
   
6. Maali alkuperäinen rakennus ja sen jälkeen klikkaa "vaihdetta" kuvaketta muokata valikon rakenne:
   
7. Se avaa ikkunan, jossa 4 tabs: Valinnat, Display, CSS, Theme.
   1. Go to "Options"-välilehti ja varmista, että kaikki on valittu ja "Ryhmän nimi", sanoo: "menu1"
   2. Mene "Näytä"-välilehti ja varmista, että kaikki "Näytä valikkoon ryhmää ..." alue on valittu [x]. Jätä loput on oletusarvot.
   3. Go to "CSS"-välilehti ja valitse valintanappi (x) "Älä koske CSS-luokkia".
   4. Mene "Theme"-välilehti ja täytä se kuin että:
      
      Insert into "Lisää tunnisteet ennen ..." alalla tämä koodi:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Insert into "Lisää tunnisteita jälkeen ..." alalla tämä koodi:
      <br style='clear: left' /></div>
   5. Paina [Save / Close]-painiketta
8. Tässä vaiheessa valikosta rakennuksen sisällä NAVT plugin vaihtoehtoja on valmis.
   Nyt on aika tehdä hieman virittää niin Thesis Theme saada sitä valmiiksi. Siihen on syytä lisätä muutamia muokattuja tiedostoja - CSS ja JavaScript joka kuuluu valikko ja päivittää opinnäytetyö "custom_functions.php
9. Lataa täydellinen tiedostoja täältä.
10. Unzip arkisto. Jos olet päivittänyt custom_functions.php kanssa räätälöinnit - sinun täytyy yhdistää ne minun jutut. Jätän sen sinulle.
    Jos et ole koskenutkaan - voit korvata sen minun. Huomaa: päätin kantaa valikosta sivuston otsikon (oletus on edellä) - joten minun oikaisua myös tätä mieluummin kuin hyvin.
11. Lataa arkisto sisältää kaikki alihakemistot ja tiedostot alla Thesis Theme "custom" hakemistoon, kuten tässä:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    En ole käsitellyt custom.css - mieluummin pitää menu-erityinen CSS omalla sijainneista välttää sotku sisällä custom.css
12. Tässä vaiheessa voit lataa sivuston ja nähdä uusia kauniita uusi monitasoinen, sisäkkäisiä, SEO optimoitu valikosta.
13. Asiakas voi aina palata NAVT asetuksia ja muokata valikko enemmän valinnanvaraa tai sijoittaa mitään. Se näkyy elävän sivuston automaattisesti.

Tiestä ...

Tämä opetusohjelma myös luovan esimerkiksi yhden tyypin valikosta. Kanssa soitin toiseen - vain nähdä, kuinka tumma ihonväri valikosta näyttäisi:

Thesis Theme - monitasoinen sisäkkäisiä CSS Menu - Dark paletin

Minusta on varsin mukavaa. Paljon enemmän navigoinnin näytteitä osoitteessa Dynamic Drive - ne kaikki on mahdollista muokata ja Työn ja muun Wordpress teemoja hieman vaivaa:

Dynamic Drive Horisontaaliset Ruokalistat

Toivottavasti löydät tämän opetusohjelman myönteisiä ja hyödyllisiä. Kuten sanoin, on mahdollista muokata mitä tahansa näistä valikoita Thesis - on annettava aikaa ja halua antaa sen tapahtua.

Voisin tehdä tätä työtä teille sopimuksen perusteella. Vain valita valikosta haluamasi, yhteyttä minuun ja minä työtä koodi ja ohjeet sivuston.

+20dollaria

Ja tietysti jos olet jopa rakennuksen Super SEO optimoitu Premium Wordpress jäsenyyden Portal - paras ratkaisu tähän:
Thesis Theme + MemberWing jäsenyyden plugin + itse isännöi Wordpress tietenkin.

Tagged seuraavasti: CSS Menu wordpress, opinnäytetyön teema, Thesis Theme hierarkkisia valikoita, Thesis Theme monitasoinen valikko, Thesis Theme nagivation, Thesis Theme sisäkkäisiä valikkoja, Thesis Theme Tutorial, WordPress CSS Menu, WordPress sisäkkäisiä menu