こんにちは aonamiです
自分もついに固定グローバルナビゲーションを導入できたと喜んでいたのですが
スマホからサイトを確認してみると非常によろしくない状況に陥ってました。
記事が読みたいのに、固定させてしまったナビゲーションが邪魔をしてしまう。
一つ課題をクリアするとまた次の問題が。初心者にはなかなかすんなりとは気持ちの良いサイト作りはさせてもらえないものです…
上の画像のような状況です。
自分好みのカスタマイズの為に、心折らさずに対処していきましょう。
今回の記事ではこれを改善していこうと思います。
※xeorybaseをテーマにしてカスタマイズの記事を書いています。
xeorybaseのテーマを直接いじると、復帰させたい時にややこしくなるので。子テーマに footer.php をコピーしておきます。
そちらをいじって変更を加える形をとります。
[ダッシュボード]→[外観]→[テーマの編集]
[xeorybaseの子テーマ]がデフォルトになっていると思います。なっていなければ、選択後に[テーマフッター(footer.php)]を選択。表示させます。
footer.php をしばらく下に進めると //スマホトグルメニュー という記述がでてきます。
ここの記述をいじります。
上のように赤枠内
<?php if( is_front_page() ){ ?>
$(‘#gnav’).addClass(‘active’);
<?php }else{ ?>
$(‘#gnav’).removeClass(‘active’);
<?php } ?>
ここまでを消去して、変わりに
$(‘#gnav’).removeClass(‘active’);
と、記述し 保存します。
これで、ページに飛んだ時にいきなりメニュー画面が開いた状態で表示されなくなります。
(メニュー画面は右上にあるハンバーガーボタンから選択できますので、無くなるという事ではありません。)
あとがき
いかがでしたでしょうか。
思い通りにカスタマイズができると気持ちいいものですね。
スマホからの閲覧だと、メニュー画面を使用してページを回遊する事が私はあまりないです。
記事を読み切って関連記事に飛ぶことが多いかな。
最初から畳んでおいた方がスッキリ気持ちいい気がしました。