サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年7月3日 16:03
いつもありがとうございます。
カスタムCSSについてお助け下さい。
特定のページにだけ反映させたいCSSをカスタムCSSに記述しているのですが、1つ目が反映されません。
例１（先日教えていただいたCSSです！ありがとうございました！）
/*関連記事を非表示*/
#related-entries {
display: none;
}
これを1回書くだけだと反映されず。
でもこの上にもう一つCSSを書くと反映されるんです。
/*関連記事を非表示*/
#related-entries {
display: none;
}
/*関連記事を非表示*/
#related-entries {
display: none;
}
こうして2回書くと関連記事が非表示になる
例２
/*関連記事を非表示*/
#related-entries {
display: none;
}
/*ページ送りナビを非表示*/
#pager-post-navi {
display: none;
}
こう書くと、ページ送りナビは非表示になる
関連記事は表示されたまま
例３
/*関連記事を非表示*/ ←これはどんなCSSでもいい
#related-entries {
display: none;
}
/*関連記事を非表示*/
#related-entries {
display: none;
}
/*ページ送りナビを非表示*/
#pager-post-navi {
display: none;
}
こうすると、関連記事もページ送りナビも非表示になる
上に何かつけなくてはならないとかありますか？
改行してみたりしたのですが、解決しませんでした。
もしわかる方がいらっしゃったら教えてください><
よろしくお願いいたします。
環境情報：
----------------------------------------------
サイト名：くるラブ
サイトURL： https://kuru-love.com
ホームURL： https://kuru-love.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/silk/style.css
WordPressバージョン：5.7.2
PHPバージョン：7.4.13
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.1
カテゴリ数：5
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：953バイト
functions.phpサイズ：238バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.9
All-in-One WP Migration 7.44
Aurora Heatmap 1.4.12
Autoptimize 2.8.4
BJ Lazy Load 1.0.9
Classic Editor 1.6
Cocoon Custom BlogCard 1.2.3
Cocoon Custom Heading 1.1.1
Cocoon Custom Index 1.1.1
Cocoon Custom Sidebar 1.0.1
Cocoon Custom TOC 1.1.1
Contact Form 7 5.4.1
Duplicate Page 4.4
Pochipp 1.4.3
XML Sitemaps 4.1.1
----------------------------------------------
This topic was modified 3年前 2回 by hossy
2021年7月3日 16:48
hossyさん
記載していただいた内容をぱっと拝見しただけでは。。。という感じです。
例えばテストページを作成していただいて、実際の状態を確認させていただくことは可能でしょうか。
パターン毎にページを作成していただいて、URLをご提示いただくと、確認しやすいと思います。
テストページ作成する際は、noindexにしておくと良いかと思います。
ご検討ください。
わいひら reacted
2021年7月3日 17:10
なんとなくですが。。。
最初の関連記事非表示のCSSに、人の目には見えない（表示されない）スペース以外の文字などが入っていて利いていないのかしら。。。という気はしなくはないです。
（完全なる推測ですが。）
わいひら reacted
2021年7月3日 17:59
前略、hossyさん
ご利用中のプラグインについてです。
「Autoptimize」はソースコードを縮小化するようですが、Cocoonの高速化設定を利用する場合は不要となります。Cocoonの高速化設定と併用すると不具合が生じるようです。
お使いにならない方が無難です。
Cocoonおすすめのサイト高速化設定
https://wp-cocoon.com/site-speed-up/
「BJ Lazy Load」は画像の遅延読み込みのためのプラグインのようですが、WordPress5.5からはWordPress自体に画像の遅延読み込み機能が同梱されたので、同じ機能同士が重複して不具合を起こす可能性が高いため、お使いにならない方が無難です。
「Classic Editor」 については、Cocoonの場合は、以下の設定でプラグインなしでクラシックエディターを利用可能ですので、これも不要です。
ブロックエディター（Gutenberg）を使用しないで旧ビジュアルエディターを利用する方法
https://wp-cocoon.com/gutenberg-off/
WordPressを日本語環境で利用する場合は、プラグインの「WP Multibyte Patch」のインストールは必須だそうなので、こちらはインストールしておいた方が無難のようです。
WordPress５から無くなったWP Multibyte Patchは必須なので手動インストールしましょう
https://yuki-stock.com/2019/01/09/hello-world/
This post was modified 3年前 by リフィトリー
わいひら reacted
Topic starter
2021年7月3日 18:51
アップしてみました！
何か入ってそうでしょうか ?
お手数をおかけしますが、どうぞよろしくお願いいたします。
Topic starter
2021年7月3日 18:58
@leafytree さん
なんと！ありがとうございます！！
さっそく教えていただいたプラグインを削除しました。
高速化設定もありがとうございます！
こちらも設定します。
いつもありがとうございます！
Topic starter
2021年7月3日 19:00
2021年7月3日 19:13
hossyさん
おそらく、リフィトリーさんご指摘の「Autoptimize」の影響です。
最初、以下を確認していたのですが。
https://kuru-love.com/test1/
ソース上に、カスタムCSSが出てきていませんでした。
カスタムCSSがきいていないのではなく、そもそもカスタムCSSがありませんでした。
ところが、「Autoptimize」無効化を拝見して、リロードしたところ、ソースにカスタムCSSが出てきました。
hossyさんにもご確認いただきたいのですが。
今見ていただくと、全てのCSSが有効になっていないでしょうか。
（test1～4まで。キチンと確認はしていないのですが。）
「Autoptimize」が有効だと、カスタムCSSが出てこない可能性がありそうです。
ちょっと見てみたところ、「Autoptimize」はただCSSを圧縮するだけでなく、圧縮したものをキャッシュしているように見受けられました。
（cacheフォルダができていました。）
その影響もあったのかもしれません。
「Autoptimize」はご使用にならずに、Cocoonの高速化のみをご利用になさるのが良いと思います。
わいひら reacted
2021年7月3日 19:19
ちなみに、以下ですが。
https://kuru-love.com/test2/
こちらは、理由は分かりませんが、「Autoptimize」が有効の時から、カスタムCSSがソース上に出てきていました。
しかも、2つ書いた両方とも。
（2つ共有効ですので、後の書いた方が利いていました。）
なぜ出てきていたのは。。。ちょっと謎です。
わいひら reacted
2021年7月3日 19:25
hossyさん
少し確認をさせていただきたいのです。
ご提示いただいた環境情報を確認すると、以下のようになっています。
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.9
All-in-One WP Migration 7.44
Aurora Heatmap 1.4.12
Autoptimize 2.8.4
上記を拝見する限り、「Autoptimize」は有効であっても、CocoonのHTMLやCSSの縮小化は無効だったということですよね。
それでお間違いないでしょうか。
上記で間違いなければ。。。ですが。
今までも、「Autoptimize」はCocoonの高速化と機能が重複して不具合が起きると、ご案内してきたのですが。
そもそも、Cocoonの高速化が無効であっても、不具合が発生するということになります。
（最低でも、カスタムCSSについては。）
すみません、もぐもぐタイムが迫っております。
しばらく、席を外してしまいます。
（スマホで、閲覧だけはできると思います。）
わいひら reacted
2021年7月3日 20:28
@mk2_mk2 さん
私は「その場しのぎ」の場合が多いので、確認作業は疎かになりがちです。
Cocoonの高速化設定と併用していない場合でも、何例かの不具合があったような記憶（おぼろげですが）があります。
Autoptimize 説明（Google自動翻訳を利用させていただきました）
自動最適化により、Webサイトの最適化が非常に簡単になります。スクリプト、スタイルを集約、縮小、キャッシュし、デフォルトでページのヘッド領域にCSSを配置できますが、重要なCSSをインラインに配置して、完全なCSSの読み込みを延期したり、スクリプトを移動および延期してHTMLをフッターおよび小型化することもできます。
画像の読み込みを最適化および延期し（WebPおよびAVIF形式をサポート）、Google Fontsを最適化し、JavaScriptを非同期で読み込み、余分なWordPress絵文字を削除できます。
このようにして、すでにHTTP / 2を使用している場合でも、Webサイトのパフォーマンスを向上させることができます。あらゆるタイプのWebサイトのニーズに合わせてAuoptimizeを変更するために利用できる非常に包括的なAPIがあります。
パフォーマンスが重要であると考える場合は、実際には多くのページキャッシュプラグインの1つを使用する必要があります。
Autoptimizeを補完するいくつかの良い候補は、例えば、Speed Boosterパック、KeyCDNのキャッシュイネーブラー、WPスーパーキャッシュ、またはCloudflareが好きな場合はWPCloudflareスーパーページキャッシュです。
This post was modified 3年前 by リフィトリー
ｍｋ２ reacted
Topic starter
2021年7月3日 21:04
@mk2_mk2 さん
@leafytree さん
ほんとにありがとうございます！
今見たら、ちゃんとCSSの記述通りになってました！
Autoptimizeのせいだったんですね ?
@mk2_mk2 さん
＞こちらは、理由は分かりませんが、「Autoptimize」が有効の時から、カスタムCSSがソース上に出てきていました。
削除する前にリンク貼っちゃったからかもしれません ?
ご迷惑をおかけして申し訳ございません。
プラグインはちゃんと調べてから入れなくちゃいけませんね＞＜
@mk2_mk2 さん 、 @leafytree さん 、
本当に本当に助かりました！
ありがとうございました！！
2021年7月3日 21:31
hossyさん
解消なさったようで、何よりです。
Cocoonの高速化があれば、「Autoptimize」は不要なのは間違いないです。
Cocoonの高速化のみで、今後はお願いします。
リフィトリーさん
「Autoptimize」は、圧縮だけでなく、いろいろ多機能なんですね。
それだけに不具合もおきそうです。
ローカル環境で試してみましたが、不具合の再現まではできませんでした。
（そんなに粘り強くは試していませんので。）
「Autoptimize」は、やはりcacheを作るようです。
下部に、キャッシュ削除のボタンも。
「Autoptimize」のCSS最適化を使うと。。。
CocoonのカスタムCSSは消えます。
その代わりに、他のCSS等とまとめられて、「Autoptimize」のキャッシュファイルが作成されて、そこにカスタムCSSが格納されていところまでは確認しました。
私が試した際には、カスタムCSSを更新すると、「Autoptimize」のキャッシュにも反映されていたんですよね。
「Autoptimize」の機能は、CSS最適化しかONにしませんでしたから、その関係かもしれません。
HTMLやJavaScriptなども最適化すると、何か起こるのかもしれません。
HTMLやJavaScriptなども最適化すると、何か起こるのかもしれません。
ちょっとそこまでの体力は。。。
という感じです。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。