WordPressのテーマをXeoryからCocoonに変更してみた

ブログ

ブログを始めて、もうすぐ一年。
パソコンの知識がそこまであるわけではないのに
始めたこのブログですが、今までたくさんの方々に
ご覧頂いて、とてもありがたく思う一方、
情報発信をする責任も感じております。

そんな私ですが、ここ最近ずっと
気になっていた事があります。
それはWord Pressで使っているテーマの事です。

私はブログを始めた当初からXeoryを使っていました。
シンプルでとても使いやすく、何より無料のテーマ。
WordPress初心者の私にとっては、とても扱いやすいテーマでした。

しかし、ずっと使っていると、物足りなさを感じてきました。
そして、テーマが古いせいなのか?
カスタマイズしようと思ってネットで調べても
欲しい情報があまり載っていません。

更にシンプル過ぎるが上に、何かしようと思うと、
プラグインをたくさん入れなくてはいけません。

プラグインをたくさん入れ過ぎると、
サイトが重くなって、SEOにも影響してきます。

そこで、意を決してWordPressの
テーマ変更をする事にしました。

なぜテーマをCocoonにしたのか?

たまたま、観ていたネットの記事に、
Cocoonの事が載っていて、
「神テーマ」だとか、「有料テーマが売れなくなる!」
などと書かれていて、とても興味を持ちました。
実際にCocoonのテーマを観てみると、
Xeoryと同様でとても使いやすそう。

そして、テーマ自体はシンプルでありながら
Xeoryよりも機能がたくさんついている。
その為、プラグインの数を減らす事が出来る。
そのうえ、SEOにも強そう!!
という理由で、XeoryからCocoonにテーマ変更しました。

Xeoryには無い、Cocoonの機能

吹き出し機能

右画面のイラストを含めたサンプル吹き出し画像が10個入っています。

吹き出し部分のイラストは自分で作成したイラスト(写真)も使えます。

吹き出しを入れることによって、文章にテンポが出て読みやすくなります。

文字の装飾が豊富

文字の装飾機能が増えました。

・マーカーをひいたり、

・赤いアンダーラインをひいたり、

・黄色のアンダーマーカーをひいたり、

バッジがあったり

A

インフォメーションボックス作成も楽々
クエッションボックス
注意事項を書きこむ時に便利なアラートボックス
シンプルなボックス機能1
シンプルなボックス機能2
シンプルなボックス機能3
シンプルなボックス機能4
シンプルなボックス機能5

テンプレートの挿入が簡単

cocoon設定のテンプレートより、
頻繁に利用する文章のテンプレートを
登録する事ができます。
そして、登録したテンプレートは
記事内に簡単に埋め込む事が出来ます。

そして、登録したテンプレートは
記事内に簡単に埋め込む事が出来ます。

アフィリエイト管理が簡単

Cocoon設定のアフィリエイトタグより
アフィリエイトタグの管理が簡単にできます。

登録したアフィリエイトを表示させたい場合は
投稿編集画面上のアフィリエイトタグの中から
表示させたいアフィリエイトのタグを選択してショートコードを
表示させたい場所に貼りつけるだけで、アフィリエイトが表示されます。

よく利用されるショートコードの貼りつけが簡単

投稿記事編集ページの画面右上のドロップダウンリストの中には
広告、新着記事一覧、人気記事一覧、プロフィールボックス、
Amazon商品リンクなど数種類のショートコードが入っています。
記事内に簡単にこれらのショートコードを挿入することができます。

スキン機能でデザイン変更が簡単

Cocoonにはスキン機能があります。
スキン機能とは外観表示を変更する機能で、
主に文字や背景色、見出しのデザインなどを変更します。
パソコンの知識が無くても、既に数種類のスキンが
登録されているので、その中から選ぶことができます。

各種設定が簡単でわかりやすい

Cocoonの設定画面上部にはたくさんのタブがあります。
そのタブの中から設定したい項目のタブに切り替えることで、
ヘッダーのデザイン、スキン、広告などのさまざまな設定ができます。

モバイルファーストやAMPにも対応

Cocoonはページ高速化機能が搭載していて
テーマをCocoonにしてからPage speed Insights
90点代を取得する事ができました。
AMPにもワンクリックで対応します。

