De zoektocht naar het perfecte menu ...
Dit is deel 1 van de handleiding
Deel 2 van deze tutorial leert hoe je verticale menu + donkere kleurenpalet te bouwen voor de horizontale
Ik besloot om Thesis thema , omdat een van mijn klanten vertelde me over compatibiliteitsproblemen tussen de Thesis en mijn wordpress plugin lidmaatschap site MemberWing. Ik heb vast en vervolgens besloten om een kijkje op Thesis te nemen en daadwerkelijk moeite genomen om naar te kijken video's op de voorpagina van de belangrijkste Thesis site - Diythemes.com .
Wat indruk op mij het meest is aandacht voor detail, gebruiksvriendelijkheid en de meeste van alle - SEO functies die zijn zo goed gedacht.
MemberWing lidmaatschap plugin is ontworpen vanaf de grond opgebouwd voor lidmaatschap sites die nodig zou hebben om zo veel SEO sap te trekken als mogelijk. Dus ik veel aandacht besteed aan de veelheid van SEO verbeteringen en volmaaktheden in MemberWing. Veel van mijn eigen klanten vragen over verschillende thema's om te gebruiken en hebben thema dat was zo goed SEO geoptimaliseerd diep van binnen zou een uitstekende pasvorm voor het lidmaatschap portal ondernemers.
De combinatie van SEO bevoegdheden van MemberWing met SEO bevoegdheden van de Thesis thema zou de beste van de ranglijst kansen om mijn klanten. Dus ik heb Thesis en speelde met het voor een dag.
Het is een uitstekend thema in alle opzichten. De navigatie deel ervan is echter een beetje beperkt in functie. Vanaf Thesis 1.5 + het is een niveau menu alleen. Mijn gebruikelijke wens is om te kunnen navigeren aanpassen zoveel als nodig is. Sommige sites hebben slechts enkele pagina's, vele anderen hebben tonnen statische pagina's + ontelbare artikelen / posten + tal van categorieën.
Dus in ideale wereld hebben een kans om mooi ogende hiërarchisch georganiseerd gebruiksvriendelijke navigatie menu te maken is een must. Thesis recht uit de vleermuis heeft een goede zoek naar navigatie, maar ik merkte dat alle Thesis-gebaseerde websites op zoek bent wel een tweeling. Aanpassen Thesis navigatiemenu is niet echt makkelijk dus de meeste mensen alleen maar laten zoals het is. Er is geen manier om de volgorde van de categorieën te wijzigen in het menu of plaats ze in tussen pagina's. En nogmaals, de mogelijkheid om geneste menu structuren te creëren ontbreekt. Dus besloot ik om te zien wat kan worden gedaan over.
Na het uitproberen van ongeveer een half dozijn menu / navigatie gerelateerde plugins ik mijn keuze op Wordpress Navigation List Plugin NAVT .
NAVT plugin is in wezen ongeordende lijst generator met super fancy en een beetje hard-to-figuur ontraditionele admin interface. Wat misleidend over het is dat het niet echt aan te maken fancy kijken menu's zelf. Het doet het moeilijkste deel van het werk al - geeft u een mogelijkheid om visueel samen te trekken, en het genereren van ongeordende lijst - skelet van je menu-to-be. En je kan ook het creëren van veel menu's. U kunt trekken allerlei soorten Wordpress spullen in de navigatie menu: pagina's, berichten, artikelen, categorieën, gebruikers, code blokken, externe links, verdelers, separatoren en mix en match en nest en regelen en aan te passen in elke boom-achtige structuur je willen.
NAVT genereert voor u geresulteerd HTML ongeordende lijst. Tweede schoonheid van NAVT is dat het u helpt om uw nieuwe menu invoegen in uw thema via bekende JQuery op basis logica, maar zonder behoefte aan een code te veranderen! NAVT kunt u aangeven: "dit # element te vervangen door mijn nieuwe NAVT menu". # Element kan een id of klasse van de weg van de bestaande menu of div-element-tag die wordt gegenereerd door uw huidige thema. Dus NAVT doet deze vervanging voor u zonder dat u in te gaan op thema-code en het meer rommelig dan het al is te maken. Als dat allemaal klinkt als wartaal - maak je geen zorgen - ik zal u begeleiden al snel stap voor stap. De uitdagende deel van NAVT voor iedereen is dat je zult moeten komen met de werkelijke CSS + beelden + javascript code voor uw menu zelf. En het is aan jou om erachter te komen waar en hoe u deze bestanden te integreren en maken dit soort dingen goed bij elkaar aangesloten.
Met vriendelijke groet, zonder te weten JQuery + een aantal PHP + CSS + met behoorlijke ervaring met Wordpress - dit ding is moeilijk te trekken naar.
Graag Ik weet dat dit spul een beetje, dus ik besloot om de kogel en begeleiden de mensheid hapje vrijheid in het bouwen van de beste van de beste navigatie-menu's voor Wordpress. Ik hoefde alleen maar om erachter te komen bronnen voor een aantal mooie horizontale CSS menu's. Ik pakte Dynamic Drive website voor hun beste selecties, demo's en bronnen.
Ik wijdde een dag aan Thesis studie en met NAVT plugin te spelen. Aan het einde ik met trots gemaakt op maat, flexibel, SEO geoptimaliseerd, multilevel, geneste electronische navigatie structuur voor mijn Wordpress + Thesis gebaseerde site.
Lijst van functies van multilevel, geneste Wordpress navigatiemenu voor Thesis Theme
(Je moet dit spul liefde):
- Professionele, schone look en feel.
- Ondersteuning voor alle moderne browsers, zoals MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome in zowel javascript als niet-javascript-modi.
- Sierlijk downgradable voor niet-javascript browsers. Je menu zal bruikbaar zijn, visueel vergelijkbaar en werken zelfs voor browsers zonder javascript (zij het alleen het hoogste niveau navigatie zichtbaar zal zijn en geen enkele vangballen zullen natuurlijk zoals ze zijn gemaakt door javascript gebeuren).
- SEO vriendelijke functies - niet-geordende lijst menu-code wordt gegenereerd in HTML. Google en andere zoekmachines in staat zal zijn het indexeren van uw navigatie-structuur en de links vinden naar innerlijke pagina's.
- Ondersteuning voor een onbeperkt aantal nesten niveaus en subniveaus.
- Ondersteuning voor een bestelling of pagina's, berichten (via de gebruiker gedefinieerde URI's), categorieën, gebruikers, aangepaste code blokken en externe links in het menu.
- Ondersteuning van tekst-als image-based menu-elementen. (Ik heb nog om deze wel te proberen).
- Menu structuur en de inhoud is visueel instelbaar via NAVT admin gebied.
- Compact: JQuery op basis van vangballen voor geneste niveaus.
- Snel: JQuery voor het menu is geladen vanaf de servers van Google (Ik zou Thesis zich graag in plaats hetzelfde doen van het trekken van het lokaal). Dit zou versnellen dingen een beetje.
- Schaalbaarheid - Dit type menu is bewerkbaar en te configureren op elk gewenst moment via NAVT plugin instellingen zonder enige noodzaak van codering overal.
Ik gebruikte deze uitstekende menu uit dynamisch rijden portal als basis. Ik moest javascript code aan te passen een beetje als zijn brok van PHP in custom_functions.php om het te laten werken met de Thesis. Ook het aantal pre-bestaande pagina's, categorieën en berichten van mijn website werden gebruikt om de menustructuur te monteren. Uw site details zal anders zijn - maar concepten zullen hetzelfde zijn.
Dus laten we gaan, zullen we?
Stap voor stap instructies om de configuratie NAVT op basis van geneste, aanpasbare, multilevel, SEO vriendelijke
en gewoon koele kijken navigatiemenu voor Wordpress en Thesis Theme
- Ga naar de Wordpress admin panel. Plugins-> Voeg een nieuwe, zoek naar "navt". De plugin wordt getoond. Klik op [Install], [Nu installeren], "Activeren Plugin".
- Extra-> NAVT lijsten, Inside "Navigatie Groep" gebied te vinden "groepsnaam" en voer: "menu1" in het veld, drukt u op [Create] knop. "Menu1" rechthoek gebied heeft gemaakt.
Deze "menu1" gebied zal de belangrijkste speeltuin voor de menu constructie worden. U zult te slepen en neer hier uw menu-elementen. - In "activa" gebied te vinden "andere" listbox en klik op "Home" keuze. "Home" thingie binnen zult verschijnen van "niet toegewezen" gebied. Raar, he? Geen zorgen, zolang het werkt - en het zal voor ons.
- Sleep deze "Home" thingie van de "activa" gebied in "menu1" rechthoek gebied. Het zal "Home" in het menu te worden.
- Herhaal stap 3-4 voor sommige pagina's uit de "Pages"-gebied, evenals voor categorieën in "categorieën" gebied. Sleep alle andere items die u wilt op uw menu binnenkant "menu1" rechthoek. U kunt klikken op pagina's, categorieën, gebruikers en een aantal aangepaste elementen, zoals "lijst divider" en "code blok". Code blok is coole manier om op maat snippets in het menu toe te voegen.
- U kunt slepen menu-items in "menu1" gebied om hun volgorde te wijzigen.
- U kunt aanpassen hiërarchische positie van elk menu-item met "<" en ">" pijlen.
- Door te klikken op de tekst naam van elk menu-item - opent verbijsterend extra customization dialog voor dit item. Ik heb meestal gebruikt standaard, maar technisch gezien kan je gek en beginnen met het maken image-based menu keuzes en voeg stukjes HTML-code in. Hoewel Ga voorzichtig te werk.
- Voor linkless unclikable submenu's die zal dienen als "ouders" voor de andere "sub-kinderen" Ik gebruikte "Code block" type. Bijvoorbeeld bij het aanpassen van een dergelijke code blok post Ik ging voor de "Menu-item alias" = "MemberWing" en voor "Enter code blok:" = "<a href='#'> MemberWing </ a>". Na href = "#" zal het niet aanklikbaar maar fungerend als een geldige "ouder" menu-keuze.
- Hier is hoe mijn NAVT 'menu1' op te bouwen structuur leek bijna afgerond:
- Finish eerste gebouw en klik dan op "gear" icoon om uw menu-structuur aan te passen:
- Het zal open dialoog met vier tabbladen: Options, Display, CSS, Thema.
- Ga naar "Options" tab en zorg ervoor dat alles is verwijderd en "groepsnaam" zegt: "menu1"
- Ga naar "Display" tab en zorgen dat alles te maken op "Toon navigatie groep ..." gebied is aangevinkt [x]. Laat de rest op standaardwaarden.
- Ga naar "CSS" tab en kies keuzerondje (x) "Niet van toepassing CSS-klassen".
- Ga naar "Thema" tab en vul het in, zoals dat:
Invoegen in "het toevoegen van tags voor ..."-gebied deze code:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Invoegen in "Tags toevoegen na ..."-gebied deze code:
<br style='clear: left' /></div> - Druk op [Opslaan / close]-knop
- Op dit moment menu gebouw van binnenuit NAVT plugin opties is voltooid.
Nu is het tijd om een deuntje te doen voor Thesis thema om het klaar. Voor dat we nodig hebben om een paar aangepaste bestanden toe te voegen - CSS en javascript dat behoort tot het menu en update Thesis 'custom_functions.php - Download hier de complete set van bestanden .
- Unzip archief. Als u bijgewerkt custom_functions.php met uw aanpassingen - moet je ze fuseren met mijn spullen. Ik laat het aan jou.
Als u nog niet aangeraakt - voel je vrij om het te overschrijven met de mijne. Let op: Ik heb liever menu positie onder de website header (standaard is boven) - dus mijn aanpassing die werd opgenomen deze voorkeur ook. - Upload archief, inclusief alle submappen en bestanden onder uw scriptie thema directory 'op maat', zoals deze:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Ik heb niet aangeraakt aangepast custom.css - Ik geef de voorkeur om het menu-specifieke CSS blijven onder hun eigen locaties om te voorkomen dat er rommel in aangepast custom.css - Op dit punt kunt u herlaadt uw website en zie nieuwe mooie nieuwe multilevel, geneste, SEO geoptimaliseerd menu.
- U kunt altijd terug naar de instellingen NAVT en uw menu aanpassen met meer keuze of verplaatsen wat dan ook. Het zal worden gereflecteerd op de live site automatisch.
De weg ...
Deze tutorial opgenomen creatief voorbeeld van een soort menu. Ik speelde met een ander - gewoon om te zien hoe donker gekleurde menu zou er zo uitzien:
Thesis thema - multilevel geneste CSS menu - donker palet
Ik denk dat het vrij aardig. Er zijn veel meer navigatie samples beschikbaar op Dynamic Drive - allemaal zijn mogelijk aan te passen voor de Thesis en andere Wordpress thema's met enige moeite:
Dynamic Drive Horizontale menu's
Ik hoop dat u vindt deze tutorial nuttig en bruikbaar. Zoals ik al zei, is het mogelijk om een van deze menu's aan te passen voor Thesis - dat is tijd en zin om het te laten gebeuren gegeven.
Ik kon doen dit werk voor u op een contract basis. Kies gewoon het menu dat u wilt, contact met mij op en ik zal op de code en instructies werken voor uw website.
20 dollar
En natuurlijk als je aan het bouwen super SEO geoptimaliseerd premium wordpress lidmaatschap portal - de beste oplossing voor dit:
Thema Thesis + MemberWing lidmaatschap plugin + zelf hosted Wordpress natuurlijk.
