WordPressの無料テーマとして非常に高機能で優秀なのがCocoonです。
無料とは思えないほど多機能で、SEOにも強いのが特徴です。
しかし、使用していると「デザインを変えてみたい」「普通のサイトも作ってみたい」と思う方もいらっしゃるのではないでしょうか。
CSSやスキンである程度デザインは変えられますが、ガッツリデザインを変えたい方にとっては少し物足りないでしょう。
そこで今回は、Cocoonの子テーマを使ってデザインを大幅にカスタマイズする方法をご紹介します。
HTML、CSS、PHPの基本的な事項を知っている必要があります。（具体的には、入門書１冊を理解しているレベル）
Cocoon子テーマでカスタマイズする手順
親テーマ・子テーマの準備
「Cocoon」の公式サイトから親テーマと子テーマをダウンロードしてください。
すでに使用している子テーマを編集したい場合はFTPなどを使って自分のサーバから子テーマをダウンロードしてください。（その場合も親テーマは公式サイトからダウンロードしてください）
ダウンロードしたら、どちらも解凍しておきます。
Cocoon親テーマから子テーマにフォルダをコピー
Cocoonの親テーマのcocoon-masterフォルダの中に「tmp」というフォルダがあります。
このフォルダをコピーして解凍したcocoon-child-masterフォルダ（子テーマ）に貼り付けましょう。
このtmpフォルダってなんですか？
Cocoonの様々な部品が入っているフォルダですね！
tmpフォルダの中のphpファイルを適宜カスタマイズする
tmpフォルダの中は様々なCocoonを構成するパーツが入っています。
デザインを変更したい場所に対応したphpファイルを変更していきましょう。
例えばヘッダーはheader-container.phpを編集するとデザインを変えることができます。
どのファイルがどの場所に対応しているかは少しややこしいですが、色々いじってみて確認しながらカスタマイズしてください。
テーマのカスタマイズはWordPressテーマの開発環境でやった方が効率的です。
例えば、筆者は「Local」を使用しています。
注意点
特にCSSを変更する場合、親テーマのCSSを子テーマが上書きする仕組みになっています。
ただ、何も指定していないプロパティには親テーマの値が適用されてしまいます。
例えば、親テーマに次のように記述されているとしましょう。
.box{
margin:20px;
padding:50px;
}このとき、子テーマに次のように書くとします。
.box{
margin:10px;
}このとき、marginは10pxになりますが、paddingは50pxのままです。
paddingを0にしたい場合はpadding:0と明記する必要があります。
この程度ならわかりやすいですが、意外とつまづくポイントです。
おすすめ書籍
HTMLやCSS、PHPの知識が少し必要ですが、この本を読むとカスタマイズに役立つと思います。
WordPressの独自の関数について丁寧に解説しているため、がっつりカスタマイズしたい方は読んでみてください。
まとめ
今回はCocoonの子テーマを使ってデザインを変えるカスタマイズの方法をご紹介しました。
子テーマをカスタマイズできるようになれば、デザインの幅は一気に広がるので、ぜひ試してみてくださいね。
