Добавляем несколько меню в футер сайта — урок 19

Если мы посмотрим на нижнюю часть сайта, то увидим что там в левой его части есть несколько блоков со ссылками (Links to Important Stuff), думаю будет дальше правильно заняться ими.

Для начала давайте создадим 4 меню в панели администратора Внешний вид -> Меню (Appearance -> Menu).

wordpress create menu - уроки wordpress

create menu wordpress - курсы по wordpress

wordpress create menu | курсы по wordpress

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

wordpress create link to menu - курсы по wordpress

Наполняя меню делайте все по порядку:

  1. Выбираем тип наполнения ссылка (link);
  2. В поле URL добавляем решетку, при помощи решетки можно наполнить атрибут href ссылки но сама ссылка не будет никуда вести. В поле Текст ссылки (Link text) необходимо ввести текст ссылки (анкор);
  3. После заполнения URL и текста ссылки нажимаем на кнопку Добавить в меню (Add to Menu);
  4. Когда все нужные пункт появиться в правой части рабочей области нажмите Сохранить меню (Save menu).

Добавьте пункты самостоятельно и продолжаем.

Для вывода меню нам необходимо сделать области вставки меню, создаются эти области в файле functions.php.

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

wordpress check menu - курсы wordpress для начинающих

wordpress check menu location - курсы по wordpress

К выбранному меню необходимо указать область размещения [1] и сохранить [2].

Вывод созданного меню в шаблоне

Для вывода меню в WordPress нам потребуется функция wp_nav_menu() которую мы вставляем в content-bottom.php так как показано ниже.

Подробнее о функции wp_nav_menu() советую прочесть на официальном сайте.

Если вы все сделали правильно, то у вас в шаблоне будет показано меню, созданное в панели администратора. Для  проверки можете в панели администратора изменить порядок пунктов меню и посмотреть результат на сайте.

wordpress sort menu уроки wordpress

wordpress order menu - уроки wordpress

Небольшие доработки шаблона

В файле content-top.php добавляем название сайта при помощи функции

Полный код заголовка

Выводим меню в шапке сайта

В файле functions.php добавляем область для вывода меню, доработанный код будет выглядеть следующим образом.

Добавление области меню в wordpress

Создаем в админке новое меню под названием «Header menu» и добавляем в него пункты из нашего шаблона, определяем расположение меню и незабываем сохранить меню после настройки.

wordpress create top menu

В файле content-top.php создаем функцию для вывода верхнего меню. Так как в нашей верстке структура нестандартная (без тегов ul и li), то нам необходимо немного доработать функцию wp_nav_menu().

Разберем полученный код по порядку:

  1. В массиве $args хранятся все атрибуты функции
    1. theme_location — область размещения темы, рассматривали выше;
    2. ‘menu_id’ => ‘nav’ — добавляет в обвертку меню id = «nav», в нашем случаи обвертка это тег <nav id=»nav»></nav>.
    3. ‘echo’ => false, — по умолчанию функция wp_nav_menu() формирует меню и выводит на экран, при указании значения false, функция не будет выводить данные и сформированное меню можно сохранить в переменную, в нашем случаи переменную $header_menu.
    4. ‘items_wrap’ => ‘<nav id=»%1$s» class=»%2$s»>%3$s</nav>’ — формирует шаблон обвертки меню.
  2. В переменной $header_menu сохраняется сформированное меню в котором все еще есть лишний тег <li>, нам его нужно убрать.
  3. Конструкция echo strip_tags($header_menu, ‘<a><nav>’) удаляет все лишние теги, кроме указанных в кавычках.

После этих манипуляций наше меню должно появиться в том виде, в котором оно было изначально в верстке и в нем не будет никаких <ul> и <li>.

Хоть мы и разобрали этот пример, но правильнее будет поправить верстку сайте, чем делать такие манипуляции.

Как включить админ бар на сайте

Для удобства в WordPress на стороне пользователя есть специальная панель админбар. Чтобы включить админбар, необходимо в файл footer.php, перед закрывающим тегом </body> ввести функцию <?php wp_footer(); ?>

включить admin bar в шаблоне wordpress

Исходные файлы моей темы

zip wordpress theme archive

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


Купить хостинг WordPress
/* Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

Директор веб-студии ProGrafika. Занимаюсь разработкой, дизайном и продвижением веб-сайтов. Всегда рад новым читателям блога и хорошим клиентам.


Вам может также понравиться...

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

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