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

Частина 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 вкладених меню