ワードプレスで折りたたみ機能を表示する方法がわかりません。添付のような…

WordPress解決済み
momoさん
momo

ワードプレスで折りたたみ機能を表示する方法がわかりません。

添付のような折りたたみ機能(アコーディオン機能)を表示したく、色々調べましたが見つかりません。
アフィンガー6を使っており、テーマ付属のSTINGERスライドが機能として近いんですが、入れ子の表示ができません。
プラグインも探し、『ショートコード Ultimate』というものを使いましたが、サイズや色、入れ子などのカスタマイズができずに諦めました。

CSSやHTMLなどをさわる知識は無いブログ入門者です。
プラグインかワードプレスの機能等で
なにか方法があれば教えていただければ幸いです。

添付された画像

みんなのコメント 7件

ベストアンサー

ユーザー694さん
ユーザー694さん

サイズ・色・入れ子等の細かい調整まで必要ならプラグインだけで表示するのは難しい気がしますね。この機会にHTMLやCSSを少しだけ学んでみるのがいいと思います。

自動で閉じない簡素なアコーディオンのHTMLとCSSを作ってみました(添付画像参照。ただしCocoon+クラシックエディタでテストしたので他の環境だとちょっと違う感じになる可能性あり)。コードの書き込みができないのでテキストファイルに書いてアップローダーに置いています。こちらを学習の手がかりにしてみてはいかがでしょうか。

ダウンロードURL(有効期限3日)(パスワード:accordion)
https://www.datadeliver.net/receiver/file_box.do?fb=9593c05273af44fb9b20fda8d089f2a2&rc=1564f4a975ee4b738f7401dceb7c42d8&lang=ja

添付された画像

質問者からのお礼コメント

momoさん
momoさん質問者

kiryuさん
アドバイスくださりありがとうございます。
また、コードのテキストありがとうございました。
さっそくダウンロードさせていただきました。
週末に時間をとってじっくりと取り組んでみようと考えています。

ユーザー660さん
ユーザー660さん

momo さん

「WordPress アコーディオン プラグイン」と検索することでいろいろと出てきますよ。

以下の記事で複数の該当プラグインが紹介されているので見てみてください。
https://wpcamp.idea-hack.com/blog/5-wordpress-accordion-menu-plugins/

WordPress のプラグイン検索にて「Accordion」と検索してもいろいろと出てきます。

是非お好みのものを探してみてください。

ユーザー660さん
ユーザー660さん

番外編ですが、CSS と HTML だけでアコーディオン機能を実装することもできる模様です。
https://yuzuyu3.com/css-accordion-box/

本来こちらの方が、CSS をいじるだけでデザインのカスタマイズも簡単にできるので良いのですが。。。
今後の参考までに、興味があればみてみてください。

ちなみに、プラグインで好みのデザインのものがなかったとしても、CSS をいじれば好みのデザインにカスタマイズすることが可能です。

CSS は一見難しそうですが、例えばテキストのフォントやサイズ・色など、少し勉強するだけで比較的簡単に好みのデザインをカスタマイズすることができるようになるので、もしよければ勉強することをオススメします。

momoさん
momoさん質問者

お世話になります
ご丁寧にアドバイスくださりありがとうございます
教えていただいたページを参考にCSSにも少しづつ取り組んでいきたいと思いました

ユーザー660さん
ユーザー660さん

momo さん

まだ手は出さないかと思いますが、CSS でカスタマイズする場合は、管理画面の[外観]→[カスタマイズ]→[追加 CSS]と進んで、[追加 CSS]にコードと記載して利用するようにしてくださいね。

テーマファイルの style.css などを直接いじってしまうと、テーマのアップデートがあった際などに初期化されてしまうのですが、[追加 CSS]であればその心配もありませんので。

まずは、好みのプラグインを見つけていただき、さらにそのプラグインのデザインを少し変えたいというときにまたご相談いただければ、何らかのアドバイスなどができるかと思います。

よろしくお願いいたします。

momoさん
momoさん質問者

@j_jetstreamさん
お世話になります
いつもアドバイスくださりありがとうございます
ブログを運営するうえでCSSの知識は必要ですよね
この機会に勉強をはじめてみようと思いました

あなたの経験や知識を共有しませんか?

ほかのユーザーの相談に、コメントで参加してみましょう。

ログインしてコメントするはじめての方は無料登録