サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年8月18日 15:28
質問宜しくお願いいたします。
WordPressを5.5にし、cocoonを2.2.2にしました。
そしてサイトのページを追加しようとしました。
いつも再利用可能に、いくつかのパーツを組み合わせてテンプレートを作っており、
それを通常のブロックに変換してそれぞれをバラして内容を変更してUPしています。
ところが、通常ブロックに変換してから編集をしようとすると、「このブロックでエラーが発生したためプレビューできません」とでて、何もできません。
以前も再利用可能のブロックを作ってて不具合があり、作り直した経験がありましたので、テンプレートを作り直そうと、新規にブロックを選択して編集しようとすると同様の現象になり、結局全く手を付けることができません。
再利用のテンプレートも、個別で選択したときも、どのブロックを選択しているのかは右側に表示されるのですが、まったく何もできません。
なにか良い方法がありましたら、ぜひ教えてください。
よろしくお願いいたします。
トピックスターター 2020年8月18日 16:24
【追記】すみません、念の為サイト情報です。
----------------------------------------------
サイト名：TOKYO×Renovation×Cocoon
サイトURL： https://tokyo.real-cocoon.com
ホームURL： https://tokyo.real-cocoon.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-fuwari-kachiiro/style.css
WordPressバージョン：5.5
PHPバージョン：7.3.17
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja-jp
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.2
カテゴリ数：32
タグ数：206
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.6
style.cssサイズ：4020バイト
functions.phpサイズ：356バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2019/09/cocoon.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.5.3
Akismet Anti-Spam 4.1.6
BackWPup 3.7.1
Category Order and Taxonomy Terms Order 1.5.7.2
Contact Form 7 5.2.1
EWWW Image Optimizer 5.6.2
Jetpack by WordPress.com 8.8.2
Marker Animation 2.1.1
Regenerate Thumbnails 3.1.3
Smart Slider 3 3.4.1.8
Social Media Widget 4.0.6
TinyMCE Templates 4.8.1
----------------------------------------------
2020年8月18日 21:03
「このブロックでエラーが発生したためプレビューできません」と出ている部分はどのようなブロックを使われているのでしょうか。
よろしければ、以下の方法でソースコードをいただけますでしょうか。
https://wp-cocoon.com/notepad-pw/
またWordpress5.4.2にダウングレードすると、正常に表示されますしょうか。
トピックスターター 2020年8月20日 08:27
何度か試してお送りしたのですがみられましたか？
おそらくだめだったのだと思いますので再度お送りします。
重複していましたら申し訳ございません。
https://notepad.pw/share/i1kri41r8
画像ブロック以外はほぼだめです。
ダウングレードは方法がわからないので試していませんが
前日まで使えていて、当日朝アップグレードしたらもうだめでしたので、
おそらく使えるのではないかと思います。
よろしくお願いいたします。
トピックスターター 2020年8月20日 08:30
たびたびすみません。
調べていたら、wp-config.phpというところで
JavaScript連結化を無効にすると良いというのを見つけたのですが
それで対処でいいのでしょうか？
2020年8月20日 14:03
HTML エラーチェッカーで調べると、「お問い合わせフォーム」の部分で HTML のエラーが出ています。
HTML に不具合がある場合は、「このブロックでエラーが発生したためプレビューできません」となってもおかしくありません。
notepad では、その部分の HTML を確認できません。Contact Form 7 の設定から、その部分の HTML をご確認ください。p タグの開きタグや閉じタグがない部分があります。もしかすると、div タグも足りないかもしれません。
わいひら reacted
トピックスターター 2020年8月20日 18:51
ご返信ありがとうございます。
お問い合わせフォームは以前からずっと変更せず使っていて
問題なく使えていたので、最初からエラーがあったということなのでしょうか？
お問い合わせフォームだけではなく画像以外のほとんどの部分がエラーになってしまい、
なんの作業もできていません。
まったく素人なので、おっしゃっている意味がよくわからず申し訳ございません。
Contact Formで開いてみたもののスクショを送ります。
なにかわかりましたら、アドバイスいただけると助かります。
どうぞよろしくお願いいたします。
2020年8月20日 19:05
下記の部分の HTML はどうなっているでしょうか。
「お問い合わせフォームをご利用いただくと、いつでもお問い合わせいただけます。
お問い合わせにつきましては、迅速に対応させていただきます。」
この部分で HTML エラーが指摘されています。
わいひら reacted
2020年8月20日 20:25
①この部分を…
お問い合わせにつきましては、迅速に対応させていただきます。</p> <p>
最後の p 開きタグを削除します。
お問い合わせにつきましては、迅速に対応させていただきます。</p>
②この部分を…
お問い合わせフォームをご利用いただくと、いつでもお問い合わせいただけます。<br />
最初に p 開きタグを追加します。
<p>お問い合わせフォームをご利用いただくと、いつでもお問い合わせいただけます。<br />
これでどうなるでしょうか。
直らない場合は、そのテンプレートを notepad.pw に貼り付けて頂けないでしょうか。
この投稿は4年前 3回ずつAkiraに変更されました
わいひら reacted
2020年8月20日 20:33
僕のブロックエディター環境でソースコードを挿入してみたのですが、冒頭のようなエラーは出ていないようです。
ところで、ソースコードが記入されている公開ページのURLもいただいてよろしいでしょうか。
2020年8月20日 20:34
返信を書いている間にAkiraさんの返信が ?
トピックスターター 2020年8月20日 20:40
お手間をとらせてしまい、申し訳ございません。
ご指示通りにしてみたのですが、
「迅速に対応させていただきます」の後ろの<p>を削除するのですが、
保存すると復活してしまいます。
notepadに貼り付けました。
よろしくお願いいたします。
トピックスターター 2020年8月20日 21:21
返信ありがとうございます。
新規追加から再利用可能のブロックを追加すると、わいひらさんが貼ってくださったスクショのように表示されます。
でも通常のブロックへ変換して入力しようとカーソルをもっていくと、画像のところ以外はすべてエラーになります。
わたしの何かしらの環境が影響しているのでしょうか？
「ソースコードが記入されている公開ページのURL」とは、どのようにお知らせすればよいのでしょうか？
（すみません、ずぶの素人で）
2020年8月21日 00:01
テンプレートを下記のものに変更するとどうなるでしょうか。
<div class="wp-block-cocoon-blocks-caption-box-1 caption-box cb-light-blue block-box"> <div class="caption-box-label block-box-label"><span class="caption-box-label-text block-box-label-text"><strong>お問い合わせフォーム</strong></span></div> <div class="caption-box-content"> <p>お問い合わせフォームをご利用いただくと、いつでもお問い合わせいただけます。<br /> お問い合わせにつきましては、迅速に対応させていただきます。</p> <div>[contact-form-7 id="52" title="お問い合わせはこちらから"]</div> </div> </div>
Contact Form 7 のショートコードを div で囲んでいます。実際の下記ページで試したところ、div を追加しても問題ないと判断しました（div がないと p が変なことになる）。
この投稿は4年前ずつAkiraに変更されました
わいひら reacted
トピックスターター 2020年8月21日 13:32
ありがとうございます。
教えていただいたとおりにテンプレートを変えてみました。
お問い合わせフォームのプレビューは問題なく表示できました。
ありがとうございます。
でも、やはり編集しようとすると、画像以外のブロックはすべてエラーになってしまい、
何もできません。
これはやはりwp-comfig.phpというところでJavaScript連結の無効化というのをしたほうがいいのでしょうか？
それをすると何か支障がでますでしょうか？
（それが怖くてできていません）
トピックスターター 2020年8月21日 13:37
あ、画像ブロック以外に、補足情報(i）のブロックだけは入力できそうです。
2020年8月21日 13:59
※申し訳ありません。間違った HTML を書いたので、修正しています。
まだ HTML エラーがありました。
先に notepad.pw にお書きになった 1 番下の部分を…
<!-- wp:paragraph --> <p>[temp id=2]</p> <!-- /wp:paragraph -->
このように p タグを div タグに変更するとどうなるでしょうか。
<div>[temp id=2]</div>
※ wp:paragraph を削除します。
おっしゃっている JavaScript 連結の無効化は、編集ページで JavaScript のエラーが出ている場合にやるものみたいです。
参考サイト：WordPress メディア追加のボタン等が反応しない時の対処法
これをする前に、まだ確認すべきことがあります。上記の HTML の変更でも直らない場合は、念のためにブラウザのキャッシュの削除をお試しください。また、Safari をお使いのようですが、Chrome など他のブラウザもお試しください。
この投稿は4年前ずつAkiraに変更されました
わいひら reacted
トピックスターター 2020年8月21日 14:52
返信ありがとうございます。
先ほど教えていただいたdivを入れるというときに、wp:paragraphというものを消してしまったようです。
現状はこうなっています。
https://notepad.pw/share/qlmvi6yc1
本当にお手間をとらせてしまい、申し訳ございません。
どうぞよろしくお願いいたします。
トピックスターター 2020年8月21日 15:28
※ wp:paragraph を削除します。
すみません、これは上下にあるものどちらも削除してしまってよいのでしょうか？
あと、ちなみに他のブラウザで試すをやってみました。
パソコンを買い替えたばかりでsafariしかなかったので、Firefox,Chrome,Vivaldi,Braveを入れて試してみましたが、全部エラーがでてきてしまいました・・・
2020年8月21日 17:12
おっしゃる通りです。wp:paragraph は、上下とも削除します。テンプレートのショートコードを div のみで囲みます。
<div>[temp id=2]</div>
わいひら reacted
トピックスターター 2020年8月21日 19:27
2020年8月21日 19:52
「ソースコードが記入されている公開ページのURL」とは、どのようにお知らせすればよいのでしょうか？
URLを貼っていただければ幸いです。
もしまだ公開していないページとかであれば、一旦公開して見せていただいて後に削除していただいても構いません。
2020年8月21日 19:59
新たに別の箇所で HTML エラーが指摘されました。
以下の notepad.pw に書かれている…
https://notepad.pw/share/i1kri41r8
この部分を…
<!-- wp:paragraph --> <p>《物件番号は「MQ」とご入力ください》[temp id=3]</p> <!-- /wp:paragraph -->
このように変更するとどうなるでしょうか。
<!-- wp:paragraph --> <p>《物件番号は「MQ」とご入力ください》</p> <!-- /wp:paragraph --> <div>[temp id=3]</div>
これで修正できない場合は、LINE の部分（添付画像の部分）のテンプレートの HTML を notepad.pw に貼り付けて頂けないでしょうか。
この投稿は4年前ずつAkiraに変更されました
わいひら reacted
トピックスターター 2020年8月22日 10:25
ありがとうございます。
Testページをつくりました。
タイトルにTestといれて、
その下に再利用ブロックを挿入し、通常のブロックへ変換して公開しました。
よろしくお願いいたします。
トピックスターター 2020年8月22日 10:40
ありがとうございます。
ご指摘いただいた2箇所を修正したものを念の為公開しました。
ソースは https://notepad.pw/share/kdoyl9vx
URLは https://tokyo.real-cocoon.com/12550-2/
です。
LINEの部分のテンプレートは
https://notepad.pw/share/12ut6yx2
です。
よろしくお願いいたします。
2020年8月22日 11:35
https://notepad.pw/share/kdoyl9vx
再利用ブロックにこちらのソースが保存されており、この再利用ブロックを投稿の編集画面で挿入し、『通常のブロックへ変換』を行うとエラーが発生するということでよろしいでしょうか？
エラーが発生したところでブラウザのデベロッパーツールを開き、コンソールに表示されているエラー内容を書き込んでください。
また、使用されている再利用ブロックの編集画面でもエラーが出ていないかどうか確認してください。
わいひら reacted
トピックスターター 2020年8月22日 14:32
ありがとうございます。
おっしゃるとおり、再利用ブロックにこれらのソースを保存してあり、
この再利用ブロックを投稿の編集画面に挿入し、
通常ブロックへの変換をして利用していました。
現在は、通常ブロックへ変換すると画像（カメラの画像が入っている2つ）と、最初の方にある補足情報(i)というところ以外は全て編集しようとクリックすると
「このブロックでエラーが発生したためプレビューできません」と表示され、カーソルをそこへ置くことすらできません。
みなさまにお手間をとらせるのも心苦しいので、再利用ブロックは諦めて1から入力しようと思ったのですが、そもそも再利用ブロックもなにも関係なしに、
新規作成で何かブロックを追加しただけで「このブロックでエラーが発生したためプレビューできません」と表示されてしまい、まったく何も手がつけられなくなってしまいました。
貼っていただいたnotepadのHTMLは、Akiraさんにアドバイスをいただいて2箇所修正したものです。
これはふたたび再利用ブロックにはしていません。
https://tokyo.real-cocoon.com/12550-2/
というページのソースになります。
エラーが起きたところがよくわからなかったので、↑のサイトをChromeで表示して右クリック→検証で出してみました。
コンソールというところで表示させたのですが、おっしゃているのはこれでよかったでしょうか？
2020年8月22日 14:43
通常ブロックに変換してから編集をしようとすると、「このブロックでエラーが発生したためプレビューできません」とでて、何もできません。
教えてほしいコンソールのエラーは、上記の「このブロックでエラーが発生したためプレビューできません」が生じた際の編集画面（ブロックエディター）側でのエラーになります。
編集画面の方でデベロッパーツールを開き、確認してください。
同様に、使用している再利用ブロックの編集画面でもエラーが出ているかどうか確認してください。
エラー内容はコンソールに表示されている内容のスクショとともに、コピペしてテキストでも書き込んでもらえると助かります。
トピックスターター 2020年8月23日 11:54
すみません、返信いただいていましたのに遅くなってしまいました。
かなりめげてきています。
まだアップグレードしていなかったブログと、あたらしくWordPress5.4.2をインストールしたブログは
どちらも何事もないので、そちらを最初にすればよかったと後悔しています。
ロコさまのおっしゃっている意味がわかっているかどうかわかりませんが、
ページを新規作成して、↑のような表示にしてnotepadに貼りました。
https://notepad.pw/share/t91mob6ww
もうひとつはまたページを新規作成して、再利用ブロックを挿入した（通常ブロックには変換していません）状態でnotepadに貼りました。
https://notepad.pw/share/nfafd8hy
また、トンチンカンのことをやっているようでしたら、ご指摘ください。
よろしくお願いいたします。
2020年8月23日 15:08
まず、利用しているプラグインのうち
- AddQuicktag 2.5.3
- Jetpack by WordPress.com 8.8.2
を無効化してください。
それでも「このブロックでエラーが発生したためプレビューできません」となる場合は、コンソールのログが多いのでエラーのみに絞った内容を再度書き込んでほしいです。
エラーのみに絞る方法は、デベロッパーツールのコンソールで『Default levels』となっているところを開き、『Errors』のみにチェックが入っている設定にしてください。
再利用ブロックの編集画面はブロックエディター右上のアイコン「ツールと設定をさらに表示」を開き、『すべての再利用ブロックを管理』から普段使用されている再利用ブロックの編集画面に移ってください。
トピックスターター 2020年8月23日 15:48
返信ありがとうございます。
ご指摘のプラグインを2つ無効化しましたが、エラーは治りませんでした。
Errorsのみに限りました。
https://notepad.pw/share/vg7abyus2
教えていただいたとおりに再利用ブロックの編集画面で右クリック→検証
をしましたら、Errors onlyのところには何も出てきませんでした。
トピックスターター 2020年8月24日 09:38
返信ありがとうございます。
です。
よろしくお願いいたします。
2020年8月25日 10:29
ブロックエディターでエラーが発生する直接の原因はMarker Animationなので、プラグインのアップデートが入るまでは使用しない方がいいです。
AddQuicktagやJetpackによるエラーも出ているみたいなので、不具合がないかどうかチェックしながら使用してください。
また、ブロックエディターでHTMLに問題がある場合は基本的にリカバリー機能が働きます。
taichi reacted
トピックスターター 2020年8月25日 16:50
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。