Wordpressのヘッダー部の画像の追加

Question

現在Wordpressでのウェブサイト構築を独学で始めた初心者です。
初歩的な質問となってしまいますが、ヘッダー部に画像を追加するにはどうしたら良いでしょうか？
テーマは「cocoon」を使用しております。

■構成イメージ

私なりに考えた対処法は以下の通りです。

１．Wordpressの管理画面であるダッシュボードの「cocoonの設定」では、
追加する項目が見当たらなかったので、ヘッダー部のHTMLに追加する必要がある。

２．ヘッダー部の記述がされているファイルにHTMLで画像を出力して、CSSで整形。

質問の内容としましては、そもそもこの対処法が正しいのか。という点と、
正しかった場合どこのファイルに記述すれば良いのかという2点になります。

拙い文章で申し訳ありませんが、以上宜しくお願い致します。

●動作環境
Wordpress：5.4.2（最新）
テーマ：[親]2.2.0.5 [子]1.1.2（どちらも最新）
サーバー：さくらサーバ

Answer 1

その方法でも問題はないですが、テーマの改修ということになりますので、それなりのスキルが必要です。

Wordpressは、PHPでHTMLを出力してますので、HTMLの知識だけではなく、PHPのスキルも必要になり、Wordpressの構成ファイル、特有のコマンドの理解も必要になります。
下手に弄ると壊してしまい、サイトが表示されなくなる危険性もあります。

自分がするなら、画像はCSSの疑似要素で表示させる方向で検討するかな。
CSSは追加CSSに記述するればいいでしょう。
これだと間違っても最低限レイアウトが崩れるだけですし、追加したCSSを削除すれば元に戻ります。

Cocoon のヘッダー部分のHTMLはデベロッパーツールで確認すると下記のような構成になっています。

<header id="header" class="header ba-fixed cf">
    <div id="header-in" class="header-in wrap cf">
        <div class="tagline">キャッチフレーズ</div>
        <div class="logo logo-header logo-image">サイトタイトル</div>
    </div>
</header>

taglineクラスとlogoクラスにそれぞれ::after疑似要素で画像を追加すればいいでしょう。

あとは、CSSでお好みにレイアウトします。下記は CSS FlexBox で横並びにする例です。

.header-in .tagline, .header-in .logo {
  display: flex;
  justify-content: space-between;
  align-items:center;
}

.header-in .tagline::after {
  content: url(https://placehold.jp/150x50.png);
  height: 50px;
  width: 150px;
}

.header-in .logo::after {
  content: url(https://placehold.jp/150x50.png);  
  height: 50px;
  width: 150px;
}

テーマの設定によってはHTMLが変わるかもしれませんので、自身のサイトでHTMLを確認してそれに合わせてください。

Comments

[joyboy]

アンサーありがとうございます。
HTMLとCSSに加えてPHPの基礎と一般的な応用を学習したので、Wordpressのファイル構成などの見識を深める意味も含めてテーマ改修での対応を検討した次第です。言葉が足らずに申し訳ありません。

テーマを改修してもアップデートで元に戻ってしまったり、下手に手を加えて最悪クラッシュする可能性もあるというのはおっしゃる通りよく見かけますので、バックアップは必須である事は肝に銘じておきます。

:after疑似要素で画像を追加する方法は目から鱗でした。
不具合のリスクも最小限で運用面で素晴らしいと思います。
デベロッパーツールで確認と参考ソースまで教えていただきありがとうございます！
ぜひ参考にさせていただきます。

今後Wordpressを中心に案件を受注して行く事を考慮したら、テーマの改修はよくある事でしょうか？
もしレアケースでの対応であれば、他の面でのスキルアップを優先しようかと考えています。

本筋からそれた追加質問になってしまいすみませんが、宜しくお願いします。

[hatena19]

レイアウトや見た目の改修はたいていCSSで間に合うと思います。
また、不足する機能は、たいていプラグインがあります。
実際、テーマの改修まで必要なことはあまりないと思います。

逆に、大幅な改修が必要になるような案件なら、既存のテーマを使うより、一からテーマを作成するか、あるいはカスタマイズ前提のブランクテーマを使う方がいいように思います。

高機能なテーマは構成が複雑にからみあっているので理解不足のまま下手に弄ると想定外なことになりかねませんので。

[joyboy]

＞レイアウトや見た目の改修はたいていCSSで間に合うと思います。
確かにそうですね。
プラグインもまだ把握しきれていない部分があるので、調べてみようと思います。

貴重なご意見をいただけて勉強になりました。
ありがとうございます！

Answer 2

今回の解決方法としては質問当初考えていたヘッダー部のHTMLを編集(テーマの改修)よりも、CSSもしくはプラグインを使用しての実装が、運用面においても理想的であると感じました。
回答いただいたhatena19さんAMKさんありがとうございました。

Answer 3

その方法で問題ないです。

Comments

[AMK]

記述方法については、自分で考えてやってみてからここで質問してくださいね

ヒントとしては画像１と２は別々の要素で囲って中の要素を左より右寄りにすればよいと思いますよ

[joyboy]

アンサーありがとうございます。
やり方に間違いは無いようで安心しました。

記述するファイルについてですが、
wp-content
　┗themes
　　┗cocoon-master
　　　┗header.php
と階層を探っていき、それらしいファイルがあったので中身を見てみると
<?php //カスタムフィールドの挿入（カスタムフィールド名：head_custom
get_template_part('tmp/head-custom-field'); ?>
という記述を見つけたので、tmp/head-custom-fieldを探してみると
┗cocoon-master
　┗tmp
　　┗head-custom-field.php
このファイルを開いてみたところ、ヘッダーに関する記述がなく
手掛かりも無くなってしまい手詰まりになってしまいました。

こういう場合どうやって記述すべきファイルを探ったらよろしいでしょうか？
追加の質問になってしまい、すみませんが宜しくお願いします。