こんにちは!公(おおやけ)@ooyake_memoです。
カテゴリー数が増えてくるとゴチャゴチャして
まとまりがないなと思って
今回キレイにまとめてみました。
プラグイン1つでちょちょいのチョイなんで
誰でも簡単に出来ると思います。
プラグイン:jQuery Vertical Accordion Menuのダウンロード
WordPressのプラグイン追加画面から
検索をかけてもでてこないので
こちらの公式ページからダウンロードしてください。
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-95.png?resize=728%2C368&ssl=1)
1年以上更新がないと検索しても
でてこないみたいです。
ダウンロードファイルをアップロードする
管理画面のプラグインをクリック
次に新規追加をクリック
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-91.png?resize=649%2C464&ssl=1)
プラグインのアップロードをクリック
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-92.png?resize=728%2C213&ssl=1)
このファイルを選択しインストール
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-93.png?resize=139%2C182&ssl=1)
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-94.png?resize=444%2C115&ssl=1)
後は有効化をクリック
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-96.png?resize=339%2C100&ssl=1)
これでダウンロードしたプラグインは
無事ワードプレスにインストールされ
有効化されました。
カテゴリーメニューの作成
新規メニューを作成をクリック
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-98.png?resize=728%2C127&ssl=1)
メニュー名を入力【カテゴリー】
メニューを作成をクリック
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-99-1.png?resize=728%2C96&ssl=1)
表示させたいカテゴリーにチェック☑を
入れて追加していく
⇩
補足:カテゴリーに断層を付ける方法
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-101.png?resize=432%2C573&ssl=1)
こうなります
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-102.png?resize=495%2C382&ssl=1)
以上でメニュー作成は完了です。
作ったカテゴリーメニューをウィジェットに設置しよう
外観➡ウィジェット
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-103.png?resize=161%2C267&ssl=1)
jQuery Vertical Accordion Menuを
サイドバーへ持ってくる
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-105.png?resize=728%2C352&ssl=1)
アコーディオンメニューの設定
ここは自分好みに設定してください。
⇩
補足:クリックとホバーの違いは
親カテゴリーをクリックして開示するか
カーソルを合わせるだけで自動開示するか
の違いです。
⇩
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-106.png?resize=613%2C867&ssl=1)
設定が終わったら保存&完了で終了です。
トップページを開いてサイドバーには
このように開示されるはずです。
⇩※開示前
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/スクリーンショット-107.png?resize=355%2C168&ssl=1)
⇩※開示後
![](https://i0.wp.com/ooyakeblog.com/wp-content/uploads/2019/03/shuuseigo.png?resize=368%2C327&ssl=1)
お疲れさまでした。
以上、プラグイン
【jQuery Vertical Accordion Menu】での
簡単折りたたみカテゴリーの作成でした。
コメントを残す