A küldetés a tökéletes függőleges menü ...

1. rész a bemutató, lépésről lépésre leírt kiépítésének folyamata többszintű vízszintes menü beágyazott WordPress értekezés témája . 2. rész továbbra is az, hogy fokozza ezt a funkciót. Itt fogunk hozzá "sötét" változata vízszintes navigációs menü, és megtanítom, hogyan kell váltani a "fényes" és "sötét" változat. 2. rész felülbírálja az 1. részben foglaltakat. Magában foglalja mindazokat az 1. rész + hozzáteszi több jó dolgok.

Fő gondolata, hogy szerettem volna bemutatni a hozzá függőleges menü (és a WordPress általában). Kerestem nagyon rugalmas, és a SEO barát multi-kompatibilis böngésző vertikális menüt, amely lehetővé tenné, hogy hozzon létre korlátlan költési szintet.

Web tonna oldalak a témában, de amikor elkezdtem próbálni ezeket a mintákat -, mert vagy elromlott, szétesett, támogatja csak korlátozott számú szintet, vagy rosszul viselkedő Gates + Ballmer junksplorer 6. Végül kaptam vissza a kipróbált és megbízható Dynamic Drive menük , mint a függőleges minta bizonyult egy szép eset, hogy illik a szigorú követelményeknek. Kellett jelentősen módosíthatja őket ellenére, hogy biztosan elfér tézis modell.
A törekvés a tökéletesség folytatódik ...

Töltöttem mintegy 16 órát keres, összeszerelés, tesztelés, rögzítése, polírozás és tuning függőleges menü CSS és. JS kódot és 3/4 időt töltöttek így dolgozni MSIE 6.
Akárhogy is, elégedett voltam a végeredményt. Eredményezte, függőleges navigációs menü minden ugyanazokat az előnyöket , hogy a horizontális menü.

Miután képes felvenni a függőleges menü nagyon fontos, hogy mintegy 70-80%-portálok az interneten. Vízszintes menük korlátozott "space" elszállásolásáról, sok menüpont, de függőleges menüben nincs ilyen korlátozás, és segítene mérhetetlenül. Tehát itt vagyunk.

Sok lépést a siker érdekében már ismertetett 1. részét bemutató , így ez lehetővé teszi majd, hogy egy kicsit rövidebb, de sokkal több funkció gazdag eredményeket.

Tehát itt ez megy:

