Поиски идеального вертикального меню ...
Часть 1 данного учебника описано шаг за шагом процесс создания горизонтальных многоуровневых вложенных меню для темы диссертации Wordpress . Часть 2 будет продолжаться по улучшению данного функциональность. Здесь мы добавим «темной» версии горизонтальное меню навигации и я научу вас, как переключаться между "яркими" и "темной" версией. Часть 2 надмножество Часть 1. Она включает в себя все из Части 1 + добавляет всяких прикольных вещей.
Главная идея, которую я хотел представить добавляет вертикальное меню, чтобы тема диссертации (и Wordpress в целом). Я искал действительно гибкий, SEO дружественных и мульти-браузерный вертикальное меню, которое позволит создавать неограниченное уровней вложенности.
WEB имеет тонны страниц на эту тему, но когда я начал пробовать все эти образцы - они либо сломался, развалилась, поддерживается только ограниченное число уровней или плохо себя вели в ворота + junksplorer Баллмера 6. В конце концов я вернулся к проверенным Динамическое меню диска , как их вертикальные образцы оказались хорошие дела, что соответствует моим жестким требованиям. Мне пришлось существенно изменить их, хотя, чтобы убедиться, подходит диссертации модели.
Стремление к совершенству продолжается ...
Я провел около 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 - Установить "Действие", чтобы "Заменить"
- Внутри "Добавить теги перед навигации группы" площадь ввести этот код:
<div class='jquerycssmenu' style='margin-top:5px;'> - Внутри "Добавить теги после навигации группы" площадь ввести этот код:
<br style='clear: left' /></div> - Нажмите на [сохранить / закрыть] кнопку.
- Внутри "Тема XPath:" площадь ввести этот код (это команды, чтобы заменить какой-либо тег с этим классам):
- Теперь идем в админ-панели Wordpress -> Вид -> Виджеты.
- Перетащите "Текст" виджет (с большой "Доступные виджеты" область) в "боковой панели 1" области справа. Мы будем добавлять код в текстовый виджет, который поможет нам материализовать вертикального меню.
ПРИМЕЧАНИЕ: Я полагаю, у вас есть "Боковая панель 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;
?> - Нажмите кнопку [Сохранить] кнопку, нажмите кнопку "Закрыть" ссылку.
- Скачать обновленный набор файлов здесь .
Этот архив включает в себя:- Обновленная версия "яркий" горизонтального меню код
- "Темный" вариант горизонтального меню
- Вертикальное меню кодов
- Обновленная версия custom_functions.php
- Теперь вам необходимо распаковать этот архив и загрузите его в "обычай" директории вашего тема диссертации .
Обратите внимание: если вы сделали все настройки внутри custom_functions.php - Вы должны были бы объединить их. Если нет - не стесняйтесь переписать его с моей версией. - Вуаля! Теперь вы можете перезагрузить ваш сайт и увидеть те же "ярких" горизонтальное меню + 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
В основном мы закомментировать одну строку и раскомментировать другую. - Теперь перейдите в Wordpress админ-> Сервис-> Списки NAVT и нажмите на вышеуказанных "передач" значок, чтобы редактировать свойства вашего "menu1" группы.
- Нажмите "Тема" на вкладке.
- Внутри "Добавить теги перед навигации группы" площадь ввести этот код:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Теперь - перезагрузить страницу - и ваш главный горизонтальное меню навигации "волшебным образом" стало темно, что-то вроде этого:
Тема диссертации - многоуровневые вложенные меню CSS - темная палитра
Темная цветовая палитра может быть более подходящим для определенных сайтов, чем свет одного цвета. Так что теперь у вас есть свобода выбора в вашей жизни!
- Чтобы вернуться к "ярким" цветовая схема - просто отменить выше "Бонус" шаги.
- Внутри custom_functions.php файл:
- Вывод:
Я люблю тема диссертации , я люблю Wordpress, и я люблю то, что мы способы добавить достойную меню навигации на наших порталах.
$ 20
Наслаждайтесь!
Глеб Есман
comments } { 5 комментариев }
