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日リリース予定

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

----------------------------------------------
テーマ名: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年前
投稿: 4329
トピックスターター  

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年前
投稿: 4329
トピックスターター  

投稿者:: @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年前
投稿: 4329
トピックスターター  

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

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

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


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

投稿者:: @chu-ya

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

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



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

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

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


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

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

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


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

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

Connection lost
接続が失われました

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


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

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

@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年前
投稿: 4329
トピックスターター  

●「カバー」ブロック

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

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

 



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

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

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

 


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

●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年前
投稿: 4329
トピックスターター  
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年前
投稿: 18416
 

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



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

@yhira さん

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

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

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



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

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



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

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

使い道が分からず。

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


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

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

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

 



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

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年前
投稿: 9470
 

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

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までに公開予定ともあります。


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

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

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年前
投稿: 18416
 

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



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

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

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

 

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

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

WordPress 7.0 Updates


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

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

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



   
返信引用
共有:

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

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

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

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

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

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

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

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