おはようございます。今日は平日なんですが、Wordpressに関する話題を。私自身検索しても見つからず苦労したので、皆様の時間短縮に役立てて頂ければと出稿します。
素材は、wordpressで使えるレスポンシブ用ドロップダウンメニュー「TinyNav」です。このスクリプト、メディアのサイズに合わせて自動でレスポンシブ用のドロップダウンメニューに変換してくれるというスグレモノなんですが、実際に使えるのかどうか、なども含めて検討していきます。
今日のポイント
・WordpressでTinyNavの設定通りにやって上手くいかない場合、Jqueryのバージョンを1.7.1にすると動作する。
まずは結論から
結論は上記のとおりです。ファイルを設置して、スクリプトをペーストし、スタイルシートに書き込んでスマホで確認する。メニューは消えてるけれど、代わりに表示されるべき「.tinynav」クラスのナビゲーションが出てこない。
この場合、ご自身がされたスクリプトの文法やスタイルシートの設定を見直す前に、まず、Jqueryのバージョンを確認し、1.7.2であれば、1.7.1にダウングレードしてみましょう。私は最終的にこれで動きました。
Jqueryのダウングレード方法
Jqueryは、通常＜wp_head＞で書き出されますので、header.phpの＜wp_head＞直前あたりにスクリプトを書き足すことによってダウングレードします。以下は、外部ライブラリから引っ張ってくる一例です。
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js');
?>
TinyNavの使い勝手
さて、この超便利、超軽量のTinyNavですが、使い勝手はどうでしょう。
私は、レスポンシブを意識してメニューを作る際は、親メニューの配下に子メニューを配置して、いわゆる入れ子状態にする場合、親メニューにはURLを入れずにブランクにしています。
つまり、「会社概要」というカテゴリーに「会社概要」「社歴」「代表者挨拶」の三つを入れたい場合、親メニューは「会社概要（ブランク）」にして、子メニューに「会社概要」「社歴」「代表者挨拶」とします。
こうすることで、タブレットデバイスからブラウズする際、親メニューの「会社概要」をタップすると、ページが切り替わることなくドロップダウンで子メニューの三つが表示されます。
もちろん、パソコンから閲覧する際にはメニューが重複表示されるような形になりますが、親メニューにはマウスを当てても、矢印が指に切り替わらないので、そこがクリックできる要素でないことはすぐにわかります。
一方、親メニュー自体にリンクを設定すると、タブレットから操作する際に、親メニューをタップすると同時にページが切り替わるため、操作しづらい、という難点があります。
そこで、このTinyNavですが、私の方法のように、親メニューをブランクにしても、親メニューをセレクトできてしまうため、４０４ページに飛んでしまうことになります。
つまり、このTinyNavを使うには、そのままでは空メニュー項目は使えないことになります。
まとめ
このように、TinyNavは軽量で手軽ではあるものの、タブレットとモバイル双方に使うには、少し工夫が必要ですね。
ご参考になれば。