さて、WPテーマ自作記も4回目です。
ナビゲーションをなんとかしたい
前回、一応レスポンシブデザインの基本的枠組みまではつくりましたが、メインメニューは十分に対応できてないので、今回はそのあたりを。
テーマユニットテストデータのメニューは階層構造になっているので、これに対応せねばなりませぬ。_sのデフォルトではメインメニューは水平並びで、下層はドロップダウンで表示という仕様。スマホサイズではメニューボタン表示になるものの、それを開けばPC表示と同じメニューが展開されるので、ドロップダウンメニューが下のメインメニューに重なったり、深い階層のメニューが表示領域外に出ちゃったりするので修正が必要ですね。
できれば、スマホ表示ではボタンで下層メニューの表示非表示を切り替えたいところですが、_sにデフォルトで入ってる「navigation.js」にはそういう機能まではないので、今回は下層のメニューも同時に表示させるということにします。折り畳みメニューはまたの機会に。
スマホ用専用メニューをつくる
現状では、PC表示もスマホ表示も同じメニューデザインを使っているので、まずそれを分けて、スマホ表示ではメニューを縦並びにして下層メニューも表示させます。
まず、現状のドロップダウンメニューの指定部分をPC表示に限定するために、「_menus.scss」の「.main-navigation」の２番目の「ul」を下記のようにメディアクエリで囲ってしまいます。これはSASSならではの便利なやり方ですよねー。
ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
@media screen and (min-width: $low-breakpoint) {
ul {
background-color: $color__navigation-bar;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
// …略…
}
}
// …略…
}
その上で、「Primary menu」と表示されるボタン「.menu-toggle」と、そのボタンが押されたときに表示される「.main-navigation.toggled ul」を下記のようにメディアクエリでくくってSASSを書いていきます。
/* Small menu. */
@media screen and (max-width: $low-breakpoint) {
.menu-toggle,
.main-navigation.toggled ul {
display: block;
li {
float:none;
border-bottom: $hairline;
&:last-child {
border-bottom: none;
}
ul {
margin-left: 2rem;
li {
&:first-child {
border-top: $hairline;
}
}
}
}
}
.menu-toggle {
margin: 0.5rem;
padding: 0.5rem 0;
background: #fff;
border:none;
font-size: 1rem;
font-weight: bold;
}
}
途中の$hairlineという変数はボーダーの太さ、種類、色等々の指定です。階層構造をわかりやすくするためにメニュー項目間に入れています。トグルボタンの見た目も違和感のないように修正しています。ボタンに表示されている「Primary menu」という文字は、「header.php」の45行目あたりを下記のように（「メニュー」とあるところ）修正してます。
<nav id="site-navigation" class="main-navigation"> <div class="main-navi-inner"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"> <?php esc_html_e( 'メニュー', 'original_theme' ); ?></button>
というわけで、以上で見た目はともかく、_sのファイルを活かしつつ、一応レスポンシブで、ワークするテーマの基本的枠組みはできたかなー的な感じです。折り畳みメニューについては、もうちょっといろいろ調べないとあかんようですので、とりあえず本日はこれにて。
