WordPressに無料のテーマ「Cocoon(コクーン)」をインストールするにはどうすればいいの?
という人のために、WordPressにCocoonテーマをインストールする方法を、画像付きで解説します。
Cocoonは、日本国産のテーマ。無料の中では一番スペックが高いです。
WordPressの初期設定をした後、各種プラグインのインストール・設定をする前に、Cocoonをインストールしておきましょう。
そうすれば、プラグインの設定の手間が省けます。
1.前提条件・事前準備・参考記事
WordPressのログイン方法、WordPress管理画面の見方、WordPressの初期設定方法、テーマのインストール方法、プラグインのインストール方法は、以下の記事を参考にしてください。
2.WordPressにCocoonをインストールする手順
WordPressにCocoonをインストールする手順は以下になります。
- Cocoonの親テーマ、子テーマをダウンロードする
- WordPressにCocoonの親テーマをインストールする
- WordPressにCocoonの子テーマをインストールして、有効化する
では、1つずつ解説していきます。
3.WordPressにCocoonをインストールする方法
3-1.Cocoonの親テーマ、子テーマをダウンロードする
3-1-1.Cocoonの親テーマ、子テーマの「ダウンロードページ」にアクセスする
Cocoonの親テーマ、子テーマの「ダウンロードページ」にアクセスします。
>>Cocoon:テーマのダウンロード
3-1-2.Cocoonの親テーマをダウンロードする
Cocoonの親テーマ、子テーマの「ダウンロードページ」を下にスクロールすると、「親テーマのダウンロード」があります。
- 「“Cocoonテーマ” をダウンロード」をクリックし、Cocoonテーマをダウンロードします。
3-1-3.Cocoonの子テーマをダウンロードする
Cocoonの親テーマ、子テーマの「ダウンロードページ」を下にスクロールすると、「親テーマのダウンロード」の次に「子テーマのダウンロード」があります。
- 「“Cocoon子テーマ” をダウンロード」をクリックし、Cocoon子テーマをダウンロードします。
3-2.WordPressにCocoonの親テーマをインストールする
3-2-1.WordPressにログインする
WordPressにログインする方法、WordPress管理画面の見方は、以下の記事を参考にしてください。
WordPressのログイン方法と、パスワード等の再発行方法
WordPress管理画面(ダッシュボード)の見方と意味と名称
3-2-2.Cocoonの親テーマを新規追加する
WordPressにログインすると、管理画面トップになります。
- 管理画面左側メニューの「外観:テーマ」をクリックします。
- 「テーマ」画面の上部「新規追加」をクリックします。
3-3-3.Cocoonの親テーマをアップロードしてインストールする
「テーマ」画面の上部「新規追加」をクリックすると、「テーマを追加」画面になります。
- 「テーマを追加」画面の上部「テーマのアップロード」をクリックします。
すると、「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールできます。」画面になります。 - 「ファイルを選択」をクリックします。
先程ダウンロードした親テーマ「cocoon-master-2.1.9.1.zip」を選択します。
(「-2.1.9.1」の部分はバージョン名です。数値が異なっていても大丈夫です。) - 「ファイルを選択」の右側が「cocoon-mas….zip」と表示されたら、「今すぐインストール」をクリックします。
3-3-4.Cocoonの親テーマのインストールが完了する
「テーマを追加」画面で「今すぐインストール」をクリックすると、「テーマのインストール画面」になります。
- 「テーマのインストールが完了しました。」と表示されたら、Cocoonの親テーマのインストールは完了です。
- 続いて、子テーマをインストールします。「テーマのページに戻る」をクリックします。
3-3.WordPressにCocoonの子テーマをインストールして、有効化する
3-3-1.Cocoonの子テーマを新規追加する
「テーマのインストール画面」で「テーマのページに戻る」をクリックすると、「テーマ」画面に戻ります。
- 「テーマ」画面の上部「新規追加」をクリックします。
3-3-2.Cocoonの子テーマをアップロードしてインストールする
「テーマ」画面で「新規追加」をクリックすると、「テーマを追加」画面になります。
- 「テーマを追加」画面の上部「テーマのアップロード」をクリックします。
すると、「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールできます。」画面になります。 - 「ファイルを選択」をクリックします。
先程ダウンロードした子テーマ「cocoon-child-master-1.1.2.zip」を選択します。
(「-1.1.2」の部分はバージョン名です。数値が異なっていても大丈夫です。) - 「ファイルを選択」の右側が「cocoon-chil….zip」と表示されたら、「今すぐインストール」をクリックします。
3-3-3.Cocoonの子テーマを有効化する
「テーマを追加」画面で「今すぐインストール」をクリックすると、「テーマのインストール画面」になります。
- 「テーマのインストールが完了しました。」と表示されたら、Cocoonの子テーマのインストールは完了です。
- 「有効化」をクリックします。
3-3-4.Cocoonの子テーマが有効化されたか確認する
「テーマのインストール画面」で「有効化」をクリックすると、「テーマ」画面に戻ります。
- 「Cocoon親テーマ」がインストールされているのが確認できます。
- 「有効: Cocoon Child」と表示されていれば、「Cocoon子テーマ」が有効化しています。
これで、WordPressにCocoonの親テーマ、子テーマをインストールできました。
4.Cocoonテーマの使い方
Cocoonテーマは、「親テーマ」「子テーマ」双方をインストールして、「子テーマ」を有効化して利用します。
「親テーマ」のみインストールした場合は、テーマのアップデート時にCSSやテンプレートカスタマイズがリセットされてしまいます。
「子テーマ」をインストールすれば、テーマカスタマイズを保持したままアップデートできます。
CSSやテンプレートをカスタマイズしない場合でも、子テーマの利用をおすすめします。
5.まとめ
セキュリティ上、テーマはアップデートされたら、すぐに更新すべきです。
子テーマを有効化しておけば、カスタマイズした内容が消去されないので、テーマアップデートに即対応できます。
この後はCocoonテーマの設定をしていきます。
が、その前に、各種プラグインのインストールと設定をしておきましょう。
特にセキュリティ系プラグインは、Cocoon設定の前にしておくと良いですね。