Xeoryのスマホトグルメニューをデフォルトで閉じる方法(3分)

ブロガーの皆さん、こんにちは。相原 ユーキです。
今回の記事では、Wordpessテーマ「Xeory」のスマホ用トグルメニューを、デフォルトで非表示にする方法を紹介します。
HTML・CSS初心者でも2〜3分で完了するので、記事を読みながら挑戦してみてください!
[box class=”box26″ title=”他のXeoryカスタマイズ記事”]

Xeoryでカテゴリーの投稿数を改行させず横に表示させる方法(3分)

2018.02.23

Xeoryで記事の最終更新日時を表示させる方法(3分)|WordPress

2018.02.24
[/box]  

Xeoryのスマホトグルメニューは、デフォルトでは常時表示になってしまう ……

バズ部の「Xeory Base」は非常にシンプルで軽量なWordpressテーマなので気に入っているのですが、スマホ版の表示で一箇所だけ気に入らない部分が ……。
それがトグルメニュー(グローバルメニュー)。

画像を見てもらえればわかりますが、何の設定もしていないデフォルトの状態だと、メニューが全項目だらーっと垂れ下がった状態になっているんです。
このままでも良さそうですが、スマホユーザーがパッと見たときのファーストビューが全てメニューに埋め尽くされてしまう。
ユーザビリティが下がる気がするし、何よりデザイン的にイケていないので嫌でした。
そこで、今回は「Xeory」テーマのコードをほんの少しだけいじって、スマホトグルメニューがデフォルトでは非表示(閉じている状態)になるようにカスタマイズしてみようと思います。
とは言え、2〜3分で終わるぐらいの単純な作業なので、HTML・CSS初心者でもご安心を。
 

Xeoryのスマホトグルメニューを、デフォルトで閉じておく方法

それでは、早速「Xeory」のコードを編集していきます。以下の3つのステップを踏めば簡単に修正できるので、一つずつ見ていきましょう。

1親テーマ → 子テーマに footer.php をコピー

WordPressのテーマをいじるときには、親テーマのオリジナルファイルではなく、必ず子テーマに複製したコピーファイルを編集するようにしましょう。

親テーマにあるファイルをそのまま編集すると、万が一ファイルが破損した場合、Wordpressにアクセスできなくなる可能性もあります。バックアップは必ず取っておいてくださいね。

 

2子テーマ側の footer.php を開き、「//スマホトグルメニュー」に関する記述をさがす


親テーマの中にある「footer.php」というファイルを子テーマに複製してから、編集画面を開きます。
footer.phpは、63行ぐらいのコードから構成されるファイルです。
コードの編集は、Wordpressの管理画面 → 外観 → テーマの編集 → footer.php でも良いですし、Filezilla等のFTPソフトを使用しても大丈夫。
そのまま下にスクロールしていくと、トグルメニューに関する記述が見つかるはず。

次のステップでは、この部分のコードを編集(差し替え)します。
ちなみに、Ctrl+F あるいは ⌘+F で「//スマホトグル」と検索しても大丈夫です。
 

3コードを差し替える

// スマホトグルメニュー という表記の下にある、

<?php if( is_front_page() ){ ?>
$(’#gnav’).addClass(’active’);
<?php }else{ ?>
$(’#gnav’).removeClass(’active’);
<?php } ?>

という6行のコードを ……

$(’#gnav’).removeClass(’active’);

これに置き換えるだけ。たったこれだけで編集完了です! ファイルを上書き保存をして、footer.php を閉じます。
 

Xeoryのスマホトグルメニューをデフォルトで非表示にすることができました



無事、トグルメニューをデフォルト非表示にすることができました。
ファーストビューで記事の情報が目に入ってくるようにあったので、ユーザビリティも以前より向上しそうですね。
もちろん、右上のハンバーガーメニュー をタップすれば、いつでもトグルメニューを呼び出すことができます。
……ちなみに僕はスマホでサイトを見るときにはグローバルメニューはほとんど使わないんですけどね。
ご精読ありがとうございました。
[box class=”box26″ title=”他のXeoryカスタマイズ記事”]

Xeoryでカテゴリーの投稿数を改行させず横に表示させる方法(3分)

2018.02.23

Xeoryで記事の最終更新日時を表示させる方法(3分)|WordPress

2018.02.24
[/box] [box class=”box26″ title=”ブログで稼ぐ方法”]

【初心者向け】ブログで稼ぐ方法を図解してみた(スライド55枚)

2018.07.10
[/box]
現在お使いのWordpressブログテーマに不満はありませんか?
 

 
ほんとうに使いやすいブログテーマが見つかれば、生産性もケタ違いに上がりますしモチベーションも高まります!
 
これまでに無料・有料あわせて15種類以上のWordpressテーマを使用してきたぼくが、「これは!」と本気で惚れ込んだ3つのテーマを厳選しました。
 
「今よりもブログを楽しみたい!」という方は、以下のボタンからレビュー記事へどうぞ!
 
お薦めブログテーマを今すぐチェックする