УРОК 5. СОЗДАНИЕ МЕНЮ В WORDPRESS

Создадим меню из 5 пунктов: Об институте, Поступающим, Студенту, Наука, Контакты в блоке menu

код простого меню

Пункты меню будут выстроены в линию, цвет ссылок белый.

При наведении мышкой цвет пунктов меню будет меняться

Оформим меню в style.css

оформлению меню в stylecss

Мы убрали свойство heigh tв блоке menu, т.к. высоту меню мы задали с помощью свойство padding.

Измените цвет меню с использованием синих (голубых) оттенков.

Поддержка меню в functions.php

Добавим поддержку меню в файле functions.php. (Файл functions.php нужно создать в папке темы)

поддержка меню в functionphp

Создадим меню через консоль WordPress с именем main, которое будет состоять из 5 пунктов: Об институте, Поступающим, Студенту, Наука, Контакты

Траектория создания меню: Внешний вид – Настроить – Меню – Добавить меню или через настройки темы

В index.php заменим код

код простого меню

На

вывод меню в wordpress

Все оформление меню пропало. Поскольку меню выводится автоматически функцией wp_nav_menu, то для оформления внешнего вида меню нужно посмотреть какой атрибут WordPress  присваивает тегам меню по умолчанию.

Щелкнем на меню правой кнопкой мыши и выберем Просмотр кода элемента.

просмотр кода элемента

По умолчанию WordPress присваивает меню класс menu и id=”menu-имя меню

Поскольку для всех меню приходится один и тот же класс (menu), то для оформления меню лучше использовать атрибут id.

Т.к. мы назвали меню main, то в качестве id выводится ”menu-main”.

В файле styles.css оформим внешний вид меню с помощью id=”menu-main”, заменив в коде

оформлению меню в stylecss

#menu на #menu-main

Зададим цвет меню: синий (с градиентом). При наведении цвет голубой

 Создадим вертикальное меню в блоке <aside>

В консоли WordPress создадим новое меню vertical с помощью произвольных ссылок

создание меню в консоли wordpress

Пункты меню: Дни открытых дверей, Образование, Расписание, Учебные материалы 

Пока на ссылки мы поставили заглушки

Выведем меню, прописав в index.php следующий код

вывод меню в wordpress через функцию array

Посмотрим код меню в браузере

смотрим html код в браузере

Меню, как любому другому, присваивается класс menu и id=”menu-vertical”

В файле стилей styles.css оформим внешний вид меню vertical с помощью id=”menu-vertical

Оформите меню следующим образом:

вертикальное меню - внешний вид

При наведении на пункты меню цвет ссылок красный (или бордовый)

код изменения цвета ссылок при наведении

 

 

Добавить комментарий

Войти с помощью: