カスタムフィールドグループまたはカスタムユニットフィールドグループ使ってますか？
繰り返しの情報が登録できて便利ですよね。
しかし、情報が多くなってくるとどうしても長くなってしまい順番の入れ替えが大変だったりします。
そんなカスタムフィールドグループを少し使いやすくするテクニックです。
サンプルコードは記事の最後に貼り付けていますので参考にしてください。
解説
HTMLのdetails要素とsummary要素を使用します。
: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN
mozilla
は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは 要素を使用して提供する必要があります。
まずカスタムフィールドをつくりましょう。
カスタムフィールドは『カスタムフィールドメーカー』で作るのが良いいです。
例では「カスタムユニット」を利用しました。
ここでは縦向きレイアウトで「見出し、本文」のカスタムユニットを作りまます。
次に入れ子のtableにdetailsとsummaryを追加します。
上のtable側に追加したsummaryは「見出しのカスタムフィールド」の値をいれます。
下のtable側に追加したsummaryは「保存されていません」としておきます。
サンプルコードは記事の最後に貼り付けていますので参考にしてください。
ざっくりですが以上でカスタムフィールドグループ内で開閉できるようになりました。
これで数が増えても安心ですね！
コード
<td>
<details>
<summary>{title}</summary>
<table>
<tr>
<th>見出し</th>
<td>
<input type="text" name="title[]" value="{title}">
</td>
</tr>
<tr>
<th>本文</th>
<td>
<textarea name="content[]">{content}</textarea>
</td>
</tr>
</table>
</details>
</td> <td>
<details>
<summary>保存されていません</summary>
<table>
<tr>
<th>見出し</th>
<td>
<input type="text" name="title[]" value="">
</td>
</tr>
<tr>
<th>本文</th>
<td>
<textarea name="content[]"></textarea>
</td>
</tr>
</table>
</details>
</td>関連するタグ
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
