この記事では最近スマホ向けWebページでよく見かける、あのにゅーっと出るメニューをWordPressサイトに実装し、さらにカスタムメニューとして編集できるようにする方法について紹介します。

【参考】
テーマのサンプルコード置き場：過去記事「この章のテーマファイル」
テーマを適用したサイト例：bousai.hitsuji.me

目次

  1. jQueryプラグイン・PageSlideを利用する
  2. javascriptを動作させる
  3. PageSlideに対応したhtmlを出力させる
  4. スタイルを指定する

 

jQueryプラグイン・PageSlideを利用する

スマホ向けメニュー表示ツールは巷に色々あるようですが、今回はPageSlideというjQueryプラグインを利用することにします。
PageSlideのサイトはここ
プラグインをダウンロードすると、レスポンシブサイト向けのサンプルコードも同梱されています。この記事ではそのサンプルコードを参考にしながら下記の３点を実装していきます。

 

３つのjavascriptを実行させる

  • jQuery本体
  • PageSlideプラグイン本体
  • PageSlideを実行するための短いコード

WordPressサイト実行時にjavascriptを走らせるために、まずfunctions.php内でこれら３つのファイルパスを指定します。さらにwp_head()とwp_footer()で<script>タグを出力させます。

補足：header.phpなどに直接<script>タグを書いてもjavascriptは動きません。

 

PageSlideに対応したhtmlを出力させる

PageSlideを動かすためには、リンクタグとリストタグをプラグインが指定する形式で出力する必要があります。大間かに言えば、リンクタグはメニューアイコン画像と、リストタグはメニューの中身とがそれぞれ紐づいています。そして、このリストタグをwp_nav_menu()で出力することで、WordPressのカスタムメニュー機能と連動して動かすことが出来ます。

 

CSSを指定する

PageSlideが利用しているスタイルシートを読み込ませるようにします。また、ユーザーが書き換えられる部分（メニューの色とか）を自分で指定します。また、メニューを開くためのアイコン用の画像を用意します。ここではHight Resolutionに対応させるため、通常解像度画像と倍解像度画像の２種類を用意します。

 

javascriptを動作させる

WordPressで３つのjavascriptを動かします。jQuery本体を読み込む<script>タグを<head>部に出力し、PageSlideプラグイン本体およびPageSlideを実行させるためのコードを<body>タグ直前に出力させます。

WordPressサイトでjavascriptを動かすには、直接header.phpに<script>タグを書いても動作しません。functions.phpに次のようなコードを挿入して、スクリプトファイルパスをWordPressコアの処理に対して登録＆出力するようにカスタマイズします。

functions.php
// javascript
function myJavaScript_head() {	
	wp_deregister_script('jquery');
	wp_register_script('jquery',get_bloginfo('template_url'). '/js/jquery-1.7.1.min.js');
	wp_enqueue_script('jquery');
	wp_enqueue_script('pageslide', get_bloginfo('template_url'). '/js/jquery.pageslide.min.js', array('jquery'), false, true);
	wp_enqueue_script('mypageslide', get_bloginfo('template_url'). '/js/myPageslide.js', array('jquery'), false ,true);
}
add_action('wp_head', 'myJavaScript_head', 1);

 

ここではまず、元々WordPressに入っているjQueryを一旦解除しています。

wp_deregister_script('jquery');

PageSlideがサポートしているjQueryとWordPressに入っているjQueryのバージョンが異なると困るので、そのようにしています。

wp_register_script('jquery',get_bloginfo('template_url'). '/js/jquery-1.7.1.min.js');

改めて自分で用意したjQueryをWordPressにハンドル名”jquery”として登録します。この例ではテーマフォルダ内の/jsにjQuery本体を置いています。google ajaxのjQueryを指定する場合は、そのURLを第二引数として指定すればOKです。

wp_enqueue_script('jquery');

登録した”jquery”を、実際に出力するように指定します。出力順は、wp_enqueue_script()を呼び出した順番に従います。

wp_enqueue_script('pageslide', get_bloginfo('template_url'). '/js/jquery.pageslide.min.js', array('jquery'), false, true);
wp_enqueue_script('mypageslide', get_bloginfo('template_url'). '/js/myPageslide.js', array('jquery'), false ,true);

続いてPageSlide本体＆追加スクリプトの２つを読み込むよう指定します。依存するスクリプトとして”jquery”を指定します（第３引数）。共にフッター部に出力したいので、第５引数でtrueを指定します。

header.php

実際に<script>タグを出力します。

...
<?php wp_head(); ?>
</head>
<body>
...
footer.php

<body>タグ直前に<script>タグを出力します。

...
<?php wp_footer(); ?>
</body>
</html>

 

以上で、javascriptを実行する準備が整いました。

 

PageSlideに対応したhtmlを出力させる

PageSlideのサンプルコード（responsive.html）の一部を抜粋引用します。

<h1><a class="open" href="#nav">Menu</a>PageSlide Responsive Demo</h1>
<ul id="nav">
    <li><a href="">Menu Item 1</a></li>
    <li><a href="">Menu Item 2</a></li>
    <li><a href="">Menu Item 3</a></li>
    <li><a href="">Menu Item 4</a></li>
    <li><a href="">Menu Item 5</a></li>
</ul>

この形式に考慮してheader.phpを書き換えます。

header.php
<h1 id="site-title"><a class="open" href="#nav">メインメニュー</a><a id="site-title-link" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<nav>
    <?php wp_nav_menu(array(
                'theme_location'=>'mainmenu', 
                'container'     =>'', 
                'menu_class'    =>'',
                'items_wrap'    =>'<ul id="nav">%3$s</ul>'));
    ?>
</nav>

１行目はサイト名とホームURLをbloginfo()で出力するように変更しました。またリスト部分をカスタムメニューの出力関数・wp_nav_menu()に置き換えます。’items_wrap’を<ul id=”nav”>…とすることで、サンプルコードのような番号無しリストul#navの形式で出力することが出来ます。

なお上の例ではメニューを<nav>タグで囲っていますが、これはPageSlide利用上の要請ではありません。私が作成したテーマをhtml5-likeに作成しているため<nav>タグでマークアップしているだけです。

functions.php

カスタムメニューを登録しておきます。

register_nav_menu('mainmenu', 'メインメニュー');

なおカスタムメニューの基本的な使い方については、過去記事「カスタムメニューを設置する」を参照してください。

 

スタイルを指定する

PageSlideが動作上利用しているidの#PageSlideのスタイルを指定します。PageSlideが配布しているサンプルコードに入っているcssファイルを読み込むように指定します。メニューの色・幅指定はこのcssを編集して行います。

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jquery.pageslide.css" type="text/css" />

また、メニューを開くアイコン画像をclass属性.openを使って指定します。モバイル向けスタイル指定の中ではアイコン画像を表示して、余計な文字が表示されないようにtext-indent: -999999px; で飛ばしておきます。PC向けスタイル指定の中ではdisplay: none; で非表示指定します。

メニューリストのid#navは、モバイル向けサイトでは非表示指定しておきます。これはアイコンがクリックされる前はメニューを閉じておく必要があるからです。PC向けサイトでは最初から表示しておきます。

style.css
/* 基本レイアウト（mobile firstなので、スマホ向け指定となる） */ 
.open {
    display: block;
    float: left;
    width: 40px;
    height: 30px;
    background: url(img/menu_1x.png) center center no-repeat;
    background: -webkit-image-set( url(img/menu_1x.png) 1x, url(img/menu_2x.png) 2x ) center center no-repeat;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    text-indent: -999999px;
}
#nav {
    display: none;
}
...
/* 大型タブレット以上のレイアウト */
@media only screen and (min-width: 715px) {
    /* メインメニューを通常のスタイルで表示する */
    #header h1#site-title a#site-title-link {
        float: none;
        margin-right: 0;
    }
    .open {
        display: none;
    }
    #nav {
        display: inline-block;
        overflow: hidden;
        margin-top: 16px;
    }
    #nav li {
        float: left;
        margin-right: 1.6em;
    }
    #nav li a {
        display: block;
        text-decoration: none;
        color: #333;
        padding: 3px;
    }
    #nav li a:hover {
        background-color: #B0E0E6;
    }
...

 

以上で、メニューの実装が終わりました。

 

関連ページ

 

「実践的テーマの作成」の記事