WordPressにCocoonテーマをインストールする方法【画像付きで解説】

今回の疑問点

WordPressに無料のテーマ「Cocoon(コクーン)」をインストールするにはどうすればいいの?

という人のために、WordPressにCocoonテーマをインストールする方法を、画像付きで解説します。

Cocoonは、日本国産のテーマ。無料の中では一番スペックが高いです。
WordPressの初期設定をした後、各種プラグインのインストール・設定をする前に、Cocoonをインストールしておきましょう。
そうすれば、プラグインの設定の手間が省けます。

1.前提条件・事前準備・参考記事

WordPressのログイン方法、WordPress管理画面の見方、WordPressの初期設定方法、テーマのインストール方法、プラグインのインストール方法は、以下の記事を参考にしてください。

2.WordPressにCocoonをインストールする手順

WordPressにCocoonをインストールする手順は以下になります。

<WordPressにCocoonをインストールする手順>
  1. Cocoonの親テーマ、子テーマをダウンロードする
  2. WordPressにCocoonの親テーマをインストールする
  3. WordPressにCocoonの子テーマをインストールして、有効化する

では、1つずつ解説していきます。

3.WordPressにCocoonをインストールする方法

3-1.Cocoonの親テーマ、子テーマをダウンロードする

3-1-1.Cocoonの親テーマ、子テーマの「ダウンロードページ」にアクセスする

Cocoonの親テーマ、子テーマの「ダウンロードページ」にアクセスします。
>>Cocoon:テーマのダウンロード

3-1-2.Cocoonの親テーマをダウンロードする

Cocoonの親テーマ、子テーマの「ダウンロードページ」を下にスクロールすると、「親テーマのダウンロード」があります。

  1. 「“Cocoonテーマ” をダウンロード」をクリックし、Cocoonテーマをダウンロードします。

3-1-3.Cocoonの子テーマをダウンロードする

Cocoonの親テーマ、子テーマの「ダウンロードページ」を下にスクロールすると、「親テーマのダウンロード」の次に「子テーマのダウンロード」があります。

  1. 「“Cocoon子テーマ” をダウンロード」をクリックし、Cocoon子テーマをダウンロードします。

3-2.WordPressにCocoonの親テーマをインストールする

3-2-1.WordPressにログインする

WordPressにログインする方法、WordPress管理画面の見方は、以下の記事を参考にしてください。
WordPressのログイン方法と、パスワード等の再発行方法【画像付きで解説】
WordPress管理画面(ダッシュボード)の見方と意味と名称【画像付きで解説】

3-2-2.Cocoonの親テーマを新規追加する

WordPressにログインすると、管理画面トップになります。

  1. 管理画面左側メニューの「外観:テーマ」をクリックします。
  2. 「テーマ」画面の上部「新規追加」をクリックします。

3-3-3.Cocoonの親テーマをアップロードしてインストールする

「テーマ」画面の上部「新規追加」をクリックすると、「テーマを追加」画面になります。

  1. 「テーマを追加」画面の上部「テーマのアップロード」をクリックします。
    すると、「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールできます。」画面になります。
  2. 「ファイルを選択」をクリックします。
    先程ダウンロードした親テーマ「cocoon-master-2.1.9.1.zip」を選択します。
    (「-2.1.9.1」の部分はバージョン名です。数値が異なっていても大丈夫です。)
  3. 「ファイルを選択」の右側が「cocoon-mas….zip」と表示されたら、「今すぐインストール」をクリックします。

3-3-4.Cocoonの親テーマのインストールが完了する

「テーマを追加」画面で「今すぐインストール」をクリックすると、「テーマのインストール画面」になります。

  1. 「テーマのインストールが完了しました。」と表示されたら、Cocoonの親テーマのインストールは完了です。
  2. 続いて、子テーマをインストールします。「テーマのページに戻る」をクリックします。

3-3.WordPressにCocoonの子テーマをインストールして、有効化する

3-3-1.Cocoonの子テーマを新規追加する

「テーマのインストール画面」で「テーマのページに戻る」をクリックすると、「テーマ」画面に戻ります。

  1. 「テーマ」画面の上部「新規追加」をクリックします。

3-3-2.Cocoonの子テーマをアップロードしてインストールする

「テーマ」画面で「新規追加」をクリックすると、「テーマを追加」画面になります。

  1. 「テーマを追加」画面の上部「テーマのアップロード」をクリックします。
    すると、「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールできます。」画面になります。
  2. 「ファイルを選択」をクリックします。
    先程ダウンロードした子テーマ「cocoon-child-master-1.1.2.zip」を選択します。
    (「-1.1.2」の部分はバージョン名です。数値が異なっていても大丈夫です。)
  3. 「ファイルを選択」の右側が「cocoon-chil….zip」と表示されたら、「今すぐインストール」をクリックします。

3-3-3.Cocoonの子テーマを有効化する

「テーマを追加」画面で「今すぐインストール」をクリックすると、「テーマのインストール画面」になります。

  1. 「テーマのインストールが完了しました。」と表示されたら、Cocoonの子テーマのインストールは完了です。
  2. 「有効化」をクリックします。

3-3-4.Cocoonの子テーマが有効化されたか確認する

「テーマのインストール画面」で「有効化」をクリックすると、「テーマ」画面に戻ります。

  1. 「Cocoon親テーマ」がインストールされているのが確認できます。
  2. 「有効: Cocoon Child」と表示されていれば、「Cocoon子テーマ」が有効化しています。

これで、WordPressにCocoonの親テーマ、子テーマをインストールできました。

4.Cocoonテーマの使い方

Cocoonテーマは、「親テーマ」「子テーマ」双方をインストールして、「子テーマ」を有効化して利用します。

「親テーマ」のみインストールした場合は、テーマのアップデート時にCSSやテンプレートカスタマイズがリセットされてしまいます。
「子テーマ」をインストールすれば、テーマカスタマイズを保持したままアップデートできます。
CSSやテンプレートをカスタマイズしない場合でも、子テーマの利用をおすすめします。

5.まとめ

セキュリティ上、テーマはアップデートされたら、すぐに更新すべきです。
子テーマを有効化しておけば、カスタマイズした内容が消去されないので、テーマアップデートに即対応できます。

この後はCocoonテーマの設定をしていきます。
が、その前に、各種プラグインのインストールと設定をしておきましょう。
特にセキュリティ系プラグインは、Cocoon設定の前にしておくと良いですね。

タイトルとURLをコピーしました