Building SEO barát, függőleges, többszintű, hierarchikusan egymásba ágyazott menü WordPress és a téma tézis. Step by Step
(... Amit nem is gondoltam ...)

  1. Telepítse exec php plugint , és aktiválja azt. Mi lesz rá szükség, mert a PHP a szövegen belüli widgetet bocsát ki függőleges menü "HTML kódot.
  2. Tegye meg az 1 - 6 az 1 rész bemutatója . Alapvetően meg kell telepíteni és aktiválni használni NAVT plugint + vizuálisan készítsd el a menüt. Győződjön meg róla, hogy menücsoport neve "menu1". Ez a név bedrótozva a custom_functions.php
  3. Kattintson a "hajtómű" ikonja "menu1" csoport szerkesztéséhez tulajdonságait:
    navt_customize_menu
  4. Követi lépései 7,1 -7,3 1. rész bemutató állítani "Options", "Display" és a "CSS" fülek beállításait.
  5. Most kattintsunk a "téma" lapján ez a párbeszédablak. Mi felülírja számos beállítás van (ha követte 1. lépés). Ez rendben van - nem fog veszíteni semmit - de ezek a változások szükségesek, mert már megváltozott valami kód az 1. lépéstől.
    Íme ez a párbeszédablak kell kitölteni:
    1. Belül "XPath téma:" területre írjuk be ezt a kódot (azt parancsolja, hogy lecserélné bármely tag ezen osztályok):
      .jquerycssmenu, .jqueryslidemenu
    2. Állítsa be a "cselekvés" és a "Csere"
    3. Belül az "Add tag navigáció előtt csoport" terület be ezt a kódot:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Belül az "Add tag után navigáció csoport" területet be ezt a kódot:
      <br style='clear: left' /></div>
    5. Kattintson a [Mentés / Bezár] gombra.
  6. Most megy a WordPress admin panel -> Megjelenés -> kütyü.
  7. Húzza "szöveg" felületi (a nagy "Elérhető widgetek" terület) a "Sidebar 1" területet a jobb oldalon. Mi lesz hozzá kódot a szöveges widget, amely segít bennünket, hogy valóra függőleges menüben.
    Megjegyzés: Gondolom van "Tálaló 1" létezését. Szakdolgozat opció lehetővé teszi, hogy kapcsolja ki -, de a kedvéért legyen ez a bemutató tenni, akkor lehet.
  8. Ha húzni, és leesett ez a widget - ez, mint egy virág nyílik (érzek most, hogy romantikus MSIE harc vége).
  9. A "Cím" területen adja meg a "Világ legjobb függőleges menü" ... Nos, nyugodtan használja a kreativitását - hogy a szöveg megy fent a frissen született függőleges menüben.
  10. A nagy területen a szöveg - írja a PHP kód:
    <?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;
    ?>
  11. Nyomja meg a [Mentés] gombra, kattintson a "Close" linkre.
  12. Töltse le a frissített fájlok itt .
    Ez az archívum tartalmazza:


    • Frissített változata a "fényes" horizontális menü kód
    • "Sötét" változata vízszintes menü
    • Függőleges menü kódok
    • Frissített változata custom_functions.php
  13. Most kell, hogy csomagolja ezt az archívumot, és töltsd be a "testre szabott" könyvtárba értekezés témája.
    Megjegyzés: ha ezt megtette minden testreszabást custom_functions.php belül - azt kell egyesíteni őket. Ha nem - nyugodtan, hogy felülírja azt a saját verziómat.
  14. Voila! Most akkor újratölti a weboldalt, és olvasd ugyanazt a "fényes" horizontális menü + neato vertikális menüt a bal oldali oldalsávon.
  15. BONUS feladat: Legyen változtatni "fényes" horizontális menüből a "sötét" színséma.
    1. Belül custom_functions.php fájl:
      helyett ezt a kódot:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      ezzel a kóddal:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      Alapvetően mi megjegyzésbe egy sort, és uncommenting a másikat.
    2. Most megy a WordPress admin-> Tools-> NAVT Listák és kattintson a fenti "fogaskerék" ikonra szerkesztheti a tulajdonságait a "menu1" csoportba.
    3. Kattintson a "téma" fülre.
    4. Belül az "Add tag navigáció előtt csoport" terület be ezt a kódot:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Most - újratölti a lap -, és a fő horizontális navigációs menü "varázsütésre" lett sötét, valami ilyesmi:
      Thesis theme - multilevel nested CSS menu - dark palette

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

      Sötét színpaletta lehetnek alkalmasak bizonyos oldalak, mint a fény színét 1. Tehát most van a választás szabadságának az életed!

    6. Ahhoz, hogy vissza a "fényes" színösszeállítás - éppen a fenti visszavonás "Bonus" lépéseket.
  16. Következtetés:
    Szeretem tézis téma, szeretem WordPress és imádom azt a tényt, hogy van egy hozzá méltó módon navigációs menük, hogy a portálok.

$ 20


Élvezze!

Gleb Esman

{Hozzászólások ebben a bejegyzés zárva}

A Quest a tökéletes menüt ...

Ez az 1. rész A segédlet
2. része ez a bemutató arra tanít, hogyan kell felépíteni függőleges menü + sötét színpaletta a vízszintes 1

Úgy döntöttem, hogy tézis téma , mert az egyik ügyfeleim arról tájékoztattak, kompatibilitási problémák közötti tézis és az én WordPress plugint tagság weboldal MemberWing. Én rögzítettem, majd úgy döntött, hogy egy közelebbi pillantást a 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 legnagyobb figyelmet a részletekre is, felhasználóbarát és legfőképpen - SEO funkciók, amelyeket olyan jól gondoltam.
MemberWing tagság plugint úgy tervezték, az alapoktól kezdve a tagsági helyek, hogy meg kellene húzni annyi levet SEO lehetséges. Szóval fizetett sok figyelmet, hogy számos SEO fejlesztések és tökéletességet a MemberWing. Sokan saját ügyfelek kérnek a különböző témákat, és amelynek használatához témát, mely oly jól optimalizált SEO mélyéről lenne kiválóan illeszkedik a tagság portál vállalkozók.

Ötvözi SEO hatáskörei MemberWing SEO hatáskörének adna a rangsor legjobb lehetőséget az ügyfeleimnek. Szóval tézis és játszott vele egy napig.

