Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

このフォーラムには初心者の方も多く参加されています。質問に不慣れな方も安心して相談できるよう、できるだけ穏やかな言葉でご案内いただけますと幸いです。

「WordPress 7.0」は、4月...
 
通知
すべてクリア

「WordPress 7.0」は、4月9日リリース予定

30 投稿
4 ユーザー
21 Reactions
943 表示
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.0.8
カテゴリー数:18
タグ数:123
投稿数:1745
固定ページ数:12
ユーザー数:1
----------------------------------------------

WordPress 7.0から、エディタ内の要素がiframe内で展開される仕様になりました。

現在、親テーマのCSS(cocoon-master/style.css)はlinkタグで読み込まれず、.editor-styles-wrapper内にstyleタグとして直接展開されています。

構造上iframe内に展開されるのであれば、いっそのことヘッダーにlinkタグを追加する方式の方が、一括管理ができて効率的ではないでしょうか?



大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

WordPressバージョン:7.0-beta4

●見出しについて

①ツールバーにあった「伸縮する見出し」「伸縮する段落」は[スタイル]→[タイポグラフィ]に移動した。
②「見出し」の種類をツールバーだけでなくパネルからも選択可能となった。


●フォントについて
[外観]→[Fonts]からGoogle Fontをインストール(uploads/fonts/)し、利用可能。
③インストールすると[スタイル]→[タイポグラフィ]からフォントを利用可能となる。
④インストールしたフォントを選択可能となる。
※エディター上は変わらない?

●ブロックの非表示について
⑤ブロックをエディター、フロントエンドから非表示(ブロック自体がない)にするだけでなく
 ⑥デスクトップ:782px<表示幅
 ⑦タブレット:480px<表示幅≦782px
 ⑧モバイル:表示幅≦480px
条件に応じ非表示にでき、ブロックをCSSでdisplay:noneとしている。

●ブロックごとのCSS設定
⑨今までCSSクラス定義だけだったが、ブロックごとに直接CSS(プロパティ)を設定できる。


   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

投稿者:: @chu-ya

構造上iframe内に展開されるのであれば、いっそのことヘッダーにlinkタグを追加する方式

これはダメですね(苦笑)

例えば enqueue_block_assets を使用すると、CSS はブロックエディターのページに <link> タグとして追加され。

この場合、エディター内の iframe(editor-canvas)にも反映されますが、Gutenberg エディター内の table タグなどに意図せず影響を与えてしまい。
そのため、block_editor_settings_all を用いて、CSS を iframe 内だけに <style> タグとして展開しており...



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

●「カスタムHTML」ブロックについて

「カスタムHTML」ブロックを配置した後、枠内にコードを入力ではなくなり、枠のみとなった。

パネルの「Edit code」をクリックし、コードを入力となり、CSS、JavaScriptの選択が可能となった。
<style><script>タグの入力は不要。
Cocoon独自のカスタムCSS、カスタムJavaScriptと同様の仕組みとなった。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18449
 

投稿者:: @chu-ya

これはダメですね(苦笑)

iframeの中だけ出力されれば本当にその対応で楽になるのですが、先ほど調べてみた限りではやはりiframe内と全体にも適用されてしまうみたいですね。



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

●「Breadcrums」(パンくず)ブロック

ホーム表示の有無
記事タイトル表示の有無
セパレーターの設定


●「Table of Contents」(目次)ブロック

見出しが1つしかなくても目次表示される。
「現在のページのみを含む」オンとすると、分割ページの場合、そのページの見出しのみ目次表示される。
目次に含める見出しレベルの設定

●「icon」(アイコン)ブロック
ブロックなので、例えば文頭にアイコンを付けることはできない。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18449
 

環境にもよると思いますが、WordPress 7.0になってからこういうダイアログがしょっちゅう出るようになってしまった。同じ投稿のエディター画面をブラウザから複数タブで開いていると出るっぽい。

Connection lost
接続が失われました

