Quest for täydellinen menu ...
Tämä on osa 1 ja opetusohjelma
Osa 2 tämän opetusohjelman opettaa rakentaa pystysuoran menu + tumma väripaletti horisontaalinen
Päätin hankkia Thesis Theme , koska eräs asiakas ilmoitti minulle yhteensopivuusongelmia välillä tutkielma ja minun wordpress jäsenyys sivustosta plugin MemberWing. I can ja päätti sitten ottaa tarkemmin tutkielma ja todella vaivautunut katsomaan videoita etusivulla väitetään, site - Diythemes.com .
Mikä minuun eniten on kiinnitetty huomiota yksityiskohtiin, käyttäjäystävällisyyttä ja ennen kaikkea - SEO ominaisuudet, jotka ovat niin hyvin ajateltu.
MemberWing jäsenyys plugin on suunniteltu alusta asti jäsenyyden sivustoja, jotka olisi vetää niin paljon SEO mehua kuin mahdollista. Olen siis maksanut paljon huomiota monia SEO parannuksia ja täydellisyyttä ja MemberWing. Monet oman asiakkaat ovat kiinnostuneita eri teemojen käyttöä ja ottaa teema oli niin SEO optimoitu syvältä sisältä se sopii erinomaisesti jäseneksi portaali yrittäjille.
Yhdistämällä SEO toimivalta MemberWing SEO valtuudet Työn aihe antaisi parhaat ranking mahdollisuudet asiakkaani. Joten sain tutkielma ja soitti sen päivän.
Se on erinomainen teema kaikin tavoin. Navigointi osa sitä, vaikka on vähän rajoitettu funktio. Alkaen tutkielma 1.5 + on yksi taso valikko vain. Oma tavallista halu on voitava mukauttaa valikkoon niin paljon kuin tarvitaan. Jotkut sivustot ovat vain muutaman sivun, monet muut ovat tonnia staattisia sivuja + zillions articles / virkojen + paljon kategorioita.
Joten ihannemaailmassa joilla on mahdollisuus luoda hieno hierarkkisesti järjestäytynyt käyttäjäystävällinen navigointivalikko on oltava. Opinnäytetyö suoralta kädeltä on hyvän näköinen valikkoon, mutta huomasin, että kaikki Thesis-pohjaisia web-sivustoja etsivät kuin kaksoset. Mukauttaminen Työn navigointivalikko ei todellakaan helppoa, joten useimmat ihmiset vain jättää se on. Ei ole mitään keinoa muuttaa järjestystä luokkien valikosta tai sijoittamisessa sivujen välillä. Ja vielä, kyky luoda sisäkkäistä menu rakenteet puuttuvat. Joten päätin, mitä voitaisiin tehdä asialle.
Kun yrittää noin puoli tusinaa menu / navigointialan plugins tein valinnan Wordpress Navigation List Plugin NAVT .
NAVT plugin on lähinnä Järjestämätön lista generaattori super fancy ja vähän vaikeasti kuva epätavanomaisesta admin käyttöliittymä. Mikä harhaanjohtava siitä, että se ei oikeastaan luoda fancy HAKU valikoita itsekseen. Se vaikein osa työtä, vaikka - antaa sinulle mahdollisuuden visuaalisesti vetää yhteen ja luoda Järjestämätön lista - luuranko valikon-to-be. Ja voit luoda useita valikoita liikaa. Voit vetää kaikenlaisia Wordpress aine osaksi navigointivalikkoon: sivuja, virkaa, artikkelit, luokat, käyttäjät, koodi estää, ulkoiset linkit, välilevyt, erottimet ja yhdistellä ja pesiä ja järjestää ja muokata niitä millään puumaista rakennetta sinua haluta.
NAVT tuottaa sinulle johtanut HTML Järjestämätön lista. Toinen kauneus NAVT on, että se auttaa sinua asettamaan uuden menu omaan teema kautta tunnetuksi JQuery perustuu logiikkaan, mutta ei tarvitse muuttaa koodia! NAVT avulla voit määrittää: "korvata tämä # osa minun uusi NAVT menu". # Tekijä voisi olla id tai luokka tietä luotua valikkoa tai div elementti tunnisteen, jota syntyy nykyinen teema. Joten NAVT tämä korvaa sinua ei pakoteta sinua menemään teema koodi ja lisää sen sotkuinen kuin se jo on. Jos tämä kaikki kuulostaa siansaksaa - ei hätää - minä ohjaa sinut askel askeleelta pian. Haastava osa NAVT kaikille on, että sinun täytyy keksiä todellinen CSS + kuvat + javascript koodi valikon itse. Ja se on sinun selvittää, missä ja miten yhdistää nämä tiedostot ja tehdä tätä tavaraa oikein saada yhdistetty.
Ystävällisin terveisin tietämättä JQuery + joitakin PHP + CSS + ottaa kunnon kokemusta Wordpress - tämä asia on vaikea vetää.
Mielellään Tiedän tavaraa vähän joten päätin urheasti ja ohjata ihmiskuntaa vapaus rakentaa paras paras navigoinnin Wordpress. Sain tarvittavat selvittää lähteiden noin komeita horisontaalinen CSS valikot. Otin Dynamic Drive verkkosivuilla heidän parhaat valikoimat, demot ja lähteet.
Olen omistautunut päivä tutkia tutkielma ja pelata NAVT plugin. Lopussa olen ylpeä luonut mukautetun, joustava, SEO optimoitu, monitasoinen, sisäkkäisiä nagivation rakenne minun Wordpress + tutkielma pohjainen sivusto.
Luettelo ominaisuuksia monitasoinen, sisäkkäisiä Wordpress navigaatiovalikossa Thesis Theme
(Sinun täytyy rakastaa tätä kamaa):
- Ammatillinen, puhdas ulkoasu.
- Tuki kaikki uudet selaimet, kuten MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome sekä javascript ja ei-javascript liikennemuotoihin.
- Kauniisti downgradable ei-javascript-selaimissa. Sinun tulee valikko käyttää, visuaalisesti samankaltaisia ja työskentely jopa javascript-yhteensopimattomia selaimia (vaikkakin vain ylätason navigointi tulee näkyviin eikä flyouts tapahtuu luonnollisesti, koska ne tehdään javascript).
- SEO friendly ominaisuuksia - Järjestämätön lista menu koodi luodaan HTML. Googlen ja muiden hakukoneiden robotit voivat indeksoida liikkuminen ja linkkejä sisäsivuilla.
- Tuki rajoittamaton pesivien tasoja ja sublevels.
- Tuki järjestyksen tai sivuja, virkaa (via käyttäjän määrittelemän URI), luokat, käyttäjät, mukautetun koodin osia ja ulkoisia linkkejä valikossa.
- Tuki teksti-ja kuva-valikon osia. (En ole vielä kokeilla näitä vaikka).
- Valikko rakenne ja sisältö on visuaalisesti säädettävissä NAVT admin alueella.
- Kompakti: JQuery perustuu flyouts varten sisäkkäin tasolla.
- Fast: JQuery varten valikko ladataan Googlen palvelimille (Mielelläni Työn itse tehdä saman sijasta vetämällä sitä paikallisesti). Tämä nopeuttaisi asioita hieman.
- Scalability - Tällainen valikko on muokattavissa ja muunneltavat milloin tahansa kautta NAVT plugin-asetuksia ilman tarvetta koodaus missään.
Käytin tähän erinomaiseen valikon Dynamic Drive -portaalin alustana. Minulla oli mukauttaa javascript-koodin vähän sekä sisältää palan PHP osaksi custom_functions.php tehdä työtä tutkielma. Myös useita aiemmin sivujen, luokkien ja virkojen sivustoni käytettiin koota menu rakenne. Sivustosi yksityiskohtia ovat erilaiset - mutta käsitteet ovat samat.
Joten jatkaa, on meidän?
Askel askeleelta ohjeet setup NAVT perustuva sisäkkäisiä, muokattavissa, monitasoinen, SEO friendly
ja pelkkää hävytön etsiskellä navigaatiovalikossa Wordpress ja Thesis Theme
- Siirry Wordpress admin paneeli. Plugins-> Lisää uusi haku "navt". Plugin näkyy. Valitse [Asenna], [Asenna nyt] "Ota Plugin".
- Työkalut-> NAVT listat, Inside "Navigation Group ala löytää" Ryhmän nimi "ja kirjoita" menu1 "alalla, paina [Luo]-painiketta. "Menu1" suorakulmion ala sai luotu.
Tämä "menu1" alue on tärkein leikkipaikka menu rakentamiseen. Sinulta vetämällä ja pudottamalla tässä valikon osia. - Kotona "omaisuus" ala löytää "muu" haluttaa ja klikkaa "Home" valinta. "Koti" piirtopöydällä tulee sisälle "vapaana" alue. Outoa, eikö? Ei hätää, niin kauan kuin se toimii - ja se meille.
- Vedä tämä "Home" piirtopöydällä osoitteesta saamiset "-alue," menu1 "suorakulmion alueella. Siitä tulee "Koti" valikkokohta.
- Toista vaiheet 3-4 noin sivuja "Sivut"-alueella, sekä luokkien "luokkaan" ala. Vedä kaikki muut kohteet, jotka haluat olla valikon sisällä "menu1" suorakulmio. Voit klikata sivujen, luokkien käyttäjät ja joitakin mukautettuja osia kuten "lista jakaja" ja "code block". Koodieston on cool tapa lisätä mukautettuja katkelmia sisällä valikosta.
- Voit vetää valikon sisällä "menu1" alue järjestää niiden järjestys.
- Voit säätää hierarkkisesta asemasta kunkin valikon avulla "<" ja ">" nuolia.
- Klikkaamalla tekstiä nimi jokaisen valikon - avaa mielessä käsittämätön ylimääräinen räätälöinti dialogi kohteelle. Olen enimmäkseen käyttää oletuksena, mutta teknisesti voi mennä sekaisin ja alkaa tehdä image-valikon valintoja ja lisätä paloina HTML-koodi on. Etenemään varovaisesti tosin.
- Saat linkless unclikable alavalikot, joka toimii "vanhemmat" muiden "osa-lapset" Olen tottunut "Code block" tyyppi. Esimerkiksi räätälöidessään niin koodieston erä I syöttää "Valikkokohta alias" = "MemberWing" ja "Anna koodi block" = "<a href='#'> MemberWing </ a>". Ottaa href = "#" tekee se ei ole valittavissa, vaan toimii pätevä "emo"-valikon valinnan.
- Tässä miten minun NAVT "menu1" rakentaa rakenne näytti melkein valmiiksi:
- Maali alkuperäinen rakennus ja paina "pyydykset kuvaketta muokata menu rakenne:
- Se avautuu valintaikkuna, jossa 4 välilehteä: Asetukset, Näyttö, CSS, Theme.
- Mene "Asetukset"-välilehti ja varmista, että kaikki on valittu ja "ryhmän nimi sanoo:" menu1 "
- Valitse Näyttö-välilehti ja varmista, että kaikki "Näytä navigointi ryhmän ..." alue on valittu [x]. Jätä lepo oletusarvot.
- Mene "CSS-välilehti ja valitse valintanappi (x)" Älä koske CSS luokat ".
- Mene "Theme"-välilehti ja täytä se näin:
INSERT INTO "Lisää koodit ennen ..." ala tämä koodi:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
INSERT INTO "Lisää koodit jälkeen ..." ala tämä koodi:
<br style='clear: left' /></div> - Paina [Tallenna / Sulje]-painiketta
- Tässä vaiheessa valikon rakennuksen sisällä NAVT plugin vaihtoehtoja on valmis.
Nyt on aika tehdä hieman virittää varten Thesis Theme saada se valmiiksi. Sitä varten tarvitsemme vielä muutaman asiakassuhde arkistoida - CSS ja JavaScript, joka kuuluu valikko ja päivittää tutkielman custom_functions.php - Lataa täydellinen tiedostoja täällä .
- 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: I halusi kantaa valikon sivuston otsikon (oletus on edellä) - niin minun oikaisu sisällytetään tämän mieluummin kuin hyvin. - Lataa arkisto sisältää kaikki alihakemistot ja tiedostot alla Thesis Theme "custom" hakemistoon, kuten tämä:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
En ole koskenutkaan custom.css - mieluummin pitää menu-erityinen CSS omalla paikkoja välttää sotku sisällä custom.css - Tässä vaiheessa voit ladata sivuston ja nähdä uusia kaunis uusi monitasoinen, sisäkkäisiä, SEO optimoitu menu.
- Voit aina palata NAVT asetuksia ja muokata menu enemmän valinnanvaraa tai paikkaa mitään. Se näkyy elävien sivuston automaattisesti.
Tie eteenpäin ...
Tämä opas sisältyy luova esimerkki yhden tyypin valikko. Olin häntä on toinen - vain nähdä, miten tumma valikko näyttäisi tältä:
Diplomityö teema - monitasoinen sisäkkäisiä CSS menu - tumma paletti
Minusta se on aika kiva. On monia muitakin navigoinnin näytteitä osoitteessa Dynamic Drive - ne kaikki ovat mahdollisia muokata varten tutkielma ja muut Wordpress teemoja pienellä vaivannäöllä:
Dynamic Drive Horisontaaliset valikot
Toivottavasti löydät tämän opetusohjelman hyödyllistä ja hyödyllistä. Kuten sanoin, on mahdollista mukauttaa jotakin näistä valikoista Työn - että annetaan aikaa ja halua antaa sen tapahtua.
Voisin tehdä tätä työtä sinulle sopimuksen perusteella. Valitse vain valikon haluat, yhteyttä minuun ja I'll työtä koodi ja ohjeet sivustosi.
20 dollaria
Ja tietenkin jos olet jopa rakennuksen super SEO optimoitu palkkio wordpress jäsenyys portaali - paras ratkaisu tähän:
Thesis Theme + MemberWing jäsenyys plugin + itse isännöi Wordpress tietenkin.
