De zoektocht naar de perfecte menu ...
Dit is deel 1 van de handleiding
Deel 2 van deze tutorial leert verticale menu bouwen + donker kleurenpalet voor de horizontale een
Ik besloot om mijn Thesis thema, omdat een van mijn cliënten mij op de hoogte compatibiliteitsproblemen tussen Thesis en mijn lidmaatschap site WordPress plugin MemberWing. Ik vastgesteld en vervolgens besloten om een kijkje op Thesis nemen en daadwerkelijk moeite om video's bekijken op de voorpagina van de belangrijkste Thesis site - Diythemes.com.
Wat me het meest onder de indruk is aandacht voor detail, gebruiksvriendelijkheid en vooral - SEO functies die zijn zo goed van het denken.
MemberWing lidmaatschap plugin is ontworpen vanaf de grond voor het lidmaatschap sites die zou moeten trekken zoveel SEO sap mogelijk. Dus ik besteed veel aandacht aan de veelheid van SEO verbeteringen en 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 zijn een uitstekend geschikt voor het lidmaatschap portaal ondernemers.
Combineren van SEO bevoegdheden van MemberWing met SEO bevoegdheden van Thesis thema zou de beste van de ranking kansen te geven aan mijn klanten. Dus ik heb Thesis en speelde met het voor een dag.
Het is een uitstekend thema op alle mogelijke manieren. De navigatie deel ervan is al een beetje beperkt in functie. Vanaf Thesis 1.5 + het is een niveau menu alleen. Mijn wens is gebruikelijk om te kunnen aanpassen navigatie zoveel als nodig is. Sommige sites hebben slechts enkele pagina's, vele anderen hebben ton van statische pagina's + ontelbare artikelen / posten + veel categorieën.
Dus in ideale wereld met een kans om aardig uitziende hiërarchisch georganiseerd gebruiksvriendelijke navigatie menu te maken is een must. Thesis rechts uit de vleermuis heeft een goede navigatie op zoek, maar ik merkte dat alle Thesis-gebaseerde websites zijn op zoek als tweeling. Aanpassen Thesis navigatie menu is niet echt gemakkelijk dus de meeste mensen gewoon laten zoals het is. Er is geen manier om de volgorde van de categorieën verandering in het menu of hun positie in tussen pagina's. En nogmaals, is de mogelijkheid om geneste menu structuren creëren ontbreekt. Dus besloot ik om te zien wat kan worden gedaan.
Na het uitproberen van ongeveer een half dozijn menu / navigatie verband plugins ik mijn keuze op Wordpress Navigation Lijst Plugin navt.
Navt plugin is in wezen geordende lijst generator met super mooie en een beetje hard-to-figuur ontraditionele admin interface. Wat misleidend over het is dat het eigenlijk niet fancy looking menu's te creëren door zelf. Het is het moeilijkste deel van beroep al - geeft u een mogelijkheid om visueel samen te trekken, en het genereren van ongeordende lijst - skelet van uw menu-to-be. En je kan leiden tot vele menu's ook. 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 nest en regelen en pas ze in een boom-achtige structuur u willen.
Navt voor u genereert HTML-geordende lijst geleid. Tweede schoonheid van navt is dat het u helpt om uw nieuwe menu invoegen in uw thema via de beroemde JQuery op basis logica, maar zonder noodzaak om elke code te veranderen! Navt kunt u aangeven: "# vervanging van dit 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 gaat deze vervanging voor u zonder dat u in te gaan op thema-code en maken het rommelig dan het al is. Als dat klinkt allemaal als wartaal - maak je geen zorgen - ik zal begeleiden u stap voor stap binnenkort. Het uitdagende deel van navt voor iedereen is dat je zult moeten komen met de werkelijke beelden + CSS + JavaScript-code voor uw menu zelf. En het is aan jou om uit te vinden waar en hoe u deze bestanden te integreren en deze dingen goed voor elkaar te krijgen is aangesloten.
Vriendelijke groet, zonder te weten wat JQuery + PHP + CSS + met fatsoenlijk ervaring met Wordpress - dit ding is moeilijk te trekken.
Graag Ik weet dat dit spul een beetje dus heb ik besloten om de kogel en gids mensheid hapje vrijheid in de opbouw van de beste van de beste navigatie-menu's voor Wordpress. Ik nodig om uit te vinden bronnen voor sommige leuk uitziende horizontale CSS menu's. Ik pakte Dynamic Drive-website voor hun beste selecties, demo's en bronnen.
Ik wijdde een dag om te studeren Thesis en spelen met navt plugin. Aan het einde ik trots op maat gemaakt, flexibel, SEO geoptimaliseerd, multilevel, geneste nagivation structuur voor mijn Wordpress + Thesis gebaseerd site.
Lijst van functies van multilevel, geneste Wordpress navigatie menu voor Thesis Theme
(U Got to love this stuff):
- Professioneel, schone look en feel.
- Ondersteuning voor alle moderne browsers, waaronder 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome in zowel uitgeschakeld en non-javascript modi.
- Sierlijk downgradable voor non-javascript browsers. Je menu wordt bruikbaar, visueel vergelijkbaar en werken zelfs voor browsers zonder JavaScript (zij het alleen top-level menu zichtbaar zullen zijn en geen vangballen zal gebeuren natuurlijk als ze worden gemaakt door JavaScript).
- SEO vriendelijke kenmerken - geordende lijst menu-code wordt gegenereerd in HTML. Google en andere zoekmachines kunnen indexeren uw navigatie-structuur en links vinden naar innerlijke pagina's.
- Ondersteuning voor onbeperkte nesten niveaus en subniveaus.
- Steun voor elke bestelling of pagina's, berichten (via de gebruiker gedefinieerde URIs), categorieën, gebruikers, aangepaste code blokken en externe links in het menu.
- Ondersteuning van tekst-als image-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: JQuery voor het menu wordt geladen vanaf de servers van Google (I'd love Thesis zelf om hetzelfde te doen in plaats van te trekken lokaal). Dit zou versnellen dingen een beetje.
- Schaalbaarheid - Dit type menu is bewerkbare en configureerbaar op elk gewenst moment via navt plugin-instellingen zonder dat van codering overal.
Ik gebruikte deze uitstekende menu van Dynamic Drive portaal als basis. Ik moest javascript code een beetje aanpassen als brok van PHP zijn in custom_functions.php te laten werken met Thesis. Ook het aantal pre-bestaande pagina's, categorieën en posten van mijn site werden gebruikt voor het assembleren menustructuur. Uw site details verschillend zijn - maar concepten hetzelfde zal zijn.
Dus laten gaan, zullen we?
Stap voor stap instructies voor het instellen navt-gebaseerde geneste, aanpasbaar, multilevel, SEO vriendelijk
en gewoon koele kijken navigatiemenu voor Wordpress en Thesis Theme
- Ga naar de Wordpress admin panel. Plugins-> Voeg nieuwe, zoek naar "navt". De plugin zal worden getoond. Klik op [Install], [Install now], "Activeer Plugin".
- Hulpmiddelen-> navt Lijsten, Inside "Navigatie-groep" gebied vinden "Groep naam" en voer: "menu1" in het veld, drukt u op [Create] knop. "Menu1" rechthoek ruimte heb gecreëerd.
Deze "menu1"-gebied zal de belangrijkste speeltuin voor menu bouw. Je zult slepen en neerzetten hier uw menu-elementen. - In "activa" gebied vinden "andere" keuzelijst en klik op "Home" keuze. "Home" thingie zal binnenkant van verschijnen "niet toegewezen" gebied. Raar, hè? Geen zorgen, zolang het werkt - en het zal voor ons.
- Sleep deze "Home" van thingie "activa" ruimte in "menu1" rechthoek gebied. Het zal "Home" item in het menu.
- Herhaal de stappen 3-4 voor sommige pagina's van "Pages" gebied, alsook voor de categorieën van de "categorieën" gebied. Sleep alle andere items die u wilt op uw menu binnen "menu1" rechthoek. U kunt klikken op pagina's, categorieën, gebruikers en een aantal aangepaste elementen zoals "lijst divider" en "code block". Code blok is cool manier om aangepaste fragmenten toe te voegen in het menu.
- U mag slepen menu-items binnen "menu1" ruimte te herschikken hun bestelling.
- U mag aanpassen hiërarchische positie van elk menu-item met "<" en ">" pijlen.
- Door te klikken op de tekst de naam van elk menu-item - opent verbijsterend extra aanpassingen dialoogvenster voor dit object. Ik meestal gebruikt standaard, maar technisch kunt u gek en beginnen met het maken van beeld-gebaseerde menu-opties en voeg stukjes HTML-code in. Ga maar met de nodige voorzichtigheid.
- Voor linkless unclikable submenu's die zal dienen als "ouders" voor andere "sub-kinderen" Ik gebruikte "Code block"-type. Bijvoorbeeld bij het aanpassen van een dergelijke code blok object dat ik heb aangegeven voor "Menu item alias" = "MemberWing" en voor "Enter code blok:" = "<a href='#'> MemberWing </ a>". Na href = "#" zal het niet klikbaar, maar als een geldige "ouder" menu keuze.
- Hier is hoe mijn navt 'menu1' bouwen structuur leek bijna voltooid:
- Finish eerste gebouw en klik vervolgens op "gear" icoon voor het aanpassen van uw menu-structuur:
- Het zal open dialoog met 4 tabbladen: Opties, Display, CSS, Thema.
- Ga naar "Options" tab en zorg ervoor dat alles is verwijderd en 'groepsnaam' zegt: "menu1"
- Ga naar "Display" tab en zorg ervoor dat alles op "Toon navigatie-groep op ..."-gebied wordt gecontroleerd [x]. Laat de rest op standaardinstellingen.
- Ga naar "CSS" tab en selecteer keuzerondje (x) "Niet van toepassing CSS klassen.
- Ga naar "Theme" tab en vul het in zoals dat:
Insert into "tags toevoegen voor ..." ruimte deze code:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Insert into "tags toevoegen na ..." ruimte deze code:
<br style='clear: left' /></div> - Druk op [Save / sluiten] knop
- Op dit punt menu gebouw van binnen navt plugin opties is voltooid.
Nu is het tijd om te doen een deuntje voor Thesis thema om het te krijgen klaar. Voor dat we een paar aangepaste bestanden toevoegen - CSS en javascript, dat behoort tot het menu en update custom_functions.php Thesis ' - Download hier de volledige set van bestanden.
- Unzip archief. Als u uw bijgewerkt custom_functions.php met uw aanpassingen - u moet 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 liever naar het menu standpunt in het kader van de website header (standaard is hierboven) - dus mijn aanpassing inbegrepen deze voorkeur ook. - Upload archief inclusief alle submappen en bestanden onder uw Thesis 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 liever naar het menu te houden-specifieke CSS onder hun eigen locaties om te voorkomen dat er rommel binnen aangepast custom.css - Op dit punt kunt u herlaadt uw website en zie de nieuwe mooie nieuwe multilevel, geneste, SEO geoptimaliseerd menu.
- U kunt altijd terug naar navt instellingen en aanpassen van uw menu met meer keuze of herpositioneren niets. Het zal worden nagedacht over de live site automatisch.
The road ahead ...
Deze tutorial inbegrepen creatief voorbeeld van een type menu. Speelde ik met een andere - gewoon om te zien hoe donker gekleurde menu ziet er als volgt uit:
Thesis thema - multilevel genest CSS Menu - donker palet
Ik denk dat het vrij aardig. Er zijn veel meer navigatie-monsters 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 voor Thesis aanpassen - dat is bepaald moment en het verlangen om het te laten gebeuren.
Ik kon doen dit werk voor u op een contract basis. Kies gewoon het menu dat u wilt, contact met mij en ik zal werken aan de code en instructies voor uw website.
20 dollar
En natuurlijk als je tot het opbouwen van SEO geoptimaliseerd super premium wordpress lidmaatschap portaal - de beste oplossing voor dit:
Thesis Theme + MemberWing lidmaatschap plugin + zelf gehost Wordpress natuurlijk.
