Настройка многоуровневого меню на сайте — урок 22

Для начала необходимо создать страницы, которые дадут нам план действий и развития на будущий курс. Мне хотелось бы с вам создать премиум шаблон и показать, что это не так сложно и вполне можно делать. Бонусом будет, то что в конце курса вы получите полное руководство к действию для разработки премиум шаблонов и их продаже на биржах, так что продолжайте следить за новыми публикациями.

 

Создадим страницы сайта:

  • home
  • blog
  • about
  • Contact
  • Shortcodes
  • Error 404
  • page 1 column
  • page 2 column
  • page 3 column
  • portfolio
  • Single standard
  • Single gallery
  • Single video
  • Single audio
  • Single portfolio
  • Single product
  • Shop
  • Single prodect

После создания страниц заходим в пункт Appearance -> Menus и удаляем старые пункты. После удаления не забывайте нажимать кнопку Save Menu.

wordpress deete menu item - курсы wordpress

Добавьте в верхнее меню страницы как показано на картинке ниже.

add page to menu - курсы wordpressЕсли были добавлены лишние станицы, то просто можете их удалить из списков пунктов. Когда вы будите делать меню можно использовать заглушки, их делать не сложно, просто добавляем вместо ссылки диес (#).

wordpress добавляем ссылку заглушку

Сформируем структуру меню, перетягивая пункты на нужное место.

wordpress menu order

Формируем структуру с вложениями, как показано ниже:

  • home
  • blog
  • page ( # )
    • about
    • Shortcodes
    • Contact
    • single ( # )
      • Single standard
        • page 1 column
        • page 2 column
        • page 3 column
      • Single gallery
      • Single video
      • Single audio
      • Single portfolio
      • Single product
    • Error 404
  • portfolio
    • Single prodect
  • Shop

После формирования меню на сайте все поползло, так как шаблон не содержал выпадающего многоуровневого меню.

wordpress menu настройка нового меню - уроки wordpress

Я думаю, правильно будет подчистить шаблон и настроить новое меню.

Уберите лишний javascript в файле header.php, чтобы он нам не мешал, остатки старого меню:

В header.php давайте подключим стили для нового меню. Наше меню будет работать исключительно на css.

В файл menu.css, добавляем стили для будущего меню, даю вам образец:

стили для меню

В файле header.php замените наше старое меню на новое:

Перенесем также в коде логотип под меню. Думаю, не стоит много рассказывать правильнее будет дать вам самостоятельное задание анализа и переноса нового кода из файла header.php. После переноса у вас меню должно выглядеть вот так:

wordpress new menu уроки разработки сайтов

Исходники шаблона:

zip wordpress theme archive

Дополнительная доработка

После создания страниц давайте укажем в настройках главную страницу (Настройки -> Чтения -> На главной странице отображать -> Статическую страницу -> Home) и страницу блога (Настройки -> Чтения -> Posts page -> Blog), на ней будут выводиться все наши публикации.

wordpress check home page and blog - курсы wordpress

На данный момент нам еще надо доработать шаблон для главной страницы и для блога, чтобы посты выводились как надо. Об этих двух страницах и о разработке шаблонов страниц в целом мы поговорим в следующих уроках.

Купить хостинг WordPress

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal