Het Quest voor de perfecte menu ...
Dit is deel 1 van de tutorial
Deel 2 van deze tutorial leert hoe te bouwen + verticale menu donker kleurenpalet voor de horizontale lijn
Ik besloot om Thesis thema , omdat een van mijn cliënten op de hoogte me over problemen met de compatibiliteit tussen de Thesis en mijn wordpress site het lidmaatschap plugin MemberWing. Ik vastgesteld en vervolgens besloten om Thesis neem een kijkje op en daadwerkelijk moeite om naar te kijken video's op de voorpagina van de belangrijkste Thesis site - Diythemes.com .
Wat mij het meest onder de indruk 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 af opgebouwd voor het lidmaatschap sites die zouden moeten zo veel mogelijk SEO sap te trekken. Dus heb ik veel aandacht besteed aan tal van verbeteringen en SEO volmaaktheden in MemberWing. Veel van mijn eigen klanten vragen over verschillende thema's te gebruiken en met een thema, dat was zo goed SEO geoptimaliseerd diep van binnen uit zou een uitstekende pasvorm voor het lidmaatschap worden portal ondernemers.
De combinatie van SEO bevoegdheden van MemberWing met SEO bevoegdheden van Thesis thema zou kansen te geven het beste van de ranglijst aan mijn klanten. Ik heb Promotie en speelde met haar een dag.
Het is een uitstekend thema op alle mogelijke manieren. De navigatie deel daarvan is echter een beetje beperkt in functie. Vanaf Thesis 1.5 + is een niveau menu alleen. Mijn gebruikelijke verlangen is om te kunnen aanpassen navigatie zoveel als nodig. Sommige sites hebben slechts een paar pagina's, vele anderen hebben ton van statische pagina's + ontelbare artikelen / posten + tal van categorieën.
Dus in de ideale wereld met een kans om mooi ogende hiërarchisch georganiseerd gebruikersvriendelijke navigatie menu te maken is een must. Thesis recht uit de vleermuis heeft een goede navigatie op zoek maar ik merkte dat al Thesis-gebaseerde websites zijn op zoek naar een tweeling. Thesis navigatiemenu aanpassen is niet echt eenvoudig, zodat de meeste mensen gewoon laten zoals het is. Er is geen manier om de volgorde van de categorieën in het menu te wijzigen of te positioneren in tussen pagina's. En weer is de mogelijkheid om geneste menu-structuren op te zetten ontbreekt. Dus besloot ik om te zien wat zou kunnen worden gedaan.
Na het uitproberen van ongeveer een half dozijn menu / navigatie-gerelateerde plugins ik mijn keuze op Wordpress Plugin Lijst Navigatie navt .
Navt plugin is in wezen niet-geordende lijst generator met super luxe en een beetje hard-to-figuur ontraditionele admin interface. Wat misleidend is wat het is dat het in feite niet op zoek naar mooie menu's te maken van zichzelf. Het is het moeilijkste deel van de job al - geeft u een visueel vermogen om samen te trekken, en niet-geordende lijst te genereren - skelet van je menu-to-be. En je kan ook te maken vele menu's. U mag trekken alle soorten van Wordpress dingen in het navigatie menu: pagina's, berichten, artikelen, categorieën, gebruikers, code blokken, externe links, verdelers, scheidingstekens en mix en match en nestelen en te regelen en aan te passen ze in een boom-achtige structuur die je willen.
Navt voor u genereert resulteerde HTML ongeordende lijst. Tweede schoonheid van navt is dat het je helpt bij het invoegen van uw nieuwe menu in uw thema via beroemde JQuery gebaseerd logica, maar zonder de noodzaak te voorkomen dat code te veranderen! Navt kunt u opgeven: "vervang deze # element met mijn nieuwe navt menu". # Element kan een id of klasse van het pad van de bestaande menu of div-element-tag die wordt gegenereerd door uw huidige thema. Dus navt doet dit ter vervanging van je zonder dat je in te gaan op thema-code en het rommeliger dan het al is te maken. Als dat allemaal klinkt als wartaal - geen zorgen - ik zal u stap voor stap binnenkort. Het moeilijkste deel van navt voor iedereen is dat je op de proppen komen met de werkelijke beelden + + CSS javascript-code voor uw menu zelf. En het is aan jou om erachter te komen waar en hoe u deze bestanden te integreren en maak dit spul goed op elkaar te krijgen is aangesloten.
Met vriendelijke groet, zonder te weten JQuery + enkele + CSS PHP + met fatsoenlijke ervaring met Wordpress - dit ding is moeilijk te trekken.
Gelukkig weet ik dit spul een beetje dus heb ik besloten om de kogel te bijten en te begeleiden mensheid voor de vrijheid in de opbouw van de beste van de beste navigatie-menu's voor Wordpress. Ik heb net nodig om uit te vinden bronnen voor sommige leuk uitziende horizontale CSS menu's. Ik pakte Dynamic Drive-website voor hun beste selecties, demonstraties en bronnen.
Ik wijdde een dag om Thesis en spelen met navt plugin te bestuderen. Aan het einde ik trots op maat gemaakt, flexibel, geoptimaliseerd SEO, multilevel, electronische navigatie geneste structuur voor mijn Wordpress + Thesis gebaseerde site.
Lijst van kenmerken van multilevel, geneste navigatiemenu voor Wordpress Thema Thesis
(Je moet dingen hou van deze):
- Professioneel, schone look en feel.
- Ondersteuning voor alle moderne browsers, waaronder 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome in zowel Javascript en non-javascript modi.
- Sierlijk downgradable voor niet-javascript browsers. Je menu wordt pas bruikbaar, visueel overeenstemmen en werken, zelfs voor browsers zonder javascript (zij het slechts top-level menu zal zichtbaar zijn en geen vangballen zal gebeuren natuurlijk als zij worden verricht door javascript).
- SEO vriendelijke kenmerken - ongeordende lijst menu code gegenereerd in HTML. Google en andere zoekmachines in staat zal zijn om de index van uw navigatie-structuur en links vinden naar innerlijke pagina's.
- Steun voor onbeperkte nestelen 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-en beeld-gebaseerde menu-elementen. (Ik heb nog proberen deze wel).
- Menu structuur en de inhoud is visueel instelbaar via navt admin gebied.
- Compact: JQuery gebaseerd vangballen voor geneste niveaus.
- Snel: Verbod voor het menu is geladen vanaf de servers van Google (Ik zou graag zelf Thesis om hetzelfde te doen in plaats van lokaal te trekken). Dit zou versnellen dingen een beetje.
- Schaalbaarheid - Dit type menu is aanpasbaar en instelbaar op elk gewenst moment via navt plugin-instellingen zonder dat ergens van codering.
Ik gebruikte deze uitstekende menu van Dynamic Drive portal als basis. Ik moest javascript code een beetje aanpassen als brok van PHP op te nemen in custom_functions.php te laten werken met de Thesis. Ook is het aantal van de reeds bestaande pagina's, categorieën en berichten van mijn site werden gebruikt in de menustructuur te monteren. Uw site Specificaties anders zal zijn - maar begrippen hetzelfde zal zijn.
Dus laten we doorgaan, zullen we?
Stap voor stap instructies om de configuratie navt op basis van geneste, aanpasbaar, multilevel, SEO vriendelijke
en gewoon coole navigatiemenu voor Wordpress en Thesis Thema
- Ga naar Wordpress admin panel. Plugins-> Nieuwe toevoegen, zoekt u naar "navt". Het plugin zal worden getoond. Klik op [Install], [Nu installeren], "Activate Plugin".
- Extra-> navt Lijsten, Inside "Navigatie-groep" gebied te vinden "Groep naam" en typ: "menu1" in het veld, drukt u op [Create] knop. "Menu1" rechthoek gebied heb gemaakt.
Deze "menu1"-gebied zal de belangrijkste speeltuin voor de menu-constructie. U zult slepen en hier uw menu-elementen. - In "activa" gebied te vinden "andere" listbox en klik op "Home" keuze. "Home" thingie zal binnen verschijnt "Niet toegewezen" gebied. Raar, hè? Geen zorgen, zolang het werkt - en het zal voor ons.
- Sleep deze "Home" thingie van "activa" in de omgeving "menu1" rechthoek gebied. Het zal "Home" in het menu-item geworden.
- Herhaal stappen 3-4 voor enkele pagina's uit de "Pages"-gebied, alsook voor de categorieën van "categorieën" gebied. Sleep andere items die u wilt op uw menu worden binnen "menu1 'rechthoek. Je kunt klikken op de pagina's, categorieën, gebruikers en een aantal aangepaste elementen, zoals "lijst divider" en "code blok". Code blok is coole manier om aangepaste fragmenten in het menu toe te voegen.
- Je kunt menu-items te slepen binnen "menu1" ruimte om hun volgorde te herschikken.
- U kunt de hiërarchische positie van elk menu item aan te passen met "<" en ">" pijlen.
- Klik op de tekst naam van elk menu-item - opent verbijsterend extra customization dialoogvenster voor dit object. Ik heb meestal gebruikt standaard, maar technisch kan je gek en beginnen met het maken image-gebaseerde menu keuzes en voeg stukjes HTML-code in. Ga met de nodige voorzichtigheid wel.
- Voor linkless unclikable submenu's die zal dienen als "ouders" voor andere "sub-kinderen" Ik gebruikte "code blok" type. Bijvoorbeeld bij het aanpassen van een dergelijke code blok object ging ik voor de "Menu-item alias" = "MemberWing" en voor "Enter code blok:" = "<a href='#'> MemberWing </ a>". Gelet href = "#" zal de keuze maken niet klikbaar, maar als een geldige "ouder" menu.
- Hier is hoe mijn navt 'menu1' structuur op te bouwen leek bijna afgerond:
- Finish eerste gebouw en klik dan op "gear"-pictogram om uw menu-structuur aan te passen:
- Het zal open dialoog met 4 tabs: Options, Display, CSS, Thema.
- Ga naar "Options" tab te maken en zorgen dat alles niet is aangevinkt en "naam van de groep", zegt: "menu1"
- Ga naar "Weergave" tab, en zorg ervoor dat alles op "Toon navigatie groep op ..."-omgeving is gecontroleerd [x]. Laat de rest op wanbetalingen.
- Ga naar "CSS" tabblad en selecteer het keuzerondje (x) "Niet van toepassing CSS klassen".
- Ga naar "Thema" tab en vul het in zoals dat:
Plaats in "Tags toevoegen voor ..." ruimte deze code:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Plaats in "Tags toevoegen na ..." ruimte deze code:
<br style='clear: left' /></div> - Druk op [SAVE / close]-knop
- Op dit punt menu gebouw van binnen navt plugin opties is voltooid.
Nu is het tijd om af te stemmen doe een beetje voor Thesis thema om het klaar te krijgen. Daarvoor moeten we een paar aangepaste bestanden toe te voegen - CSS en JavaScript, dat behoort tot het menu en update proefschrift 'custom_functions.php - Download de complete set van de bestanden hier .
- Unzip archief. Als u uw custom_functions.php bijgewerkt met uw aanpassingen - moet je ze samenvoegen 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 wil het liever op het standpunt van het menu onder de website header (standaard is boven) - dus mijn aanpassing die werd opgenomen en deze voorkeur. - Upload archief inclusief alle submappen en bestanden onder uw Thesis thema 'custom' directory, 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 aan menu-specifieke CSS te houden onder hun eigen locaties om te voorkomen dat er gedonder in aangepast custom.css - Op dit punt kunt u herlaadt uw website en zie de nieuwe mooie nieuwe multilevel, genesteld, SEO geoptimaliseerd menu.
- U kunt steeds terugkeren naar navt instellingen en uw menu aanpassen met meer keuze of de positie van niets. Het zal worden nagedacht over de live site automatisch.
De weg vooruit ...
Deze tutorial opgenomen creatief voorbeeld van een soort menu. Ik heb met een ander - gewoon om te zien hoe donker gekleurde menu eruit zou zien:
Thesis thema - multilevel geneste CSS menu - donker palet
Ik denk dat het vrij aardig. Er veel meer scheepvaart monsters verkrijgbaar bij Dynamic Drive - allemaal mogelijk aan te passen voor de Promotie en andere Wordpress thema's met enige moeite:
Dynamic Drive Horizontale menu's
Ik hoop dat u vindt deze tutorial nuttig en handig. Zoals ik al zei, is het mogelijk om op maat een van deze menu's voor de these - dat is bepaald moment en het verlangen om het te laten gebeuren.
Ik kon doen dit werk voor u op basis van een contract. Kies gewoon het menu dat u wilt, contact met mij op en ik zal instructies werken op de code en voor uw website.
20 dollar
En natuurlijk als je tot het bouwen van super SEO geoptimaliseerd premie WordPress-lidmaatschap portal - de beste oplossing voor dit:
Thesis Thema + MemberWing lidmaatschap plugin + zelf gehost Wordpress natuurlijk.
