【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法③（子テーマファイル組み込み－style.css－編）

前回はファイル確認編ということで、WordPress化されたオリジナルテーマのテンプレートファイルの確認を行なっていきました。

: 【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法②（ファイル確認編）
前回はCocoonの子テーマを有効化するところまで、紹介させていただきました。 https://tatsuya-hagihira.com/2023/10/237/ 今回はCocoonをカスタマイズして ...

今回は、Cocoon子テーマのファイルの中身を確認してオリジナルテーマを組み込んでいく作業を紹介させていただきます。

Cocoon子テーマのファイルを確認

Cocoon子テーマのファイルは、以前ご紹介したとおり次の場所にあります。

Windowsの場合

Cドライブ　⇨　ユーザー　⇨　（ユーザー名）⇨　 Local Sites
　⇨ （サイト名）　⇨　app　⇨　public　⇨　wp-content　⇨　themes
　⇨　cocoon-child-master

Macの場合

Macintosh HD　⇨　ユーザー　⇨　（ユーザー名）⇨　 Local Sites
　⇨ （サイト名）　⇨　app　⇨　public　⇨　wp-content　⇨　themes
　⇨　cocoon-child-master

それではどのようなファイルで構成させているか確認してみましょう。

見ていただけると気づいた方がいるかと思いますが、第２回で紹介したオリジナルテーマにあったテンプレートファイルが見当たりません。

これはベースとなるテーマは親テーマの方で構築して、個別に設定させていきたいもののみ子テーマで構築するという形を取っているからだと思います（...違っていたらすみません）。

それでは親テーマにあるテンプレートファイルを修正して構築していくのかというとそうではありません。

親テーマにあるベースとなるテンプレートファイルを修正して構築しても、テーマの更新などでそのデータが上書きされてしまうため親テーマのテンプレートファイルでは構築せずに子テーマに同じテンプレートファイルを作成して構築していく必要があります。

それではCocoonの親テーマのファイル構成も確認していきましょう、親テーマのファイルは以下の場所にあります。

Windowsの場合

Cドライブ　⇨　ユーザー　⇨　（ユーザー名）⇨　 Local Sites
　⇨ （サイト名）　⇨　app　⇨　public　⇨　wp-content　⇨　themes
　⇨　cocoon-master

Macの場合

Macintosh HD　⇨　ユーザー　⇨　（ユーザー名）⇨　 Local Sites
　⇨ （サイト名）　⇨　app　⇨　public　⇨　wp-content　⇨　themes
　⇨　cocoon-master

それではどのようなファイルで構成させているか確認してみましょう。

先ほどの子テーマのファイル構成に比べると、いろいろな種類のファイルが含まれているのが分かります。

ですが今回のカスタマイズで必要になってくるファイルとしては限られてきますので、以下にまとめておきます。

ポイント

テンプレートファイル（PHPファイル）　⇨　基本的には修正が必要なものは、こちらにあるファイルをベースに修正をしていきます。

tmpフォルダ内のパーツファイル（PHPファイル）　⇨　上記のテンプレートファイルを構成する部品となるファイルです。

style.css　⇨　こちらに関しましては、子テーマにある「style.css」に追加していく形をとっていきます。

特にどの順番から実装していかないとダメというのはありません、今回は以下の順番で構築していきたいと思います。

まずはstyle.cssを実装していきます、必要となるファイルは以下の２つになります。

・Cocoon子テーマのstyle.css
・自作テーマのstyle.css

それでは、２つのstyle.cssを確認していきましょう。

編集する箇所になりますが、イメージとしてはオレンジ枠の部分を赤枠の部分にコピペしていく感じになります。

ポイント

コメントヘッダー　⇨　基本的には、Cocoonをベースに作成していくので変更したとしても「Theme Name」「Description」のみでＯＫ

オリジナルテーマのCSS　⇨　オリジナルテーマを作成した際にレスポンシブも出来ているはずなので、自作したものを丸々コピーでＯＫ
※Cocoonが持っているCSSやクラス名被りによりCSSがバッティングする可能性が高いですが、いったんそのままコピペしたほうが早いです。

ポイントにも書きましたが、Cocoonに組み込んだ時点で表示崩れを起こす可能性が高いですので実装後は確認が必要となります。

なるべく手間を減らすのであれば、以下の点に注意してオリジナルテーマを制作していただけると修正が少なくなると思います。

ポイント

HTMLタグ名と同じクラス名をつけない
　⇨　Cocoonに限らずですが、テーマが持っているCSSにはHTMLタグ名と同じ名前でクラス名がつけられていることが多いので
　　　既存テーマに自作のCSSファイルを組み込む際は、クラス名を違うものに意識してつけたほうがバッティングが回避しやすいです。

【クラス名の実装例】
・header　⇨　custom-header
・footer　⇨　custom-footer
・btn　⇨　custom-btn　など

WordPressの「body_class()」「post_class()」が自動で出力されるCSSクラスと同じクラス名をつけない

【自動で出力される代表的なクラス名】
・page　　・home　　・blog　　・single　　・カスタム投稿のスラッグ名　など

今回はCocoonの親子テーマのファイル構造の確認と、style.cssの子テーマへの組み込みを行なっていきました。

次回はfunctions.phpの子テーマへの組み込みを行なっていきたいと思います。