この在宅かあちゃんブログのワードプレステーマはSimplicityで作っていました。
その理由はとにかく、無料で作りたかったから！
有料テーマにメリットがたくさんあるのはわかっていましたが、
だってお高いんだもの・・・
と、断念。
むしろ有料テーマを買うことによって、
「ブログで絶対稼いでやる！」
と”自分のお尻に火をつける”効果はあるようですが、私はそこまでする気はありませんでした。
そもそも初めてのワードプレスでいきなり有料テーマを買う勇気はなかったです。
「おすすめ ワードプレス 無料テーマ」などで調べていきついたサイトで必ず紹介されていたのが、Simplicityでした。
その後比較的すぐにSimplicityの後継テーマであるCocoonがリリースされましたが、当時はまだβ版だったので、在宅かあちゃんブログへの導入は見送りました。
でも、その後立ち上げた別ブログではCocoonを採用、その優れた操作性を知ってしまいました。
Simplicityだと、様々なプラグインを入れたり、cssを操作しなければ実現できなかったことが、Cocoon設定画面ではすでに実装されており、チェックボックスにチェックいれたりするだけで好きなようにカスタマイズすることができるようになっていたのです。
がぜん、この在宅かあちゃんブログもCocoonへ移行したいと考えるようになりました。
ただ、タイミングがね・・・
記事も100近くあるし。
移行作業大変そう。
みなさん、ワードプレスのテーマ変更ってどんなタイミングでされてるんですかね？
有料テーマを購入したタイミングとか？
現行テーマが使いづらいと感じたから？
私の場合、ある程度のWEBの知識もあったことから、Simplicityでも好きなようにカスタマイズすることができたんですよね～。
なので、Cocoonだと一発で実現可能な「吹き出し」の機能であっても、Simplicity公式サイトで実装方法を検索して、プラグインを入れて、cssを追加して、とコツコツやって満足していたんです。
「自分の手でcssをカスタマイズして、やりたいことを具現化する」という達成感を味わっていました（笑）
でも、面倒っちゃ面倒！
それに、CocoonがSimplicityの”上位テーマ”であることはわかりきったことです。
Simplicityのわいひらさんが、Cocoon開発に至った経緯がこちらの記事で説明されています。
読めばわかりますが、”移行作業面倒！”という理由でSimplicityに固執する必要はゼロです。
また、ワードプレス自体に大きな変化がありました。
ワードプレスの新しい標準エディター「Gutenberg」の登場です。
もう最低！と思いましたね（笑）
なんでもそうですが、慣れるまでが大変なんです。
ようやくワードプレスに慣れてきたところなのに、このエディターの劇的な変化に、頭がついていきませんでした。
でも、ワードプレスは「Gutenberg 」を良しとして、それこそ自信満々でリリースしているんですよ。
ワードプレス5.0の新しいエディターって、ブロックエディターっていうんですね。通称「Gutenberg」・・・グーテンバーグ？いや、グーテンベルグか。どうでもいい(# ﾟДﾟ) WP的に最高のエディターだぜ！と思ってリリースしてるんだろうから、毛嫌いせずに少し勉強してみようと思う。
— Z-Kachan＠EMSチャレンジ中 (@Z_kachan) 2018年12月28日
なんかもうワードプレス自体が新しくなっちゃったし、おそらく今後「Gutenberg」に対応していくのはCocoonでしょうね。
さらにもう1つ、大きな”事件”が起きました。
AmazonのProduct Advertising APIの規約が2019年1月16日より変更され、30日以上売上がない場合APIの利用ができなくなりました。
これは物販系アフィリエイトのリンクに大きな影響があります。
これまで私はRinkerという非常に便利な商品リンク管理プラグインを使って、物販アフィリエイトリンクを作成していました。
でも、このRinkerはAmazonのProduct Advertising API を利用しているため、AmazonのAPIが使えない人はRinkerも使えないということになります。
私のことだよ！！（血涙）
Rinkerの代わりに何を使えば良いのか？
カエレバを使うことも検討しました。
でも、よく見てみたら、Cocoonにこんな機能がついていたんです。
ずばり、Amazonアソシエイトの審査に通らない人向けの機能なんですね！
私のことだよ！！（歓喜）
というわけで！
満を持して当ブログ「在宅かあちゃん奮闘記」をCocoonへテーマ変更することにしました！
えらい前置きが長くなってしまいましたが、ここから先はSimplicityからCocoonへテーマ変更した際、私がやったことについてまとめていきます♪
事前準備：BackWPUpでバックアップをとる
ワードプレスのテーマ変更は、かなり大きな作業になります。
インストール済のプラグインが邪魔して、画面が真っ白になった！なんてこともあるようです。
そんな時でも冷静に対処できるよう、バックアップをとることにしました。
参考にしたのはこちらのサイトです。
私は記事が100近くもあるというのに、このバックアップを一切やってきませんでした。
普通に考えれば恐ろしい事です。
でもこの”BackWPUp“というプラグインを使えば、今後、定期的にバックアップをとることが可能です。
これで一安心♪
一通りバックアップを終え、早速作業にとりかかります。
テーマのインストール
Cocoonの最新親テーマと子テーマをダウンロード＆インストールします。
ダウンロードはこちらから。
https://wp-cocoon.com/downloads/
Cocoonには親テーマと子テーマがあります。
デザインのカスタマイズなどは子テーマを使って行うので、親・子両方のテーマをインストールしましょう。
親・子両方インストールしたら、Cocoon Childを有効化します。
これで、テーマのインストールはおしまいです。
Simplicityの投稿設定を引き継ぐ
各投稿記事に対する設定を引き継ぐかどうか選ぶことができます。
詳しくはこちらの記事。
https://wp-cocoon.com/migrate-from-simplicity/
私の場合、メタディスクリプションや、広告の除外設定などは記事に対して行っていなかったので、引き継ぐ必要はなかったように思えますが、一応設定を引き継ぐにチェックを入れました。
GoogleAnalytics、GoogleConsoleの設定
GoogleAnalyticsの設定はこちら
https://wp-cocoon.com/google-analytics/
GoogleConsoleの設定はこちら
https://wp-cocoon.com/google-search-console/
GoogleAdSenseの自動広告の設定
当ブログでは自動広告を採用しています。
広告の表示位置を考えるのが面倒だったからです。
一応、サイドバーTOPにリンクユニットだけは表示させてますが、それ以外はGoogleAdSense任せです。
ちなみにウィジェットでのリンクユニット設定は引き継がれていたので、今回のテーマ変更作業ではノータッチです。
AdSense広告設定方法はこちら
https://wp-cocoon.com/how-to-set-adsense/
【要注意！】
私も失敗しちゃったんですが、 Cocoon設定の「アドセンス設定」内に貼り付ける広告コードは、自動広告のコードではなく、レスポンシブ広告のコードです。！
私これ間違えて、アドセンス収益がヤバイことになりました・・・（血涙）
AdSense自動広告設定方法はこちら
https://wp-cocoon.com/auto-adsense/
目次プラグインを停止
以前のSimplicityでは、プラグインを使って目次を表示させていました。
Cocoonでは目次が標準装備されているので、プラグインは不要です。
プラグインを停止させました。
関連記事プラグインを停止
投稿した記事の関連記事の設定はCocoonでできます。
それとは別に、もうひとつ記事下に関連記事が表示されていました。
目次に「関連記事」が表示されて、なんだろう？と思って調べてみました。
原因はプラグインJetpackでした。
JetpackはCocoonでも推奨されているユーティリティープラグイン。
Cocoonでは、Jetpackの統計機能を用いてアクセス状況を管理者に表示する機能が利用できるそうなので必須ですね！
でもこのJetpackには「投稿の後に関連コンテンツを表示」する機能がついていて、初期設定では表示ONになっているようなんですね。
これを表示OFFにすることによって、目次に関連記事が表示されないようになりました。
もしもアフィリエイト設定（amazon、楽天、Yahoo）
物販系アフィリエイトに関しては、カエレバを使ったり、Rinkerを使ったりしていました。
しかしAmazonより「30日間に売り上げがある」ことが、Amazonアソシエイト使用条件として提示されました。（2019年1月16日よりAPIの規約が変更）
Rinkerを利用するためにはAmazon Product AdvertisingのAPI認証キーが必要なので、これまで一度もAmazonでの売り上げがない私は、Rinkerが使えなくなってしまいます。
Cocoonでは私のようにAmazonアソシエイトと相性の悪い人でも、Amazonで売り上げをあげることができるよう、もしもアフィリエイト経由で設定することができるようになっています。
Cocoonの商品リンク機能を、もしもアフィリエイト経由にする方法はこちら
https://wp-cocoon.com/moshimo-amazon-link/
スキン変更
Cocoonではスキンでサイトデザインを変更できます。
https://wp-cocoon.com/skin/
ここからサイトデザインの本格的なてこ入れが始まります（笑）
TOPメニュー修正
スキンでサイトの全体デザインを決めたところで、TOPメニューが崩れてしまっていました。
TOPに表示するカテゴリーを選択しなおしました。
TOPメニューの修正方法はこちら
https://wp-cocoon.com/header-menu/
新着記事、人気記事の設置（ウィジェット）
サイドバーに設定していた新着記事と人気記事が消えてしまっていたので、それを再設定しました。
Cocoonではなく、ワードプレスの「外観」＞「ウィジェット」で再設定しました。
サムネイルサイズの均一化
トップやカテゴリートップで表示される記事一覧のサムネイルが、アイキャッチ画像の縦横比のまま不揃いになってしまいました。
記事一覧がガタガタしてお世辞にも綺麗とはいえません。
それを解決する方法も、Cocoonの公式サイトで紹介されていました。
吹き出し再設定
Simplicityではプラグインを使って吹き出しを作っていましたが、Cocoonでは実装されています。
吹き出しで使いたい画像をメディアにアップロードして、「Cocoon設定」＞「吹き出し」で設定してオシマイ！
簡単でした～♪
ただし1つ問題が。
Cocoon1.5.1では、Gutenberg エディターで吹き出しを設定することができないんです。
その解決方法はCocoonのフォーラムで紹介されていたので、しばらくはこの方法でいきます。
商品リンク再設定（ブックマークレット活用）
実際に記事を1つずつ確認しながら、商品リンクのはりかえをしました。
商品リンクを作成するにはショートコードを作る必要があります。
Cocoonではクリック一発で「楽天商品リンクショートコード」を作成できるブックマークレットが用意されています。
ブックマークレットって今回初めて知りました。
使い方がわかれば簡単便利なツールです。
ちなみに私はchromeで使っています。
アイキャッチダブリを手動で修正
Simplicityで記事を書いていた時は、記事の一番上にアイキャッチと同じ画像（記事トップ画像）を挿入していました。
そうすると、Cocoonへ変更した際、アイキャッチ画像と、記事トップ画像でダブって表示されました。
途中でこのことに気が付いたので、比較的新しい記事には記事トップ画像を設定しないようにしていました。
商品リンクのはりかえと同時に、アイキャッチダブリも1つずつ修正していきました。
以上、SimplicityからCocoonへテーマ変更した際に私が行ったことでした！
ここまでやって、今のところ不具合はありません。
デザイン的にも不満はありません。
ヘッダー画像だけ、今回新しく作りました。
背景画像はあえて設定せず、シンプルさを愛したデザインになっています。
AMP対応というのも今回有効にしてみました。
エラーは出ていないようなので、こちらも問題なさそうです。
懸念していた物販アフィリエイトについても綺麗に解決しました。
SimplicityとCocoonは同じ作者さんであることもあり、比較的簡単な作業だったと思います。
私と同じくSimplicityからCocoonへのテーマ変更を考えている人の参考になれば幸いです☆
コメント