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カスタマイズ依頼

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

誤って親テーマに追加してしまったカスタ...
 
共有:
通知
すべてクリア

[解決済] 誤って親テーマに追加してしまったカスタマイズの子テーマへの移行をご教示ください

19 投稿
4 ユーザー
10 Likes
4,225 表示
Amy
 Amy
(@amy)
Estimable Member Registered
結合: 3年前
投稿: 88
Topic starter  

はじめまして。初心者です。宜しくお願いいたします。

 

 先ほど来、別の質問でのスレッドで、@leafytreeさまから、子テーマがうまく有効化されておらず、親テーマが有効になっている状態だとのご指摘を受けました。子テーマでの運用に移行し、正常化するための適切な方法をご教示いただけましたら幸いです。

 @leafytreeさまからの、公開済みのご指摘を以下に貼りつけます。

===

(以下、引用開始)

「親テーマ、子テーマの件ですが、現在は、たぶん親テーマが有効になっている状態だと思います。

と、言うのも、カスタマイズのCSSは、親テーマのダッシュボードの「外観」→「カスタマイズ」→「追加CSS」に設定されている様子だからです。

子テーマには、カスタマイズのCSSが設定されていないので、子テーマを有効化するとサイトの外見が変わってしまう可能性があります。

既に多少カスタマイズされていらっしゃるようですので、サイトの外見を保ったまま、子テーマに移行するのは、コツが要ります。

大雑把に書くと

◆カスタマイズしたCSSの親テーマから子テーマへの引っ越し(コピペ)

◆親テーマのCocoon設定のエクスポート

◆親テーマからエクスポートしたCocoon設定を子テーマにインポート

こんなイメージです。

(以上、引用終了)

====

当該ブログは以下のURLのものです。

https://globalkidsmedia.com/

 

以下に、環境情報を貼りつけます。

子テーマを有効したうえで、あくまでも子テーマ上でカスタマイズを行うのが適切ということだと理解しています。

どなたかお手すきの時に、子テーマへの適切な移行方法をご教示いただけましたら幸いです。

なにぶん初心者なもので、可能でありましたら平易な表現でご説明いただけますと非常に助かります。お手数をお掛けして誠に申し訳ございません。

 

(以下、環境情報です)

----------------------------------------------
サイト名:Amy’s Blog(あみぶろ)
サイトURL: https://globalkidsmedia.com
ホームURL: https://globalkidsmedia.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
スキン:/wp-content/themes/cocoon-master/skins/skin-colors-blue/style.css
WordPressバージョン:5.3.2
PHPバージョン:7.2.27
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.1.3
カテゴリ数:2
タグ数:1
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2020/01/ホームイメージ-1.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.3
All In One SEO Pack 3.3.5
Broken Link Checker 1.11.11
Contact Form 7 5.1.6
Edit Author Slug 1.6.1
EWWW Image Optimizer 5.2.2
Google XML Sitemaps 4.1.0
Regenerate Thumbnails 3.1.3
----------------------------------------------

 

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

Amyさん

ツイッターの件もそうでしたが、本件も私は経験がないので多少ズッコケる可能性があります。そこはご勘弁ください。

Cocoon設定については、親テーマからバックアップファイルをダウンロードして、子テーマに復元する機能があるようですので、それを利用すれば良いかと思います。

それ以外の、ご自身でカスタマイズした部分については、CSSのコードを親テーマからコピーするなどして、子テーマに貼り付けて設定し直す必要があるかと思います。

CSSのコードは、秀丸エディタなどの文字コードがUTF-8で保存できるエディタを使って、適当な名前(カスタマイズCSSバックアップとか・・)を付けてご自身のパソコンにも保存しておくと便利かつ、安全です。

Windows10のバージョン1903からは、メモ帳でも「UTF-8(BOMなし)」をプルダウンメニューから選択して保存することができるようになっています。

「UTF-8(BOMなし)」で保存できるエディターなら、親テーマから子テーマに直接貼り付けなくても、一旦、キープすることも可能です。

改めてサイトを拝見すると、それほど、沢山カスタマイズしてはいないのかなとも思われます。

CSSのカスタマイズは、先に記載したように親テーマのダッシュボードの「外観」→「カスタマイズ」→「追加CSS」にあるような気がします。

ただ、それ以外のカスタマイズについては、ご本人しかわからないです。

子テーマのカスタマイズのCSSの設定場所については、「外観」→「カスタマイズ」→「追加CSS」ではなく、子テーマの「外観」→「テーマエディター」と辿ると「Cocoon Child: スタイルシート (style.css)」の画面が開くので「子テーマのスタイルを書く」の直下に貼り付けるのが良いかと思います。

作業の順序は、CSSのコピーからでも、Cocoon設定の移行からでも、どちらでも可能かと思います。

