WordPressのメニューとサイドバーをスマホ用に横からスライドイン表示させるカスタマイズ方法

WordPressテーマのスマホ表示は、結構頭を悩ませるところです。

中でも特に、グローバルナビメニューや、サイドバーのスマホでの扱いには悩むところです。

僕はこれまで、グローバルナビの場合は、非表示にしておいて、アコーディオン表示させるか、モーダル表示させるかしていました。

サイドバーの扱いはもっとぞんざいで、回り込みを解除して、本文の下に表示させるということぐらいしか、できていませんでした。

ただ最近、スマホのような幅の狭い端末で表示させる場合、横からスライドインしてくるメニューもいいなと思い始めました。

特に、スマホで表示させると、下に行ってしまって、あまり日の目を見ないサイドバーなども、スライドインするようにすれば、多少利用者も増えるかもしれません。

という事で、今回はWordpressテーマを、スマホで表示する場合、スライドインさせてメニューや、サイドバーに手軽にアクセスできるようにしてみたいと思います。

photo by Anne Swoboda

スポンサーリンク
レクタングル(大)広告

スライドインインターフェースの仕様イメージ

言葉で説明しても、うまく説明できないので、画像を用いて完成形をまず紹介したいと思います。

インターフェース

まず、スマホなどで表示させる場合は、画面下部分に、常に以下のようなボタンを表示させます。

スマホメニューインタフェース

左から、以下のような機能になっています。

  1. [Menu]グローバルナビメニューを左からスライドイン表示させるボタン
  2. [Search]検索ボックスを表示させるボタン
  3. [Prev]前の記事に戻るボタン
  4. [Next]次の記事へ移動するボタン
  5. [Top]スクロールをトップに戻すボタン
  6. [Sidebar]サイドバーを右からスライドイン表示させるボタン

投稿ページでは、このようなボタン配置で表示しますが、一覧ページなどでは以下のようなボタンになります。

一覧ページのスマホメニューインタフェース

一覧ページに、前の記事、次の記事、ボタンは不要なので、4つのボタン表示になります。

メニュー表示

メニューボタンをクリックすると、左からグローバルナビがスライドインしてきてメニューが表示されます。

左からのスライドインメニュー

メニューボタンは、閉じるボタンに変更されます。

検索ボックス表示

検索ボタンを押すと、以下のように検索ボックスが表示されます。

検索ボックス表示

こちらも、検索ボタンが「閉じる」ボタンになります。

サイドバーの表示

サイドバーボタンを押すと、以下のように右からサイドバーエリアがスライドインしてきます。

右からのスライドインサイドバーメニュー

多くの、スマホサイトで下に追いやられることが多い、サイドメニューも、これで多少を有効活用される可能性が高まるかもしれません。

サイドバーメニューをクリックすると、「閉じる」ボタンになるトグルボタンとなっています。

横幅の広い端末で表示

広い端末で表示した場合は、横幅に応じてボタンの大きさが同じ幅で均等表示されます。

ボタンの大きさが横幅に応じて変わる

これは、スタイルの、CSSのFlexBoxを利用して実現します。

大体の仕様はこんな感じです。

フッターの固定メニューインターフェースは以下のページを参考にさせてもらいました。

参考 フッター固定式メニューの設置方法とメニュー項目のアイディア – Shufulife

カスタマイズの主な手順

Sidrプラグイン

今回の、カスタマイズの「メイン機能となるスライド部」を作成するのに、jQueryプラグインのSidrを利用します。

今回の実装の主な手順は以下の4手順になります。

  1. Sidrのダウンロード&設置
  2. CSSファイルの呼び出し
  3. スクリプトファイルの呼び出しとjQueryコードの記入
  4. CSSで見た目の調整

とりあえず、まとめて書けるところは、できるだけまとめて書きました。

僕は、テーマにSimplicityを利用しているので、以下ではSimplicityのカスタマイズをベースに説明しています。ただ、他のテーマを利用していても、同様の手順になります。

Sidrのダウンロード&設置

まずは、Sidrからファイルをダウンロードします。

Sidrファイルのダウンロード

ダウンロードすると「sidr-package-x.x.x.zip」というファイルが作成されるので、解凍してください。

中にある必要なファイルは以下です。

  1. stylesheets/jquery.sidr.dark.css(暗い色のスタイル)
  2. stylesheets/jquery.sidr.light.css(明るい色のスタイル)
  3. jquery.sidr.min.js(スライドイン表示させるためのスクリプト)

今回は、暗めの色を利用するので、「jquery.sidr.dark.css」と「jquery.sidr.min.js」のファイルのみを利用します。(明るめのスライドメニューを作成したい場合は「jquery.sidr.light.css」を使用してください。)

