【Cocoon】親テーマ更新時のエラー解決方法と、Cocoonテーマ設定のバックアップを説明します。

ブログ運営のメモ Cocoon

こんにちは、yujiです!このブログでは、WordPressを使ったブログ運営について詳しくまとめています。

Cocoonの親テーマの更新をしたらページの表示が崩れてしまいました。どこに問題があるんだろう?」

このような質問に、Cocoonを利用している僕が答えます。

先日Cocoonの親テーマを更新したところ、ページの表示が崩れるエラーが発生しました。ページの状態は以下の通り。

エラーを読むとどうやらCocoonの子テーマに不具合が起きているらしく、以下のようにWordpress側からもメールでの報告が来ています。

ということで、この記事ではブログ初心者でもできる、Cocoon更新エラーの対処法を紹介します。

※このブログはWordPress/Cocoonをベースにカスタマイズしています。

Cocoon更新エラーの原因とは?

少し込み入った状況だったのですが、この場合のエラーはCocoonのphpを編集している場合に起こることがわかりました。

なので、自分でCocoonをカスタマイズして使っている人は以下のエラー内容が当てはまると思います。

エラーの原因
Cocoonのphpを編集する際、「親テーマ」ではなく「子テーマ」で編集する必要があります。そこで僕の場合は『tmpファイル』を編集したかったので、親テーマ内のtmpファイルを子テーマ内にコピーして編集していました。
その状態で親テーマの更新をすると、『tmpファイル』も新しい内容に更新されます。結果、子テーマ内に残された『古いtmpファイル』が機能しなくなるという現象が起きていました。

なので、子テーマ内のtmpファイルを手動で最新の状態に更新することで解決します。

「続いて、tmpファイルの更新方法を解説します。」

FTPを使って、子テーマ内のtmpファイルを手動で更新。

tmpファイルはローカル環境で編集します。

テーマエディタ内でtmpファイルの書き換えができれば楽なのですが、WordPressでは編集ができないので、FTPを使う必要があります。

このように、WordPressのテーマエディタ内でtmpファイルを編集しようとすると、「何かうまくいかなかったようです。変更が保存されていないかもしれません。手動で修正し、FTP経由でファイルをアップロードすることもできます。」と表示されます。

これは遠回しに書いてありますが「ファイルを編集する場合は、ローカル環境で編集して、FTPでアップロードしてください」という意味です。まとめると以下の通り。

tmpファイルの編集手順
①サーバー内のtmpファイルをFTPでダウンロード。

②ローカル環境でtmpファイルを書き換え。

③tmpファイルをFTPでサーバーにアップロード。

このように、サーバー内のファイルを一旦ダウンロードして、ローカル環境でtmpファイルを書き換えてから再度サーバーに上げなおす必要があります。

FFFTPを使うと早いです。

ローカルとサーバーのやり取りには『FFFTP』を利用するとスムーズに処理ができます。

これがFFFTP使用中の様子です。左側が僕のパソコン内・右側がサーバー内です。ファイルのやり取りを同じ画面上で、ドラッグのみでできます。

①サーバー内のtmpファイルをFTPでダウンロード。

サーバー側の親テーマから、tmpファイルをパソコン内にダウンロードします。

親テーマの位置
/独自ドメイン.com/public_html/wp-content/themes/cocoon-master

更新済みのCocoonMasterのtmpファイルを、左のローカルへコピーします。

②ローカル環境でtmpファイルを書き換え。

tmpファイルを編集する場合、テキストエディタで書き換えます。

③tmpファイルをFTPでサーバーにアップロード。

書き換えたtmpファイルを、子テーマへアップロードします。

子テーマの位置
/独自ドメイン.com/public_html/wp-content/themes/cocoon-child

先ほどローカルで編集したtmpファイルを、右のCocoonChildへコピーします。

これで、子テーマ内のtmpファイルを手動で更新できました。

ページのデザインは以下の通り。

表示がもとに戻りました。

「続いて、Cocoon設定のバックアップの取り方を説明します。」

Cocoon設定のバックアップ

ブログの表示が崩れた場合、今回のようにうまく回復できるとも限りません。なので、今後のためにバックアップを取っておこうと思います。

「Cocoon設定」のバックアップ

「Cocoon設定」→「バックアップ」と進みます。

「バックアップファイルの取得」をクリック。

「cocoon_settings.txt」がダウンロードされました。これでいつでも「Cocoon設定」を復元できます。

「style.css」のバックアップ

「style.css」はメモ帳にコピペします。

「外観」から「テーマエディター」に進みます。

「style.css」をコピーします。

「style.css」をメモ帳で作成しました。勝手にアイコンに歯車がつきます。

この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました!

【スキルなしでもOK!】記事へのアクセスが増えるおしゃれな『アイキャッチ画像』の作り方【canva】
【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!
【Twitterデータ公開してます】14日間でフォロワーを2,000人増やすノウハウ。
【2020年最新版】キャッシュレス初心者向け、おすすめのQRコード決済4選!
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!

コメント

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