【Cocoon】投稿画面・編集画面の表示がおかしくなった時の対処法と作業途中に出た不具合の解説

数日前から、Cocoonの記事投稿編集画面が急におかしくなりました。
おそらく新しいバージョンのアップデートをしたからではないかと推測されます。
不具合のリリースは出ていないので、修正バージョンがそのうち出るだろうと思いしばらくそのまま使っていたのですが、ブロックと段落の区別がつかないのはなんとも書きにくく、見出しもどのサイズにしても表示が変わらないので対応することにしました。

きっと同じようなお悩みを持っている方がいらっしゃるかと思います。
ゴールまでの道が全員正解で進むわけでもないと思うので、状況が改善されるまでに手順の違いで起きた不具合も一緒に書き記していきたいと思います。

ざっくりと探ってみるとこのような現象が起きています。

現状把握

外観→テーマで現在テーマの状態がどのようになっているのか確認してみました。

なんと、親テーマファイルが２つになっています。
最初はバージョンのせいだとわからなかったので、テーマの詳細に進み画面下に「削除」が出る方が古いほうだと思い、そちらを削除し、親１、子１の状態にしました。

しかし、投稿画面の不具合は変わらず。
わいひらさんのCocoonの公式サイトのフォーラムから同様の不具合を見つけて原因を探りました。

ConoHaWingの設定でCocoonのファイル名が書き換わっている

何が原因で書き換わるのかはConoHaのサイト側の仕様らしいのでわかりませんが、制作側では親テーマのファイル名を【cocoon-master】としているのに対し、ConoHaのWordPressにアップデートすると【cocoon】に変更されてしまっているようです。

環境情報でバージョンを見る

まずは環境情報を見て現在どうなっているのか確認です。

この画面でCocoonのバージョンを見ることが出来ます。

修正前の画像を取り忘れていたので修正後の画面です。
修正前は

となっていました。

サイト上にある親テーマファイルのバージョンは2.2.8.1と最新ですが、環境情報では2.2.5.1となっており、アップロードをしても上書きはされていません。
これは前述したとおり、ファイル名が書き換わった為だと思われます。
ねじれ国会ならぬねじれアップロード。

最新バージョンを適用するために

以上を踏まえて対処をしてみました。

今適用されている親テーマのバージョンを調べると、前述のとおりバージョンは2.2.5.1でした。
アップデートをして最新に更新されたと思いこんで、古い方だと勘違いをして削除したのは最新のバージョン: 2.2.8.1だったようです。

削除の項目出たのでアップロードされると一番新しいファイルがシステムで最新と認識されているものと思っていた為です。
（適用されている親テーマでは【テーマの詳細】をクリックした後に出る画面の下に削除の文字はでません。）

再度Cocoonのサイトから2.2.8.1の親テーマをダウンロードし、最新版をWordPressにインストールしました。

やはりまた親テーマが２つに。

親テーマを一つにしてみた

今度はバージョンを確認しながら、バージョン: 2.2.8.1の方を有効化して、バージョン: 2.2.5.1の方を先に削除しました。

再び２つになりましたがここで事件発生です。

どういうことでしょうｗ
確かにテーマ画面には親テーマがあり、子テーマをメインにしてあります。
親テーマがないということは今まで書いた記事も全初期化とか削除とかされているんじゃないかと心臓がバクバクしましたが、普通に記事も残っていて無事でほっとしました。

だがしかしです。あるにも関わらずないといわれる。

親テーマがないっていうことは、ベースになるテーマがない。という事です。
お皿なしで食事が出てきたみたいなあり得ない光景です。
つまり、親テーマのCocoon自体が存在しないとWordPressは認識しています。
そうするとどういうことが起きるかというと、
メニュー欄から『Cocoon設定』そのものがきれいさっぱり消えているのです。
さすがにこれは焦りました。
記事はあっても設定画面がなければなにもできません。

テーマエディターを書き直す

このねじれを解消するためにはエディターが最新バージョンのCocoonを認識する必要があります。
オートで作業をしてもファイル名書き換えがまだ起こっているので（2021/3/14現在）、
Cocoonの公式ページで書かれていた手動の修正方法で対処しました。

最新版のテーマ（親テーマのCocoon）を反映させるために、テーマエディターを書き換えます

エディターが『Cocoon Child: スタイルシート (style.css)』
であることを確認し、下記の赤文字の部分を直してください。

cocoonと書いている部分を

cocoon-masterと書き直します。

これで、反映されていなかった親テーマを読み込むことが出来るようになりました。

以上の手順まで終わらせたところ、2.2.8.1のバージョンファイルを読み込む事が出来るようになりました。投稿画面も今までどおり見出しの表示もされ、ブロックの区別もつくようになって行間が詰まることもなくなりました。

Cocoon設定のメニュー欄も無事再表示されるようになりました。
再度Cocoon設定からテーマ情報を表示し、

のようにバージョンが一番新しいものになっていれば設定成功です。

新しいバージョンに更新されたのを確認した後は古い方のファイル（現在の場合、2.2.5.1）は削除しても大丈夫です。削除するバージョンを間違えないようにしましょう。

改善方法まとめ

以上が投稿画面が詰まったような表示になっておかしい不具合を対処した手順と、その途中で起きた不具合でした。

以下は不具合改善のための最短の手順になります。
項目の細かい説明は↑をご参照ください

この手順で作業して改善されない場合は私のように途中や作業前に間違った工程をやってしまっている可能性があるので、自分のした作業でどこで修正を入れた思い出してリカバリーしてください。

改善手順

テーマが複数ないか

テーマが複数ないか『外観→テーマ』で確認

バージョン確認

『Cocoon設定→テーマ情報』から現在の親テーマのバージョンが自分が使用したいバージョンか確認

テンプレート書き換え

使用したいバージョンではなかった場合、『外観→テーマエディター』で『Template』が『cocoon』と書かれていたら、『cocoon-master』と書き換える

バージョン確認

再度『Cocoon設定→テーマ情報』を表示し、目的のバージョンに変わったか確認

旧バージョーン削除

テーマが複数ある場合は現在適用のバージョンを除いて削除してもOK

まとめ

この表示不具合はアップロード時に表示の為のシステムエラーというよりもConoHaWingのサイト設定により意図せず親テーマが複数存在してしまう事が主な原因なようです。
検索もブロックエディターの表示不具合ではなく、テーマが2個存在する等の項目で対処法を探っていったほうがよさそうです。

今回起きた不具合は一瞬肝を冷やしましたが、Cocoon製作者でいらっしゃるわいひらさんのページでしっかり問題提起、解説してあったので思ったよりも簡単に対処できてよかったです。
Cocoonしか使ったことがないので他のテーマの事はわかりませんが、アフターケアもしっかりされているCocoonはやはり使いやすいテーマだとおもいます。

途中枝分かれして違う不具合も出てしまいましたが、一つ一つをしっかり検証して対処したことで、また一歩レベルが上がることが出来たかな？

これでまた書きやすい画面が戻ってきたので、がしがしブログを書いていこうと思います。

それでは！

ブログ村に登録しています。ポチッとして頂けると嬉しいです＾＾