こんにちは！何も考えずSimplicityからCocoonにWordPressテーマを変更しちゃったはまちゃん（@wakuwakukeigo）です。
この記事は、
- SimplicityからCocoonにワードプレステーマを変更することを検討中！
- WordPressテーマを変更するのが初めてで、注意点や事前準備に何が必要か知りたい！
- Simplicityをかなりカスタマイズしてるけど、Cocoonに変更してデザインが崩れないか不安…
- WordPressテーマを変更前にテストする方法が知りたい！
というあなた向けの記事です。
目次から気になるページへジャンプしてください。
「初めてのブログはSimplicityデビュー」という方も多いのではないでしょうか？
ブログのWordPressテーマを変更するのが初めてだと、「Cocoon（コクーン）」に変更するのは不安たっぷりですよね。
僕もそうでしたが、何も考えずいざ挑戦。
はまちゃん
ブログ初心者で、HTMLやCSSの知識は0だけど、ワードプレスのテーマを変更したぞ！
テーマ変更って難しいんじゃないの？
婿太郎
はまちゃん
簡単だったよ！でもデザインが崩れちゃったけどね…
あかんやんけ！
婿太郎
はい、案の定僕は失敗しました・・・いえ、後でカスタマイズしていい感じにデザインできたので、単なる事前準備不足ですね。
何も考えずに、WordPressテーマの変更をしようとしてるなら注意が必要です！
事前準備をしていなかったばっかりに、僕はCocoonに変更したらデザインが崩れて、ものすごく焦ったんですから（汗）
過去の僕に会えるなら、Wordpressテーマの注意点と変更前にテストする手順を教えたいですね。
この記事では、デザインが崩れてしまった僕の経験を例に、あなたのWordPressテーマの変更に対する不安をなくしつつ、必要な注意点・テスト方法・事前準備の手順をご紹介します。
あなたの不安を解消してWordPressテーマを変更できるようになりますように。
WordPressテーマをCocoonにすることがどうしても不安なら、「安定版Cocoon」が公開されてからWordPressテーマを変更するのもいいと思います。
タップできる目次
【WordPressテーマの変更時の注意点の前に】変更前の僕のブログの状況を伝えます
僕はブログで自分色を出していきたい方。
だから、Simplicity2のカスタマイズ中毒者と名乗るほど、Simplicity2をおしゃれにカスタマイズしてました。
当時の状況をまとめると、
- WordPressテーマはSimplicity2を使用
- 記事は50記事以上
- プラグインは30以上導入
- カエレバ・ヨメレバを導入（デザインカスタマイズ済）
- 見出しやボックス、引用、吹き出しなどをカスタマイズ
- Google AdSenseの広告を導入
- functions.phpなどもいじってる
- スライドショーも追加
はまちゃん
要はSimplicity2の原型がないぐらい、カスタマイズしてたってことだね〜
そんな状態やのに、よくも何も調べずにWordpressテーマ変更を決断したな！
普通Wordpressテーマの変更前にテストできるか、準備の手順とか、普通は調べるんちゃう？
婿太郎
はまちゃん
ごもっともです…
そんな状態でCocoonに移行して、デザインが崩れちゃったというわけです。笑
でも、結論から先に言っておくと、ごりごりにWordpressテーマ「Simplicity」をがっつりカスタマイズしてるあなたもCocoonに変更して問題なし！
その理由は僕の失敗体験談を読めばわかります。
同じ失敗をしないように注意してくださいね。
【注意】WordPressテーマ「Simplicity2」から「Cocoon」に変更したらデザインが崩れた
WordPressテーマのSimplicity2をおしゃれにカスタマイズしていたので満足していた僕。
ある日、とあるツイートを見て発狂しました！
無料WordPressテーマ「Cocoon（コクーン）」を公開しました https://t.co/YLIHygiTac pic.twitter.com/cUhrR4RIfk
— わいひら@寝ログ (@MrYhira) March 19, 2018
はまちゃん
うおーーー！！Cocoon最高すぎるやんけ〜！！
まだ、テスト中らしいし、近いうちに変更しよっと٩( ᐛ )و♪
そんなこんなで1ヶ月半ほど、もんもんしてましたが、Simplicity2の後継WordPressテーマのCocoonの機能が最高すぎたので、何も注意せずにブログテンプレートを変更しました！
しかし、大きな誤算が！！
Simplicity2をがっつりカスタマイズしていたので、おしゃれなデザインにしていたブログが
▼（変更前）Simplicity2▼
こうなった…
▼（変更後）Cocoon▼
Simplicity2をあんなに頑張って、カスタマイズに時間をかけておしゃれにしたのに…
台無しやんけ！！
はまちゃん
Cocoonの初期デザインは、悪くないけどシンプル過ぎる…
当時は、なぜWordPressテーマを変更する前にテストをしなかったのか、激しく後悔しましたねorz
僕はブログがおしゃれじゃないと、ブログを書くモチベーションが著しく落ちてしまうので、カスタマイズをしてデザインを整えました。
▼こんな感じにね▼
Cocoonにして、すぐに満足できるブログに戻せたので一件落着。
WordPressテーマの変更のやり方は以下の記事をご覧ください。
僕が行ったCocoonの初期設定とCocoonの使い方をわかりやすく紹介してます。
これを読むあなたには、こんなに焦ったり苦労して欲しくない！
まずは、WordPressテーマの変更で何を注意すべきか、テーマ変更前のテストする方法について教えましょう。
WordPressテーマをCocoonに変更する時の注意点一覧とエラー時の対処方法
WordPressテーマを変更するのが初めてな人は、僕のように驚くことがいっぱいあるかもしれません。
デザインが崩れたり、エラーが出ることもあります。
なので、WordPressテーマで何が起こるのか？ 何を注意しておくべきなのか？ をしっかり把握しておきましょう。
注意点一覧
- ロゴ・背景画像がリセット
- ブログの色がテーマの標準設定に
- デモサイトと同じデザインにならない
- PHP・CSSはリセット
- ヘッダー・フッター・サイドバーがリセット
- Googleアナリティクス・サーチコンソールの再設定が必要
- Google Adsense広告の再設定が必要
- アイキャッチ画像のリサイズが必要になる可能性がある
- Simplicity2は横幅680pxに対し、Cocoonは800pxなので、大画像のサイズを変える必要がある
- 使えないプラグイン、不具合の原因になるプラグインが出る可能性がある
- テーマ変更の調整は意外と時間がかかる
WordPressテーマによって違いはあるものの、これらの内容には注意が必要でしょう。
このブログのようにSimplicity2の後継テーマのCocoonだとまだ互換性はありましたが、他のテンプレートだとさらに大変なことになる可能性も。
はまちゃん
エラーが出て画面が真っ白になった人もいるらしいよ。笑
おれ、ワードプレスのテーマを変更するのやめるわ・・・
婿太郎
不安になってきましたか？
でも、大丈夫です！
エラーが出たときやデザインが崩れたときの対処法を3つ紹介します。
対処法の①と②はCocoon利用者向けで、③は全てのWordPressテーマで使える対処方法です。
対処方法①：WordPressテーマ「Cocoon」に変更してデザインが崩れても「Simplicity2」に戻すことは可能
僕は、Cocoonの初期デザインをカスタマイズしましたが、WordPressテーマ変更前のSimplicity2に戻すことができます！
ただし、作者のわいひら（@MrYhira）さん曰く、100%は戻らないかもしれないとのこと。
過去バージョンに戻す方法として、公式サイトに紹介されているので参考にしてくださいね。
対処方法②：WordPressテーマ「Cocoon」ならテーマ設定をミスしてもリセットが可能
Cocoonをカスタマイズするうちに、ほとんどないと思いますが、カスタマイズをしてぐちゃぐちゃになってしまうこともあると思います。
そんなときは、WordPressテーマ設定をリセットしましょう。
リセットできるなら、エラーが出ても安心ですね。
テーマ設定をリセットするやり方はこちら。
対処方法③：他のWordPressテーマの場合、エラーが出たらFTPソフトでテーマを削除
ワードプレステーマを変更して、エラーが出て画面が真っ白。
「オワタ」となるのは、まだ早いです。
まずは一旦落ち着きましょう。
エラーが出ている理由は、変更後のテーマが問題があるからです。（正しくは今のWordPress設定と新しいテーマの互換性だけど）
なので、新しいWordPressテーマをサーバー上で削除すれば、エラーはすぐに戻るってことですね。
やることは単純で、FTPソフトを使ってテーマ（「wp-content」の「temaes」にある新しいテーマ）を削除すれば、あっという間に元どおりです^^
詳しくは、以下を参考記事としてください。
ワードプレステーマを変更してエラーが出たときの対処法はわかったけど、FTPとかよくわからないし戻せる自信ないな・・・
婿太郎
はまちゃん
大丈夫！ これから紹介するテーマ変更前の事前準備をしていたらエラーなんて出ないから！
事前準備をしっかりしてから、WordPressテーマを変更しようっと。
婿太郎
WordPressテーマを変更前にやっておきたい事前準備の手順（バックアップ・プラグインでテスト）
ここまで、WordPressテーマを変更するときの注意点を解説してきました。
WordPressテーマを変更することの不安はなくなってきましたか？
はまちゃん
ここからはワードプレステーマを変更する前にやっておきたい事前準備の手順を紹介していくぞ。
待ってました！
婿太郎
事前準備は全部で4つのやり方がありますが、特に大事なのがバックアップとプラグインでテストすること。
この2つだけは要チェックです。
その他、紹介する事前準備をしておくことで、ワードプレスのテンプレートを変更して画面が真っ白になるのを防げますし、スムーズな移行が可能になります。
WordPressテーマ変更前の準備①：データのバックアップを取る
WordPressテーマの変更は、パソコンをwindowsからMacにするほど一大事。
何かあってからでは遅いので、バックアップを事前に取っておきましょう。
バックアップはBackWPUpというプラグインがオススメ。
実は僕もそうだったのですが、普段からブログのバックアップを取る習慣がない人って結構多いんですよね。
これを機会にバックアップの習慣をつけてみては？
WordPressテーマ変更前の準備②：事前にテーマの変更後のデザインをテストする
実は、ワードプレスのプラグインにはテーマを変更したらデザインがどうなるかテストできるプラグインがあるんです！
僕がこれを試しておけばあんなに焦らなかったはず。
そんな素敵なプラグインの名前は、Theme Test Drive。
いきなりWordPressテーマを変更するのが怖いなら、Theme Test Driveをぜひ試してみてください。
サーバー上で動作確認ができるのでかなりオススメ。
Theme Test Driveの使い方や手順は以下の記事参照。
もう一つ、WP Theme Testというプラグインで、サーバー上でWordPressテーマをサーバー上で確認するという方法もあります。
WP Theme Testの使い方や手順は以下の記事参照。
WordPressテーマ変更前の準備③：不要なプラグインを確認＆削除する
プラグインとWordPressテーマの機能がケンカすることは、事前に説明したとおりですね。
調べてみて、削除した方がいいプラグインがわかったら削除しておきましょう。
Cocoonの場合は、今僕が見つけたのは２つ。
- Table of Contents Plus
- TinyMCE Advanced
削除するのはちょっと・・・という方は、テンプレート変更後でも可能です。
でも、問題が起きるプラグインがあるかどうかは確認しておきましょうね！
WordPressテーマ変更前の準備④：Simplicity2時代の設定内容・CSSを控えておく
おそらくこの記事を読むあなたは、Simplicity2を自分好みにカスタマイズされてるはずです。
僕もそうでした。
しかし、残念ながらSimplicity2時代のカスタマイズ設定は全て引き継げません。
CSSのカスタマイズなどを、1からやるのは時間のロスが多過ぎる。
なので、箇条書きやメモ帳へのコピーで十分なので、Simplicity2時代の設定内容・CSSを控えておきましょう。
はまちゃん
僕はこれをしてなかったので、テーマ直後の「やっちまった感」がすごかったです。笑
▼CSS以外にもSimplicity2をいじった人も多いかもしれませんね。
- 画像関係（.entery-content img , wp-caption）
- 見出しデザイン（.entry-content h2）
- 引用のデザイン（.entry-content blockquote）
- リスト（ul , ol , li）
- カエレバ・ヨメレバ・トマレバ（.kaerebalink-box , .booklink-box）
- ブログカード（.blogcard.internal-blogcard , .blogcard.external-blogcard）
Cocoonにはコピペでスムーズに移行できるので、スタイルシートのカスタマイズはぜひ控えておいてくださいね！
はまちゃん
どう？まだテーマ変更は不安？
おう。まだアクセスが落ちたりなどのリスクがないか、聞きたいことや怖いことがいっぱいある。
婿太郎
はまちゃん
OK。そんな君のために、WordPressテーマ変更時の不安点とリスクを潰しておこうか！
WordPressテーマを変更するあなたの不安点（リスク）に一問一答
ざっくり思いつくままですが、あなたがWordPressテーマの変更で考えてる不安に回答していきますね！
WordPressテーマの変更リスクは、SEOやアクセス数などたくさんあるので別記事にまとめました。
他のWordPressテーマでは違うこともあるかもしれませんのでご了承ください。
はまちゃん
安心してWordPressテーマの変更はできそう？
おう！変更方法もエラー時の対処法も注意点もバッチリだぜ！
これで安心して、WordPressテーマの変更ができそうだ！
婿太郎
はまちゃん
よかったわ。
最後に、念のためリスクを最小限にする注意点を教えるね。
最後に：WordPressテーマの変更リスクを最小限にする注意点！テーマ移行は暇な深夜にしよう
この記事では、WordPressテーマをCocoonに変更するときの変更方法・エラーの対処法・注意点・不安点・事前準備をご紹介してきました。
最後に、お伝えしたいのはWordPressテーマを変更する時間（タイミング）のお話。
WordPressテーマの変更後の調整は、迷ったりすると意外と時間がかかります。
忙しい時にテンプレートの移行だけしてほっておくと、デザインの崩れた残念なブログを長時間晒すことになります。
それは避けたいので、時間に余裕があってブログのアクセス数の少ない深夜に、WordPressテーマ変更することがオススメです。
ぜひ、勇気を出してWordPressテーマの変更をしてみてくださいね！
Cocoonは本当にいいテーマなので！
はまちゃんの一言
はまちゃん
この記事があなたのWordPressテーマの変更を後押しできたのなら嬉しいです！
CocoonにWordPressテーマを変更した後はどうするのかって？
この記事読んでくださいな↓
んじゃ、今日はこれでおしまいっ！
ほな、バイバーイ！
＜WordPressの変更方法＞
➤WordPressテーマ変更時の注意点！プラグインでテスト準備,エラーの対処法【Cocoon】
➤ワードプレステーマの変更でSEO/アクセスが不安？リスクに一問一答！
＜『Simplicity2』のカスタマイズ＞
➤Simplicity2のカスタマイズ初心者へ！必ず読みたい厳選5記事
➤コピペで簡単！Simplicity2のおしゃれなカスタマイズ記事まとめ
＜『Cocoon』のカスタマイズ＞
➤Simplicity2からCocoonへ変更！最初にしたい10の初期設定作業
➤WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに
➤Cocoonの固定ページを使ってかっこいいトップページを表示させる全手順
＜気になる有料WordPressテーマを全比較！＞
➤WordPressテーマにELEPHANT3新登場！他のテーマと比較・違いを検証
コメントをどうぞ