WordPress Simplicity から Cocoon へテーマを移行した

Wordpress

昨年から WordPress を使ってブログを書き出しました。

その時に採用したテーマが「Simplicity」。

初めてWordpress を使うので、無償のテーマを探したあげく、「Simplicity」を見つけたのです。

他のテーマを使ったことがないので、良いか悪いか分からなかったのですが、ネットでの評判で使い出しました。

今日まで何の支障もなく便利よく使ってこれたのは、良いテーマであったということでしょう。

Simplicity 作者の「わいひら」さんには感謝しております。

そして、やっと最近になって、 WordPress でのブログ作成にも慣れてきました。

ところが、ネットを徘徊していると、春先から「Coccoon」という単語をよく見かけるようになってきました。

しかし、気にはなっていたのですが、しばらくは調べもせずにいました。

そして、6月に入って何かの記事を見ている時、「Coccoon」とは「Simplicity」の後継テーマであるということを偶然見つけたのです。

早速、調べてみました。

いろいろと機能が改善され良さそうな感じです。

バージョンもちょうど 1.0 になったところでしたので、移行することにしたのです。

そして、乗り換え作業を開始。

すぐに変更できると思っていたのが、手こずってしまいました。

以下、その乗り換え作業の記録を残しておきます。

バックアップ

テーマを変更することに際し、何か不手際があった場合のことを考え、まずバックアップを取りました。

バックアップも1回しか取ったことがなく、再度バックアップ方法を復習しながらですので最初からつまずきそう。

バックアップ方法は、今後のために別記事にまとめることにします。

また、バックアップを取ったはいいが、バックアップから元に戻したことがないので、一度リストアもやってみなくてはと思っています。

Cocoon のインストール

バックアップを取った後は、ひたすら移行作業です。

まず、「Cocoon」テーマを

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

よりダウンロードし、

Cocoonテーマをインストールする方法
WordPressにCocoon親テーマと子テーマをインストールして利用するおすすめのインストール方法です。

を見てインストールしました。

そして、Cocoonテーマを有効化。

これで、「Simplicity」から「Cocoon」 にテーマが切り替わりました。

しかし、ここからが大変でした。

以下に気になったこと、変なところ、やったことを書き出します。

表示が変になった点と修正

テーマを Cocoon に切り替えた直後にどのような表示になるか確かめてみました。

すると、以下のような訂正を必要とする点が見つかりました。

各記事本文のトップに同じ画像が2つ表示される

テーマを Cocoon に変更した直後、記事本文がどのように表示されるか確かめると、下のように同じ画像が2つ表示されました。

0eyecatch1

「どういうこと?」と、少し疑問に思いながら調べてみました。

Simplicityでは、記事本文トップに入れた画像をインデックスページのアイキャッチ画像として自動的に入れることができました。

Cocoonでは、Simplicityと同じようにもできますが、アイキャッチ画像を設定すると本文トップに自動的にその画像を入れる新機能が搭載されました。

これがデフォルトの設定となっており、同じ画像が2つ表示される原因だったのです。

従って、Simplicity からCocoon に移行すると、本文に画像を入れたままなので本文上に自動的に挿入されたアイキャッチ画像の下に本文に設定された画像が表示されることになります。

このことに気づくのに少し時間が掛かりました。

分かってしまえば何ということはないのですが、同じようなことに悩む方のために本文に同じ画像が2つ入った場合の設定を書いておきます。

画像の設定を変更しますが、2つの方法があります。

Simplicity と同じように、本文の上に入れたタイトル画像からアイキャッチ画像を自動設定する。

Cocoon 設定 → 画像

「アイキャッチの表示」→「本文上にアイキャッチを表示する」のチェックを外し、

「アイキャッチの自動設定」→「アイキャッチの自動設定を有効にする」にチェックを入れます。

だけでうまくいきます。

自動的にアイキャッチ画像が本文上に挿入されるようにする。

これが、Cocoon のデフォルトです。

Cocoon 設定 → 画像

「アイキャッチの表示」及び「アイキャッチの自動設定」はデフォルトのままでOK。

しかし、このままだと画像が2つ表示されてしまいます。(Simplicity から記事を引き継いだ場合)

この場合、本文中に入れていた画像を削除することで1つだけ表示されるようになります。

