サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年11月9日 22:52
こんにちは。いつもお世話になってます。
僕はカエレバ・ヨメレバのデザインや補足ボックスなどを小テーマのstyle.cssで設定していおり、そのため親テーマのカエレバに関するコードを消しています。
しかし、バージョンアップすると消したコードが復活するため、アップデートするたびにこれらを消しています。
「アップデートのたびに消せばいい」と言われればそれまでですが、バージョンアップの頻度が多くコードの量もそこそこなので、毎回コードを消すというのはしんどいです。
とはいえ、これは私の都合ではあるので、Cocoon側に何かを要求するというものではなく、『Cocoonをバージョンアップしても独自設定が変わらないようにするにはどうすれば良いか』、知恵をお借りしたいです。
ご対応のほどよろしくおねがい致します。
2018年11月10日 06:37
小テーマのstyle.cssで設定していおり、そのため親テーマのカエレバに関するコードを消しています。
ソースコードを減らしたいという目的でしょうか？
子テーマに書いたCSSは親テーマのコードを上書するので、優先順位が負けてなければ反映されます。
『Cocoonをバージョンアップしても独自設定が変わらないようにするにはどうすれば良いか』
親テーマと同じ指定方法かそれより優先順位をあげて上書きさせると良いと思います。
記事内のみ反映させたければ、例えば。.entry-content 半角スペースをセレクタのはじめに付けると記事内のみ反映させ、優先順位を上げることができますよ。
実際見てないので雑な説明ですが
わいひら reacted
2018年11月10日 19:23
Cocoon高速化設定の「CSS縮小化」設定を使うというのであれば、いけるかも。
縮小化機能を用いた方法でも良いでしょうか？
※まだ実際にコードを書いて試してないので、試してみないとうまくいくかはわからないです。
トピックスターター 2018年11月11日 16:24
>かうたっく さん
コメントありがとうございます。
ソースコードを減らしたいという目的でしょうか？
子テーマに書いたCSSは親テーマのコードを上書するので、優先順位が負けてなければ反映されます。
目的は親テーマにあるコードによって、独自で設定したデザインが崩れてしまうので、それを防ぐために行っていました。
バージョンアップなどで親テーマにコードが追加されると、表示がおかしくなるといった不具合が発生します。
ご指摘の通り、小テーマが親テーマを上書きするので、表示がおかしい＝上書きが上手く行われてないということなので、次のバージョンアップ後にコードを見直してみようと思います。
> わいひら さん
コメントありがとうございます。
Cocoon高速化設定の「CSS縮小化」設定を使うというのであれば、いけるかも。
CSS縮小化を設定しています。何卒よろしくお願い致します。
2018年11月11日 16:41
目的は親テーマにあるコードによって、独自で設定したデザインが崩れてしまうので、それを防ぐために行っていました。
子テーマの優先順位が低いので、親テーマのスタイル指定が反映されるんだと思います。
どこがどのようになっているかわかりませんが、親テーマの指定と優先順位が同じか、それ以上にすればイケると思われます。
2018年11月11日 22:11
まずは以下のファイルでアップデートを行ってください。
https://github.com/yhira/cocoon/archive/master.zip
その後子テーマのfunctions.phpに以下のコードを貼り付けることでいけるのではないかと思います。
add_filter( 'css_url_to_css_minify_code', function ($css, $url){
if (!includes_string('/cocoon-child', $url)) {
$css = preg_replace('/\.booklink.+?,/', '', $css);
$css = preg_replace('/\.kaerebalink.+?,/', '', $css);
$css = preg_replace('/\.tomarebalink.+?,/', '', $css);
$css = preg_replace('/\.shoplink.+?}/', '', $css);
}
return $css;
}, 10, 2 );
※上記は高速化設定で「CSSの縮小化」を行っているときのみ有効なコードです。
トピックスターター 2018年11月15日 21:33
かうたっくさん、わいひらさん、ご返答ありがとうございます。
あれから頂いたアドバイスを元に試してみた所、アップデート後にPHPの記述する方法では、表記は変わらない（＝アップデート後に表示が変わってしまう状態）でした。
ただ、その後に、親テーマのソースと小テーマのソースをもう一度見比べて、小テーマになかった要素を設定した所、無事に問題が解決しました。
貴重なアドバイス、ありがとうございました。
2018年11月15日 22:49
小テーマになかった要素
これはなんなんでしょう？
特に普通にCocoonを利用していれば、コード以外は必要ないと思っていたんですけど。
トピックスターター 2018年11月16日 14:41
＞わいひらさん
小テーマになかった要素
申し訳ありません、「要素」ではなく「プロパティ」でした。
親テーマのstyle.cssの.kaerebalink-imageには「width」などのプロパティがありますが、私が追加した子テーマにはそれらがなかったため、カエレバの商品画像の表記がおかしくなっていました。
わいひら reacted
2018年11月16日 15:17
子テーマで指定してないと、親テーマのstyleが反映されるのが原因でしたか。
個人的にわいひらさんのは他の環境では有効だと思いますが、内容を見てないのでコードがもったいない気もします。
圧縮された中でそのコードはどのように反映されるイメージでしたか？
2018年11月16日 19:58
親テーマのstyle.cssの.kaerebalink-imageには「width」などのプロパティがありますが、私が追加した子テーマにはそれらがなかったため、カエレバの商品画像の表記がおかしくなっていました。
なるほど。
.kaerebalink-imageの幅部分のみは、親テーマのものを使用していたので、崩れたということですね。
ただそうなると、以前自前で消していた時も崩れるような。
とりあえずは、うまく動作するようになったようで良かったです。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。