The Quest for a tökéletes menüt ...

Ez az 1. rész a tutorial
2. része ez a bemutató azt tanítja, hogyan kell építeni függőleges menü + sötét szín palettát, az egyik a horizontális

Úgy döntöttem, hogy kap Thesis téma, mert az egyik kliensem arról tájékoztatott, kompatibilitási problémák között tézis és az én wordpress-tagság site plugin MemberWing. I fixed it, majd úgy döntött, hogy közelebbről szemügyre tézis, és valójában a fáradságot, hogy néz videókat az első oldalon a fő tézis site - Diythemes.com.
Milyen hatással volt rám a leginkább a figyelem a részletekre, felhasználóbarát és legfőképpen a - SEO jellemzők, amelyek olyan jól gondoltam.
MemberWing tagság plugin célja az volt, az alapoktól kezdve a tagság webhelyek kellene húzni annyi SEO lé lehetséges. Szóval sok figyelmet fordítani, hogy számtalan SEO tartozékainak és a tökéletességet MemberWing. Sokan a saját ügyfél kérdezett különböző témákban használni, és miután témát, mely olyan jól optimalizálták a SEO legbelül lenne kiválóan illeszkedik a tagság portál vállalkozókat.

Kombinálása SEO hatásköre MemberWing a SEO hatásköre disszertáció témája adna a legjobb rangsorolási lehetőségek az ügyfeleimnek. Szóval van tézis és játszott vele egy nap.

Ez egy kiváló téma minden formában. A navigációs része bár kissé korlátozott funkció. Induló Thesis 1,5 + ez a menü csak egy szintet. Az én szokásos vágy, hogy képes legyen testre navigáció, mint szükséges. Egyes oldalak már csak néhány oldal, sokan tonna statikus oldal + zillions cikkek / hozzászólások + sok kategóriában.
Így ideális világon, amely lehetőséget teremt a nice looking hierarchikusan szervezett felhasználóbarát navigációs menü elengedhetetlen. Tézis jobb kapásból jó néz navigáció, de észrevettem, hogy minden tézis alapú weboldalak keres, mint ikrek. Testreszabása tézis navigációs menü nem igazán könnyű így a legtöbb ember csak hagyja, ahogy van. Nincs mód változtatni, hogy a kategóriák a menüben vagy a helyzet őket az oldalak között. És újra képes létrehozni beágyazott menüstruktúrák hiányzik. Úgy döntöttem, hogy mit lehet tenni róla.
Kipróbálása után körülbelül fél tucat menü / navigációval kapcsolatos plugins nem tudom a választék a Wordpress Plugin List Navigation NAVT.
NAVT plugin lényegében Rendezetlen lista generátor szuper divatos és egy kicsit nehezen alak untraditional admin felület. Mi félrevezető róla az, hogy valójában nem teremt képzelet keresett menük is. Ez a legnehezebb a munka, ha - ad egy képesség, hogy vizuálisan húzza össze, és bizony Rendezetlen lista - csontváz a menü-to-be. És lehet létrehozni sok menük is. Lehet húzni mindenféle Wordpress dolgok a navigációs menühöz az oldalakat, hozzászólások, cikkek, kategóriák, felhasználók, blokk-kód, a külső kapcsolatok, térelválasztók, szeparátorok és keverheted és a fészket, és megszervezik és alakítsa azokat bármely fa-szerű struktúrába akar.
NAVT generál neked eredményezett HTML rendezetlen listában. Második szépsége NAVT az, hogy ez segít abban, hogy helyezze be az új menü be a téma révén híres JQuery logika alapján, de anélkül, hogy módosítania kell semmilyen kód! NAVT lehetővé teszi, hogy határozza meg: "helyett ez a # elem az új NAVT menü". # eleme lehet az id vagy osztályon útvonal meglévő menüből, vagy div elem, amelynek a tag által generált az aktuális témát. Szóval ez NAVT csere anélkül is, hogy az Ön számára, hogy menj a téma a kódot, és nagyobb, mint a koszos már van. Ha ez úgy hangzik, mint a halandzsa - ne aggódj - I'll útmutató lépésről lépésre hamarosan. A kihívást jelentő része NAVT mindenki számára az, hogy ha lesz, hogy dolgozzon ki konkrét CSS + képek + javascript kódot menü magad. És ez rajtad múlik, hogy kitaláljuk, hol és hogyan lehet integrálni ezeket a fájlokat, és ezt a dolgot megfelelően kap kapcsolható össze.
Őszintén ismerete nélkül néhány JQuery + PHP + CSS + miután tisztességes tapasztalat Wordpress - ez a dolog nehéz húzni.
Örömmel tudom ezt a cuccot egy kicsit ezért úgy döntöttem, hogy harap a golyó, és irányítja az emberiség szabadság építésében a legjobb a legjobb navigációs menük Wordpress. Csak azt kellett kitalálni források néhány szép látszó vízszintes CSS menüket. Kivettem Dynamic Drive weboldalon a legjobb beállításokat, bemutatók és forrásokat.

