Cocoon フォーラム - 最近のトピック

Ver2.9.0.9でjQuery読み込み仕様の変更に伴う関連コードの整理

大門未知子 — Fri, 15 May 2026 05:28:28 +0000

----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.2.12
カテゴリー数：18
タグ数：124
投稿数：1749
固定ページ数：12
ユーザー数：1
----------------------------------------------

●経緯

従来、jQueryライブラリはCDN経由で読み込んでいたが、WordPress同梱のものを使用する仕様へと変更され、関連部分が削除された。

https://github.com/xserver-inc/cocoon/commit/77ade5c23e05687bc565fa93d264f2fd6ef8fcf2

WordPress標準の仕様では、jQueryはヘッダーで読み込まれ、フッターでは読み込まれない。

●改善点

１．上記コードの削除に伴い、以前からコメントアウトされていた以下の箇所も、あわせて削除して差し支えないと考える。

https://github.com/xserver-inc/cocoon/blob/20811dc3c9bd02045be1f225ba56899e729cf60b/lib/page-speed-up/speed-up-forms.php#L171-L205

２．以下のフッター関連の処理についても削除（ファイル削除）が可能。

https://github.com/xserver-inc/cocoon/blob/master/lib/content.php

３．付随して、該当ファイルを読み込んでいる（requireしている）以下の記述についても削除が可能。

https://github.com/xserver-inc/cocoon/blob/20811dc3c9bd02045be1f225ba56899e729cf60b/lib/_imports.php#L37

「段落」ブロックのスタイルボタンで、枠線からはみ出している

大門未知子 — Thu, 14 May 2026 16:20:57 +0000

実害はないので、対応可否を検討願います。

----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.2.12
カテゴリー数：16
タグ数：13
投稿数：718
固定ページ数：16
ユーザー数：1
----------------------------------------------

●現象

「段落」ブロックのスタイルでいくつか枠線からはみ出している。

●原因

スタイルボタン用のスタイルを持たないため、枠線からはみ出す。

●対策

css/gutenberg-editor.cssにスタイルボタン用のCSSを追加する。

/* ステッチ */
.style-buttons .__prevWrap:has(.is-style-stitch-box) {
  background: #fbfaf5;
}

.style-buttons .__prev.is-style-stitch-box {
  box-shadow: unset;
}

/* 交差線 */
.style-buttons .__prev.is-style-cross-line::before {
  left: 5px;
}

.style-buttons .__prev.is-style-cross-line::after {
  right: 5px;
}

.style-buttons .__prev.is-style-cross-line::before,
.style-buttons .__prev.is-style-cross-line::after {
  height: calc(100% + 10px);
  top: -5px;
}

/* クリップ */
.style-buttons .__prev.is-style-clip-box:before {
  height: 35px;
  top: -5px;
  width: 15px;
}

/* 左吹き出し */
.style-buttons .__prevWrap:has(.is-style-balloon-left-box) {
  padding-left: 10px;
}

/* 左吹き出し */
.style-buttons .__prevWrap:has(.is-style-balloon-left-box) {
  padding-left: 10px;
}

/* 右吹き出し */
.style-buttons .__prevWrap:has(.is-style-balloon-right-box) {
  padding-right: 10px;
}

/* 上吹き出し */
.style-buttons .__prevWrap:has(.is-style-balloon-top-box) {
  padding-top: 10px;
}

/* 上吹き出し */
.style-buttons .__prevWrap:has(.is-style-balloon-bottom-box) {
  padding-bottom: 10px;
}

●改善点

一部、CSSで以下の定義があり、calcと重複しています。
calcはサポートされたので不要です。

-webkit-calc

2026-05-15_00h37_10.png

2026-05-15_01h22_28.png

Gutenbergエディターのconsoleに404エラーが表示される

大門未知子 — Thu, 14 May 2026 15:02:06 +0000

●現象

Gutenbergエディターのconsolにエラーとなる。

GET https://example.com/wp-content/themes/cocoon-master/js/color-picker.js?ver=7.0-RC3-62355 404 (Not Found)

●原因

以下でjs/color-picker.jsが空ファイル（ver 0.0.1以降）なので削除した。

https://github.com/xserver-inc/cocoon/commit/1cac7840bdbf85468a1d3c698aec415d7a89295b

しかし、以下で該当ファイルを追加しようとする。

https://github.com/xserver-inc/cocoon/blob/20811dc3c9bd02045be1f225ba56899e729cf60b/functions.php#L227-L233

●対策

functions.phppから削除する。

1.png

Reddit のシェアボタンを追加してほしい

ketaguri — Thu, 14 May 2026 09:04:45 +0000

cocoonの英語版を使わせていただいております。

要望ですがシェアボタンにRedditを追加してほしいです。

Xよりもアクセス数が多い掲示板ですので、拡散のために使いたくぜひご検討をお願いいたします。

昨今のCSS仕様に対応した :has() によるタブ切り替えCSSについて

大門未知子 — Thu, 14 May 2026 08:57:29 +0000

本件は紹介のみでクローズとします。

