bem命名_快速提示：BEM命名和WordPress导航过滤器

最新推荐文章于 2025-12-25 14:57:52 发布

翻译最新推荐文章于 2025-12-25 14:57:52 发布 · 217 阅读

文章标签：

#python #java #css #php #html

bem命名

维护CSS非常困难，尤其是在与团队合作的大型项目中。命名约定可以帮助您CSS更具可读性，更易于维护。在此快速提示中，我们将研究如何在WordPress中使用BEM（块元素修饰符）命名方法。

诸如WordPress之类的内容管理系统会在前端标记中输出默认类。在WordPress中，有很多过滤器可以修改这些输出的类。

如果您想直接研究代码，这是我的一个示例主题。过滤器可以在inc / functions-filters.php文件中找到。

什么是BEM？

BEM代表块元素修改器。

“ BEM是一种方法，可以帮助您在前端开发中创建可重用的组件和代码共享。”

我将以导航标记为例：

Block是一个独立的实体，其本身具有意义。
- .menu { ... }
元素是块的一部分，并在语义上与其块相关。
- .menu__items { ... }
- .menu__item { ... }
- .menu__anchor { ... }
修改器更改块或元素的外观或行为。
- .menu--primary { ... }
- .menu__anchor--button { ... }

完整的导航标记可能如下所示：

<nav class="menu menu--primary">
  <ul class="menu__items menu__items--primary">
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor menu__anchor--button">Link text</a></li>
  </ul>
</nav>

诸如BEM之类的命名约定使您的SASS和CSS具有较低的特异性（这总是很好！）。

在SASS中，您可以按照以下方式设置示例的样式：

.menu {
  ...
  
  &__items {
     ...
  }
  
  &__item {
     ...
  }
  
  &__anchor {
     ...
  }
  
  &__anchor--button {
     ...
  }
}

编译后CSS如下所示：

.menu {
  ...
}

menu__items {
  …
}

menu__item {
  …
}

menu__anchor {
  …
}

menu__anchor--button {
  …
}

但是，我们如何改变WordPress中使用的导航类？

使用WordPress过滤器更改导航类

使用WordPress的内置函数wp_nav_menu() ，您可以指定<nav>和<ul>元素的类。例如：

<nav class="menu menu--primary">

<?php
  wp_nav_menu( array(
      'theme_location' => 'primary',
      'container'          => '',
      'menu_class'      => 'menu__items menu__items--primary',
  ) );
?>

</nav>

请注意用于将自定义类添加到<ul>元素的menu_class参数。 WordPress还为<li>和<a>元素提供了方便的过滤器：

nav_menu_css_class用于将类应用于菜单项的<li>元素。
nav_menu_link_attributes用于将属性应用于菜单项的<a>元素。

使用nav_menu_css_class过滤器

在此示例中，我们从菜单项的<li>元素中重置所有默认类，并添加我们自己的自定义类。让我们通过将以下过滤器插入我们的functions.php中，添加名为menu__item的示例类：

function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) {

  // Reset all default classes and start adding custom classes to array.
  $_classes = [ 'menu__item' ];

  // Return custom classes.
  return $_classes;

}

add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 );

您是否注意到有四个参数？让我们添加一个menu__item--primary修饰符类，其中primary是主题位置。为此，我们可以使用$args参数添加主题位置。现在我们的过滤器看起来像这样：

function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) {

  // Reset all default classes and start adding custom classes to array.
  $_classes = [ 'menu__item' ];

  // Get theme location, fallback for `default`.
  $theme_location = $args->theme_location ? $args->theme_location : 'default';

   // Add theme location class.
  $_classes[] = 'menu__item--' . $theme_location;

  // Return custom classes.
  return $_classes;

}

add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 );

完整的代码示例可在inc / functions-filters.php文件的示例主题中找到。

使用nav_menu_link_attributes过滤器

让我们将示例类menu__anchor添加到每个菜单项的<a>元素中。

function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) {

  // Start adding custom classes.
  $atts['class'] = 'menu__anchor';

  return $atts;
}

add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 );

通过菜单生成器添加类

有时，我们从菜单构建器UI将自定义类添加到菜单项的<li>元素中。

为了保持CSS平，让我们一加menu__anchor--button类的<a>其中元素button类是存在：

function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) {

  // Start adding custom classes.
  $atts['class'] = 'menu__anchor';

  // Add `menu__anchor--button` when there is `button` class in `<li>` element.
  if ( in_array( 'button', $item->classes, true ) ) {

       $atts['class'] .= ' menu__anchor--button';

   }

return $atts;

}

add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 );

现在，我们可以使用来直接定位一级CSS。 menu__anchor--button{ ... } 。在我的演示中，您将看到一个菜单样式的按钮，其目标是无需深入研究兔子的专一性。

子页面导航

如果您使用wp_list_pages()来获取子页面，则可以使用类似的过滤器：

在演示中，有一个bemit_sub_pages_navigation（）函数，该函数在侧栏中列出了子页面。从演示站点中查看最终结果。

结论

如此看来，如果您进行较小的更改，则可能不需要Custom Walker进行导航。周围有很多过滤器。

话虽如此，并不是所有的标记都易于修改。例如，诸如the_posts_pagination()类的分页功能目前无法提供良好的过滤器。但这是另一个完整的教程主题。

我希望您发现有关导航过滤器的快速提示有用！

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-bem-naming-and-wordpress-filters-for-navigation--cms-31268

bem命名