このサイトは、WordPress6.2にバージョンアップ済です!

同梱されていない独自のCocoonスキンをアップロードする

アップロード

WordPressの無料テンプレートでよく使われているのがCocoon。

Cocoonには、見栄えを簡単に変更することができる「スキン」が同梱されています。

Ver1.7.0では全部で31種類のスキンが用意されているので、Cocoonをインストールするだけで、簡単に好みのスキンに切り替えることができます。

ここでは、同梱されていない独自のスキンをCocoonで使いたい場合の手順を紹介します。

独自スキンをサーバーにアップロードしてCocoonで使えるようにする

同梱のスキンを使う場合は、Cocoonをインストールするだけで好きなスキンに切り替えることができますが、独自スキンの場合は、スキンをサーバーの決められた場所にアップロードする必要があります。

ここでは、アップロードの手順~スキンが使えるようになるまでの手順を解説していきます。

独自スキンは子テーマにアップロードする必要がある

アップロードする場合の前提条件が1点あります。

それは、Cocoonの子テーマが有効になっていることです。

つまり、独自スキンは子テーマの方にアップロードします。

なぜ子テーマの方なのかというと、親テーマ方にアップロードしてしまうと、Cocoonをバージョンアップした時に、親テーマの方にアップロードした独自スキンは削除されるからです。

Cocoonのバージョンアップのたびに、独自スキンをアップロードすることになって非常に面倒なんですね。

なので、独自スキンは子テーマにアップロードすることになります。

ちなみに、Cocoonの公式サイトでも以下のように書かれていますが、「子テーマを有効化」することが推奨されています。

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

親テーマ、子テーマのどちらが有効になっているか確認する

Cocoonが親テーマ、子テーマのどちらが有効になっているかわからない場合は、次の手順で確認できます。

WordPressの管理者画面のメニューから、「外観」→「テーマ」を選択。

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

 

Cocoonのイメージ画像が2つ表示されます。

下の画像のように「有効:Cocoon」と表示されていれば、親テーマが有効になっています。

「有効:Cocoon Child」と表示されたら、子テーマが有効な状態。

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

もし、上の画像のように右側の「Cocoon Child」の画像が表示されていない場合は、「子テーマ」がインストールされていません。

その場合は、以下の記事を参考に子テーマをインストールしてください。

親テーマが有効な状態になっている場合は、右側の子テーマの画像にマウスを乗せると「有効化」のボタンが表示されるので、クリックして子テーマを有効化します。

ただし、「子テーマに切り替える」前に、親テーマの設定を子テーマの方に移行させる必要があります。

Cocoon設定の移行
子テーマを有効化すると、Cocoonの設定がリセットされてしまいます。
この場合は、事前に親テーマの設定をバックアップし、子テーマを有効化後に子テーマの方に設定を復元してください。
設定の移行の方法は、以下の記事の「Cocoon親テーマのバックアップをとる」以降が参考になります。

子テーマを有効化すると、以下の画像のように子テーマの方が「有効」と表示されます。

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

独自スキンを子テーマのスキンフォルダにアップロード

ここでは例として、カームという独自スキンをアップロードする手順を解説します。

①スキンの圧縮ファイル(skin-calm.zip)を適当なフォルダに保存して、解凍します。

すると、下の画像のようにskin-calmのフォルダが作成されます。

スキンのフォルダをPCの任意のフォルダで解凍

これから、解答されたフォルダをサーバーの方にアップロードしていきます。

 

②FFFTPなどのFTPソフトでサーバーに接続したら、スキンフォルダ(skin-calm)を丸ごとサーバーの子テーマのスキンフォルダ配下にアップロードします。

子テーマにスキンをアップロード

子テーマのスキンフォルダパスは次の通り。

XXX/wp-content/themes/cocoon-child-master/skins

※XXXの部分はレンタルサーバーごとに異なります。

 

③アップロードに成功すると、下の画像のようにスキンフォルダ(skin-calm)がサーバーにコピーされます。

子テーマにスキンをアップロード

アップロードした独自スキンをCocoonで使えるようにする

④次に、WordPressの管理者画面のメニューから「Cocoon設定」を選択。

Cocoonのスキン適用

 

⑤Cocoon設定画面で「スキン」を選択。

子テーマにスキンをアップロード

 

⑥「表示スキン」で「子テーマのスキンのみ表示」にチェックをつけて「変更をまとめて保存」をクリック。(チェックをつけただけではスキン一覧は変わりません)

スキンの表示オプションを子テーマにする変更する

スキン選択の保存

 

⑦すると、「スキン一覧」に、アップロードしたスキンが表示されるので、チェックをつけて「変更をまとめて保存」をクリック。

アップロードした独自スキンが子テーマの一覧に表示される

 

これでアップロードした独自スキンがCocoonで使えるようになりました。

ブラウザのURLにドメイン名(http://ドメイン名)を入力すると、独自スキンが表示されるはずです。

独自スキンのアップロード方法のまとめ

Cocoonをインストールする場合は、親テーマと子テーマの両方をインストールし、子テーマを使う(有効化)ことが推奨されています。

親テーマが有効だと、Cocoonがバージョンアップした時に設定がリセットされるので、もとに戻すのがかなり面倒。(設定のバックアップと復元機能はあり)

また、独自スキンを親テーマのスキンフォルダにアップロードすると、Cocoonのバージョンアップの時にアップロードしたスキンが削除されてしまいます。

Cocoonのバージョンアップに影響されないように、子テーマを使うことを強くおすすめします。

コメント

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