De zoektocht naar de perfecte verticale menu ...
Deel 1 van deze tutorial stap voor stap beschreven proces van het bouwen van horizontale multilevel geneste menu voor Wordpress thema Thesis . Deel 2 zal verder om deze functionaliteit te verbeteren. Hier zullen we toevoegen "donkere" versie van de horizontale navigatie menu en ik zal je leren hoe om te schakelen tussen "licht" en "dark" versie. Deel 2 is de superset van deel 1. Het omvat alle uit deel 1 + nog meer coole dingen.
Belangrijkste idee dat ik wilde presenteren is het toevoegen van verticale menu Thesis thema (en Wordpress in het algemeen). Ik was op zoek naar echt flexibel, SEO vriendelijke en multi-browser compatible verticaal menu dat in staat zou stellen om onbeperkt nesting levels te creëren.
WEB heeft tonnen van pagina's over dit onderwerp, maar toen ik begon al deze monsters te proberen - ze ofwel kapot, uit elkaar gevallen, alleen ondersteund door een beperkt aantal niveaus of misdragen in Gates + Ballmer junksplorer 6. Eindelijk heb ik weer terug naar vertrouwde Dynamic Drive menu's als hun verticale monsters bleek een mooie zaak die mijn strenge eisen past worden. Ik moest een belangrijke wijziging van hen echter te zorgen dat het past Thesis model.
De zoektocht naar perfectie gaat verder ...
Ik heb ongeveer 16 uur zoeken, assembleren, testen, bevestigen, polijsten en tuning verticale menu's en CSS. Js code en 3 / 4 van de tijd werd besteed waardoor het om te werken in MSIE 6.
Anyways, ik was blij met het eindresultaat. Resulteerde verticale navigatie menu heeft allemaal dezelfde voordelen die horizontale menu heeft.
Met mogelijkheid om verticale menu toe te voegen is erg belangrijk om ongeveer 70-80% van portals op het web. Horizontale menu's hebben beperkte "ruimte" te veel menu-keuzes, maar verticale menu heeft deze beperking niet en zou enorm helpen tegemoet te komen. Dus hier gaan we.
Veel van de stappen om het te laten gebeuren zijn reeds beschreven in deel 1 van zelfstudie dus dit zal zorgen voor een wat korter, maar met veel meer feature rijke resultaten.
Dus hier gaat:
Building SEO vriendelijk, verticaal, multilevel, hiërarchisch geneste menu voor Wordpress en Thesis thema . Stap voor stap
(... Wat je nooit voor mogelijk had gehouden ...)
- Installeer exec php plugin en activeren. We zullen het nodig hebben, want ik zal PHP gebruiken binnen de tekst widget om verticale menu 'HTML-code uitzenden.
- Voer de stappen 1 - 6 van deel 1 van de handleiding . In principe moet je installeren en activeren gebruik NAVT plugin + visueel bouwen van uw menu. Zorg ervoor dat uw menu groepsnaam is 'menu1'. Deze naam is hardcoded in custom_functions.php
- Klik op de 'gear' pictogram van uw 'menu1' groep om de eigenschappen te bewerken:
- Volgt Stappen 7,1 -7,3 van deel een handleiding op te zetten "Options", "Display" en "CSS" tabbladen-instellingen.
- Klik nu op de "Thema" tabblad van dit dialoogvenster. We zullen overschrijven aantal instellingen is er (als je al een stap na). Dit is ok - je zult niets verliezen - maar deze veranderingen zijn nodig, want ik heb veranderd wat code uit stap 1.
Hier is hoe deze dialoog dient te worden ingevuld:- Binnenkant van "Theme xpath:" gebied binnen deze code (het commando te vervangen alle tags met deze lessen):
.jquerycssmenu, .jqueryslidemenu - Stel "Action" op "Vervangen door"
- Binnenkant van "Tags toevoegen vóór de navigatie groep" gebied te betreden deze code:
<div class='jquerycssmenu' style='margin-top:5px;'> - Binnenkant van "Tags toevoegen na navigatie groep" gebied te betreden deze code:
<br style='clear: left' /></div> - Klik op [Save / close] knop.
- Binnenkant van "Theme xpath:" gebied binnen deze code (het commando te vervangen alle tags met deze lessen):
- Ga nu naar Wordpress admin panel -> Appearance -> Widgets.
- Drag "Tekst" widget (van de grote "Beschikbare widgets" gebied) in "Sidebar een" gebied aan de rechterkant. We zullen het toevoegen van code in de tekst widget die ons zal helpen om verticale menu materialiseren.
LET OP: Ik neem aan u "Sidebar 1" in het bestaan. Thesis opties stelt u in staat om het uit te schakelen - maar omwille van deze tutorial laten maken het zijn. - Zodra u gesleept deze widget - het zal openen als een bloem (ik voel me nu dat romantische MSIE strijd is over).
- In "titel" te betreden "beste verticale World's menu" ... Nou ja, voel je vrij om je creativiteit te gebruiken - die tekst zal gaan boven uw pas geboren verticale menu.
- In grote ruimte voor tekst - voert u deze PHP code:
<?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;
?> - Druk op [Save] knop, klik op "Sluiten" link.
- Download bijgewerkte set bestanden hier .
Dit archief omvat:- Bijgewerkte versie van "helder" horizontale menu code
- "Dark" versie van horizontale menu
- Verticale menu codes
- Bijgewerkte versie van custom_functions.php
- Nu moet je dit archief uit te pakken en deze uploaden naar de 'gewoonte' directory van uw Thesis thema .
Opmerking: als u hebt gedaan eventuele aanpassingen binnen custom_functions.php - je zou nodig hebben om ze samen te voegen. Zo niet - voel je vrij om het te overschrijven met mijn versie. - Voila! Nu kun je herlaadt uw website en zie dezelfde "helder" horizontale menu + neato verticale menu in de linker zijbalk.
- BONUS taak: Laat change "helder" horizontale menu op de "donkere" kleurenschema.
- Binnen custom_functions.php bestand:
ter vervanging van deze code:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
met deze code:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
In principe zijn we commentaar op een lijn en uncommenting de andere. - Ga nu naar Wordpress admin-> Gereedschappen-> NAVT lijsten en klik op bovengenoemde "gear" icoon om de eigenschappen van uw 'menu1' groep te bewerken.
- Klik op "Theme" tabblad.
- Binnenkant van "Tags toevoegen vóór de navigatie groep" gebied te betreden deze code:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Nu - reload de pagina - en je belangrijkste horizontale navigatie-menu 'automatisch' werd donker, zoiets:
Thesis thema - multilevel geneste CSS menu - donker palet
Donkere kleurenpalet kunnen meer geschikt voor bepaalde sites dan de lichte kleur een. Dus nu heb je een vrijheid van keuze in je leven!
- Om terug te gaan naar "heldere" kleuren - net ongedaan te maken boven de "Bonus" stappen.
- Binnen custom_functions.php bestand:
- Conclusie:
Ik hou van Thesis thema , ik hou van Wordpress en ik hou van het feit dat we een manier om fatsoenlijk navigatie menu's toe te voegen aan onze portals hebben.
20 dollar
Genieten!
Gleb Esman
comments } { 5 comments }
