スポンサーリンク

LightningにはBizVektorでおなじみの「画面右上の電話番号」がありません(バージョン: 3.0.2時点)が、電話番号を表示したいという要望が多いので、コードを紹介します。仕上がりイメージは次のようになります。

Lightningでロゴ画像の右側に電話番号を表示する

カスタマイズ前の状態は次のようになっています。ロゴとグローバルメニューが横並びなので、電話番号などは表示するスペースがありません。

Lightningの初期設定のヘッダー(連絡先が表示されない)

Lightningの拡張デザインスキン「Variety」では画面最上部に電話番号や「お問い合わせ」ボタンを表示することができます。こんなイメージです。

Lightning Varietyの電話番号・「お問い合わせ」ボタン

ここでは、冒頭のイメージのようにグローバルメニューをロゴの下に表示させて、ロゴの右側に連絡先や「お問い合わせはこちら」などの好きな画像を表示する仕組みを構築してみたいと思います。画像ではなくテキストベースの連絡先を表示する方法も紹介します。

ロゴの隣に電話番号の画像を表示する

まずは、次のコードを子テーマのfunctions.phpなどに入力します。

/* ロゴの横に表示するパーツ */
function my_lightning_header_logo_after() {
echo <<<EOM
<div class="logo-after">
<img src="http://★.jpg">
</div>
EOM;
}
add_action('lightning_header_logo_after', 'my_lightning_header_logo_after');


「http://★.jpg」を実際に表示したい画像に
置き換えてください。

functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。不安な方はWordPress個別サポートにご相談ください。作業をサポートします。

続いて、次のようなCSSを子テーマのstyle.cssまたは「VK ExUnit」‐「CSSカスタマイズ」メニューなどに入力します。

/* ロゴ右側のブロック */
.logo-after {
    display: block;
    width: 200px;
    float: right;
}

.logo-after img {
    max-height: 60px;
}

/* ヘッダー幅を100%に */
.navbar-header {
    width: 100%;
}

@media (max-width: 991px) {
    .logo-after {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
}

これで、ヘッダーのロゴ画像の隣に電話番号などの好きな画像を表示できるようになります。スマホでは次のようにロゴ画像の下に表示されます。

ロゴ画像の下に電話番号画像が表示される(モバイル端末)

画像ではなく文字で連絡先を表示する場合

連絡先画像を準備できないなどの理由で、画像ではなく連絡先情報をテキストで表示したい場合は、上記のPHPやCSSを次のコードに変更してください。

functions.phpに入力するコードは次のようになります。前述のコードを置き換えてください。5行目から7行目までのテキストは自由に変更できます。

/* ロゴの横に表示するパーツ */
function my_lightning_header_logo_after() {
echo <<<EOM
<div class="logo-after">
<div class="message" >気軽にご相談ください</div>
<div class="tel" >03-9999-9999</div>
<div class="time" >受付:10時~20時</div>
</div>
EOM;
}
add_action('lightning_header_logo_after', 'my_lightning_header_logo_after');

style.cssに入力するコードは次のようになります。必須ではありませんが、電話番号などのスタイルを設定しています。前述のコードに続けて入力してください。

/* 連絡先のスタイル */
.logo-after .message {
    font-size: 16px;
}

.logo-after .tel {
    color: red;
    font-size: 24px;
}

.logo-after .time {
    font-size: 12px;
    color: #666;
}

テキストベースの連絡先が表示されます。連絡先に限らず「お問い合わせはこちら」などの文章に変えても大丈夫だと思います。

テキストベースの連絡先が表示される

ここでは連絡先情報をテキストで表示しましたが、表示内容などはアイデア次第です。電話番号などを固定の文字ではなく「VK ExUnit」‐「お問い合わせ情報」メニューと連動させるなど、カスタマイズのアイデアはいろいろありますが、この記事はこのあたりで締めさせていただきます。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先
こちらもどうぞ(Lightning拡張プラグイン)
脱・初心者を目指すWordPress 189のヒント

関連記事

スポンサーリンク
銀座・スカイプ・出張・メールでWordPressの入門からカスタマイズ・トラブルまで対応しています。便利なマンツーマン対応・料金は安心の後払い方式です。気軽にご利用ください。