今回は、子テーマ内に以下のように配置しました。

  1. css/jquery.sidr.dark.css(暗い色のスタイル)
  2. css/sidr-menu.css(今回作成するメニューやボタンのスタイルを書くファイル)
  3. js/jquery.sidr.min.js(スライドイン表示させるためのスクリプト)

それぞれ、CSSは「css」フォルダを作成し、JSファイルは「js」フォルダを作成し、その中にSidrのファイルをコピペしました。

あと、「css」フォルダには、「sidr-menu.css」という空のファイルを作成しておきます。これは、後でボタンのスタイルや、Sidrでスライドインして表示される部分のスタイルを整えるために利用します。

CSSファイルの呼び出し


photo by Maurice Svay

まずは、CSSファイルの呼び出しです。

<head></head>内に以下のように書いてCSSを呼び出してください。

モバイルのみでの利用になりますので、wp_is_mobile()を利用してモバイルの時のみ呼び出すようにしています。

今回、Font Awesomeのアイコンフォントを利用するので、CDNでFont Awesomeを呼び出しています。もう既に、テーマで呼び出している場合は、Font Awesome部分を削除してください。

スクリプトファイルの呼び出しとjQueryコードの記入

photo by Dmitry Baranovskiy

次に、以下のことを行います。

  1. 操作ボタン部分のHTMLを記入する
  2. Sidrスクリプトファイル呼び出す
  3. 操作を実行するjQueryスクリプトを書く

これらを、まとめて書いたのが以下になります。</body>手前あたりに記入してください。

こちらも、モバイルの時のみの利用なので、wp_is_mobile()を利用して、分岐しています。

コメントに、書いてあるので細かな説明は省きますが、簡単に説明すると、それぞれは以下のようになっています。

操作ボタン部分のHTML

インターフェースとなるHTMLの部分です。ここで、検索フォームも作成しています。

「←」や「→」は、投稿ページのみの呼び出しになっています。あと、記事がない場合は表示されないようになっています。

変更点

あと注意点として、以下の「#navi」部分は、ご使用のテーマのグローバルナビのIDを入れてください。

<a id="footer-button-menu" href="#navi">

「#sidebar」部分は、使用テーマのサイドバーのIDを記入してください。

<a id="footer-button-sidebar" href="#sidebar">

Sidrスクリプトファイルの呼び出し

こちらは、Sidrのスクリプトファイルの呼び出しです。

こちらは、実行スクリプトの前に呼び出す必要があります。

操作を実行するjQueryスクリプト

最後に、jQueryで動的に実行する部分を書きます。

やっていることは以下の4つです。

  1. 「Top」ボタンでページトップにスクロール移動する動作
  2. 「Search」ボタンで検索フォームの表示/非表示
  3. 「Search」ボタンのデフォルトのリンク動作をしない
  4. Sidrでスライドインさせる実行コード

Sidrの実行では、onOpen、onCloseなどを利用して、スライドイン、スライドアウト時に動作を割り当てることができます。これにより、トグルボタンを実装しています。

変更点

HTML要素にSidr動作を割り当てるために、以下のname部分は、グローバルナビのIDを記入してください。

以下のname部分は、サイドバーのIDを入力してください。

name部分が、HTML要素にうまく割り当てられていないと、Sidrは動作しません。

CSSで見た目の調整

最後に、ボタンのスタイルの指定と、Sidrでスライドインされるエリアの見た目を調整します。

先程作成した、「css/sidr-menu.css」に以下のスタイルをコピペします。

Sidrで動的にスタイルが書き換えられてしまうので、表示がおかしくなるところは、改めてスタイルを再設定しています。もっと、スマートな方法があるのかもしれないけれど、CSSで上書きする形にしました。

Simplicityの要素に合わせた書き方になっていますが、テーマの要素にCSSセレクタを書き換えて利用してください。

ボタンの均等幅表示はCSSのFlexBoxを利用しています。

最近始めて、FlexBoxを使ってみたのですが、めちゃくちゃ便利ですねこれ。(※最新のモダンブラウザではおおよそ大丈夫ですが、ブラウザによっては、動作に変化があったりするのが難点。)

参考 CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG

参考 CSS Layout – Flexbox

動作確認

上記のようにカスタマイズして、グローバルナビのスライドインメニューと、サイドバーのスライドインエリアを実装することができました。

グローバルナビのスライドインメニュー サイドバーのスライドインエリア

