Търсенето за перфектната вертикално меню ...
Част 1 на този урок е описано стъпка по стъпка процеса на изграждане на хоризонтални нива вложени меню за Wordpress тема Thesis . Част 2 ще продължи да се подобри тази функционалност. Тук ние ще добавим "тъмна" версия на хоризонталното навигационно меню и аз ще ви научи как да превключвате между "ярък" и "тъмна" версия. Част 2 е надмножество от част 1. То включва всички от част 1 + добавя по-готини неща.
Основната идея, че аз исках да представи добавя вертикално меню за тема на дипломна работа (и Wordpress като цяло ). Търсех наистина гъвкав, SEO приятелски и мулти-браузър съвместими вертикално меню, което би позволило да се създаде неограничен гнездене нива.
WEB има тонове страници по този въпрос, но когато започнах да се опитат всички тези проби - те или събори, се разпадна, поддържа само ограничен брой нива или misbehaved в Гейтс + junksplorer Балмър 6. Накрая се върнах на изпитани и надеждни Динамични менюта за задвижване, като тяхната вертикална проби се оказа хубав случай, че отговаря на моите строги изисквания. Аз трябваше значително да ги променяте, сякаш за да се уверете, че тя се вписва Thesis модел.
Стремежът към съвършенство продължава ...
Прекарах около 16 часа търсене, монтаж, тестване, фиксиране, полиране и настройка CSS вертикално меню, и JS код и 3 / 4 от времето прекарано с което да работят в MSIE 6.
Както и да е, аз бях щастлив от крайния резултат. Доведе вертикални навигационното меню има същите ползи , че хоризонтално меню .
Като възможност за добавяне на вертикално меню е много важно до около 70-80% от портали в интернет. Хоризонталните менюта са ограничени "пространство", за да побере много възможности за избор на меню, но вертикално меню не това ограничение и ще помогне неимоверно. Така че тук отиваме.
Много от стъпки, за да да се случи вече са описани в част 1 на урок , така че това ще го направи за по-късата, но с много по-богат на функции резултати .
Така че тук тя отива:
Сграда SEO приятелски, вертикални, многостепенно, йерархично вложени меню за Wordpress и тема за дипломна работа . Стъпка по стъпка
(... Това, което никога, че е възможно ...)
- Инсталирайте EXEC PHP плъгин и да го активирате . Ние ще трябва, защото аз ще използвате PHP вътре в текста джаджа, за да излъчва на HTML код вертикално меню ".
- Изпълнете стъпки 1 - 6 от част 1 на урок . По принцип имате нужда да инсталирате и активирате използването NAVT плъгин + визуално изграждане на менюто си. Уверете се, че вашето име меню група е "menu1". Това име е кодиран в custom_functions.php
- Кликнете върху иконата "уреди" за "menu1" група, за да редактирате свойства:
- Следва Стъпки 7,1 -7,3 на Част 1 урок за да настроите "Опции", "Покажи" и "CSS" разделите настройки.
- Сега кликнете върху "Тема" в раздела на този диалогов. Ние ще презапише редица настройки там (ако следващата стъпка 1). Това е проблем - няма да загубите нищо, но тези промени са необходими, защото съм променил част от кода на стъпка 1.
Ето как този диалог трябва да се попълни:- Вътре на "Тема XPath:" въведете този код (команди, за да замести всеки етикет с тези класове):
.jquerycssmenu, .jqueryslidemenu - Set "действие" да "Замяна с"
- Вътре в "Добавяне на етикети, преди навигация група" площ въведете този код:
<div class='jquerycssmenu' style='margin-top:5px;'> - Вътре в "Добавяне на етикети след навигация група" площ въведете този код:
<br style='clear: left' /></div> - Кликнете върху [Save / затвори] бутона.
- Вътре на "Тема XPath:" въведете този код (команди, за да замести всеки етикет с тези класове):
- Сега отидете на панел на Wordpress Admin -> Външен вид -> Widgets.
- Плъзнете джаджа "Текст" (от големите район "Налични джаджи") в областта на правото "Sidebar 1". Ние ще бъде добавянето на код в Текст джаджа, която ще ни помогне да материализират вертикално меню.
ЗАБЕЛЕЖКА: Предполагам, че имате "Sidebar 1" в съществуването. Дипломна работа опции ви позволява да го изключите, но в името на този урок, нека да бъде. - След като влачени и пускани тази джаджа - това ще се отваря като цвете (аз се чувствам романтична сега, че MSIE борба е над).
- В район "Заглавие" влезе "в света най-добрите вертикално меню" ... Е, чувствайте се свободни да използвате вашата креативност - този текст ще отидат над новородените си вертикално меню.
- В голяма площ за текст - въведете този код на PHP:
<?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;
?> - Натиснете бутона Save], щракнете върху връзката "Close".
- Изтегляне на актуализиран набор от файлове тук .
Този архив включва:- Актуализирана версия на "светло" хоризонтално меню код
- "Dark" версия на хоризонтално меню
- Вертикални кодове меню
- Актуализирана версия на custom_functions.php
- Сега трябва да разархивирате този архив и да го качите в "Custom" директория на вашия Дипломна работа тема .
Забележка: ако сте направили никакви персонализации вътре custom_functions.php - бихте трябва да ги обедините. Ако не се колебайте да го презапишете с моята версия. - Voila! Сега можете да презаредите вашия сайт и да видим същото "светло" хоризонтално меню + neato вертикалното меню в лявата странична лента.
- БОНУС задача: Да се промени "ярък" хоризонтално меню на "тъмната" цветова схема.
- Вътре custom_functions.php файл:
Поставете този код:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
с този код:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
По принцип ние сме коментирате една линия и uncommenting другия. - Сега отидете на Wordpress Admin-> Tools-> Списъци NAVT и кликнете върху гореупоменатата "предавка" иконата, за да редактирате свойствата на "menu1" група.
- Кликнете върху "Тема" в раздела.
- Вътре в "Добавяне на етикети, преди навигация група" площ въведете този код:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Сега - презареждане на страницата ви - и вашата основна хоризонтално меню за навигация "магически" стана тъмно, нещо такова:
Дипломна работа на тема - нива вложени меню CSS - тъмна палитра
Dark палитра от цветове могат да бъдат по-подходящи за определени обекти от светлината, един цвят. Така че сега имате свободата на избор в живота си!
- Да се върнем на "светло" цветова схема - просто връщане над "Бонус" стъпки.
- Вътре custom_functions.php файл:
- Заключение:
Обичам Тема на дипломна работа, аз обичам Wordpress и аз обичам факта, че ние имаме начини да добавите достойни навигационни менюта за нашите портали .
$ 20
Наслаждавайте се!
Глеб Есман
comments } { 5 коментара }
