トグルメニューを右に!Snow Monkeyのテーマカスタマイズ

Snow Monkeyのモバイル表示の時などに表示するトグルメニュー。
通常の状態では、メニューボタンは右側にあります。しかし、表示されるメニュー内容は左側です。
表示されるメニューも右側にする方法を記事にしました。

右側表示の場合の問題点

メニューの開く・閉じるボタン(トグルボタン)は、元から右側に有ります。
その為、メニューが右側で表示された場合は、そのボタンに被さるようにメニューが出てしまいますので、やや不親切感があります。

カスタマイズと、問題の解決方法

上記の不親切感を無くす為に、その部分を被さらないようにするか、閉じるボタンをメニューに再度表示するかのどちらかで解決したいと思います。

被らないように、上方向の座標をずらした時の問題

スタイルシートに、top要素などを追加記述すれば、上方向の表示座標を変更する事が可能です。
しかし、メニューを開く・閉じるボタンを表示しているナビゲーションバーの高さが変わった場合には、表示座標の変更した値と差異が出る事により正しく表示されなくなる場合もあります。

ルミェール

オーバーレイや行数などのカスタマイザーの設定によっても、ナビゲーションバーの高さは変動しちゃうから、スタイルシートだけで適切な値にするのは、ちょっと難易度が高いんだよね。

ルミェール(アイコン04)

表示されるメニューの上部に、閉じるボタンを出すようにしよう!

上記の難しさから、元のトグルボタンとは別にメニューの上にも別の閉じるボタンを表示して、問題を解決する方法を取る事にします。

やり方として、プラグインを使い、ナビゲーションメニューの上部にコンテンツ表示を追加すると言ったカスタマイズを行います。

Snow Monkeyのカスタマイズには、My Snow Monkeyを使いましょう。
my-snow-monkey.phpにソースコードを追加します。
追加するソースコードは、下記のように行う形です。

add_action(
  'snow_monkey_prepend_drawer_nav',
  function() {
    $html = <<< EOM
<div class="menu-top c-drawer__item">
  <div class="close-area">
    <a href="#sm-drawer" class="c-hamburger-btn" aria-expanded="true">
      <div class="c-hamburger-btn__bars">
        <div class="c-hamburger-btn__bar"></div>
        <div class="c-hamburger-btn__bar"></div>
        <div class="c-hamburger-btn__bar"></div>
      </div>
      <div class="c-hamburger-btn__label">CLOSE</div>
    </a>
  </div>
</div>
EOM;
echo $html;
  }
);

もし、\Framework\Helper::get_template_partsnow_monkey_template_part_root_hierarchyに理解のある方の場合、そう言ったフックを用いてカスタマイズ用のテンプレートを読み込む方法を取っても良いでしょう。(※ ここではそれらの方法は割愛しますが、興味があれば聞いてください)

PHPソースコードの説明

snow_monkey_prepend_drawer_nav と言うアクションフックは、ドロワーメニューのメニュー前にコンテンツを表示するためのフックです。
Snow Monkeyのテーマ用のフックの詳細に関しましては、下記のSnow Monkey フック一覧をご参照ください。

Snow Monkey – Wiki内フック一覧

このアクションフックsnow_monkey_prepend_drawer_nav を用いて、ドロワーメニューのメニュー前にEOMからEOMまでのHTMLをecho(表示)すると言った処理になります。
今回のソースコードの処理の場合は、c-hamburger-btnと言ったclassでSnow Monkeyのメニューのトグルボタンを表示するHTMLになっています。

スタイルを設定しよう

しかし、上記のままでは追加したトグルメニューの位置などがスタイリングされておらず、不格好な表示となったままです。
カスタマイザーの追加CSSなどに下記を加えて、追加したトグルボタンのスタイルを設定しましょう。

#drawer-nav {
  left: auto;
  right: -100%;
  transition: right .2s ease-out;
  padding-top: 60px;
}
 
#drawer-nav[aria-hidden="false"] {
  right: 0;
}
 
.menu-top {
  z-index: 200000;
  position: fixed;
  display: flex;
  right: 0;
  top: 0;
  width: 18.69565rem;
  max-width: 80%;
  height: 60px;
  padding-top: .93478rem;
}
 
.menu-top .close-area {
  float: right;
  width: 100%;
  text-align: right;
}
 
.menu-top a {
  text-decoration: none;
}
.menu-top:after {
  clear:both;
  content: " ";
  display: table;
}
 
@supports (padding-left: constant(safe-area-inset-right)) or (padding-left: env(safe-area-inset-right)) {
  [id="drawer-nav"] {
    padding-left: 0;
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
    width: calc(18.69565rem + constant(safe-area-inset-right));
    width: calc(18.69565rem + env(safe-area-inset-right));
  }
  .menu-top {
    padding-right: calc(.93478rem + constant(safe-area-inset-right));
    padding-right: calc(.93478rem + env(safe-area-inset-right));
    width: calc(18.69565rem + constant(safe-area-inset-right));
    width: calc(18.69565rem + env(safe-area-inset-right));
  }
}
@supports (padding-left: constant(safe-area-inset-bottom)) or (padding-left: env(safe-area-inset-bottom)) {
  [id="drawer-nav"] {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

スタイルのコードの説明

@supportsから始まる記述は、iPhone XSなどのアクションバーやベゼル領域にメニューが重ならないようにする為のセーフエリア用のスタイリングです。

drawer-navクラスの記述は、右側にメニューが表示されるようにする為のスタイリングと、コンテンツ前に高さ60pxの領域を指定しています。もし、メニュー前のトグルボタン領域の高さを変更される場合は、drawer-navクラスのpadding-top: 60px;menu-topクラスのheight: 60px;を変更してお使いください。

menu-topクラスの記述は、トグルメニューを表示しているメニュー前のコンテンツ領域用のクラスです。z-indexを設定する事でメニューより浅い深度で表示を行う為、メニューがスクロールする際にもメニュー前のコンテンツ領域を正しく表示するようになります。

その他のメニューカスタマイズについて

メニューの位置を左側から右側へ変更しましたが、その他の基本的なスタイリングやカスタマイズ方法は特に変わりません。通常のように設定をしてください。