Ви напевно бачили навігацію, що прокручується, на сайтах у інших людей і задавалися питанням, як самому зробити щось подібне. Скролінг у навігації є на багатьох сайтах, і його можна відтворити за допомогою WordPress. Дайте таке рішення і вашим читачам, щоб вони могли перейти до меню навігації з будь-якої точки на сторінці. Отже, почнемо...
Крок 1. Додаємо нову область меню в functions.php
Усі по порядку. Для початку потрібно створити нове меню, щоб його помістити на сторінку. Давайте створимо нове меню під назвою topnavigation . Ось основний код, яким ми задаємо наше меню у файлі functions.php :
register_nav_menus( array(
'topnavigation' => __( 'Top Navigation', 'YOUR THEME NAME GOES HERE' )
) );Якщо ви вже налаштували функцію register_nav_menus , додайте рядок меню ' topnavigation ' до цієї функції.
Крок 2. Наповнюємо меню вмістом
Перейдемо до панелі керування, відкриємо вкладку меню. Створимо нове меню та призначимо йому місце під назвою ' Top Navigation '. А потім наповнимо меню. Сюди можна додати сторінки Home, Store, Events та Blog — але ви можете використовувати власні сторінки:
Крок 3. Викликаємо меню
Вам потрібно викликати нове меню у головну частину основного тіла статті у файлі header.php . Вкрай важливо, щоб ви уклали меню всередині тега div . Назвати його можна по-своєму: наприклад, ми вибрали назву для div - topnavigation . Нам треба зробити так, щоб код рухався разом із сторінкою. Використовуйте наступний код для header.php :
<div id="topnavigation">
<?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?>
</div>В результаті виконання цього коду має вийти щось на кшталт:
Звичайно, ваша тема може відрізнятись від наведеної. У прикладі використовується базова тема underscores.me із простою сіткою з теми Get Skeleton.
Крок 4. Трохи style.css
Тепер ми можемо перейти до стилізації. Для початку трохи попрацюємо з CSS , щоб надати колірне оформлення для фону, і колірне заповнення фону має бути 100%, щоб це не виглядало дивним при прокручуванні сторінки.
Використовуйте для цього наступний код для style.css (або іншого файлу, який у вашій темі відповідає за стилі оформлення сторінок):
#topnavigation {
width: 100%;
background-color: #999;
}Оновіть сторінку — і у вас має вийти щось на кшталт такого:
Крок 5. Розміщуємо результати
Тепер нам треба переконатися, що наші посилання розміщені в центрі нашої навігаційної смуги. Ми створимо навігаційний елемент у меню:
<div id="topnavigation">
<nav><?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?></nav>
</div>Тепер цьому елементу надаємо трохи оформлення. Зробити це можна так:
#topnavigation nav {
width: 940px; //the width of your container div might be different
margin: 0 auto;
}
#topnavigation li {
display: inline;
padding: 10px;
margin: 20px 0;
}Все це в результаті призведе до того, що сторінка матиме приблизно такий вигляд:
Крок 6. А тепер "навчимо" елемент механізму прокручування
І ось нарешті ми готові до того, щоб "навчити" нашу навігаційну панель скролінгу . Найкраще закріпити нашу панель у верхній частині вікна, а потім виводити її поверх решти всіх елементів на сторінці.
Обновіть стиль #topnavigation :
#topnavigation {
width: 100%;
background-color: #999;
position: fixed; //Stick it to the top of the window
z-index: 1; //Make it float above all other elements
height: 50px; //Gives us a reference point for the final thing
}Але якщо ви перезавантажите вікно, ви помітите, що оскільки навігаційна панель " плаває " поверх, весь інший контент йде під цю панель.
Щоб виправити це, додайте кордон до верхньої частини контейнера div з усім іншим вмістом у ньому. У моєму шаблоні цей контейнер носить назву #page . Ось такий код я додав у файл CSS :
#page {
padding-top: 60px; //The height of my topnavigation div plus a little bit of extra padding for visual pleasure
}І ось що вийде:
І ось тепер ви зможете з легкістю переміщатися сайтом за допомогою навігаційної панелі, а також самостійно підігнати стиль та оформлення панелі на ваш смак.
Джерело: WP.tutsplus.com
Коментарі до запису: 0