このサイトでも、スマホで表示させた場合は、同様の仕様になっています。(※キャッシュが残っていると正常動作しないので、表示が崩れたり、ボタンが動作しない場合などは、リロードボタン押してください。)

子テーマのダウンロード

一応、今回作成したSimplicityの子テーマを以下に置いておきます。

Sidrファイルを放り込んだあと、編集したのは以下のファイルのみです。

  1. css/sidr-menu.css
  2. header-insert.php(CSSファイルの呼び出し)
  3. footer-insert.php(HTMLとjQueryコード)

まとめ

このような感じで、スマホ操作用のインターフェースを作成してみました。

スマホの操作は好みが分かれるんと思うので、これらが便利かどうかはさておき、サイドバーなどは、面白い仕様になったのではないかと思います。

スタイルの細かな部分は、まだ調整が必要かもしれませんが、それぞれのテーマに合わせて調整していただけると幸いです。

『WordPressのメニューとサイドバーをスマホ用に横からスライドイン表示させるカスタマイズ方法』へのコメント

  1. 名前:さや 投稿日:2015/03/21(土) 08:11:24 ID:1943e7733

    わいひらさん、おはようございます。

    上記、子テーマを使用してもボタンは表示されるのですが
    メニュー、サイドバーが表示されません。

    よろしくお願いします

  2. わいひら 名前:わいひら 投稿日:2015/03/21(土) 13:38:39 ID:df92dc95e

    こちらの環境では、動作しているので、上記の情報のみから推測するとしたら、キャシュが原因のような気がします。

    ブラウザをリロードしてだめなら、キャッシュを削除してください。
    また、他にも以下にあるようなことが原因の可能性もあります。
    http://wp-simplicity.com/trouble-guideline/

  3. 名前:dalahast 投稿日:2015/03/22(日) 09:59:06 ID:8926b131e

    わいひらさん、こんにちは。早速実装してみましたところ以下現象がでております。

    【現象】
    Menuのスライドは問題なく表示されるのですが、
    Slidebarのスライドはスライドはできるが、スライドインするサイドバーがなぜか大きさがPC版のままで表示される。

    追加で質問ですが、寝ログサイトをスマホで表示し、スライドバー(Menu,Sidebarとも)上部に「×」でクローズできるようになっていますが、こちらはどのように設定すればよいのでしょうか?
    デフォルトでは下部のナビゲーション上で「×」をすることでクローズできるようになっているのですが、感覚的に寝ログサイトのような位置が使いやすかったのでご質問させていただきました。

    宜しくおねがいいたします。

  4. わいひら 名前:わいひら 投稿日:2015/03/22(日) 11:32:49 ID:fa0e72ded

    dalahasさんこんにちは。

    サイトを拝見して見たところ、幅はちゃんと表示されているようです。
    そうなると現状、一番怪しいのはブラウザキャッシュということぐらいしかわからないです。

    あと、この記事はあくまで「こうしたらこのようにできますよ」というサンプルですので、変更部分のカスタマイズは自前で実装していただくしかないです。

    もう既に、Simplicityには実装してあって、次のバージョンを公開するのみとなっているので、それまで待つという手もあります。

  5. 名前:dalahast 投稿日:2015/03/22(日) 12:46:11 ID:8926b131e

    >>Simplicityには実装してあって

    ますます使い勝手がよくなって助かります。
    次のバージョン公開楽しみにしております!

  6. 名前:ころろ 投稿日:2015/10/23(金) 08:19:37 ID:12fb1384e

    こんにちは。いつもお世話になります(^o^)ありがとうございます。

    こちらをダウンロードして、実装したところ、同じようにサイドバーしか表示されませんでした。

    それで一瞬見えたのですが、
    サイドバーのメニューの下に他のアイコンが縦に並んでいる?みたいでした。
    気力尽きて、まだ続きを手をつけていない所なのですが

    縦に並んでいる可能性はありますでしょうか?
    何とか部分的にはいじれても、基本を理解してないので、自分の思うようにCSSを組み立てられないレベルです。すみません。
    よろしくお願いいたします。

  7. 名前:ころろ 投稿日:2015/10/23(金) 19:59:38 ID:9c60759fb

    すみません!新しいバージョンで実装されていたのを見つけられずにコメントしてしまいました。ちゃんと表示できました。
    いつも素晴らしい機能開発を本当にありがとうございます。

  8. わいひら 名前:わいひら 投稿日:2015/11/14(土) 11:02:40 ID:a210ea93e

    返信が遅れて申しわけありません。
    うまくいったようでよかったです。
    基本的に、寝ログで紹介しているカスタマイズ記事は、Simplicityで実装していることも多いです。(全てではないです)