但し、全記事の本文上に入れた画像を削除する作業が必要となります。

アイキャッチ画像を本文に自動挿入するという新機能、便利そうですしせっかくなので使ってみたい。

本文中から画像リンクを削除しました。

機械的にやるだけなので頭は使わないのですが、一つ一つ記事から画像を削除するのは面倒くさい作業でした。

アイキャッチ画像の再設定

上のように本文から画像を削除しても、アイキャッチ画像は設定されたまま残っているので、インデックスページにはそれぞれの記事にアイキャッチ画像は表示されます。

しかしです。

インデックスページをよく見ると、何か違和感があるのです。

0eyecatch2

それは、このようにアイキャッチ画像が欠けて表示されていたからです。

これは、何故か? 調べてみました。

それは、インデックスページ・各記事に表示されるアイキャッチ画像の縦横比率が変わったからでした。

Simplicityは、1:1 でしたが、Cocoonは 16:9 になったようです。

また、解決策を考える必要があります。

手っ取り早くやるにはと考えたのですが、これまで画像の大きさを統一してこなかったので、この際、画像の見直しも兼ねて全てのアイキャッチ画像を 16:9 の比率に作り直すことにしました。

これが、時間が掛かった。

50記事強ほどですが、割と手間の掛かる作業で、一気にやる時間もなくダラダラやっていたら丸1週間も掛かってしまいました。

Simplicityでは 1:1 のサイズ比率ですが、Cocoonでは 16:9 となっているため、アイキャッチ画像の全てを元画像から作り直したからです。

そのままでも本文での画像表示はそれなりですが、インデックスページのアイキャッチ画像が欠けて表示されるのでそのままにしようか悩んだのですが、見栄えの問題もあるのでやってしまいました。

一応、アイキャッチ画像は 16:9 の比率で 800x450 の大きさに統一することにしました。

こうしておけば、以降画像の大きさで悩む必要はないでしょう。

0eyecatch3

これが、修正後のインデックスページです。

アイキャッチ画像に入れている文字が全て表示されるようになりました。

また、画像も新たなものに切り替えました。

しかし、アイキャッチ画像を作り出す元画像を残してはいたのですが、整理していなかったので探すのに苦労しました。

改めてフリー画像サイト(「いらすとや」がほとんど)で探し直したり、自前で作ったりと、ここで時間を費やしてしまったのです。

ブログを作るにも、画像の大きさやファイル名の統一などルールを決めておかないといけないことを身をもって感じました。

新たに画像の大きさなど、統一したルールを決めた

以上のようなことを繰り返さないように、今後のことを考え、画像の大きさや画像ファイル名の命名ルールなどを決めることにしました。

ブログに入れる画像のルールを私自身の備忘録として、ザッと書き出しておきます。

○ 画像の大きさ

アイキャッチ画像の縦横比率が 16:9 を考慮して、一応 800×450 の大きさとする。

但し、これはアイキャッチ画像の大きさで、本文に入れる画像の大きさは統一できない。

画像の大きさはどれくらいにしてUpすれば良いのか未だによく分かっていない?

○ 画像ファイル名

アイキャッチ画像のファイル名を投稿順番号とURLから付けるようにする。

例えば、「これは使える! Chrome拡張機能 37選」の記事は、52番目の投稿でURLは「https://bonokara.com/chrome-extension-select37/」 なので、「52chrome-extension-select37.jpg」とする。

↑ はダメでした。

同じ画像を使う記事があるので、同じ画像を名前を変えて登録するのはサーバーの無駄遣いになるからです。

こんなガチガチなファイル名にするとダメですね。

単なるファイル名ですが、運用のことも考えるとなると難しいです。

改めて、考え直しました。

○ 画像ファイルの名前付けルール

ファイル名は全て半角文字で英小文字・数字及びハイフンで付ける。アンダーバーは使わない。

・アイキャッチ画像 先頭に「Eye」の頭文字を取って「e-」を付ける。

・記事内画像 先頭に「0」を付ける。

「e-」や「0」を付けるのは、自分のパソコン内でどれが記事に使った画像か区別するためです。

自分で作った画像には、適当な名称を付ける。

「いらすとや」などのフリー画像を使った場合は、その元ファイルの名称を付ける。

