スマホ向けメニューをカスタムメニューに対応するスマホ向けメニューをカスタムメニューに対応する2014年3月8日この記事では最近スマホ向けWebページでよく見かける、あのにゅーっと出るメニューをWordPressサイトに実装し、さらにカスタムメニューとして編集できるようにする方法について紹介します。【参考】テーマのサンプルコード置き場:過去記事「この章のテーマファイル」テーマを適用したサイト例:bousai.hitsuji.me目次jQueryプラグイン・PageSlideを利用する3つのjavascriptを実行させるPageSlideに対応したhtmlを出力させるCSSを指定するjavascriptを動作させるfunctions.phpheader.phpfooter.phpPageSlideに対応したhtmlを出力させるheader.phpfunctions.phpスタイルを指定するstyle.cssjQueryプラグイン・PageSlideを利用するスマホ向けメニュー表示ツールは巷に色々あるようですが、今回はPageSlideというjQueryプラグインを利用することにします。PageSlideのサイトはここプラグインをダウンロードすると、レスポンシブサイト向けのサンプルコードも同梱されています。この記事ではそのサンプルコードを参考にしながら下記の3点を実装していきます。3つのjavascriptを実行させるjQuery本体PageSlideプラグイン本体PageSlideを実行するための短いコードWordPressサイト実行時にjavascriptを走らせるために、まずfunctions.php内でこれら3つのファイルパスを指定します。wp_head()とwp_footer()で<script>タグを出力させます。補足:header.phpなどに直接<script>タグを書いてもjavascriptは動きません。PageSlideに対応したhtmlを出力させるPageSlideを動かすためには、リンクタグとリストタグをプラグインが指定する形式で出力する必要があります。大間かに言えば、リンクタグはメニューアイコン画像と、リストタグはメニューの中身とがそれぞれ紐づいています。このリストタグをwp_nav_menu()で出力することで、WordPressのカスタムメニュー機能と連動して動かすことが出来ます。CSSを指定するPageSlideが利用しているスタイルシートを読み込ませるようにします。ユーザーが書き換えられる部分(メニューの色とか)を自分で指定します。メニューを開くためのアイコン用の画像を用意します。Resolutionに対応させるため、通常解像度画像と倍解像度画像の2種類を用意します。javascriptを動作させるWordPressで3つのjavascriptを動かします。jQuery本体を読み込む<script>タグを<head>部に出力し、PageSlideプラグイン本体およびPageSlideを実行させるためのコードを<body>タグ直前に出力させます。WordPressサイトでjavascriptを動かすには、直接header.phpに<script>タグを書いても動作しません。functions.phpに次のようなコードを挿入して、スクリプトファイルパスをWordPressコアの処理に対して登録&出力するようにカスタマイズします。1);ここではまず、元々WordPressに入っているjQueryを一旦解除しています。wp_deregister_script('jquery');PageSlideがサポートしているjQueryとWordPressに入っているjQueryのバージョンが異なると困るので、そのようにしています。'/js/jquery-1.7.1.min.js');改めて自分で用意したjQueryをWordPressにハンドル名”jquery”として登録します。この例ではテーマフォルダ内の/jsにjQuery本体を置いています。ajaxのjQueryを指定する場合は、そのURLを第二引数として指定すればOKです。wp_enqueue_script('jquery');登録した”jquery”を、実際に出力するように指定します。出力順は、wp_enqueue_script()を呼び出した順番に従います。true);続いてPageSlide本体&追加スクリプトの2つを読み込むよう指定します。依存するスクリプトとして”jquery”を指定します(第3引数)。共にフッター部に出力したいので、第5引数でtrueを指定します。header.php実際に<script>タグを出力します。?></head><body>...footer.php<body>タグ直前に<script>タグを出力します。?></body></html>以上で、javascriptを実行する準備が整いました。PageSlideに対応したhtmlを出力させるPageSlideのサンプルコード(responsive.html)の一部を抜粋引用します。5</a></li></ul>この形式に考慮してheader.phpを書き換えます。?></nav>1行目はサイト名とホームURLをbloginfo()で出力するように変更しました。リスト部分をカスタムメニューの出力関数・wp_nav_menu()に置き換えます。id=”nav”>...とすることで、サンプルコードのような番号無しリストul#navの形式で出力することが出来ます。上の例ではメニューを<nav>タグで囲っていますが、これはPageSlide利用上の要請ではありません。私が作成したテーマをhtml5-likeに作成しているため<nav>タグでマークアップしているだけです。functions.phpカスタムメニューを登録しておきます。'メインメニュー');なおカスタムメニューの基本的な使い方については、過去記事「カスタムメニューを設置する」を参照してください。スタイルを指定するPageSlideが動作上利用しているidの#PageSlideのスタイルを指定します。PageSlideが配布しているサンプルコードに入っているcssファイルを読み込むように指定します。メニューの色・幅指定はこのcssを編集して行います。/>また、メニューを開くアイコン画像をclass属性.openを使って指定します。