写个wordpress nav自适应导航下拉菜单
时间: 2023-03-20 17:00:41 浏览: 154
下面是一个简单的 WordPress 自适应导航下拉菜单示例代码:
```php
<nav class="site-navigation">
<?php
$args = array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'primary-menu',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 3,
'walker' => new WP_Bootstrap_Navwalker(),
);
wp_nav_menu($args);
?>
</nav>
```
这个代码片段使用 `wp_nav_menu` 函数来显示一个名为 'primary' 的导航菜单。菜单项将显示在一个 `<ul>` 元素内,并使用 'primary-menu' 作为 CSS 类名。此外,我们还使用了一个名为 `WP_Bootstrap_Navwalker` 的自定义菜单项导航器,它将在下面的代码中定义。
接下来,我们将创建一个名为 `WP_Bootstrap_Navwalker` 的类,它将用于自定义菜单项导航。
```php
class WP_Bootstrap_Navwalker extends Walker_Nav_Menu {
public function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
$classes[] = ($args->walker->has_children) ? 'dropdown' : '';
$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
$classes[] = 'nav-item';
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = ' class="' . esc_attr($class_names) . '"';
$id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
$id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
$attributes = ! empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
$attributes .= ! empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
$attributes .= ! empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
$attributes .= ! empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
$attributes .= ($args->walker->has_children) ? ' class="nav-link dropdown-toggle" data-toggle="dropdown"' : ' class="nav-link"';
$item_output = $args->before;
阅读全文