メニュー内の項目が増えてきましたので、下記サイトを参考にして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②”で遷移してくるメニューを作成 関連記事の目次
-
WordPress設定
- WordPressリファレンス、メモ
- パーマリンク設定時のApache設定
- WordPressテーマの選定
- WordPressで画像のアップロード、サイズ調整、リンクを設定
- マルチサイト化に伴う制約、デメリット
- WordPressのwp-config.phpでテーブルプレフィックスを変更
- WordPress投稿のリビジョン管理と自動保存
- WordPressディレクトリのパーミッションをセキュアに
- WordPressの認証用ユニークキーをセキュアに
- WordPressのバージョン情報を表示しないようにする
- WordPressでGoogleの2段階認証プロセスを使用する手順
- WordPressの更新情報・要件、各バージョンの新機能
- WordPressデータベースのバックアップとリストア
- WordPress用データベースバックアップをbashスクリプトとcronで定期実行
- WordPressのバージョンアップと旧バージョンへの戻し
- WordPressの記事をサイト間でコピーする方法
- WordPressのアップデート方法の種類、注意点
- WordPressのメンテナンスモード、カスタムメンテナンスページ
- WordPressでデバッグを有効にする方法
- WordPressの投稿内でJavaScriptを使う方法
- WordPressでJavaScriptを使って折りたたみリンクメニューを作成
- 自ブログ動作確認時にGoogleアドセンスの広告を表示しない
- WordPressでAngularJSを使ったGoogleマップを使えるようにする
- WordPressの投稿にAngularJSのディレクティブを記述する方法
セキュリティ
メンテナンス
その他、応用