Wordpress. Создание темы. Вывод меню в шаблоне
На прошлом уроке мы создали структуру файлов и подключили css и js файлы для нашей темы на WordPress. Сегодня мы рассмотрим возможность поддержки и вывода меню в теме.
Если вы входили в панель администратора после прошлого урока, то заметили, что у вас не был возможности добавить меню. Работа с меню отсутствует вообще. В видеоуроке мы рассматриваем, как сделать поддержку меню в теме с помощью функции register_nav_menu() и его вывод в шаблоне с помощью функции wp_nav_menu().
Код урока (header.php)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<?php
wp_nav_menu(
array(
'menu_id' => '',
'menu_class' => 'navbar-nav ml-auto',
'container' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'
)
)
?>
</div>
</div>
</nav>
</header>
<div id="content">Код урока (functions.php)
<?php
function loadScripts() {
wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri(). '/css/bootstrap.min.css' );
wp_enqueue_style( 'main-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'bsscript', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array( 'jquery' ), '20150330', true );
}
function changeMenuItemsClass($class) {
$classes[] = "nav-item";
return $classes;
}
function addLinkClass($attrs) {
$attrs['class'] = 'nav-link';
return $attrs;
}
add_action('wp_enqueue_scripts', 'loadScripts');
add_filter('nav_menu_css_class', 'changeMenuItemsClass');
add_filter('nav_menu_link_attributes', 'addLinkClass');
register_nav_menu("main-menu", "Главное меню");
0 Комментариев