Ez egy kiváló téma minden formában. A navigációs része, hogy mégis egy kicsit korlátozott funkcióval. Kezdve Thesis 1.5 + ez a menü csak egy szinten. Én általában a vágy, hogy képes legyen testre navigáció, mint szükséges. Egyes oldalak már csak néhány oldal, sokan mások tonna statikus oldal + zillions cikkek / + sok hozzászólás a kategóriában.
Tehát ideális világban, amelynek esélye, hogy hozzon létre tetszetős hierarchikusan szervezett, felhasználóbarát navigációs menü elengedhetetlen. Tézis jobb kapásból jó látszó, de navigációs vettem észre, hogy minden tézis-alapú weboldalak néz ki, mint ikrek. Navigációs menü testreszabása tézis nem igazán egyszerű, így a legtöbb ember csak hagyja, ahogy van. Nincs mód változtatni kategóriák sorrendje a menüben vagy a helyzet őket az oldalak között. És ismét, a képesség, hogy egymásba ágyazott menüstruktúrák hiányzik. Szóval úgy döntöttem, megnézem, mit lehet tenni ezzel kapcsolatban.
Kipróbálása után mintegy fél tucat menü / navigációval kapcsolatos plugins tudom a választási lista WordPress Navigation Plugin NAVT .
NAVT plugin alapvetően rendezetlen lista generátor, szuper divatos, és egy kicsit nehezen kitalálni nem hagyományos admin felületen. Mi félrevezető róla, hogy valójában nem teremt képzelet keres menük magától. Ez volt a legnehezebb része a munka, bár - ad ön egy képessége, hogy vizuálisan húzza össze, és ezáltal rendezetlen lista - csontváz a menü-to-be. És akkor létre sok menük is. Lehet húzni mindenféle WordPress dolgokat a navigációs menü oldalakat, hozzászólások, cikkek, kategóriák, felhasználók, a blokkból, külső linkek, elválasztók, szeparátorok és keverjük össze és a mérkőzés és a fészket, és intézkedik, és testreszabhatja őket minden fa-struktúrába akar.
NAVT generál neked eredményezte HTML taggel. Második NAVT szépsége, hogy ez segít, hogy helyezze be az új menü segítségével be a téma neves JQuery alapú logika, de anélkül, hogy módosítani kell a kód! NAVT lehetővé teszi, hogy meghatározza: "Lecseréli ezt # elem az új NAVT menü". # Eleme lehet a személyi igazolvány vagy osztálya útját meglévő menüből, vagy div elem, amelynek a tag által az aktuális témát. Így működik ez a csere NAVT az Ön számára nem kényszerítve, hogy bemegy téma kódot, és ez több mint rendetlen már van. Ha ez úgy hangzik, mint az összes halandzsa - ne aggódj - fogok vezetni, lépésről lépésre hamarosan. A kihívás része NAVT mindenki számára az, hogy neked kell, 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 rendesen kap kapcsolható össze.
Tisztelettel ismerete nélkül JQuery + néhány PHP + CSS +, amelynek tisztességes tapasztalat WordPress - ez a dolog nehéz húzni.
Örömmel tudom ezt a dolgot egy kicsit, így úgy döntöttem, hogy harapni a golyó és az Útmutató az emberiség szabadságát kiépítése a legjobb a legjobb navigációs menük WordPress. Csak szükséges forrásokat, hogy megtudja, néhány szép látszó vízszintes CSS menük. Felvettem Dynamic Drive honlap a legjobb választás, demók és források.

Én egy napot szentelt tanulni és játszani tézis NAVT plugin. A végén büszkén létrehozott egyéni, rugalmas, SEO optimalizált, többszintű, egymásba ágyazott struktúrát nagivation az én WordPress + tézis alapú oldal.

A lehetőségek listája többszintű, egymásba ágyazott menü Thesis Theme
(You Got szeretni ezt a cuccot):

  • Professzionális, tiszta megjelenését.
  • A támogatás az összes modern böngésző, köztük MSIE 6,7, Opera, Safari, Firefox 3.x, a Google Chrome egyaránt javascript és nem javascript módok.
  • Kecsesen downgradable nem javascript böngészők. Te menü lesz használható, vizuálisan hasonló, és dolgozik még a JavaScript lehetőségeit nem támogató böngészőkhöz (bár csak felső szintű navigációs látható lesz és nem fog történni leporellói természetesen azok által javascript).
  • SEO barát funkciók - rendezetlen lista menü kód generálódik HTML. Google és más keresőrobotok képesek lesznek index a navigációs struktúrát és megtalálni a belső linkek oldalakon.
  • Támogatás a korlátlan fészkelési szintek és sublevels.
  • Támogatása vagy oldalak bármilyen sorrendben, hozzászólás (via felhasználó által definiált URI), kategóriák, felhasználók egyedi kód blokkok és külső hivatkozások a menüben.
  • Támogassa a szöveg-, valamint kép-alapú menü elemei. (Én még kipróbálni ezeket mégis).
  • Menü szerkezete és tartalma vizuálisan állítható NAVT admin felület.
  • Kompakt: JQuery alapú leporellói a beágyazott szinten.
  • Gyors: JQuery a menü töltődik be a Google szerverein (Szeretném tézis is, hogy ugyanezt ahelyett húzza ellenében). Ez felgyorsítja a dolgokat egy kicsit.
  • Skálázhatóság - Ez a fajta menü szerkeszthető és konfigurálható bármikor elérheti NAVT plugint beállításokat anélkül, hogy szükség kódolási bárhol.

