こんにちは、ゆんつです。
前回はブログテーマをSimplicityからCocoonに乗り換えるための事前の確認事項や作業手順について確認しました。
今日は実際にSimplicityからCocoonへ乗り換えてみたいと思います。
前回も書きましたがCocoonはプラグイン等に頼らずにテーマ側の設定だけでGoogleの表示速度の測定ツール「PageSpeed Insights」が高得点をとれるように設計されているということです。
導入前と導入後の速度差を感じたいので、導入前の速度をPageSpeed Insightsで測っておきます。
PC
77点
モバイル
78点
導入後にこの点数がどうなるでしょうか？
手順
1. バックアップ
万が一に備え、作業に入る前に今の状態をプラグインを利用してバックアップしておきます。
僕が使っているのはUpdraftPlusというプラグインです。
幸い、まだ実際にUpdraftPlusで復元をしたことはありませんが、バックアップがワンクリックで出来るとても便利なプラグインです。
2. テーマの導入
1. ユーザ登録する
Cocoonはまだベータテストの段階なので利用するにはユーザー登録が必要です。
ユーザー登録には任意のユーザー名とメールアドレスがあればOKです。
ユーザー名は半角英数字です。
僕はずっとカタカナを入力してしまい、気づくまで何度もエラーが出て登録できませんでした。
登録が完了すると登録したメールアドレスにパスワードを設定するためのアドレスが記載されたメールが送られてくるので、クリックしてパスワードを設定します。
パスワードを設定しReset PasswordをクリックするとCocoonのホームページにログインした状態になります。
これでテーマのダウンロードが可能になります。
2. 親テーマと子テーマをダウンロードする
CocoonにもSimplicity同様、親テーマと子テーマがあります。
親テーマと子テーマを導入し、実際のカスタマイズは子テーマで行なうことで、テーマのアップデートがあった際もそれまでに行ったカスタマイズを引き継いでアップデートができます。
Simplicityと同じですね。
ダウンロードページに進んで親テーマ、子テーマをダウンロードします。
zipファイルがダウンロードされます。
3. ダウンロードしたテーマを導入する
WordPressのダッシュボードから「外観」→「テーマ」を選びます。
テーマの画面で「新規追加」をクリックします。
テーマを追加の画面で「テーマのアップロード」をクリックします。
すると「ファイルを選択ボタン」が現れるので、先ほどダウンロードした親テーマを選択して「今すぐインストール」をクリックします。
親テーマのインストールが完了したら「テーマのページに戻る」をクリックします。
導入しているテーマの一覧にCocoonが加わっています。
そして親テーマと同じように「テーマのアップロート」から子テーマもインストールします。
ここからは親テーマと違います。
インストール完了後に「有効化」をクリックして子テーマを有効にします。
テーマのページに戻って確認します。
このように親テーマと子テーマがインストールされ、子テーマのほうが有効化されていればOKです。
3. 画面確認
無事にテーマが導入できたので画面を確認します。
導入前（Simplicity）
導入後（Cocoon）
とてもすっきりしていて、シンプルでいいと思います。
驚いたのが僕は導入後は1から広告の再設定などをしなければならないのかと思っていましたが、サイドバーの広告などはほとんど引き継がれていていました。
また僕はAmazonや楽天市場へのリンクには「カエレバ」というツールを使っているんですが、その見た目もCSSをカスタマイズしていない状態でこんな感じに出来上がっていました。
自分でカスタマイズする必要がないくらいです。
そして僕がもう1つ気に入ったのはデフォルトの状態でアイキャッチ画像にカテゴリが表示されることです。
Simplicityの時はCSSをカスタマイズして表示させていたので、何もしなくても表示されるのはとても嬉しいです。
テーマを変更して外れていたものは
・ヘッダー画像
・Googleアドセンス、アナリティクス、サーチコンソール
くらいのものでした。
いやあ、凄い！
テーマの変更はとても手間がかかると思っていたのですが、こんなに手軽に導入できるとは思ってもみませんでした。
4. 高速化の設定をしておく
Cocoonに備わっている高速化の設定をします。
ダッシュボードから「Cocoon設定」→「高速化」をクリックします。
サイト高速化のページのチェックボックス全部にチェックを入れて保存します。
速度を測定してみます。
PC
80点
モバイル
93点
テーマの入れ替えだけで点数が上がりました！
これだけでも乗り換えて良かった。
注意点
Cocoonに乗り換えてしばらくすると1通のメールが届きました。
えっ？！
色んな記事のURLを確認してみると、Simplicityを使っていた時の僕のブログのパーマリンクは
https://konpure.com/西暦/月/日/post-記事ID/だったのですが、
https://konpure.com/西暦/月/日/投稿名/に変わっていました。
パーマリンクが変わってしまうとこれまでの全ての記事のアドレスが変わるため、検索エンジンから飛んできた場合これまでのアドレスでは「404」となり表示されなくなってしまいます。
僕は全くこれに気づかずにGoogleサーチコンソールからのメールで気づきました(笑)
メールを受けて慌ててSimplicityの時に使っていたパーマリンク
https://konpure.com/西暦/月/日/post-記事ID/
となるように、パーマリンク設定をカスタム構造に変更して事なきを得ました。
ほとんどの人はSimplicityの時に「日付と投稿名」をパーマリンクに使用していると思いますので大丈夫だとは思いますが、僕のように投稿名をパーマリンクにしていない場合はCocoon導入後にパーマリンクの設定を確認した方が良いと思います。
まとめ
今回はCocoonのテーマを実際に導入してみました。
SimplicityからCocoonへのテーマの変更は実際にやってみるととても簡単で
1. 親、子テーマのダウンロード
2. ダウンロードした親子テーマのアップロード
3. 子テーマの有効化
の作業をするだけなので、テーマの変更だけなら順調に進めば10分もかからないと思います。
これからはこのCocoonでブログを運営したいと思います。
次回はCocoonと機能が重複するプラグインを外したり、こまごまとした作業をしたいと思います。
それでは、またですー。
コメント