メニュー内の項目が増えてきましたので、下記サイトを参考にしてJavaScriptで折りたたみリンクメニューを作成しました。
折りたたみメニュー
WordPressでのJavaScript使用方法は、下記記事でも確認しました。
WordPressの投稿内でJavaScriptを使う方法
1)JavaScriptを外部ファイルに作成
$ cd /var/www/html/wptest/wp-content/themes/twentytwelve/js
$ vi oritatami.js
function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; }
2)メニューを記述する投稿または固定ページにJavaScriptで折りたたみメニュー作成
・ここでは、投稿内で1)で作成したJavaScriptをインクルードしています。
・メニューは2階層のメニューを作成しています。
・下記サンプルコードでは、ブラウザの設定でJavaScriptがオフになっている場合は、”URL①”、”URL②”のページに遷移します。
“URL①”、”URL②”にJavaScriptを使わずに作成したメニューを用意しておき、JavaScriptがオフでもメニューが使用できるようにします。
<script src="http://example.com/wptest/wp-content/themes/twentytwelve/js/oritatami.js" type="text/javascript"></script> <a href="URL①" onclick="oritatami('o0');return false">メニュー1</a> <div id="o0" style="display:none"> <ul> <li><a href="URL">項目1</a> <li><a href="URL">項目2</a> <li><a href="URL">項目3</a> </ul> </div> <a href="URL②" onclick="oritatami('o1');return false">メニュー2</a> <div id="o1" style="display:none"> <ul> <li><a href="URL">項目1</a> <li><a href="URL">項目2</a> <li><a href="URL">項目3</a> <li><a href="URL" onclick="oritatami('o2');return false">サブメニュー</a> <div id="o2" style="display:none"> <ul> <li><a href="URL">項目1</a> <li><a href="URL">項目2</a> <li><a href="URL">項目3</a> </ul> </li> </ul> </div>
3)JavaScriptオフ用のメニューページを作成
JavaScriptがオフの場合に、2)の”URL①”、”URL②”で遷移してくるメニューを作成 関連記事の目次