WordPress の無料テーマ Cocoon を使うと、最初からデザインが整った環境でブログ記事を作成できます。
今回は、WordPress の無料テーマ Cocoon で使える「アコーディオン（トグル）」（旧：トグルボックス）ブロックを使い、長文の説明文やログなどを折り畳んで表示できるようにします。
それを使った際に、 > から始まる文章が引用ブロックに変換される問題などについても対処法を紹介します。
アコーディオン（トグル）ブロックの配置
WordPress 記事の編集ページの左上の「＋」ボタンを押してブロックタブを選択して、ブロック一覧を表示します。
一覧を下にスクロールしていくと Cocoon ブロックという見出しがあるので、その中の様々なブロックの中にある「アコーディオン（トグル）」を選択します。
アコーディオン（トグル）ブロックが追加されました。
既定では見出しは「アコーディオン見出し」と設定されています。
編集ページでも「＋」「－」ボタンを押すことで折りたたんだり、展開することができます。
見出しをクリックすることで文字列を編集できます。
あとは、展開した状態（「+」ボタンで開いた状態）のアコーディオン（トグル）ブロックの下側の「ブロックを選択するには「/」を入力」と書かれた部分に文字列などを入力することで、折りたたむことができるブロックを作成できます。
問題と対処法
アコーディオン（トグル）ブロックは、簡単に様々なブロックを展開・折りたたむことができて便利ですが、使用中に発生した問題が２つあるので、その現象と対処法を簡単なものですが紹介します。
整形済みテキストブロックの文を貼り付けると改行が消える
アコーディオン（トグル）ブロックに、ウェブサイトの文章をコピー＆ペーストしても改行を含んで正常にコピーできました。
しかし、編集ページの整形済みテキストブロックの文章をコピー＆ペーストすると改行が消えてしまいます。
これは、一度、テキストエディタ―などに貼り付けたものをもう一度コピーしてから、アコーディオン（トグル）ブロックの内容に貼り付けると対処できます。
> から始まる文章を貼り付けると > が消え引用ブロックになる
貼り付ける内容が偶然 PowerShell のコマンドのログで、先頭が > から始まる文字列をたくさん含んでいました。
それをアコーディオン（トグル）ブロックに、貼り付けると、> から始まる文章のかたまりがすべて引用ブロックに変わり、 > が除去されてしまいました。
引用ブロックから段落ブロックに変更しても、除去された > は復元されません。
この問題の解決法として、自動変換の機能を制御するなどのテクニックもありそうなのですが、今回は、整形済みテキストブロックに貼り付けることで対処することにしました。
アコーディオン（トグル）ブロックの内容の部分に整形済みテキストブロックを作成して、その中に先ほどの > から始まる文章を貼り付けると > は除去されず、何も変換されずに貼り付けることが出来ました。
結果
編集ページとプレビューページで見た目も動作も同じでした。
※筆者には同じに見えましたが、他の様々な条件によって変わるかもしれません。
Cocoon テーマのアコーディオン（トグル）ブロックは、「＋」「－」ボタンを押すことで、展開したり、折りたたむことが出来て、様々なブロックを内包できるので使い勝手が良いと思いました。
以下は「！！！https://compota-soft.work/wp1/wp-admin/post.php?post=19265&action=edit」で使用したアコーディオン（トグル）ブロックのコピーです。
PS C:\WINDOWS\system32> winsat formal Windows システム評価ツール > 正式な評価を実行しています > 実行中: 機能の列挙 '' > 実行時間 00:00:00.00 > 実行中: WinSAT Direct3D 評価結果 '-aname DWM -time 10 -fbc 10 -disp off -normalw 1 -alphaw 2 -width 1280 -height 1024 -winwidth C(1144) -winheight C(915) -rendertotex 6 -rtdelta 3 -nolock' > デスクトップ グラフィックスのパフォーマンスを評価中 > 実行時間 00:00:10.53 > 実行中: WinSAT Direct3D 評価結果 '-aname Batch -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 300 -batchcnt C(10) -objs C(26) -rendertotex 6 -rtdelta 3 -texpobj C(1)' > DirectX Batch のパフォーマンスを評価中 > 実行時間 00:00:00.14 > 実行中: WinSAT Direct3D 評価結果 '-aname Alpha -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 300 -batchcnt C(75) -objs C(26) -rendertotex 6 -rtdelta 3 -texpobj C(1)' > DirectX Alpha blend のパフォーマンスを評価中 > 実行時間 00:00:00.16 > 実行中: WinSAT Direct3D 評価結果 '-aname Tex -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 500 -batchcnt C(125) -objs C(20) -noalpha -texshader -totaltex 10 -texpobj C(4) -rendertotex 6 -rtdelta 3' > DirectX Texture load のパフォーマンスを評価中 > 実行時間 00:00:00.14 > 実行中: WinSAT Direct3D 評価結果 '-aname ALU -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 500 -batchcnt C(125) -objs C(20) -noalpha -alushader -totaltex 10 -texpobj C(1) -rendertotex 6 -rtdelta 3' > DirectX ALU のパフォーマンスを評価中 > 実行時間 00:00:00.16 > 実行中: WinSAT Direct3D 評価結果 '-dx10 -aname Batch -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 300 -batchcnt C(10) -objs C(26) -rendertotex 6 -rtdelta 3 -texpobj C(1)' > 実行時間 00:00:00.00 > 実行中: WinSAT Direct3D 評価結果 '-dx10 -aname Alpha -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 300 -batchcnt C(75) -objs C(26) -rendertotex 6 -rtdelta 3 -texpobj C(1)' > 実行時間 00:00:00.00 > 実行中: WinSAT Direct3D 評価結果 '-dx10 -aname Tex -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 500 -batchcnt C(125) -objs C(20) -noalpha -texshader -totaltex 10 -texpobj C(4) -rendertotex 6 -rtdelta 3' > 実行時間 00:00:00.00 > 実行中: WinSAT Direct3D 評価結果 '-dx10 -aname ALU -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 500 -batchcnt C(125) -objs C(20) -noalpha -alushader -totaltex 10 -texpobj C(1) -rendertotex 6 -rtdelta 3' > 実行時間 00:00:00.00 > 実行中: WinSAT Direct3D 評価結果 '-dx10 -aname GeomF4 -time 7 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 150;200;241 -batchcnt C(50);C(200);C(300) -objs C(12);C(26);C(45) -noalpha -geomf4shader -texpobj C(0) -rendertotex 6 -rtdelta 3 -tierframes 60 -tiertime 1' > 実行時間 00:00:00.00 > 実行中: WinSAT Direct3D 評価結果 '-dx10 -aname GeomV8 -time 7 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 75;100;120 -batchcnt C(25);C(100);C(150) -objs C(8);C(17);C(29) -noalpha -geomv8shader -texpobj C(0) -rendertotex 6 -rtdelta 3 -tierframes 60 -tiertime 1' > 実行時間 00:00:00.02 > 実行中: WinSAT Direct3D 評価結果 '-dx10 -aname CBuffer -time 5 -fbc 10 -disp off -animate 10 -width 1280 -height 1024 -totalobj 75 -batchcnt C(25) -objs C(8) -rendertotex 6 -rtdelta 3 -texpobj C(1) -cbuffershader -cbufa 2 -cbuff 5 -cbufp 6' > 実行時間 00:00:00.00 > 実行時間 00:00:00.00 > CPU LZW 圧縮 1387.23 MB/s > CPU AES256 暗号化 10087.26 MB/s > CPU Vista 圧縮 3674.26 MB/s > CPU SHA1 ハッシュ 4304.73 MB/s > ユニプロセッサ CPU LZW 圧縮 182.04 MB/s > ユニプロセッサ CPU AES256 暗号化 880.03 MB/s > ユニプロセッサ CPU Vista 圧縮 493.21 MB/s > ユニプロセッサ CPU SHA1 ハッシュ 654.00 MB/s > メモリのパフォーマンス 18530.61 MB/s > Direct3D Batch のパフォーマンス 42.00 F/s > Direct3D Alpha Blend のパフォーマンス 42.00 F/s > Direct3D ALU のパフォーマンス 42.00 F/s > Direct3D Texture Load のパフォーマンス 42.00 F/s > Direct3D Batch のパフォーマンス 42.00 F/s > Direct3D Alpha Blend のパフォーマンス 42.00 F/s > Direct3D ALU のパフォーマンス 42.00 F/s > Direct3D Texture Load のパフォーマンス 42.00 F/s > Direct3D Geometry のパフォーマンス 42.00 F/s > Direct3D Geometry のパフォーマンス 42.00 F/s > Direct3D Constant Buffer のパフォーマンス 42.00 F/s > ビデオ メモリのスループット 73392.00 MB/s > Dshow ビデオ エンコード時間 0.00000 s > Dshow ビデオ デコード時間 0.00000 s > メディア ファンデーション デコード時間 0.00000 s > Disk Sequential 64.0 Read 518.96 MB/s 8.1 > Disk Random 16.0 Read 473.31 MB/s 8.3 > 合計実行時時間 00:00:11.41
まとめ
今回は、 WordPress の無料テーマ Cocoon で使える「アコーディオン（トグル）」（旧：トグルボックス）ブロックを使い、長文の説明文やログなどを折り畳んで表示できるようにしました。
それを使った際に、 > から始まる文章が引用ブロックに変換される問題などについても対処法を紹介しました。
参照サイト Thank You!
- WordPress.com: サイトを構築、商品を販売、ブログをスタート、その他多数の操作
- Cocoon | WordPress無料テーマ
- 【WORDPRESS】Cocoonテーマのアコーディオン（トグル）ボックスの作り方 | yougomywayの部屋
- トグルボックスでの改行について | 不具合報告 | Cocoon フォーラム
記事一覧 → Compota-Soft-Press
コメント