barba.js 2.x(v2)でWordPressの管理バー（ツールバー）のリンクを正常に動作させる方法

2021.06.03

今回は、barba.js 2.x(v2)を利用したときに、WordPressの管理画面ログイン後、ページ上部に出てくる管理バー（ツールバー）のリンクを、正常に動作させる方法をまとめました。

barba.init({
  transitions: [{}], // 省略

  prevent: function (e) {
    // barbaのリンクとして実行させたくない場合の処理
    if (e.el.classList.contains('ab-item')) {
      return true;
    }
  }
});

WordPressの管理バーのリンクには、ab-itemというclassが付与されているので、barba.jsのpreventをtrueで返すことで、barbaの動作を無効にできます。

ちなみに、HTMLタグに直接、data-barba-prevent属性を付与するだけで、同様の効果を発生させられます。

ページ内スクロールさせたいときに使うことがほとんどですが、このような感じで利用できます。

<!-- どちらも同じ効果です。 -->
<a href="#section" data-barba-prevent>ページ内のセクションへ</a>
<a href="#section" data-barba-prevent="self">ページ内のセクションへ</a>

<!-- ul内のリンクすべてに効きます。 -->
<ul data-barba-prevent="all">
    <li><a href="#section1">セクション１へ</a></li>
    <li><a href="#section2">セクション2へ</a></li>
    <li><a href="#section3">セクション3へ</a></li>
</ul>

barba.jsのStrategies内に載ってますので、チェックしてみてください！

あわせてこちらもどうぞ！