【Cocoon】ヘッダーをカスタマイズしたい時に開くべきファイル【WordPress】

誰かが作ったテーマからカスタマイズする場合、
どのファイルをいじればいいか調べるのって手間じゃないですか？

正解としては、フォルダ内の全てからクラス名などで検索すれば良いのですが、
処理重くなるしすぐに知りたいんですよ。

なので、すぐに知れる記事作りました。

これはWordPressテーマ、『Cocoon』を使用している方向けの記事です。

Cocoonのヘッダーをカスタマイズする時にまず開くファイル

最初に答えを書いてしまいますが、
ヘッダーをアレンジしたい場合に開く（もしくは作成する）べきファイルは

~/wp-content/themes/cocoon-child-master/tmp/header-container.php

です。
ここでヘッダーの構造を知ることができます。

ここにheader-containerが入っているので、
この中をいじるか、もしくはここから更に目的のファイルに飛んでください。

ロゴ下のキャッチフレーズスペースに画像を配置

当ブログの場合はキャッチフレーズを画像にしたかったのと
背景画像（ヘッダー画像）とは別で作成し、レスポンシブにうまいこと対応させたかったので
header-container.php自体を編集しました。

私のようにロゴ下のキャッチフレーズ部分に何か配置したい場合は、

<?php //キャッチフレーズがヘッダー下部のとき

if (is_tagline_position_header_bottom()) {

get_template_part('tmp/header-tagline');

} ?>

と書いている部分があるので、この下にPHPなりHTMLなりを書いてください。

私の場合は、

<!-- キャッチフレーズ -->

<img class="header_catchphrase" src="https://inlady-log.com/wp-content/uploads/2023/08/header_logoBtm.png" alt="ゲーム・美容・プログラミングなど陰なladyの雑記ブログ、 インレディログ。">

と書いて、キャッチフレーズ画像を配置しました。

【カスタマイズ初心者用】ヘッダー内の他の変更をする時の注意点

ファイルの中にはよく『get_template_part』という記述が見つかると思います。

header-container.php内にも、

get_template_part('tmp/navi');

など複数あると思います。

この『get_template_part』というのは、ここからまた別のテンプレートファイルを読み込んでいるという意味です。
ですので、例えば『get_template_part(‘tmp/navi’)』は、
これを書いている場所に『navi.php』ファイルが入った状態でwebページには表示されます。
要は、ナビメニューをカスタマイズする場合はnavi.phpファイルを開けばいいということです。

『(‘tmp/navi‘)』なので、ナビメニューを変更したい時は、

~/wp-content/themes/cocoon-child-master/tmp/navi.php

です。
header-container.phpを“まず”開くとしたのはそのためです。

【カスタマイズ超初心者用】装飾を変えるのはCSSで！

例えば、

など、見た目の部分を変更する場合はPHPファイルではなくCSSファイルを開きましょう。

~/wp-content/themes/cocoon-child-master/style.css