The connection to real-time collaboration was interrupted. Editing is paused to prevent conflicts with other editors.
リアルタイム共同編集への接続が中断されました。ほかの編集者との競合を防ぐため、編集は一時停止されています。


この投稿は2か月前 2回ずつわいひらに変更されました

   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

@yhira さん

ブロックの設定パネルで、height、widthの設定が可能になるようです。

https://make.wordpress.org/core/2026/03/15/dimensions-support-enhancements-in-wordpress-7-0/



   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

●「カバー」ブロック

WordPressバージョン:7.0-beta5-62070

外部動画を指定可能となった。
「カバー」ブロックを配置した際、メニューバーの「メディアを追加」からYoutubeの動画も指定可能

 



   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

●「カスタムHTML」ブロック

今までブロック内にコードが表示されるだけだった。
7.0から、エディター上にもHTMLが描画され表示されるように。

 


   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

●PHPだけでブロック作成

Reactなどビルド環境がなくても、PHPだけでブロックを作成可能に。
但し、簡単な設定パネルと、ブロックを包括しないブロックに限られ。

例えば、Cocoonのショートコードsitemapに、パラメータを渡しcallbackで描画するようなものは簡単に実現でき。

https://make.wordpress.org/core/2026/03/03/php-only-block-registration/



   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  
WordPressバージョン:7.0-RC1-62113
----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.0.12
カテゴリー数:18
タグ数:123
投稿数:1749
固定ページ数:12
ユーザー数:1
----------------------------------------------
●件名
CocoonでWordPress 7.0 標準画像ブロック:Lightbox展開時に親要素へ inert 属性が付与され、モーダルが閉じられなくなる不具合

●現象
画像ブロックにおいて「クリックで拡大」を有効とした際、以下の問題が発生する。
  • フロントエンドで画像をクリックしてモーダルを表示すると、右上の「×」ボタンやオーバーレイをクリックしても反応せず、モーダルを閉じることができない。
  • モーダル上のカーソルが本来のポインターならず、デフォルトのままとなる。

原因
WordPress 6.9.4 までは正常に動作していたが、7.0 から仕様が変更され、特定の条件下で親コンテナに inert 属性が強制付与されるようになった。
Lightboxのオーバーレイ要素(.wp-lightbox-overlay)が inert を付与されたコンテナの子要素としてレンダリングされている。
そのため、inert の特性によって子要素全体のクリックイベントやフォーカスが完全に抑止され、クローズ操作が不能となっている。
 
[DOM構造のイメージ]
<div class="container" inert>★
<header>...</header>
  <main>...</main>
  <footer>...</footer>
  <div class="wp-lightbox-overlay">...</div>
</div>
 

対策案
案1
theme.json による機能自体の無効化
Lightbox機能自体を無効化し、エディタ上でも選択不可とする。
{
  "version": 3,
  "settings": {
    "blocks": {
      "core/image": {
        "lightbox": {
          "allowEditing": false,
          "enabled": false
        }
      }
    }
  }
}
 
案2
JavaScriptによる inert 属性の強制除去
テーマの構造上、標準Lightboxの維持が必要な場合は、MutationObserverを用いて inert 属性を監視・自動除去する。
add_action( 'wp_footer', function() {
?>
<script>
  const container = document.querySelector('.container');
  if (container) {
    // inert属性の付与を監視し、検知次第即座に削除する
    new MutationObserver(() => {
      if (container.hasAttribute('inert')) {
        container.removeAttribute('inert');
      }
    }).observe(container, { attributes: true, attributeFilter: ['inert'] });
  }
</script>
<?php
});

●余談

現在、スキンの設定で「ギャラリー」ウィジェットを以下の理由で除外している。

ウィジェットの設定は以下のいずれかにとなる。

  • 添付ファイルのページ
  • メディアファイル
  • なし

画像をクリックして開いた際、元のページへ戻るにはブラウザの「戻る」ボタンを使用するしかなく、使い勝手が悪い。

