ShiftNav プラグインでスマホ用メニューを作る


Posted on Sun, Dec 25, 2016
Tags wordpress, shiftnav

背景

Wordpressでレスポンシブル(画面のサイズによって表示を変更する)サイトを作っている際、問題になるのがスマホの画面でのメニュー表示です。 テーマによってはメニューが表示されるものもありますが、中には画面の一番下までスクロールしないと過去の記事を読めないものがあります。

そんなときに、ShiftNavというプラグインを見つけました。 こちらは、インストールするだけでタイトルバーと左上におなじみのハンバーガーメニュー(最近、ユーザフレンドリーでないと話題になっていますが…)が表示されます。

左が導入前、右が導入後。

メニューを開く。

カスタマイズ

さて、このプラグインの良いところはカスタマイズができるところです。 ダッシュボード > 外観 > ShiftNav から設定を変更することができます。 僕の場合は、タイトルバーは不要と思ったので、 Toggle Bar タブの「Hamburger button only」にチェックを入れ、「Toggle Breakpoint(画面の横幅が何pxを下回ったら ShiftNavを表示するか)」 を710px に設定しました。