В поисках идеального вертикального меню ...
Часть 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 -> Вид -> Widgets.
- Перетащите "Текст" виджет (с большой "Доступные виджеты" область) на «Боковая панель 1" области справа. Мы будем добавлять код в текстовый виджет, который поможет нам материализовать вертикальное меню.
Примечание: я полагаю, у вас есть "Боковая панель 1" в жизни. Диссертации вариантов позволяет отключить его - а ради этого учебника позволит сделать это будет. - После того как вы перетащить этот виджет - он открывается как цветок (я чувствую, что в настоящее время романтического MSIE борьба окончена).
- В "Title", задайте "лучшим мире вертикальное меню" ... Ну, не стесняйтесь использовать свой творческий потенциал - этот текст будет идти над новорожденного вертикальное меню.
- В большой площади для текста - введите этот код 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
Наслаждайтесь!
Глеб Esman
{Комментарии к данной записи закрыты}
