質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.90%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 196

joyboy

score 24

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

■構成イメージ
イメージ説明

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

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+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を確認してそれに合わせてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/13 20:45

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

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

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

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

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

    キャンセル

  • 2020/07/13 21:45

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

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

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

    キャンセル

  • 2020/07/13 22:36

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

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/13 07:14 編集

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

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

    キャンセル

  • 2020/07/13 19:57

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

    記述するファイルについてですが、
    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
    このファイルを開いてみたところ、ヘッダーに関する記述がなく
    手掛かりも無くなってしまい手詰まりになってしまいました。

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る