Бічне меню для wordpress

У цьому уроці розглянемо як можна урізноманітнити стандартне меню в WordPress. Практично у всіх темах воно виводиться одноманітно як вертикально, так і в сайдбарі. Я не хочу пускати тінь або говорити: що незручне, нефункціональне і т.д. Просто це може бути не всім до смаку і виходячи з цього хотілося б чогось незвичайного ну або хоча б нестандартного.

Меню, про який зараз йде мова більше схоже на додаткове або навіть на мобільний, але при бажанні можливо використовувати як основне. Що щодо браузерів? Те підтримується всіма популярними, а IE не нижче 9-ї версії.

Бічне меню складається з наступних частин:

- HTML
- CSS
- JQuery
- Використання шрифту Font Awesome (необов'язково)

Тут все дуже просто розмітка, стилі для оформлення і невеликий скрипт. А шрифт потрібен для відображення однієї іконки. У статті ознайомитеся, як підключити Font Awesome на WordPress. Якщо шрифт вам не підходить, то доведеться іконку робити самому. З усній частиною закінчили переходимо до практики.

Підключаємо бічне меню

Для коректності відображення бокового меню необхідно стилізувати його. Відкрийте файл, який відповідає за оформлення зазвичай це style.css і в кінці, додайте стилі.

Скрипти часто підключають між тегами у верхній частині сайту. Але також можна і внизу що більш позитивно або навіть вивести в окремий файл і підключити через функцію wp_register_script докладніше тут. Щоб у багатьох не виникло труднощів підемо найпростішим шляхом і підключимо в footer. Відкриваємо файл footer.php і в кінці перед закриває тегом додаємо скрипт:

У першому рядку підключається бібліотека JQuery якщо у вас воно підключена, то двічі це робити не потрібно.

Бічне меню для wordpress

Читайте також:

Бічне меню для wordpress

Нумерований список і приклади його оформлення

Бічне меню для wordpress

CSS ефекти для кнопок

Бічне меню для wordpress

Модулі великого (mega) меню для WordPress

Бічне меню для wordpress

Як зробити кілька фонових зображень CSS

Схожі статті