У пошуках ідеального вертикального меню ...
Частина 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
{Коментарі до цього запису закриті}