Én kifejezetten egy nap tanulni tézis és játssz NAVT plugin. A végén büszkén létrehozott egyéni, rugalmas, SEO optimalizált, többszintű, beágyazott nagivation struktúra az én Wordpress + tézis alapú oldal.

Listája a többszintű, beágyazott Wordpress navigációs menü a Thesis Theme
(You Got to love this stuff):

• Szakmai, tiszta megjelenés.
• Támogat minden modern böngésző, mint például MSIE 6,7, Opera, Safari, Firefox 3.x, a Google Chrome-ban mind a javascript és nem javascript módok.
• Kecsesen downgradable nem javascript böngészőkben. Ön menü lesz használható, vizuálisan hasonló, és a munka még a böngészők JavaScript (bár csak a felső szintű navigációs látható lesz, és nem flyouts fog történni, természetesen, mivel ezek által javascript).
• SEO-barát funkciók - Rendezetlen lista menü kód keletkezett HTML. A Google és a többi keresőmotor pókok képes lesz-index a navigációs struktúrát és megtalálni linkeket belső oldalait.
• Támogatás a korlátlan fészkelési szintek és sublevels.
• Támogatást nyújt az új megrendelést vagy oldalak, állások (via felhasználó által meghatározott URI), kategóriák, felhasználók, az egyéni kód blokk és a külső kapcsolatok kiépítését a menüben.
• Támogatása a szöveg-, valamint a kép-alapú menü elemeket. (Van még próbáld ki ezeket mégis).
• Menü szerkezetét és tartalmát, vizuálisan állítható NAVT admin területen.
• Kompakt: JQuery alapú flyouts a beágyazott szinten.
• Gyors: JQuery a menü töltődik be a Google szerverein (Szeretnék tézis is, hogy ugyanezt ahelyett, hogy helyben húzva). Ez felgyorsítja a dolgokat egy kicsit.
• Skálázhatóság - Ez a fajta menü szerkeszthető és beállítható bármikor keresztül NAVT plugin beállításokat szükségessége nélkül a kódolási sehol.

Én is ezt a kiváló menübe Dynamic Drive portál mint a bázisát. Meg kellett szabni egy kicsit javascript kódot is tartalmaz darabja a PHP-ba custom_functions.php működés érdekében a Thesis. Számát is, a már meglévő oldalakat, kategóriák és bejegyzések webhelyemről használták összerakni menüstruktúra. Your site sajátosságai eltérőek lesznek - de fogalma ugyanaz lesz.
Nos, hadd folytassa, rendben?

Lépésről lépésre beállítani NAVT alapú beágyazott, testreszabható, többszintű, SEO friendly
és a tiszta hűvös látszó navigációs menü és a Wordpress Thesis Theme

1. Tovább a Wordpress admin felületen. Plugins-> Új, keres "navt". A plugin nem jelenik meg. Kattintson a [Install], [Telepítés], "Aktivál Plugin".
2. Eszközök-> NAVT listák, Inside "Navigáció Group" területen található "csoport nevét", és adja meg: "menu1" a területen, nyomja meg az [Új] gombot. : "Menu1" téglalap alakú terület van létrehozva.
   Ez a "menu1" terület lesz a fő menü játszótér építése. Te leszel húzással itt be a menü elemeit.
3. Az "eszközök" területén található "egyéb" listából, és kattintson a "Home" választás. A "Home" thingie belül jelenik meg a "nem hozzárendelt" területre. Fura, mi? Nem kell aggódni, amíg működik - és ez lesz a számunkra.
4. Húzza át ezt a "Home" thingie címe: "eszközök" övezet "menu1" téglalap alakú terület. Válik "Home" menüpontot a menüből.
   • Ismételje meg a 3-4 bizonyos oldalakat "Oldalak" területen, valamint a kategóriák "kategória" területre. Húzza bármely egyéb tételek azt szeretné, hogy az Ön menü belül "menu1" téglalapot. Akkor kérjük, kattintson az oldalak, kategóriák, felhasználók és néhány egyedi elemeket, úgymint a "list divider" és a "kód blokk". Kód blokk hűvös út-hoz hozzá egyéni mozaik belül a menüben.
   • Lehet, húzza menüpontok belül "menu1" terület átrendezni a rendelést.
   • Ön módosíthatja hierarchikus helyzetét minden menüpont a "<" és ">" nyilak.
   • Kattintva szöveges nevét minden menüpont - megnyitja lélegzetelállító extra testreszabása párbeszédpanelen az elemhez. Én leginkább a mulasztásokat, de technikailag akkor megbolondul, és elkezd gyártás kép-alapú választás menüből, és adjunk hozzá darabokat a HTML kódot bele. Folytassuk óvatosan mégis.
   • Mert linkless unclikable almenük szolgálnak majd, hogy a "szülők" más "sub-gyermekek" I used "Kód block" típusú. Például ha az ilyen testre kódblokk I. pont alá vont "menüpontot alias" = "MemberWing" és az "Enter code block:" = "<a href='#'> MemberWing </ a>". Miután href = "#" fogja tenni, hogy nem lehet rákattintani, hanem eljáró érvényes "szülő" menüpont választása.
