【Cocoon】テーマ更新時のエラー解決策と「何かうまくいかなかったようです。」と表示されたときの対処法

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

Cocoonを更新をしたらページの表示が崩れてしまいました。
どこに問題がありますか?

以上のような、Cocoon更新のエラーに関する疑問にお答えします。

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

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

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

※ブログのデータが崩れた場合、うまく回復できるとは限りません。
なのでこの記事の後半では、事前にバックアップを取る方法も解説しています。

Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。この変更についてはまだネット上に情報が不足しているので、以下のまとめが参考になると思います。
【審査承認されたので解説】最新Amazonアソシエイトの審査攻略方法

【年収7ケタ突破】僕のブログの収益化方法まとめ
【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話
【本を聞くアプリ】僕はオーディオブックで、年間100冊聞いてます
【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法

【解説】Cocoon更新エラーの原因とは?

今回のようなエラーは、Cocoonのphpを編集している場合に起こることがわかりました。

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

エラーの原因
Cocoonが正常に実装されるには、親テーマ/子テーマの両方の『php』の構造が同じである必要があります。
僕の場合、子テーマで『php』を編集していたのですが、親テーマの更新で『php』の内容が大幅に変わったタイミングで、子テーマ内で編集中の『php』が機能しなくなりました。

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

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

サーバー内のファイルを更新する方法

ここで解説する方法は、自分のパソコンとサーバーを繋げて、ファイルのやり取りをする方法です。
バックアップや画像の管理なども、こちらの手順で簡単になります。

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

テーマエディタ内で『php』ファイルの書き換えができれば楽なのですが、WordPressでは編集ができません。

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

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

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

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

③編集したファイルを再度サーバーにアップロード

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

【便利】FFFTPを使うと早いです

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

これがFFFTP使用中の様子で、左側が僕のパソコン内・右側がサーバー内です。

ファイルのやり取りを同じ画面上で、ドラッグのみでできます。

FTPを使って、ファイルのやり取りをする手順

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

今回は例として、サーバー側の親テーマから『tmpファイル』をパソコン内にダウンロードします。

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

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

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

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

③tmpファイルを再度サーバーにアップロード

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

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

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

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

ページの状態を確認する

ページの状態は以下の通りです。

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

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

【重要】Cocoon設定のバックアップ

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

バックアップの取り方
①WordPress全体
②Cocoon設定
③style.css

以下で詳しく解説します。

①「WordPress全体」のバックアップ

ブログが軌道に乗って、収益を上げられるようになってきたときに、まさかのトラブルでデータがすべて飛んでしまった…

そんなときのために必要なのが「BackWPup」です。
プラグインを利用することで自動的にデータを安全な場所に保管してくれます。

BackWPup導入方法は、以下の記事で詳しく解説しています。
BackWPup設定方法を解説します

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

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

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

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

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

「style.css」はメモ帳にでもコピペすればOKです。

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

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

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

SEO上位表示と収益化について

このブログでは、以上のようなWordPress/Cocoonを使ったブログ運営について、ノウハウをまとめています。
Cocoonの初心者向けSEO対策は、こちらにまとめています。

【初心者向けSEO対策】おすすめの『Cocoon設定』をまとめて紹介

また、おしゃれなカスタマイズもすべてコピペでOKなので、初心者の方にもおすすめです。

【コピペでOK】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル

yujiblogはCocoonのカスタマイズ記事が人気となり、WordPress/CocoonでのWEB制作をしたい人向けによく検索されるブログとなりました。

cocoon検索1位

おかげさまで『Cocoon』で検索上位をキープしつつ、順調にアクセス数が伸びています。

僕は以上のWEBデザインスキルを独学で習得し、シェアすることでSEOで結果が出すことができました。

そこで、プログラミング未経験の僕が独学でWEB制作を学んだ方法についての情報も、同様に公開しようと思います。
1か月でWEB制作ができるようになるので、興味のある方は是非。

【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法

また、このブログは立ち上げて1年ほどになりますが、毎月10万以上の収益を生み出してくれています。
以下の記事では、WordPressブログを収益化していく方法について、僕の経験をもとに詳しく解説しています。

【年収7ケタ突破】僕のブログの収益化方法まとめ【初心者でも稼げた仕組みとは?】

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

【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話
【限定公開】『もしもかんたんリンク』のカスタマイズ【クリック率アップ】
【無料あり】僕はオーディオブックで、年間100冊聞いてます

【初公開】僕がネイティブから教わった、英会話上達のコツまとめ
【その画像の著作権、大丈夫?】僕がおすすめする『安心のフリー素材サイト』9選

コメント

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