そして、完全レスポンシブスタイルなので
どの端末にもきれいに表示されます。
ページレビュー画面下のレスポンシブテストより
スマホやタブレットでどのように表示されているか
確認する事が出来ます。

その他の機能

Cocoonにはランキング作成機能やブログガード機能なども
あります。

このようにCocoonにはたくさんの機能が
もともと備わっているので要らないプラグインがたくさん出てきました。
そのプラグインを一つずつ削除することで、
サイト自体が益々軽くなったように感じます。

XeoryからCocoonにテーマ変更方法

私は初めてのテーマ変更だったので、
どうなるかドキドキでしたが、
実際にテーマ変更してみたら、
けっこう簡単にあっさりテーマ変更を
することができました。

WordPressのテーマ変更は簡単にできるんですね。
では、テーマ変更する手順です。

①バックアップを取る。

もしもの場合に備えてテーマ変更前は
必ずバックアップを取ります。

②テーマのダウンロードとインストール

Cocoonのサイトよりテーマをダウンロードします。
Cocoonには親テーマと子テーマがあります。
どちらともダウンロードして下さい。

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

ダウンロードが終わったら、Wordpressの外観→テーマより
ダウンロードしたCocoonの親テーマと子テーマをインストールします。
インストールが終わったら、子テーマを有効化します。

③アイキャッチ画像の修整

おそらくアイキャッチ画像のサイズがバラバラに
なっていると思います。
これをひとつずつ手作業で直すのは大変なので
プラグインを入れて一括で修正します。

使用するプラグインは「Regenerate Thumbnails」
このプラグインをインストールして有効化します。

次に、ツールメニューから「Regenerate Thumbnails」を選択します。

「Regenerate Thumbnails For All ○〇 Attachments」と
書かれたボタンがあるのでクリックします。

進捗状況が表示されるので、必ず終わるまで待って下さい。

④ヘッダー・フッターの設定

XeoryからCocoonにテーマ変更をしたら
なぜかフッダーのメニュー表示が消えていたので
設定をしなおしました。

外観→メニューよりメニュー編集を表示させます。
ヘッダーメニュー(ヘッダーナビ)を選択して、
ヘッダーに入れたい固定ページを選択します。
メニューを保存して、フッターも同様に設定します。

⑤アクセス解析・認証の設定

Cocoon設定画面のタブより「アクセス解析・認証」を
表示させます。

Google AnalyticsやGoogle Serch Console、
Googleタグマネージャーを利用している方は
こちらにそれぞれのトラッキングIDを入力します。

⑥ウィジェットの設定

ウィジェットに変更がある場合は設定します。
私の場合は新着記事と人気記事は
プラグインを使用して表示させてました。

Cocoonにテーマ変更をしたら、
それらの機能はもともと入っているので、
プラグインの使用は辞めて、
[C]人気記事[C]新着記事
サイドバーを変更しました。

⑦プラグインの整理

Cocoonにテーマ変更すると、不必要なプラグインが
たくさん出てきます。
私の場合は、
・関連記事を表示させるプラグイン。
・人気記事を表示させるプラグイン。
・最近の投稿を表示させるプラグイン。
・目次を表示させるプラグイン。
・アドセンス広告設定のプラグイン。
・サイトを高速化させる為のプラグイン。

これらのプラグインが不要になったので
削除しました。

⑧レイアウトの確認と修正

ヘッダーロゴや、ヘッダー、フッターのメニューバーの
背景色や文字の色、サイトの背景色など
Cocoon設定画面の「ヘッダー」、「フッター」または
「スキン」のタブより変更できます。

Cocoonにテーマ変更したことで、
自分で簡単にデザイン変更が出来るようになりました。

全ての作業が終わったら、最後に全てのページに
レイアウト崩れやエラーが無いか確認します。

これで、Cocoonへのテーマ変更が完了しました。
次回の投稿から、Cocoonに付いている機能を
使った文章作成をする事が出来ます。

まとめ

Cocoonにテーマ変更する前は、
テーマ変更するのはとてもとても
大変で面倒な作業だと思っていました。
いざ、やってみるとそれ程大変ではありません。

Cocoonにテーマ変更をして、できる事が増えたので
ブログを書くモチベーションが上がった気がします。

私はXeoryからCocoonにテーマ変更をして
本当に良かったと思います。