De zoektocht naar de perfecte verticale menu ...
Deel 1 van deze tutorial wordt beschreven stap voor stap proces van het bouwen horizontale multilevel geneste menu voor WordPress Thesis thema . Deel 2 zal op deze functie te verbeteren. Hier voegen we "donkere" versie van 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 aan Thesis thema (en WordPress in het algemeen). Ik was op zoek naar echt flexibel, SEO vriendelijke en multi-browser compatible verticale menu die het mogelijk maakt om onbeperkt geneste niveaus te creëren.
WEB heeft tonnen van pagina's op het onderwerp, maar toen ik begon om al deze monsters te proberen - ze ofwel kapot, uit elkaar gevallen, alleen ondersteund beperkt aantal niveaus of misdragen in Gates + Ballmer junksplorer 6. Eindelijk kreeg ik terug naar beproefde en betrouwbare Dynamic Drive menu's als de verticale monsters bleek een mooie zaak die mijn strenge eisen past zijn. 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, de vaststelling, polijsten en verticale menu's CSS en. Js code en 3/4 van de tijd werd besteed waardoor het werken in MSIE 6 stemmen.
Anyways, ik was blij met het eindresultaat. Resulteerde verticale navigatie menu heeft allemaal dezelfde voordelen dat horizontale menu heeft.
Met mogelijkheid om verticale menu toe te voegen is erg belangrijk voor 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 dat te realiseren zijn reeds beschreven in deel 1 van zelfstudie dus dit zal het maken voor een wat korter, maar met veel meer feature rijke resultaten.
Dus hier gaat:
Gebouw SEO vriendelijke, verticaal, multilevel, hiërarchisch genest 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 binnen de tekst widget om de verticale menu 'HTML-code uitzenden.
- Voer stappen 1 - 6 van deel 1 van de handleiding . In principe moet je installeren en activeren NAVT plugin te gebruiken + visueel bouwen van uw menu. Zorg ervoor dat uw menu groepsnaam is 'menu1'. Deze naam wordt de broncode hebben custom_functions.php
- Klik op de 'versnelling' pictogram van uw 'menu1' groep om de eigenschappen te bewerken:
- Volgt Stappen 7,1 -7,3 van deel 1 handleiding in te stellen "Opties", "Display" en "CSS" tabbladen-instellingen.
- Klik nu op de "Thema" tabblad van dit dialoogvenster. We zullen overschrijven aantal instellingen is er (als je al na stap 1). Dit is ok - u zult niet iets te verliezen - maar deze veranderingen zijn nodig, want ik heb veranderd wat code van stap 1.
Hier is hoe deze dialoog dient te worden ingevuld:- Binnenkant van "Thema XPath:" zone, deze code (het commando te vervangen een tag met deze klassen):
.jquerycssmenu, .jqueryslidemenu - Stel "Action" op "Vervangen door"
- Binnenkant van "Tags toevoegen vóór de navigatie groep" zone, deze code:
<div class='jquerycssmenu' style='margin-top:5px;'> - Binnenkant van voer "Tags toevoegen na navigatie groep" gebied deze code:
<br style='clear: left' /></div> - Klik op [opslaan / sluiten]-knop.
- Binnenkant van "Thema XPath:" zone, deze code (het commando te vervangen een tag met deze klassen):
- Ga nu naar WordPress admin panel -> Appearance -> Widgets.
- Sleep "Tekst" widget (van de grote "Beschikbare widgets" gebied) in "Sidebar 1" aan de rechterzijde. We zullen het toevoegen van code in de tekst widget die ons zal helpen om verticale menu materialiseren.
LET OP: Ik neem aan dat u heeft "Sidebar 1" in het bestaan. Thesis opties stelt u in staat om het uit te zetten - maar omwille van deze tutorial laten maken het zijn. - Als je eenmaal gesleept deze widget - het zal opent als een bloem (ik voel nu dat romantische MSIE strijd voorbij is).
- In "titel" Ruimte enter "beste verticale World's menu" ... Nou, voel je vrij om je creativiteit te gebruiken - de tekst zal gaan boven uw pasgeboren verticale menu.
- In de grote ruimte voor tekst - voer dit 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 [Opslaan] knop, klik op "Sluiten" link.
- Download bijgewerkte set van 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 'custom' directory van uw proefschrift thema.
Opmerking: als u hebt gedaan eventuele aanpassingen in custom_functions.php - je zou nodig hebt om ze samen te voegen. Zo niet - voel je vrij om het te overschrijven met mijn versie. - Voila! Nu kun je opnieuw je website en zie dezelfde "helder" horizontale menu + neato verticale menu in de linker zijbalk.
- BONUS taak: Laten we veranderen "helder" horizontale menu op de "donkere" kleurenschema.
- Binnen custom_functions.php bestand:
Vervang 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 waar wij het op een lijn en uncommenting de andere. - Ga nu naar WordPress admin-> Gereedschappen-> NAVT Lijsten en klik op bovengenoemde "gear" pictogram om de eigenschappen van uw 'menu1' groep te bewerken.
- Klik op "Theme" tabblad.
- Binnenkant van "Tags toevoegen vóór de navigatie groep" zone, 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 kleuren palet wellicht meer geschikt voor bepaalde sites dan de lichte kleur is. Dus nu heb je een vrijheid van keuze in je leven!
- Om terug te gaan naar "helder" kleurenschema - 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 houd van het feit dat we een manier om fatsoenlijk navigatiemenu's toe te voegen aan onze portals hebben.
20 dollar
Veel plezier!
Gleb Esman
{Reacties op dit item zijn gesloten}
