Ви напевно бачили навігацію, що прокручується, на сайтах у інших людей і задавалися питанням, як самому зробити щось подібне. Скролінг у навігації є на багатьох сайтах і його можна відтворити за допомогою WordPress. Дайте таке рішення і вашим читачам, щоб вони могли перейти до меню навігації з будь-якої точки на сторінці. Тож почнемо...
Крок 1. Додаємо нову область меню в functions.php
Все по порядку. Для початку потрібно створити нове меню, щоб його помістити на сторінку. Давайте створимо нове меню під назвою topnavigation. Ось основний код, яким ми задаємо наше меню у файлі functions.php:
register_nav_menus( array(
'topnavigation' => __( 'Top Navigation', 'YOUR THEME NAME GOES HERE' )
) );Якщо ви вже налаштували функцію register_nav_menus, додайте рядок меню 'topnavigation' до цієї функції.
Крок 2. Наповнюємо меню вмістом
Перейдемо до панелі керування, відкриємо вкладку меню. Створимо нове меню і призначимо йому місце під назвою 'Верхня навігація'. А потім наповнимо меню. Сюди можна додати сторінки 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 з простою сіткою з теми Отримайте скелет.
Крок 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 з усім іншим вмістом у ньому. У моєму шаблоні цей контейнер має назву #сторінка. Ось такий код я додав до файлу 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