УРОК 5. СОЗДАНИЕ МЕНЮ В WORDPRESS
Создадим меню из 5 пунктов: Об институте, Поступающим, Студенту, Наука, Контакты в блоке menu
Пункты меню будут выстроены в линию, цвет ссылок белый.
При наведении мышкой цвет пунктов меню будет меняться
Оформим меню в style.css
Мы убрали свойство heigh tв блоке menu, т.к. высоту меню мы задали с помощью свойство padding.
Измените цвет меню с использованием синих (голубых) оттенков.
Поддержка меню в functions.php
Добавим поддержку меню в файле functions.php. (Файл functions.php нужно создать в папке темы)
Создадим меню через консоль WordPress с именем main, которое будет состоять из 5 пунктов: Об институте, Поступающим, Студенту, Наука, Контакты
Траектория создания меню: Внешний вид – Настроить – Меню – Добавить меню или через настройки темы
В index.php заменим код
На
Все оформление меню пропало. Поскольку меню выводится автоматически функцией wp_nav_menu, то для оформления внешнего вида меню нужно посмотреть какой атрибут WordPress присваивает тегам меню по умолчанию.
Щелкнем на меню правой кнопкой мыши и выберем Просмотр кода элемента.
По умолчанию WordPress присваивает меню класс menu и id=”menu-имя меню”
Поскольку для всех меню приходится один и тот же класс (menu), то для оформления меню лучше использовать атрибут id.
Т.к. мы назвали меню main, то в качестве id выводится ”menu-main”.
В файле styles.css оформим внешний вид меню с помощью id=”menu-main”, заменив в коде
#menu на #menu-main
Зададим цвет меню: синий (с градиентом). При наведении цвет голубой
Создадим вертикальное меню в блоке <aside>
В консоли WordPress создадим новое меню vertical с помощью произвольных ссылок
Пункты меню: Дни открытых дверей, Образование, Расписание, Учебные материалы
Пока на ссылки мы поставили заглушки
Выведем меню, прописав в index.php следующий код
Посмотрим код меню в браузере
Меню, как любому другому, присваивается класс menu и id=”menu-vertical”
В файле стилей styles.css оформим внешний вид меню vertical с помощью id=”menu-vertical”
Оформите меню следующим образом:
При наведении на пункты меню цвет ссылок красный (или бордовый)
