賢威 7の画面右上に連絡先画像を表示する

WordPress個別サポート

画面右上の連絡先をカスタマイズできるテーマもいくつかありますが、ここでは、賢威 7の画面右上に連絡先画像を表示する方法を紹介します。仕上がりイメージは次のようになります。header.phpとCSSの編集が必要ですが、それほど難しくないので、賢威 7で連絡先を表示できないか模索している方はチャレンジしてみてください。

賢威 7の画面右上に連絡先画像を表示する
賢威 7の画面右上に連絡先画像を表示する

連絡先画像ブロックの作成

連絡先として表示するブロックのHTMLを準備します。用途は「お問い合わせはこちら」画像に限りませんが、次のような簡単なコードブロックで大丈夫です。

<div id="header-contact">
<img src="http://-----.jpg">
</div>

「http://-----.jpg」の部分は実際に使う画像に置き換えてください。

このHTMLを賢威 7のheader.phpにコピーペーストします。子テーマが理想ですが、親テーマでも構いません。コピーペーストする位置が重要で、場所的にはグローバルナビの上あたりに設置したいです。

グローバルナビの上あたりに差し込みたい
グローバルナビの上あたりに差し込みたい

そこで、header.phpを開いて「▼グローバルナビ」という文字を探しましょう。検証しているテンプレートでは115行目あたりですが、バージョンによって違う可能性があるので注意してください。

「▼グローバルナビ」を目印に、その上にコピーペースト場所を定めます。ヘッダーブロックの「class="site-header-conts"」の中に入れたいので、「▼グローバルナビ」の上にあるdivタグの終了を探して、その上に差し込みます。

header.phpで連絡先画像ブロックを差し込む位置
header.phpで連絡先画像ブロックを差し込む位置

検証した賢威 7では109行目と110行目の間に差し込めばうまくいきますが、具体的な行番号はバージョンによって異なる可能性があるのでご注意ください。

連絡先画像のHTMLブロックをコピーペーストしたイメージは次のようになります。

連絡先画像ブロックを差し込んだイメージ
連絡先画像ブロックを差し込んだイメージ

連絡先画像が表示されます。

連絡先画像が表示される
連絡先画像が表示される

連絡先画像ブロックのスタイル設定

あとはCSSを使ってレイアウトを整えれば大丈夫です。たとえば、次のようなCSSをbase.cssに入力します。

/* 連絡先を右寄せに */
#header-contact {
    float: right;
}

/* 連絡先画像の高さ制限 */
#header-contact img {
    max-height: 100px;
}

/* サイト名を上に寄せる */
.site-title {
    vertical-align: top;
}

表示結果は次のようになります。

画面右上に連絡先画像を表示する
画面右上に連絡先画像を表示する

ここまでのコードは、以下のテンプレートで検証しました。

検証したテンプレート(賢威 7.1)
  • ビューティ版(AQUA)
  • プリティ版(BLUE)
  • コーポレート版(Blue)
  • スタンダード版(Blue)

クール版ではサイト名を左寄せに

クール版ではサイト名がセンタリングされているため、右に連絡先画像を表示するにはサイト名を左寄せにする必要があります。たとえば、次のようなCSSをbase.cssに追加してください。

/* サイト名を左寄せに(クール版) */
.site-title {
    text-align: left;
    float: left;
}

表示結果は次のようになります。

クール版のカスタマイズ結果
クール版のカスタマイズ結果

スマホでClick to Callに

連絡先画像をClick to Call(スマホでタップして電話できる)にするには、連絡先画像ブロックを次のコードに入れ替えます。

<div id="header-contact">
<?php if(wp_is_mobile()) : ?>
    <a href="tel:0399999999"><img src="http://-----.jpg"></a>
<?php else : ?>
    <img src="http://-----.jpg">
<?php endif; ?>
</div>

電話番号(0399999999)は修正してください。

これで、PC以外のスマホやタブレットでは電話番号をタップすると電話できるようになります。