README

与WordPress中糟糕命名的菜单说再见，欢迎WordPress BEM菜单！

这是 Wordpres-Bem-Menu 的分支，我们只改变了结构并将其添加到Packagist，以便通过Composer安装。

安装

要使用，只需将src/wp_bem_menu.php的内容放入您的functions.php文件中。

下载src/wp_bem_menu.php并将其保存到您的主题文件夹中。在functions.php中使用include包含此文件。

Composer方式

使用cmd导航到您的主题文件夹。然后使用以下命令

composer require bicepsdigital/wordpress-bem-menu

不要忘记在functions.php中包含Composer的autoload

用法

首先，您需要在主题的functions.php文件中注册一个导航菜单。

register_nav_menu('my_menu', 'primary site menu');

您还需要在wp-admin中创建一个菜单，并确保它分配了一个与上面注册的导航菜单匹配的主题位置。

然后，将以下函数插入到您的主题中。第一个参数是主题位置（如wp-admin中定义），第二个参数是您希望为该特定菜单使用的类前缀。类前缀将应用于菜单<ul>、每个子<li>和<a>作为'块'。第三个可选参数接受一个array()或一个string。

<?php bem_menu('menu_location', 'my-menu', 'my-modifier'); ?>

如果您想为<ul>添加多个修饰符，请使用数组，例如

<?php bem_menu('menu_location', 'my-menu', array('my-modifier','my-other-modifier')) ?>

请注意，这些修饰符类不会由后代继承。这是为了避免导航标记膨胀。您仍然可以像这样针对特定修饰符的后代：.my-menu--my-modifier .my-menu__item{}

HTML输出

<ul class="my-menu__list my-menu__list--my-modifier">
    <li class="my-menu__item  my-menu__item--active  my-menu__item--78"><a class="my-menu__link" href="#">Home</a></li>
    <li class="my-menu__item  my-menu__item--79"><a class="my-menu__link" href="#">Page 2</a></li>
    <li class="my-menu__item  my-menu__item--84"><a class="my-menu__link" href="#">Page 3</a></li>
</ul>

CSS类

语法非常简单，所有菜单项都按照深度逻辑分组，以避免标准输出的一些嵌套问题。

/* Top level items */
.my-menu__item{}

/* Specific item (where x = post_id) */
.my-menu__item--x{}

/* Parent item */
.my-menu__item--parent{}

/* Active page item */
.my-menu__item--active{}

/* Parent of the current active page */
.my-menu__item--parent--active{}

/* Ancestor of the current active page */
.my-menu__item--ancestor--active{}

/* Link */
.my-menu__link{}

/* sub menu class */
.my-menu__sub-menu{}

/* sub menu item */
.my-menu__sub-menu__item{}

/* sub menu link */
.my-menu__sub-menu__link{}

/* Specific sub menu (where x is the menu depth) */
.my-menu__sub-menu--x{}

修改

BEM语法非常主观，不同的开发者使用不同的约定。如果您希望更改或调整语法以配合自己的实现，所有菜单后缀都包含在$this->item_css_classes数组中

$this->item_css_classes = array(
    'item'                      => '__item',
    'parent_item'               => '__item--parent',
    'active_item'               => '__item--active',
    'parent_of_active_item'     => '__item--parent--active',
    'ancestor_of_active_item'   => '__item--ancestor--active',
    'link'                      => '__link',
    'sub_menu'                  => '__sub-menu',
    'sub_menu_item'             => '__sub-menu__item'
);

在wp-admin>菜单中设置的CSS类

如果您在wp-admin中为菜单项添加了自定义类，Wordpress-Bem-Menu现在会将此类添加到转换为BEM修饰符的项目中。例如，如果您为菜单项添加了类my-class，则输出将是<li class="main-menu main-menu__item main-menu__item--my-class"></li>