Поиски идеального вертикального меню ...

Часть 1 данного учебника описано шаг за шагом процесс создания горизонтальных многоуровневых вложенных меню для темы диссертации Wordpress . Часть 2 будет продолжаться по улучшению данного функциональность. Здесь мы добавим «темной» версии горизонтальное меню навигации и я научу вас, как переключаться между "яркими" и "темной" версией. Часть 2 надмножество Часть 1. Она включает в себя все из Части 1 + добавляет всяких прикольных вещей.

Главная идея, которую я хотел представить добавляет вертикальное меню, чтобы тема диссертации (и Wordpress в целом). Я искал действительно гибкий, SEO дружественных и мульти-браузерный вертикальное меню, которое позволит создавать неограниченное уровней вложенности.

WEB имеет тонны страниц на эту тему, но когда я начал пробовать все эти образцы - они либо сломался, развалилась, поддерживается только ограниченное число уровней или плохо себя вели в ворота + junksplorer Баллмера 6. В конце концов я вернулся к проверенным Динамическое меню диска , как их вертикальные образцы оказались хорошие дела, что соответствует моим жестким требованиям. Мне пришлось существенно изменить их, хотя, чтобы убедиться, подходит диссертации модели.
Стремление к совершенству продолжается ...

Я провел около 16 часов поисков, монтаж, тестирование, фиксация, полировка и настройка CSS вертикальное меню и. JS код и 3 / 4 времени было потрачено делает его для работы в MSIE 6.
В любом случае, я был доволен конечным результатом. Приведенные вертикальное меню навигации имеет все те же преимущества , что горизонтальное меню.

Имея возможность добавлять вертикальное меню очень важно, чтобы около 70-80% от порталов в Интернете. Горизонтальное меню имеют ограниченное "пространство" для размещения много вариантов меню, но и вертикальное меню не имеют такого ограничения и будет сильно помочь. Так вот мы идем.

Многие шаги, чтобы это произошло уже описаны в части 1 учебника так что это будет сделать это за несколько короче, но с гораздо более многофункциональные результаты.

Таким образом здесь идет:

Строительство SEO дружественных, вертикальная, многоуровневая, иерархически вложенных меню для Wordpress и тема диссертации . Шаг за шагом
(... То, что вы никогда не думали, возможно ...)

1. Установить Exec PHP плагин и активировать его. Нам нужно это, потому что я буду использовать PHP в текстовый виджет излучать HTML код вертикального меню.
2. Выполните шаги 1 - 6 из части 1 учебник . В основном вам нужно установить и активировать плагин использовать NAVT + визуального построения вашего меню. Убедитесь, что ваше меню название группы "menu1. Это имя жестко прописаны в custom_functions.php
3. Нажмите кнопку 'передача' значок 'menu1 "группы отредактировать его свойства:
   
4. Следует Шаги 7,1 -7,3 части 1 учебник, чтобы установить "Параметры", "Экран" и "CSS" вкладки настроек.
5. Теперь нажмите на "Тема" этого диалогового окна. Мы будем переписывать количество настроек там (если у вас был следующий шаг 1). Это нормально - вы ничего не потеряете, - но эти изменения необходимы, потому что я изменил код, начиная с шага 1.
   Вот как это диалоговое окно должно быть заполнено в:
   1. Внутри "Тема XPath:" площадь ввести этот код (это команды, чтобы заменить какой-либо тег с этим классам):
      .jquerycssmenu, .jqueryslidemenu
   2. Установить "Действие", чтобы "Заменить"
   3. Внутри "Добавить теги перед навигации группы" площадь ввести этот код:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Внутри "Добавить теги после навигации группы" площадь ввести этот код:
      <br style='clear: left' /></div>
   5. Нажмите на [сохранить / закрыть] кнопку.
6. Теперь идем в админ-панели Wordpress -> Вид -> Виджеты.
7. Перетащите "Текст" виджет (с большой "Доступные виджеты" область) в "боковой панели 1" области справа. Мы будем добавлять код в текстовый виджет, который поможет нам материализовать вертикального меню.
   ПРИМЕЧАНИЕ: Я полагаю, у вас есть "Боковая панель 1" в существовании. Диссертации опции позволяет Вам, чтобы выключить его, - но ради этого урока позволяют сделать это будет.
8. После того как вы перетащить этот виджет - это открывается как цветок (я чувствую теперь, когда романтическая MSIE борьба окончена).
9. В "Название", задайте "лучших мировых вертикальное меню" ... Ну, не стесняйтесь использовать свой творческий потенциал - этот текст будет выше вашего новорожденного вертикальное меню.
10. В большой площади для текста - ввести этот код 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;
?>
11. Нажмите кнопку [Сохранить] кнопку, нажмите кнопку "Закрыть" ссылку.
12. Скачать обновленный набор файлов здесь .
    Этот архив включает в себя:

    
    

    • Обновленная версия "яркий" горизонтального меню код
    • "Темный" вариант горизонтального меню
    • Вертикальное меню кодов
    • Обновленная версия custom_functions.php
13. Теперь вам необходимо распаковать этот архив и загрузите его в "обычай" директории вашего тема диссертации .
    Обратите внимание: если вы сделали все настройки внутри custom_functions.php - Вы должны были бы объединить их. Если нет - не стесняйтесь переписать его с моей версией.
14. Вуаля! Теперь вы можете перезагрузить ваш сайт и увидеть те же "ярких" горизонтальное меню + Neato вертикальное меню в левой боковой панели.
15. БОНУС задачу: Давайте меняться "яркого" горизонтальное меню на "темную" цветовой гамме.
    1. Внутри 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
       В основном мы закомментировать одну строку и раскомментировать другую.
    2. Теперь перейдите в Wordpress админ-> Сервис-> Списки NAVT и нажмите на вышеуказанных "передач" значок, чтобы редактировать свойства вашего "menu1" группы.
    3. Нажмите "Тема" на вкладке.
    4. Внутри "Добавить теги перед навигации группы" площадь ввести этот код:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Теперь - перезагрузить страницу - и ваш главный горизонтальное меню навигации "волшебным образом" стало темно, что-то вроде этого:
       

       Тема диссертации - многоуровневые вложенные меню CSS - темная палитра

       Темная цветовая палитра может быть более подходящим для определенных сайтов, чем свет одного цвета. Так что теперь у вас есть свобода выбора в вашей жизни!

    6. Чтобы вернуться к "ярким" цветовая схема - просто отменить выше "Бонус" шаги.
16. Вывод:
    Я люблю тема диссертации , я люблю Wordpress, и я люблю то, что мы способы добавить достойную меню навигации на наших порталах.

$ 20

Наслаждайтесь!

Глеб Есман

Теги: иерархическое меню для WordPress , как построить WordPress навигация , многоуровневые меню для WordPress , навигация по меню для WordPress , тема диссертации , тема диссертации меню , учебник диссертации тему , WordPress меню , навигация WordPress , WordPress вложенных меню