ただ、どちらからやるにしても、親テーマ、子テーマを切り替えながら、一つやっては、表示を確認して、次の作業へということになります。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

現在適用されているテーマが親なのか子なのか見分けるには、環境情報を見るか、

 
子テーマが適用されている状態。親テーマの下に子テーマがある。
親テーマのときは、親テーマだけの表記になります。
 
 
テーマ設定の画面で確認できるはずです。

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

これは、好みなんですけど・・

かんたんリンクの表示のCSS

/*--------------------------------------
もしもの簡単リンクのカスタマイズ
--------------------------------------*/
.easyLink-box {
margin: 30px auto!important;
}

.easyLink-info-btn a{
font-size: 0.8rem!important;
}
.easyLink-info-btn-amazon{
background:#ffb36b!important;
}
.easyLink-info-btn-rakuten{
background:#ea7373!important;
}
.easyLink-info-btn-yahoo{
background:#73c1ea!important;
}

 

 

PC表示は横3つボタン。

 
モバイルは縦3つ。
 
 

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

一連の作業を終えて、もうこれで大丈夫だと、なったら、親テーマのCocoon設定をリセットして、初期化します。

これが残っていると、子テーマで設定したのか、親テーマで設定したのか、わからなくなってしまう状況が予想できます。

もちろん、親テーマに設定したCSSも削除しておきます。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

テーマ設定をリセットする方法

間違えて、子テーマをリセットしないように注意してください!


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14137
 

文字コードがUTF-8で保存できるエディタとかであれば、Windowsで無料のものであればVSCodeがお勧めかなと思います。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
僕も、Cocoonの開発で使用しています。

設定項目はいろいろありますが、特に設定をいじらなくてもデフォルトで軽くて使いやすいところがいいところです。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14137
 

あと、画像が半角英数字で保存されていないので、WP Multibyte Patchプラグインもインストールしておくことをおすすめします。
https://ja.wordpress.org/plugins/wp-multibyte-patch/

ホームイメージ:/wp-content/uploads/2020/01/ホームイメージ-1.jpg

現在インストールされていないようなので。

----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.3
All In One SEO Pack 3.3.5
Broken Link Checker 1.11.11
Contact Form 7 5.1.6
Edit Author Slug 1.6.1
EWWW Image Optimizer 5.2.2
Google XML Sitemaps 4.1.0
Regenerate Thumbnails 3.1.3
----------------------------------------------


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14137
 

親テーマ→子テーマに変更したとしても、設定が消えるわけではありません。
親テーマ→子テーマのように戻せば、以前の設定を参照することができるので、あまり子テーマ変更に恐れる必要はないと思います。
ただ一応、leafytreeさんが書かれている方法で、親テーマの設定はバックアップして暫く保存しておくことをおすすめします。


   
Amy
 Amy
(@amy)
Estimable Member Registered
結合: 3年前
投稿: 88
Topic starter  

leafytreeさま

わいひらさま

 

 バタバタしておりまして返信が遅くなりました。もろもろのご助言、まことに有り難うございました。心より感謝もうしあげます。

1)親テーマから子テーマへの移行、ご指示通りに試行しました。素人すぎて100%の自信はありませんが、おそらく無事に移行できたのかなと思います。

2)CSSのカスタマイズは、ご指摘の通り「外観」→「カスタマイズ」→「追加CSS」で行っておりました。失念しましたが、何かのサイトを参考にした際、「外観」→「テーマエディター」→「Cocoon Child: スタイルシート (style.css)」でも、「外観」→「カスタマイズ」→「追加CSS」でも、どちらでも構わないと書いてあったような記憶があります。前者の方は、具体的にスタイルシートのどの部分にコピペをすればいいのかが当時はよく分からなかったため、より簡単そうな後者を選んだと記憶しています。後者はそもそもやってはいけない方法なのか、後者でも問題ないがやり方が間違っていただけなのか、どちらか分かりませんが、前者の正しい貼りつけ方を今回教わりましたので、今後は前者の方法で行いたいと思います。

3)かんたんリンクのカスタマイズ。ご指摘の方法に変えてみました。縦3つでは、横長の色味が並んでビジュアル的に少しくどいかなと思っておりました。横3つになって、少しスッキリしたと思います。ご助言ありがとうございました!

4)もう一つ取り入れていた「横長テーブル」というカスタマイズは、自分でも何のためのカスタマイズか忘れてしまいましたので、削除しました。カスタマイズした際には、何のためのカスタマイズだったのかを、具体的なコードとともに保管する必要がありそうですね。今後はしっかり管理したいと思います。