そこで、操作性向上のため Cocoonの標準Lightbox機能 を有効化して検証を行った。
しかし、CocoonのLightboxは主に「本文中の画像」を対象としており、ウィジェット内の画像などは対象外となる仕様であった。
その調査の過程で、本問題を発見した。



   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18449
 

ご連絡いただきありがとうございます。
ご提案いただいたものも含めて、いくつか改善方法を検討しましたが、現在利用されているユーザーの多くの方が問題なくて副作用も少ないと考えられる@chu-yaさんがご提案いただいたtheme.json による機能自体の無効化の方法で対応させていただくことにしました。
https://github.com/xserver-inc/cocoon/commit/707ca5867135ad86098840c646c0fc2749734192



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

@yhira さん

本件ですがArkheの場合、問題なく動作し、テーマのHTML構成に依存します。

WordPress 7.0の最終版での確認は必要かと思います。

ただ、WordPress標準のlightboxは前後画像へのボタンがなく。
Cocoon標準の方が使い勝手がいいので、今回の修正で影響はないと思います。



   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

WordPressバージョン:7.0-RC2-62162
「Table of Contents」(目次)ブロックが除外さている。



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

●タイボグラフィオプション「カラム」

使い道が分からず。

{
  "version": 3,
  "settings": {
    "blocks": {
      "core/paragraph": {
        "typography": {
          "textColumns": true
        }
      }
    }
  }
}


   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

●「ギャラリー」ブロック
画像のクンク設定で「クリックで拡大」を設定した場合、WordPress標準のlightbox表示に前後ボタンが追加された。
但し、「画像」ブロックにはボタン表示されない。

※WordPress 7.0でCocoonに影響があり、この機能は使えません。

 



   
返信引用
Y.INABA
(@yinaba)
Estimable Member Registered
結合: 1年前
投稿: 123
 

WP 7.0のリリース予定日ですが、数週間延期する見込みとのことです。
新機能を盛り込み過ぎて検証に時間がかかっているのかもしれません。

https://make.wordpress.org/core/2026/03/31/extending-the-7-0-cycle/

After discussions with project leadership, the decision has been made to delay the 7.0 release by a few weeks to finalize key architectural details.



   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 5年前
投稿: 9481
 

数日前に以下が発表されています。

The Path Forward for WordPress 7.0
https://make.wordpress.org/core/2026/04/02/the-path-forward-for-wordpress-7-0/

RC版は停止され、ベータ版に戻る的なことも、書かれていますが、怪しさを感じます。

新しいスケジュールは、4/22までに公開予定ともあります。


この投稿は3週間前 5回ずつmk2に変更されました

   
わいひら and Y.INABA reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 5年前
投稿: 9481
 

Y.INABAさんがリンクくださったものは、4/4付けて日本語版でもリリースされていました。

7.0サイクルの延長
https://ja.wordpress.org/2026/04/04/extending-the-7-0-cycle/

 



   
わいひら and Y.INABA reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18449
 

情報ありがとうございます!
不具合があるものが出るよりは、時間をかけてでも不具合が少ないものが出るのはありがたいです。



   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 5年前
投稿: 9481
 

昨晩?のミーティングでは、「WordPress 7.0」のリリース日は決まらなかったようですね。

(プラグインのGutenbergは、順調にアップデートされているみたいですが)

 

次はRC版をアップデートすることが、決まったようです。(RC3以降が停止されているみたいですね)

https://make.wordpress.org/core/2026/04/08/summary-dev-chat-april-8-2026/

WordPress 7.0 Updates


この投稿は3週間前ずつmk2に変更されました

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18449
 

僕てしてはほんとじっくりでありがたいです 😓 



   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 5年前
投稿: 9481
 

「WordPress 7.0」のリリース日が決まったようです。

WordPress 7.0 Release Party Updated Schedule
https://make.wordpress.org/core/2026/04/22/wordpress-7-0-release-party-updated-schedule/

  • 5/9(土) RC3(実質ベータ1)
  • 5/15(金) RC4(実質新RC1)
  • 5/20(水) 24時間コードフリーズ
  • 5/21(木) WordPress 7.0 正式版リリース

  
