スタッフブログ
カスタムフィールドグループを開閉式にする
カスタムフィールドグループまたはカスタムユニットフィールドグループ使ってますか？
繰り返しの情報が登録できて便利ですよね。
しかし、情報が多くなってくるとどうしても長くなってしまい順番の入れ替えが大変だったりします。
そんなカスタムフィールドグループを少し使いやすくするテクニックです。
サンプルコードは記事の最後に貼り付けていますので参考にしてください。
解説
HTMLのdetails要素とsummary要素を使用します。
まずカスタムフィールドをつくりましょう。
カスタムフィールドは『カスタムフィールドメーカー』で作るのが良いいです。
例では「カスタムユニット」を利用しました。
ここでは縦向きレイアウトで「見出し、本文」のカスタムユニットを作りまます。
次に入れ子の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を利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
ましじめのスキルが必要ですか？
遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートいたします。