Cocoonフォーラム

2018-02-102023-01-25

書き込みの前に以下の3点をご確認ください。

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

共有:

通知

すべてクリア

[解決済] Gutenbergエディターのウィジェット「カレンダー」のセル色が変わる

不具合報告

最新の投稿 : わいひら 11か月前

4 投稿

2 ユーザー

2 Likes

1,475 表示

RSS

chu-ya

(@chu-ya)

Famed Member Registered

結合: 2年前

投稿: 2261

Topic starter 2023-06-04 04:05

----------------------------------------------

テーマ名：Cocoon

バージョン：2.6.0.3

カテゴリー数：4

タグ数：9

ユーザー数：1

----------------------------------------------

●手順

[Cocoon設定]→[本文]→レスポンシブテーブル

「横幅の広いテーブルは横スクロール」オン
「テーブルの1列目を固定表示」オン

●現象

Gutenbergエディターで、ウィジェトブロック「カレンダー」を配置した。

この時、カレンダーの1列目の背景色が変わる。

●原因

「横幅の広いテーブルは横スクロール」オンとすると、本文中(the_content)のテーブルが対象となる。

この為、カレンダーも対象となってしまう。

●対策

カレンダーを除外する。

実際に使用頻度が少ないと思われ。

プログラムは変更せず、案1で十分かと。

案1

マニュアルに注記。
カレンダーウィジェットの配置についての注意書きをする。

案2

CSSの色変えを除外する。

https://github.com/xserver-inc/cocoon/blob/433ed63e6fa73b5a094605c15127c411403e6213/style.css#L1647

.scrollable-table.stfc-sticky  table:not(.wp-calendar-table) tr > *:first-child

案3

カレンダーウィジェットそのものを、スクロール対象外とする。

正規表現苦手なので、良い方法が思い浮かばず。

一旦、本文中のテーブルについてクラス追加をした後、カレンダーだけ戻す。

https://github.com/xserver-inc/cocoon/blob/433ed63e6fa73b5a094605c15127c411403e6213/lib/page-settings/content-funcs.php#L230-L241

function add_responsive_table_tag($the_content) {
  $first_column_sticky = null;
  if (is_responsive_table_first_column_sticky_enable()) {
    $first_column_sticky = ' stfc-sticky';
  }
  //テーブル対応
  $the_content = preg_replace('/<table/i', '<div class="scrollable-table'.$first_column_sticky.'"><table', $the_content);
  $the_content = preg_replace('/<\/table>/i', '</table></div>', $the_content);

  //カレンダーを元に戻す
  $the_content = preg_replace('/<div class="scrollable-table' .  $first_column_sticky . '"><table id="wp-calendar/i', '<table id="wp-calendar', $the_content);
  $the_content = preg_replace('/<\/table>/i', '</table>', $the_content);
  return $the_content;
}