Én ezt a kiváló menü Dynamic Drive portál, mint a bázis. Kellett szabni javascript kódot egy kicsit, valamint magában foglalja a PHP darab custom_functions.php hogy ez a munka a tézis. Száma is a már meglévő oldalakat, kategóriákat és Hozzászólások oldalamon keresztül érkezett a menüszerkezet össze. A webhely sajátosságait más lesz - de a fogalmak ugyanazok lesznek.
Hadd járjon el, jó?

Lépésről lépésre beállítani NAVT alapú beágyazott, testre szabható, többszintű, SEO barát
és a tiszta hűvös látszó és a tézis téma

  1. Ugrás a WordPress admin panel. Plugins-> Add new, keressen rá a "navt". A plugin fog megjelenni. Kattintson az [Install], [Telepítés], "Plugin aktiválása".
  2. Eszközök-> NAVT listák, Inside "Navigáció csoport" területen található "csoport nevét", és írja be: "menu1" területén, nyomja meg a [Create] gombra. "Menu1" téglalap területet kapott létre.
    Ez a "menu1" terület lesz a fő menü játszótér építése. Nem lesz húzással itt a menü elemei.
  3. Az "eszközök" területen található "egyéb" ListBox és kattintson a "Home" választás. "Otthon" thingie jelenik meg benne a "nem kiosztott" területe. Furcsa, ugye? Nem kell aggódni, amíg működik - és ez lesz számunkra.
  4. Húzza át a "Home" thingie a "javak" területről "menu1" négyszög területe. Ez lesz az "Otthon" menüpontot.
    • Ismételje meg a 3-4 néhány oldalt a "Pages" területen, valamint a kategóriák: "kategóriák" terület. Húzza egyéb elemeket akarsz lenni a menü belülről "menu1" téglalap. Lehet, kattints oldalak, kategóriák, felhasználók és néhány egyedi elemeket, mint a "lista elválasztó" és a "code block". Kód blokk jó módja annak, hogy hozzá egyéni töredék belül a menüt.
    • Lehet, hogy húzza a menüpontok belülről "menu1" terület átrendezéséhez saját érdekében.
    • Lehet, hogy állítsa hierarchikus pozícióját egyes menüpontok a "<" és ">" nyilak.
    • Kattintva szöveges nevét minden menüpont - megnyitja Párját ritkító extra testreszabási dialógus ehhez az elemhez. Én többnyire az alapértelmezett, de technikailag is megbolondul, és elkezdhet kép alapú menüpontok között, és adjunk hozzá darabokat a HTML kódot is. Óvatosan jár mégis.
    • A linkless unclikable almenük szolgál majd "szülők" más "sub-gyermekek" Én "Code blokk" típusú. Például, ha testre ilyen kód blokk I. pont alá vont "menüpont alias" = "MemberWing" és a "kód megadása blokk:" = "<a href='#'> MemberWing </ a>". Miután href = "#" teszi, de nem lehet rákattintani eljáró érvényes "szülő" menüpontot.
  5. Íme az én NAVT "menu1" épít szerkezet nézett ki majdnem kész:
    navt_building_icon
  6. Befejezés első épület, majd kattintson a "hajtómű" ikonra szabni a menü szerkezete:
    navt_customize_menu
  7. A párbeszédablak fog megnyílni, 4 fül jelenik meg: Beállítások, Kijelző, CSS, téma.
    1. Menj az "Options" fülre, és győződjön meg róla, minden ellenőrzött és a "csoport nevét" mondja: "menu1"
    2. Menj a "Display" fülre, és győződjön meg róla, mindent a "Show navigáció csoport ..." terület van jelölve [x]. Hagyjuk a többit meg nem teljesít.
    3. Menj a "CSS" fülre, és válassza a rádió gombot (x) "Ne alkalmazza a CSS osztályokat".
    4. Menj a "téma" fülre, és töltse ki, mint hogy:
      navt_configuration_theme_tab_icon
      Helyezze be az "Add tag előtt ..." területen ezt a kódot:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Helyezze be az "Add tag után ..." területen ezt a kódot:
      <br style='clear: left' /></div>
    5. Nyomja meg a [Mentés / Bezár] gombra
  8. Ezen a ponton menüt épület belülről NAVT bővítmény lehetőségek teljes.
    Most itt az ideje, hogy csinál egy kis dallamot fel értekezés témája, hogy készen áll. Mert, hogy mi kell hozzá egy pár egyéni fájlok - CSS és JavaScript tartozik, hogy a menü és a frissítést tézis "custom_functions.php
  9. Töltse le a teljes készlet ide fájlokat .
  10. Unzip archívum. Ha frissítette a custom_functions.php a testreszabott - meg kell egyesíteni őket a cuccomat. Elmegyek, hogy rajtad múlik.
    Ha még nem nyúlt hozzá - nyugodtan hogy felülírja-e az enyémmel. Kérjük, vegye figyelembe: Én inkább helyzetbe menü alatt a honlap fejlécet (alapértelmezett fölött van) - így én is ezt a beállítást beállítása is.
  11. Töltsd archívum beleértve az összes alkönyvtárat és fájlt az Ön értekezés témája "testre szabott" könyvtár, í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 alatt a saját helyeket, hogy ne alakuljon ki káosz belül custom.css
  12. Ezen a ponton lehet újratölteni a weboldalt, és olvasd új szép új többszintes, beágyazott, SEO optimalizált menüt.
  13. Lehet, hogy mindig visszamehet NAVT beállítások és menü testreszabása nagyobb választékot és áthelyezésére semmit. Ez tükröződni fog az élő helyszínen automatikusan.

Az út előtt ...

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

Thesis theme - multilevel nested CSS menu - dark palette

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

Szerintem ez nagyon szép. Sokkal több navigációs minta elérhető Dynamic Drive - mindegyik lehetséges a testre és a többi tézis WordPress téma néhány tennivaló:

Dynamic Drive Horizontal Menus

Dynamic Drive Vízszintes menük

Remélem, megtalálod a bemutató előnyös és hasznos. Mint mondtam, lehetséges, hogy testre bármelyik menük tézis -, amely adott idő és a vágy, hogy megtörténjen.

Tudtam csinálni ezt a munkát az Ön számára a szerződés alapján. Csak válassza a menü tetszik, forduljon hozzám és én dolgozni a kódot és utasításokat az Ön honlapján.

$ 20

És persze ha akár az épület szuper prémium wordpress SEO optimalizált tagság portál - a legjobb megoldás erre:
Szakdolgozat téma + MemberWing plugint tagság + saját hosztolt WordPress természetesen.

comments } { 15 hozzászólás }

Prémium Post 3

Július 5, 2009

Ez egy szabad teaser prémium utáni 3. Ez a cikk tartalma együttesen: első része látható az arany tagok az egész cikket csak akkor látható, hogy Platinum tagjai. Próbálj meg bejelentkezni, mint az arany tagja 1. (felhasználónév / jelszó = arany / arany) - akkor több tartalom. ... És akkor kijelentkezés és az újbóli bejelentkezés a platina [...]

Olvassa el a teljes cikket →

Prémium Post 2

Július 5, 2009

Ez egy szabad teaser prémium utáni 2. A többi már látható az arany és a tagok csak. Tipp - arany tag login / password = arany / arany ......

{{{Arany | platina}}}
A többi cikk elérhető ez a prémium csak tagoknak.

Olvassa el a teljes cikket →

Premium 1 hozzászólás

Július 5, 2009

Ez a cikk a demo MemberWing-X. Az X-MemberWing ezt a cikket történő megvásárlásáról egy egységes ár 2,95 $, vagy előfizető "Gold tagság" programot. Szóval, ez ingyenes teaser prémium hozzászólás 1. A többi ezt a cikket csak akkor látható, a tagok, akik vásároltak, hogy a 2,95 $, vagy feliratkozott a "Gold [...]

Olvassa el a teljes cikket →

Szakdolgozat témája és tagság helyén plugint MemberWing a legjobb SEO tagsági helyek

Július 5, 2009

MemberWing egy WordPress plugin-tagság weboldal kifejezetten a SEO optimalizált tagság portálok. Az, hogy ez rugalmas váltólapkás ugratások, támogatja a Google első kattintás ingyenes Standard, a digitális tartalmak védelmét és letöltési felruházott PromoFusion - ez garantálja a tagság weboldal gyors indexelést és a magasabb rangok. Míg más szoftverek szeret tagság weboldal hozzáférését, hogy teljesen [...]

Olvassa el a teljes cikket →