モバイルメニュー「トップメニュー」のメニューアイコンを修正する方法

はじめに

Cocoon設定→モバイル→モバイルメニュー「トップメニュー」は、jQueryプラグイン「slicknav」を用いて実装されています。
しかし、slicknavの標準アイコンを使用すると、アイコンが潰れて表示されてしいます。

モバイルメニュー「トップメニュー」の▶が潰れて表示される

----------------------------------------------テーマ名：Cocoonバージョン：2.8.7カテゴリー数：18タグ数：124ユーザー数：1-----------------------------...

wp-cocoon.com

そこで、この閉じるアイコンを修正し、また好みのアイコンに変更します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('script_loader_tag', function ($tag, $handle, $src) {
  // slicknav-jsの場合
  if ($handle === 'slicknav-js') {
    $search  = 'parentTag: "div",';
    $replace = 'parentTag: "div", closedSymbol: \'▶\',';

    $tag = str_replace($search, $replace, $tag);
  }

  return $tag;
}, 10, 3);

参考：開閉アイコンを好みのアイコンに変更する方法

slicknavの標準アイコンを、自身のブログのデザインに合わせて、開閉時のアイコンをそれぞれ好みのものに変更します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('script_loader_tag', function ($tag, $handle, $src) {
  // slicknav-jsの場合
  if ($handle === 'slicknav-js') {
    $search  = 'parentTag: "div",';
    $replace = 'parentTag: "div",
      closedSymbol: \'<i class="fa fa-angle-right"></i>\',
      openedSymbol: \'<i class="fa fa-angle-down"></i>\',';

    $tag = str_replace($search, $replace, $tag);
  }

  return $tag;
}, 10, 3);

さいごに

今回紹介した方法を使えば、標準slicknavアイコンの表示崩れを解消し、サイトデザインに合わせたアイコンへ変更できます。
また、script_loader_tagフィルターを活用することで、テーマファイルを直接編集せずに安全なカスタマイズが可能です。