従来のタブ切り替えCSSでは、「~」（後続兄弟結合子）を使用し、input の :checked 状態を基準に後続要素を制御している。

1. #index-tab-1 がアクティブ（:checked）の場合、後続兄弟要素 .index-tab-buttons 内の .index-tab-button（対応するタブボタン）をアクティブ表示にしている。

https://github.com/xserver-inc/cocoon/blob/20811dc3c9bd02045be1f225ba56899e729cf60b/style.css#L10618-L10626

2. #index-tab-1 がアクティブ（:checked）の場合、同じ親要素内に存在する後続兄弟要素 .tab-cont.tb1 を表示している。

https://github.com/xserver-inc/cocoon/blob/20811dc3c9bd02045be1f225ba56899e729cf60b/style.css#L10649-L10655

一方、:has() を使用した場合は、親要素 .index-tab-wrap が #index-tab-1:checked の状態を保持しているかを基準にスタイルを適用できる。

.index-tab-wrap:has(#index-tab-1:checked) .index-tab-button,
.index-tab-wrap:has(#index-tab-2:checked) .index-tab-button,
.index-tab-wrap:has(#index-tab-3:checked) .index-tab-button,
.index-tab-wrap:has(#index-tab-4:checked) .index-tab-button {
  background: none var(--cocoon-tab-label-active-color);
  border: 1px solid var(--cocoon-tab-label-active-color);
  color: var(--cocoon-white-color);
  font-weight: 700;
}

.index-tab-wrap:has(#index-tab-1:checked) .tab-cont.tb1,
.index-tab-wrap:has(#index-tab-2:checked) .tab-cont.tb2,
.index-tab-wrap:has(#index-tab-3:checked) .tab-cont.tb3,
.index-tab-wrap:has(#index-tab-4:checked) .tab-cont.tb4 {
  display: block;
  animation: tab-index-show 0.3s ease-in;
}

:has() を使用することで、従来の「~」による後続兄弟要素への依存を減らし、親要素を基準とした状態管理が可能になる。

FAQPageの見直しについて

大門未知子 — Wed, 13 May 2026 10:14:33 +0000

----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.2.11
カテゴリー数：18
タグ数：124
投稿数：1749
固定ページ数：12
ユーザー数：1
----------------------------------------------

以下にも書きましたが、テンプレート使用していないので、削除してもいいのでは？

https://wp-cocoon.com/community/postid/88678/

https://github.com/xserver-inc/cocoon/blob/master/tmp/json-ld-faq.php

●注意点

以下の件もあり、FAQをどうするのか判断願います。

https://wp-cocoon.com/community/postid/88677/

パンくずリストのカテゴリーが投稿と異なる

大門未知子 — Tue, 12 May 2026 21:56:02 +0000

●設定

→「人気記事」ウィジェットを配置。
→→パンくずリストの配置「メインカラム手前」（メインカラムボトム（デフォルト）以外）。

●現象

パンくずリストのカテゴリーが、投稿に設定してあるカテゴリーと異なる。

●原因

$postは予約語であるため、別の情報（人気記事に表示される情報）に書き換わってしまっている。

https://github.com/xserver-inc/cocoon/blob/d123650e8ac1b3335699f226128d257ef299c6b2/tmp/popular-card.php#L10

●対策

$postを別の変数名に置き換える。

本文にメニューバーからショートコードを入力すると、HTMLタグ閉じ忘れとなる

大門未知子 — Mon, 11 May 2026 15:33:52 +0000

----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.2.11
カテゴリー数：18
タグ数：124
投稿数：1750
固定ページ数：12
ユーザー数：1
----------------------------------------------

●手順

Gutenbergエディターの→→「新着記事一覧」を選択。

●現象

以下となり、HTMLタグの閉じ忘れが発生する。

●補足

「ショートコード」ブロックだと問題とならない。

1.png

2.png

記事一覧のアイキャッチ画像だけ画質がぼやけます

tomo4897 — Mon, 11 May 2026 03:43:41 +0000

Cocoonを使用しています。

最近、記事一覧のアイキャッチ画像だけ画質がぼやけるようになりました。

確認したところ、

・ぼやける画像 → -320x180.png
・綺麗な画像 → -640x360.png

が読み込まれていました。

元画像は同等サイズ・同じ形式（PNG）で、再アップ・再設定しても改善しません。

5/4頃までは問題なく表示されていました。

現在は「エントリーカード（デフォルト）」を使用しています。

320x180のサムネイルが優先表示されているように見えるのですが、640x360を優先表示させる方法や、確認すべき設定はありますでしょうか？

比較画像も添付いたします。

e6ba14f5f93160c6ebc41bdf796799cf.png

メールで共有する機能をお願いします。

january — Sun, 10 May 2026 23:25:11 +0000

先ほど、私の運営するWebメディアに、海外の方から「メールで共有できないんですが」とご不満のコメントをいただきました。

ニーズがあるようなので、ＳＮＳシェアボタンの一種として、メールで共有する機能をつけていただきたいです。よろしくお願いいたします。