WordPressのテーマを「Cocoon」にする インストール編

WordPressで使い勝手が良く機能も充実したテーマ「Simplicity2」の後継として「Cocoon」がテスト期間を終えてリリースされています。
「Cocoon」は、SEO、高速化、広告・アフィリエイト機能、モバイルフレンドリーに最適化されたWordPressのテーマです。有料と言ってもおかしくない優れた機能満載ですが無料で提供されています。

「Cocoon」の入手

「Cocoon」も「Simplicity2」同様、ユーザーが変更した箇所を、テーマのアップデート後にも継続できるように子テーマが用意されています。

「Cocoon」親テーマのダウンロード

下記のサイトへ行き

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

「ダウンロード」ボタンを左クリックします。
利用規約のページへのリンクが貼られているので

Cocoonの利用規約
100%GPL WordpressテーマCocoonの利用規約です。

利用規約を熟読し同意の上
ページ中程の「Cocoonテーマをダウンロード」ボタンを左クリックして親テーマをダウンロードします。

「Cocoon」子テーマのダウンロード

親テーマと同じページの「Cocoon子テーマをダウンロード」ボタンを左クリックして子テーマをダウンロードします。

これで「Cocoon」のダウンロードができました。両方ともzipファイルですがテーマとしてインストールする際はzipファイルのままで良いので、解凍する必要はありません。

「Cocoon」インストール前の準備

ここからは、WordPress側での作業になります。

現在のテーマで、GoogleアナリティクスとサーチコンソールのIDを設定している方は、
それをメモしておきます。

Googleアナリティクスをメモ

WrodPressのダッシュボードの「外観」の「カスタマイズ」を左クリックしてカスタマイズメニュー画面を開きます。

「カスタマイズメニュー」の「アクセス解析(Analyticsなど)」を左クリックし

Google AnalyticsトラッキングID(UA-xxxxxxxx-x)とGoogle Analytics トラッキングタイプの選択をメモしておきます。

Google Search ConsoleのIDのメモ

Googleアナリティクスの下の方の

Google Search ConsoleのIDもメモしておきます。
空白なら空白で構わないです。

テーマの編集(カスタマイズ)内容をメモ

WrodPressのダッシュボードの「外観」の「テーマの編集」を左クリックしてテーマの編集画面を開きます。

スタイルシート(style.css)のファイルの内容から

カスタマイズする為のコードが記述されているなら、そのコードを全てメモしておきます。
これも空白なら空白で構わないです。

現テーマ(Simplicity2)と今回インストールするテーマ(Cocoon)では、必ずしもセレクタ名が一致するとは限らないので無意味に思えますが、何をどうカスタマイズしたのか覚書としてメモしておきます。
必要ない場合はスルーしてもまったく影響ないです。

「Cocoon」のインストール

先程ダウンロードした親テーマ、子テーマをインストールします。

「Cocoon」親テーマのインストール

WrodPressのダッシュボードの「外観」の「テーマ」を左クリックしてテーマ設定画面を開きます。

「新規追加」を左クリックします。

「ファイルを選択」を左クリックします。

親テーマファイルを選択して「開く」ボタンを左クリックします。

そして「今すぐインストール」ボタンを左クリックし

親テーマのインストールは完了しました。
「Cocoon」は、子テーマがあるので親テーマはインストールするだけで、有効化はしません。

「Cocoon」子テーマのインストール

WrodPressのダッシュボードの「外観」の「テーマ」を左クリックしてテーマ設定画面を開きます。

「新規追加」を左クリックします。

「ファイルを選択」を左クリックします。

子テーマファイルを選択して「開く」ボタンを左クリックします。

そして「今すぐインストール」ボタンを左クリックし

子テーマのインストール完了

「有効化」ボタンを左クリックして Cocoonの子テーマを有効にします。

これで「Cocoon」のインストールは、完了です。

次回は、「Cocoon」の設定を行います。