VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

WordPressでJavaScriptを使って折りたたみリンクメニューを作成

メニュー内の項目が増えてきましたので、下記サイトを参考にして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②”で遷移してくるメニューを作成
モバイルバージョンを終了