Разработка сайтов

Верстка, адаптивная верстка, программирование, разработка на WordPress

Верстка горизонтального меню для сайта. Перенос на WP. Часть 2

Здравствуйте! В предыдущем уроке мы создавали горизонтальное меню и логотип, сегодня будем его переносить на тему WordPress. В даном уроке научимся создавать меню в WordPress через админку. Приступим. Откройте файл index.html на сайте и header.php в теме, сейчас перенесем логотип. Скопируйте ссылку

и замените

в header.php. Вот так будет выглядеть header.php

Теперь создадим папку images в корне нашей темы и вставим туда рисунок. Осталось изменить файл style.css откройте его на редактирование и добавьте такой код:

Логотип готов. Перейдем к переносу меню. Заходим в тему, откроем index.php. Из файла index.html нужно скопировать только тег меню <nav> и вставить в index.php после <?php get_header(); ?> вот так:

По умолчанию меню в WordPress отключено, сейчас его подключим. В папке нашей темы test нужно создать файл functions.php функциональный файл темы, и вставить в него такой код:

Теперь зайдите в админку сайта -> Внешний вид -> Меню. Там будет Заголовок меню, напишем название меню например main_menu и нажмем кнопку Создать меню. Виділення_004 Меню готово. Теперь нужно в него добавить страницы, создадим их. Переходим в меню Страницы, Довить новую «Галерея», «О нас», «Контакты». Готово. Переходим в настройки меню. Слева там где блок страницы появились только что созданные страницы, отмечаем их галочками и нажимаем кнопку «Добавить в меню», вот так: Виділення_002 Главную страницу добавим через Произвольные ссылки Виділення_005 Вот такое меню должно получится Виділення_006 Если пункты меню расположены не в том порядке их можно с легкостью изменить, нажмите на пункт и перетащите в нужное место. Теперь перейдем к выводу меню. В файле index.php в теге <nav> нужно вставить вот такой код

где main_menu название меню которое мы создали. Обновите страницу браузера и посмотрите на результат. Меню работает но отображается криво, потому что нужно поправить файл style.css что сейчас и сделаем. Откройте файл style.css добавьте тег <nav> вот сюда:

и добавьте все стили для меню, вот они:

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

  • светлана ильина

    Не смогла загрузить как новую тему на WP