WordPressの無料テンプレートでよく使われているのがCocoon。
Cocoonには、見栄えを簡単に変更することができる「スキン」が同梱されています。
Ver1.7.0では全部で31種類のスキンが用意されているので、Cocoonをインストールするだけで、簡単に好みのスキンに切り替えることができます。
ここでは、同梱されていない独自のスキンをCocoonで使いたい場合の手順を紹介します。
独自スキンをサーバーにアップロードしてCocoonで使えるようにする
同梱のスキンを使う場合は、Cocoonをインストールするだけで好きなスキンに切り替えることができますが、独自スキンの場合は、スキンをサーバーの決められた場所にアップロードする必要があります。
ここでは、アップロードの手順~スキンが使えるようになるまでの手順を解説していきます。
ただし、Cocoonの子テーマが有効になっていることが前提条件。
親テーマ、子テーマのどちらが有効になっているか確認する
Cocoonが親テーマ、子テーマのどちらが有効になっているかわからない場合は、次の手順で確認できます。
WordPressの管理者画面のメニューから、「外観」→「テーマ」を選択。
Cocoonのイメージ画像が2つ表示されます。
下の画像のように「有効:Cocoon」と表示されていれば、親テーマが有効になっています。
「有効:Cocoon Child」と表示されたら、子テーマが有効な状態。
親テーマが有効となっている場合は、右側の子テーマの画像にマウスを乗せると「有効化」のボタンが表示されるので、クリックして子テーマを有効化します。
すると、子テーマの方が有効になります。
まだCocoonをインストールしていない場合は、次の公式サイトを参考にして子テーマを有効にしてください。
公式サイトでも書いているように、テーマは親テーマより子テーマを使うことが推奨されています。
親テーマのみインストールした場合は、テーマのアップデート時にCSSやテンプレートカスタマイズがリセットされてしまいます。
子テーマをインストールすることで、テーマカスタマイズを保持したままアップデートができます。
CSSやテンプレートをカスタマイズしない場合でも、子テーマを利用することをおすすめします。
なので、できる限り子テーマを使うようにしましょう。
また、ここからの手順でもスキンは子テーマ用のスキンフォルダにアップロードしていきます。
独自スキンを子テーマのスキンフォルダにアップロード
ここではCalmというスキンを例に、アップロードする手順を解説します。
①スキンの圧縮ファイル(skin-calm.zip)を適当なフォルダに解凍。
※ここでは、例としてCドライブのtemp\skinフォルダに解凍。
スキンの圧縮ファイルを解凍すると、上の画像のようにskin-calmのフォルダが作成されます。
ちなみに、skin-calmフォルダには、次のようにCSSファイルなどが入っています。
②FFFTPなどのFTPソフトでサーバーに接続したら、スキンフォルダ(skin-calm)を丸ごとサーバーの子テーマのスキンフォルダ配下にアップロードします。
子テーマのスキンフォルダパスは次の通り。
XXX/wp-content/themes/cocoon-child-master/skins
※XXXの部分はレンタルサーバーごとに異なります。
③アップロードに成功すると、下の画像のようにスキンフォルダ(skin-calm)がサーバーにコピーされます。
アップロードした独自スキンをCocoonで使えるようにする
④次に、WordPressの管理者画面のメニューから「Cocoon設定」を選択。
⑤Cocoon設定画面で「スキン」を選択。
⑥「表示スキン」で「子テーマのスキンのみ表示」にチェックをつけて「変更をまとめて保存」をクリック。(チェックをつけただけではスキン一覧は変わりません)
⑦すると、「スキン一覧」に、アップロードしたスキンが表示されるので、チェックをつけて「変更をまとめて保存」をクリック。
これでアップロードした独自スキンがCocoonで使えるようになりました。
ブラウザのURLにドメイン名(http://ドメイン名)を入力すると、独自スキンが表示されるはずです。
独自スキンのアップロード方法のまとめ
Cocoonをインストールする場合は、親テーマと子テーマの両方をインストールし、子テーマを使う(有効化)ことが推奨されています。
親テーマが有効だと、Cocoonがバージョンアップした時に設定がリセットされるので、もとに戻すのがかなり面倒。(設定のバックアップと復元機能はあり)
また、独自スキンを親テーマのスキンフォルダにアップロードすると、Cocoonのバージョンアップの時にアップロードしたスキンが削除されてしまいます。
Cocoonのバージョンアップに影響されないように、できるだけ子テーマを使うようにしましょう。
コメント