日本時間では、上記のような感じになると思われます。
(正式版リリース時間は、現時点で未定です)



   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

●フォント管理

WordPress 7.0でさらに使いやすくなった「フォントライブラリ」。
[外観]→[フォント] で管理・インストールしたフォントを、Gutenbergエディターから自由に選択して使用可能です。


前述と重複してました。


この投稿は1週間前 6回ずつ大門未知子に変更されました

   
わいひら reacted
返信引用
Y.INABA
(@yinaba)
Estimable Member Registered
結合: 1年前
投稿: 123
 

WP 7.0で導入される「リアルタイム共同編集」について。

add_meta_box() 関数を使って編集画面内のカスタムフィールドの追加を行った場合、WordPress 7.0で導入される目玉機能の1つ「リアルタイム共同編集」が無効化されるようです。

▼ご参考
https://developer.wordpress.org/news/2026/04/whats-new-for-developers-april-2026/

Classic meta boxes will disable collaboration mode for a post. If you’re still using add_meta_box(), now’s a good time to consider migrating to register_post_meta() and a PluginSidebar component. The 7.0 cycle is intended to be a window for plugin developers to implement compatibility bridges. If you’re not sure how to migrate your meta boxes to the sidebar, this tutorial will guide you through the process.

 

Cocoonでもカスタムフィールドの追加にあたって add_meta_box() が使われています。
https://github.com/search?q=repo%3Axserver-inc%2Fcocoon%20add_meta_box&type=code

ただし、Cocoonでは個人でのご利用が多いこと、またクラシックエディターにも対応しているところから、対応する意味が薄いものと思います。
そのため、情報共有にとどめておきます。
(実際に register_post_meta() 等の手法に移行いただくかについてはお任せいたします)

 

▼余談ですが、XwriteではGutenbergエディターのみの対応をうたっているため、移行要望をあげています。
https://users.xwrite.jp/community/postid/5216/

 


この投稿は5日前 2回ずつY.INABAに変更されました

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18449
 

情報ありがとうございます!
Cocoon の方でも対応可能そうであれば、対応できればと思います。



   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18449
 

調べてみたけど、確かにCocoonの場合はやるにしてもCocoon設定の設定切り替えからの段階的任意切り替えにするのが現実的かも。
下手に対応すると個人利用が多くて需要も薄いのに、かなりの分岐対応することになり管理コストだけが増えそうな感じではありますね…。


この投稿は5日前ずつわいひらに変更されました

   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4377
トピックスターター  

@yhira さん

WordPress 7.0のリアルタイム編集は、大規模なメディアや多人数で作業する一部のエ層にはメリットがあるかもしれませんが、圧倒的多数の個人ユーザーや小規模開発者にとっては恩恵が少なく、むしろ利便性を損なう懸念が強いと感じます。

Cocoonは、投稿設定にadd_meta_boxを利用しておりPHPだけで完結しています。

現状のブロック開発ならまだしも、これをわざわざReact化(開発環境を要す)してまでリアルタイム編集に合わせることは、開発コストを不必要に増大させ、WordPress最大の魅力であった「拡張のしやすさ」を犠牲にしているように思います。

メリットを見いだせないので、私なら既存のadd_meta_boxのままで、投稿の共同編集を利用不可にします。


この投稿は5日前 3回ずつ大門未知子に変更されました

   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18449
 

やるとは言ってないです。なので「やるにしても」とあえて言葉を付け加えています。

投稿者:: @yhira

下手に対応すると個人利用が多くて需要も薄いのに、かなりの分岐対応することになり管理コストだけが増えそうな感じではありますね…。

これを書いておけば、普通はやると思われないだろうなと思って書いたんですけど、直接的には書かなかったので、わかりづらかったら申し訳ありません。



   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました