サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年12月19日 17:52
はじめまして。
戸井と申します
Cocoonカスタマイズのサポート範疇は超えていると思いますが、もし可能であれば助言をいただきたく書き込ませていただきました。
不都合あれば、削除いただけたらと思います。
ブロックエディタで、Cocoonでいうトグルボックスのような機能を実装しようとしていますが、独自のid設定に困っています。
Cocoonでは以下のようにidとforを設定していると思います。
<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box"><input id="toggle-checkbox-20191218133137" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-20191218133137">トグルボックス見出し</label><div class="toggle-content"><!-- wp:paragraph -->
<p>あああ</p>
<!-- /wp:paragraph --></div></div>
「20191218133137」に該当する部分は、タイムスタンプを入れているのだと思いますが、これをどのように実装しているのか、教えていただけないでしょうか。
単純にタイムスタンプを挿入するだけならこちらでもできました。
しかし、保存→エディタから抜ける→編集で再表示、という流れになった時、1回目の初回保存時のタイムスタンプとは変わってしまうため、「Block validation」というエラーになってしまい、ブロックエディタが解除されてしまいます
わいひら様は初回保存と同じタイムスタンプを復元して、うまく解決しているのだろうとは思うのですが、この実装方法がしりたく……。
もし可能であれば、Reactをビルドする前の実装をサンプルとしてご開示いただけたりしますと、大変助かります。
※その他の方法でも問題ございません
よろしくお願いしますいたします。
2019年12月19日 20:06
一応、現時点でのトグルボックスのソースコードはこんな感じです。
https://notepad.pw/code/gkqr72n8
attributesに対してdateIDという値を設定して、2回目以降はその値を取得するようにしています。
単純にタイムスタンプを挿入するだけならこちらでもできました。
とのことですが、一応タイムスタンプを取得するgetDateID関数も載せておきます。
https://notepad.pw/code/91hbejqlp
Topic starter
2019年12月21日 06:10
わいひら様、ソースコードのご提示ありがとうございます!
こちらを参考に試してみます。結果は改めてご報告しますが、取り急ぎ御礼申し上げます
2019年12月23日 22:05
うまくいったようでよかったです ?
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。