スマートフォンサイトを作ろう!(4)スライドメニューを作る

0
    JUGEMテーマ:wordpress

    今回のテーマは「スライドメニューを作る」です。

    スライドメニューはjQueryの「jPanelMenu」というプラグインを使いました。
    スクリプトのダウンロードはjPanelMenu.comからどうぞ。
    ダウンロードしたら、中にある「jquery.jpanelmenu.min.js」というファイル(どこかにあるので探してみてください)を、「¥wp-content¥themes¥pepa-sp¥js」の下に「jPanelMenu」というフォルダを新しく作って入れておきます。

    このスクリプトの読み込みは、footer.phpで行います。
    header.phpで読み込むと、読み込みが終わってからメインのコンテンツが表示されることになるため、その分表示が遅れます。footer.phpで読み込んでも、画面が表示されていきなりスライドメニューを操作に行く人はいないので、十分間に合うという計算です。

    footer.phpの中身は、次のようにします。
    <前略>
    <?php wp_enquere_script('jPanelMenu', get_stylesheet_directory_uri().'/js/jPanelMenu/jquery.jpanelmenu.min.js', array('jquery')); ?>
    <?php wp_footer(); ?>
    <script>
        jQuery(function($) {
            var jPM = $.jPanelMenu({
                menu: '#slider',
                trigger: '#menu_button',
                direction: 'right'
            })
            jPM.on();
        });
    </script>
    </body>
    </html>
    


    1行目で、jPanelMenuのスクリプトとjQueryのスクリプトを読み込んでいます。
    5〜9行目でjPanelMenuのセッティングをします。メニューに表示されるのはid=sliderの部分、スライドメニュー表示のトリガーとなるボタンはid=menu_buttonとし、スライドメニューは画面右側に現れるように設定しました。
    そして10行目でjPanelMenuを作動、というかスタンバイ状態にしています。

    次に、スライドメニューとして呼び出される「slider.php」を作ります。
    といっても中身はこれだけです。
    <div id='slider'>
        <?php wp_nav_menu('menu=slider'); ?>
    </div>
    


    具体的なメニューは「slider」という名前でWordPressのメニュー機能で作ってやればいいのです。
    作り方はこんな感じ。


    外観>メニューから、左の固定ページを選択し、すべて表示タブから「すべて選択」でつくったメニューがこんな感じです。お手軽です。aboutのページだけメニューの名称を「このサイトについて」に変更してみました。

    作ったこのメニューはfooter.phpから呼び出しておくことにしましょう。
    footer.phpのfooterブロックの直前に、
            <?php get_template_part('slider'); ?>
    

    と書いて呼び出しておきます。
    これで実際に画面のフッターの上部にメニューが表示されてしまいますが、あとでcssで非表示にしてやるので、とりあえずおいておきましょう。

    では次にこのスライドメニューを呼び出すボタンを作ります。
    「header.php」の<h1>タグのすぐ下に、次のように追記します。
    <div id="global_nav" role="navigation">
        <ul>
            <li class="gnav">
                <a id="menu_button" href="#">
                    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/menu.png" width="50" height="30" alt="MENU" />
                </a>
            </li>
        </ul>
    </div>
    


    メニューボタンはとりあえず拾った画像を「/images」フォルダにmenu.pngという名前で入れておきます。
    5行目に出てくるphpのコマンドは、現在読み込んでいるstyle.cssがおいてあるフォルダを返してくれるコマンドです。

    これで準備は整いました。
    ちょっと表示してみましょう。
    一旦ブラウザの表示幅を画面の幅に合わせてから、トップページを再読み込みしてやります。


    そして、タイトル下の「MENU」ボタンをクリックすると、


    画面が左にずれて、メニューが表示されました。


    では今回はここまで。次回はスライドメニューの体裁を整えます。
     


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天