長い文章を折りたたむWordPressショートコード

WordPress

ソースコードなどの長いリストを書いた時、ボタン一つで折りたたみができるショートコードを作りました。

スポンサーリンク

表示非表示の切り替えボタンで折り畳み

表示非表示の切り替えは、こちらのサイトを参考にさせていただきました。

折りたたみ用のソースコードは、記事毎のカスタムCSSに記載することで適用することができます。

 

サンプル

この文章を普段は隠しておけます。
ボタン一つで表示できます。

ショートコードで使いやすく

折りたたみたい部分の前後に毎回ソースコードを埋め込むのは面倒なので、ショートコード化しました。

ショートコードは、function.phpとstyle.cssに記載する必要があります。
これらのファイルを編集するときは、子テーマを使ってください。そうしないとテーマをバージョンアップすると消えてしまいます。

今回作ったショートコードは、[fold]]から[[/fold]で囲って使います。
囲まれた範囲が非表示となり、表示用のボタンが設置されます。

1記事に複数設置したい場合は、idオプションをつけて囲み部分を区別してください。

[fold id="first"]]
一つ目
[[/fold]
[fold id="second"]]
二つ目
[[/fold]


一つ目


二つ目

idオプションをつけなかった場合、1つ目に設定された非表示部分のみが切り替わってしまいます。

[fold]]
一つ目
[[/fold]
[fold]]
二つ目
[[/fold]


一つ目


二つ目

ソースコード

function.phpとstyle.cssに以下の内容を追加してください。

 

WordPress
スポンサーリンク
スポンサーリンク
三日坊主のメモ

コメント

タイトルとURLをコピーしました