5. Here's how my NAVT "menu1" építettük nézett ki, mint majdnem kész:
   
6. Befejezés első épület, majd kattintson a "Gear" ikonra testreszabhatja menü struktúrája:
   
7. Megnyílik párbeszédablak 4 tabs: Beállítások, Kijelző, CSS, Theme.
   1. Menj a "Beállítások" fülre, és győződjön meg róla, minden négyzet jelölését, és "a csoport nevét" azt mondja: "menu1"
   2. Menj a "Display" fülre, és győződjön meg róla mindent a "Mutasd meg a navigációs csoport ..." területen van jelölve [x]. A többit hagyja az alapértelmezett beállításokat.
   3. Menj a "CSS" fülre, és válassza a rádió gombot (x) "Ne alkalmazza a CSS-osztályok".
   4. Menj a "Theme" fület és töltse ki, mint, hogy:
      
      Insert into "Add tags előtt ..." ez a terület kódja:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Insert into "Add tags után ..." területen ezt a kódot:
      <br style='clear: left' /></div>
   5. Nyomja meg a [Mentés / close] gomb
8. Ezen a ponton menü épület belülről NAVT plugin lehetőségek befejeződött.
   Most itt az ideje, hogy egy kis rázendít a disszertáció témája, hogy kap ez kész. Arra van szükségünk, aki néhány egyéni fájlok - CSS és JavaScript tartozik, hogy a menü és a frissítés tézis "custom_functions.php
9. Töltsd le a teljes fájlok itt.
10. Unzip archive. Ha már frissítette a custom_functions.php a testreszabott - meg kell egyesíteni azokat a dolgaimat. Én is rá kellene bízni az Ön számára.
    Ha még nem ért rá - nyugodtan hogy felülírja-e az enyémmel. Kérjük, vegye figyelembe: Én inkább a helyzetben menü alatt a honlap fejlécet (alapértelmezett felett van) - így én is ezt a kiigazítást preferencia is.
11. Upload archívum beleértve az összes alkönyvtár és fájl mellett a disszertáció témája: "rendelésre" könyvtárat, így:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Még nem ért custom.css - Én inkább tartani menü-specifikus CSS, amelyeket saját helyeket, hogy ne jöhessen létre rendetlenség belül custom.css
12. Ezen a ponton lehet újratölti a weboldalt, és olvasd új gyönyörű új többszintű, beágyazott, SEO optimalizált menüben.
13. Lehet, hogy mindig visszatérhet NAVT beállítások és a testre a menüt több választási lehetőség, illetve új pozíciók semmit. Ez tükrözi majd az élő helyszíni automatikusan.

Az út előtt ...

Ez a leírás tartalmazza a kreatív példa egyféle menüt. Játszottam egy másikkal - csak hogy lássa, milyen sötét színű menü így nézne ki:

Diplomamunka téma - többszintű beágyazott CSS menü - sötét paletta

Azt hiszem, ez elég szép. Sokkal több a navigációs minták rendelkezésre álló Dynamic Drive - mindegyikük lehet szabni a tézis és egyéb Wordpress téma néhány tennivaló:

Dynamic Drive Vízszintes menü

Remélem, megtalálja a bemutató előnyös és hasznos. Mint mondtam, meg lehet szabni bármelyik menük tézis - vagyis adott időpontban és a vágy, hogy ezt a célt szolgálja.

Én is ezt a munkát az Ön számára a szerződéses alapon. Válasszon a menü tetszik, forduljon hozzám és én is dolgozik a kódot, és az utasítások az Ön honlapján.

$ 20

És természetesen ha akár építési szuper SEO optimalizált prémium wordpress tagság portál - a legjobb megoldás a következő:
Thesis Theme + MemberWing tagság plugin + saját otthont Wordpress természetesen.

Tagged as: CSS menü wordpress, diplomamunka témája, disszertáció témája hierarchikus menüket, disszertáció témája többszintű menü, disszertáció témája nagivation, disszertáció témája beágyazott menük, disszertáció témája tutorial, wordpress css menü, wordpress beágyazott menü