Пошуки ідеального вертикального меню ...
Частина 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 комментариев }