5)VSCodeのご紹介、有り難うございました。とりあえずダウンロードをして使ってみました。分かる人にとっては有用なサイトだと思いますが、自分にはまだ使いこなせるものではなさそうです。「UTF-8」が何なのかすら分からない素人ですが、コードを保存するのに適しているということだけは分かりましたので、同様の用途で今後も使っていきたいと思います。お詳しい方に教えていただかなければ絶対に知り得なかった情報かと思います。貴重な情報を有り難うございました。

6)WP Multibyte Patchも取り入れました。恥ずかしながら「画像が半角英数字でなければいけない理由」が現時点では分かりませんが、半角英数字の方が何かと有用なのだと思います。このほかにも取り入れた方がよさそうなプラグインがございましたら、ぜひともご紹介くださいませ。それとも、あまり数多くのプラグインを取り入れない方がよいものなのでしょうか。

 繰り返しになりますが、このたびはご親切、ご丁寧にご解説いただきまして、本当に有り難うございました。問題を解消するのは不可能かなと諦めかけていましたので、九死に一生を得た思いです。このご恩を忘れず、多くの方に貢献できるようなブログ運営に精進していきたいと思います。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

上手くいった様子で、良かったです。

お粗末な案内で恐縮です。 ? 


   
Amy
 Amy
(@amy)
Estimable Member Registered
結合: 3年前
投稿: 88
Topic starter  

leafytreeさま

 とんでもございません。素人にも分かりやすく説明してくだいまして、本当に感謝しております!

わいひらさま

 すみません、VSCodeのことで一つ追加で教えてください。ただいまVSCodeを使ってコードを保存したところ、Windowsのメモ帳の形で保存されました。それで宜しかったでしょうか。コードを保存する上で重要だと思われる「UTF-8(BOMなし)」の形式で保存するためには、何か設定を変える必要がありますでしょうか。ちなみに、現在使っているパソコンのWindowsのバージョンは1809です。勤務先の貸与パソコンなので、勝手にバージョンアップしていいのかどうか聞いてみないと分かりません。重ね重ねの質問でまことに恐縮ですが、ご助言いただけましたら幸いです。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14137
 

WP Multibyte Patchが何をしているかについてはこちらが参考になるかと思います。
https://masatoshihanai.com/wp-multibyte-patch/

投稿者:: @amy

ただいまVSCodeを使ってコードを保存したところ、Windowsのメモ帳の形で保存されました。それで宜しかったでしょうか。

単にtxtファイルがメモ帳に関連付けられているだけかと思われます。
開くときVS Codeで開けば問題ないかと思います。
関連付けについては「テキスト 関連付け」などで検索してみてください。

投稿者:: @amy

コードを保存する上で重要だと思われる「UTF-8(BOMなし)」の形式で保存するためには、何か設定を変える必要がありますでしょうか。

VS Codeはデフォルトでその設定になっているかと思います。

投稿者:: @amy

パソコンのWindowsのバージョンは1809です。

Windowsであれば、Windows10とか、8.1とかで言っていただけると助かります。

 


   
Amy
 Amy
(@amy)
Estimable Member Registered
結合: 3年前
投稿: 88
Topic starter  

@yhira

わいひらさま

 今回も有用な情報を有り難うございます。

 失礼しました。Windows10です。開くときにVSCodeで問題なく開けるようですので、このままの状態でコードを保存しても大丈夫そうでしょうか。もし保存したバックアップを再び使用する際にはVSCodeを使って開き、それをワードプレスにコピペするという形ですね。

 

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14137
 

WordPressのテーマカスタマイズ機能にコピペするのであれば、エディターは何でもいいかも。
例えばFTPでstyle.cssをまるごとアップロードするとかであれば、UTF-8が使えるエディターの方が良いと思います。
ただいずれにせよ、文字コードが違っても半角英数字は変わらないので、コードは反映されると思います。


   
Amy
 Amy
(@amy)
Estimable Member Registered
結合: 3年前
投稿: 88
Topic starter  

わいひらさま

 

 どうも有り難うございます!!


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 
投稿者:: @yhira

ただいずれにせよ、文字コードが違っても半角英数字は変わらないので、コードは反映されると思います。

アップロードを行うのであれば、コメントCSSなら

/*こんなの*/

たぶん文字コードがおかしなものであれば、文字化けする可能性はあるかもしれないです??

 

難しいかもしれないですが、状況によっては、見た目が不雑で多機能なテキストエディタはいらないかもしれないですね。

※はじめはTerapadなどシンプルなテキストエディターが良いと思います。それに慣れたら、どのテキストエディタでも使い勝手云々がどう。とわかるかと思います。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14137
 
投稿者:: @kautakku

たぶん文字コードがおかしなものであれば、文字化けする可能性はあるかもしれないです??

一応補足しておくと、なので「半角英数字」と書きました。
コード部は文字化けしなかったかと思うので。

添付画像は、シフトJISをUTF-8で開いた状態。


   
共有:

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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