○ 図形に入れるタイトル文字などの文字フォントは「メイリオ(レギュラー、鮮明)」にする。

文字も統一したいのでこのように決めたのですが、これは暫定。

良いフォントが見つかればそれに変更します。

尚、これまでの記事中の画像には上のルールは適用していません。

本当は全て決めたルールに従い変更したいのですが、これまでの画像名を全部変更して入れ替えるのは大変すぎるので止めました。

一応、これからは上のルールに従うことにします。

変なところがあれば、またルール改定するかもです。

WordPressのエディタで本文が非表示に

WordPressのエディタには「ビジュアル」と「テキスト」の2つのモードがあります。

記事を修正作業している時、「テキスト」から「ビジュアル」に切り替えた時、突然記事コンテンツの文章や画像の表示が消えてしまったのです。

私は Chrome をメインのブラウザとして使っていますが、他のブラウザでも確かめてみました。

Chrome 特有の現象のようで、Firefox や Vivaldi では正常に表示します。

ネットで調べると、こうなる原因はいろいろあるようです。

試したのは、

wp-config.phpに

  define(‘CONCATENATE_SCRIPTS’, false );

を記述し、キャッシュをクリアするということ。

これはダメで、Chrome デベロッパーツールでのエラーメッセージが

  Uncaught ReferenceError: tinymce is not defined…

と出て来た場合の対処法のようです。

ここまで、Chrome デベロッパーツールで確認していなかったので、改めて確認することにしました。

すると、エラーメッセージが

  Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

と、出てきました。

このエラーメッセージを検索すると、ありました。

ゆうのすけブログ » 「Failed to load resource: net::ERR_BLOCKED_BY_CLIENT」ってエラーが出た

ここに、

これらのエラーは通常、広告ブロックプラグイン(Adblock Plusなど)から生成されます。 これをテストするには、別のブラウザを使用するか、広告ブロックプラグインをアンインストールします(URLバーで拡張機能を右クリックして[Chromeから削除]をクリックします)。

とあります。

どうも、広告ブロックが原因のようです。

Chrome拡張機能に「uBlock Origin」を入れているので、Wordpress管理ページサイトの広告ブロックを Off にしてみました。

うまくいきました。

しかし、ここまで広告ブロック On のままで支障がなかったのにここにきて突然のエラー。

やはり、Simplicity から Cocoon に切り替えた影響でしょうか?

それとも、Wordpress の最新バージョンからこうなったのかな?

何はともあれ、エラーは解消されました。

しかし、いろいろと難題?が出てくるものですね。

一応、以上の気になった変なところを訂正しました。

まだ、細かなところまで見直していませんので、さらに変な点は出てくるかも分かりませんが、パッと見て違和感ないようにはしたつもりです。

再設定したもの

ファビコンの再設定

これは、テーマを変更すると設定が元に戻るようで簡単に再設定できました。

ファビコン(サイトアイコン)設定は、

管理画面から「外観 → カスタマイズ → サイト基本情報」にある「サイトアイコン」設定

から行います。

Google Adsense の再設定

Cocoon設定から簡単に設定できるようになり、どこに表示するかをこれもまた簡単に指定できるようになりました。

よって、これまでに設定していたサイドバー上の広告設定を外しました。

管理画面から「外観 → カスタマイズ → ウィジェット → サイドバー」にある「[C]テキスト(PC用)」ウィジェットを削除しました。

削除しなくとも外されているようです。

まだ修正していないもの

一応、以上のような点を修正して、どうにか Cocoon への切り替えは一先ず終了しました。

しかし、まだやっていないことも残っています。

ちょっと、メモ書きしておきます。

  • ブログタイトルのバック画像を入れたいし、タイトルそのものをデザインしてみたい。
  • グローバルメニューの大きさや配置をしていない。
  • 見出しの色や見栄えもまだ手を付けていない。

など、当面は触らなくともいいものを残してあります。

それよりも、この記事を書くまで1ヶ月ほどブログの更新をサボってしまいましたので、新規ブログ記事を書かないままほったらかしです。

また、ボチボチと記事を Up していきますのでよろしくお願いします。

以上、この記事が Cocoon に切り替えての初めての投稿となります。

コメント

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