[ 解決済 ] サイドバーをアコーディオンにしたい

[natsukoshio]

■ WordPress のバージョン
5.8.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.14.0

■ Pro Unit のバージョン
1.21.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
階層構造になっているナビゲーションメニューをサイドバーに配置した際に、
１階層目をクリックしたら、２階層目のメニューを表示出来るようにしたいです。

■ 自分で試した事
https://webukatu.com/wordpress/blog/6087/

これらのサイトを参照にしてみました・・・

ウィジェットのナビゲーションメニューのところに
カスタムhtmlで下記を入れてみましたがうまくいきません。

どなたか教えて頂けませんか？

<script>
const menu = document.querySelectorAll(“.menu-item-has-children”);

function toggle() {
const sub-menu = this.nextElementSibling;
this.classList.toggle(“is-active”);
content.classList.toggle(“is-open”);
}

for (let i = 0; i < menu.length; i++) {
menu[i].addEventListener(“click”, toggle);
}
</script>

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
100ページくらいある固定ページと
ブログのアーカイブが長々と連なり非常に見にくい（醜い？）ページになっております。

できれば

jQueryでアコーディオンメニューをサクッと作ろう【コピペOK】

に書いてあるとおり、既に空いてて、
別の所をクリックされたら閉じる仕様になったら最高です。

どなたか助けて頂けませんか？

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

アコーディオンでなければ

外観 > カスタマイズ > Lightning デザイン設定 > その他の設定 から 固定ページの孫ページを非表示にする

にチェックを入れれば… と思ったのですが、 G3 でその機能がなくなっていました。

取り急ぎ 外観 > CSSカスタマイズ に

.localNav ul ul.children	{ display:none; }
.localNav ul li.current_page_ancestor ul.children,
.localNav ul li.current_page_item ul.children,
.localNav ul li.current-cat ul.children{ display:block; }
.localNavi ul.children	{ display:none; }
.localNavi li.current_page_ancestor ul.children,
.localNavi li.current_page_item ul.children,
.localNavi li.current-cat ul.children{ display:block; }

とかではいかがでしょうか？

[natsukoshio]

すみません、何が原因か分からないのですが、アコーディオンにはなってないです。

[石川＠Vektor,Inc.]

先のCSSは、アコーディオンは少しハードルが高いので、

「アコーディオンにはならないけれどもアクティブじゃない下階層は非表示になる」

というものになります。

アコーディオンでないといけない場合は引き続き誰かがカスタマイズコードを提示してくれるのをお待ちください。

[対馬 俊彦]

アコーディオンの動作をさせるのはかなり手間がかかると思いますし、そもそもナビゲーションメニューはアコーディオンにしづらい構造になっていると感じます。

もし該当 URL のサイドバーのメニューをアコーディオンにできたとしても、親メニュー項目である「新型コロナ関連」などのページを開くことができなくなるのでは…?

固定ページに VK Blocks Pro のアコーディオンを使ってサイトマップ的なメニューページを作るのはどうでしょうか？

[対馬 俊彦]

固定ページではなく、VK Blocks Pro のアコーディオンブロックをウィジェットに配置して、ご希望に近いことができそうですね。

[natsukoshio]

皆様、ありがとうございました！
結局、ワードプレス既存のメニューを使わずに、
固定ページにhtml<details>を使ったアコーディオンページを作りました。
それを固定ページ本文ウィジェットを使ってアコーディオンのサイドバーを作ることができました。
（htmlやCSSはネットから拾って加工中）

これでたくさんメニューが有るサイトでもスッキリしたページに出来ます。

Lightningは中小企業のコーポレートサイトにピッタリなテーマなのでとても助かってます。
いつもありがとうございます！

[投稿者]

投稿