1

我试图通过 WordPress 通过 wp_nav 输出这个结构，但仍然为当前菜单项保留一个类，因此当前页面上的选项卡会发生变化。（is-active 将替换当前菜单项）。这是基于https://getmdl.io/components/index.html#layout-section

<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
      <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
      <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
      <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
    </div>
  </header>
 </div>

但是，我不知道该怎么做。有任何想法吗？

4

3 回答 3

0

尝试这个。

function remove_wp_nav_menu_ul_litags($menu){
  return $menu = strip_tags($menu, "<a>");
}
add_filter( 'wp_nav_menu', 'remove_wp_nav_menu_ul_litags' );

您也可以通过作为strip_tags()函数的第二个参数传递来保留或保留其他标签。

于 2019-12-28T12:26:55.707 回答
0

这项任务比看起来要困难一些。wp_nav_menu()使用一个特殊的Walker 类来构建动态输出。有一堆硬编码和过滤的类名和大量的标志/状态。我们有三种主要的方法来处理这一切。

  • 最简单的方法是保留默认标记并采用/重写所有相关的 CSS/JS。对于初学者来说，在 90% 的情况下要容易得多。

  • 另一种方法是使用导航菜单挂钩和过滤器来添加/重新定义现有类。如果你只需要一些调整就可以了。通常你会使用：' nav_menu_css_class '、' nav_menu_submenu_css_class '、' nav_menu_link_attributes '。在输出 html 准备好后（使用 ' wp_nav_menu ' 过滤器），有些东西也可以用正则表达式替换。这种方法有时可能看起来很慢，因为您经常需要遍历所有内容（项目、类、属性）并执行过多的条件检查。但是您的任务似乎完全适合这种方法。

  • 最灵活的方法是通过您自己的 walker 函数扩展 Walker 类，这将以您自己的方式提供您需要的任何输出。但是，您需要了解 Walker 类（教程）。当您第一次面对这种方法时，它可能看起来很复杂。但它可以让你完全控制。

于 2019-12-28T12:43:45.903 回答
0

请提供您希望执行此类操作以获得所需输出的原始数据。

于 2019-12-28T07:20:09.617 回答