Luxeritasのヘッダーに連絡先画像(問い合わせボタン)を表示する

Luxeritas(ルクセリタス)のヘッダー右上に連絡先画像を表示する手順を紹介します。会社のホームページにはお約束の電話番号の表示用に使ったり、問い合わせフォームにリンクする「問い合わせ」ボタンとして使ったり、いろいろ活用できるでしょう。

仕上がりイメージは次のようになります。

画面右上に連絡先が表示される
Luxeritasでヘッダー右上に連絡先を表示したい

ヘッダーのカスタマイズというとheader.phpの編集が必要なイメージですが、ここではPHPを使わずjQueryで簡単にやっつける方法を紹介します。

連絡先画像のアップロード

事前に電話番号や「問い合わせはこちら」のメッセージなどがレイアウトされた連絡先画像を準備しておいてください。ここでは準備済みの画像をアップロードするところから説明します。

連絡先画像のアップロード

「メディア」‐「新規追加」メニューから連絡先画像をアップロードします。

連絡先画像をアップロード
連絡先画像をアップロード

ここでは、次のような画像(幅480px、高さ70px)を作成してアップロードしました。

アップロードした連絡先画像
アップロードした連絡先画像

画像URLのコピー

後で使うので画像のURLをコピーします。それには、「メディア」‐「ライブラリ」メニューで画像の「編集」をクリックします。

画像の編集画面を開く
画像の編集画面を開く

画面右側の「ファイルのURL」からURLをコピーしてメモ帳などにペーストしておきます。

画像のURLをコピー
画像のURLをコピー

連絡先画像の表示

画像を表示するコードを入力します。方法はいくつかありますが、ここでは、Simple Custom CSS and JSプラグインを使います。

Simple Custom CSS and JSプラグインのインストール

「プラグイン」‐「新規追加」メニューからSimple Custom CSS and JSプラグインをインストール、有効化します。

Simple Custom CSS and JSプラグインのインストール
Simple Custom CSS and JSプラグインのインストール

連絡先画像を表示するコード(jQuery)の入力

「Custom CSS & JS」‐「Add Custom JS」メニューを開きます。紛らわしいメニューがあるので間違えないように注意してください。

「Add Custom JS」を開く
「Add Custom JS」を開く

任意のタイトルを入力します。ここでは「連絡先画像」としました。

JavaScriptのタイトルを入力
JavaScriptのタイトルを入力

本文のサンプルコードをすべて選択して削除します。

JavaScriptのサンプルを削除
JavaScriptのサンプルを削除

代わりに連絡先画像を表示するコードを入力します。

画像をクリックするパターンとしないパターンの2つのパターンを紹介します。

  1. 画像クリックで問い合わせフォームを開くパターン
  2. 画像表示のみでクリックしないパターン

画像クリックで問い合わせフォームを開く場合は次のコードになります。

jQuery(document).ready(function($){
$('#head-in #sitename').after('<div class="head-tel">'
 + '<a href="★リンク先URL★">'
 + '<img src="★画像URL★" alt="★代替テキスト★"></a></div>');
});

画像をクリックしない場合は次のコードになります。

jQuery(document).ready(function($){
$('#head-in #sitename').after('<div class="head-tel">'
 + '<img src="★画像URL★" alt="★代替テキスト★"></div>');
});

ペーストしたコードの次の部分を修正します。

連絡先画像コードの修正
  • ★リンク先URL★ --- リンク先URLに(例:http://example.com/contact.html)
  • ★画像URL★ --- 「メディア」‐「ライブラリ」からコピーした画像のURLに
  • ★代替テキスト★ --- 画像の説明(サイト名など)

編集後のイメージは次のようになります。

連絡先コードの編集後
連絡先コードの編集後

完了後、画面右上の「公開」ボタンをクリックすると設定完了です。

連絡先画像をヘッダー右上に表示

サイトを表示すると、ヘッダーに連絡先画像が表示されるはずです。

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

サイトロゴの下に表示されてしまうので、ヘッダー右上(ロゴの右)に表示されるようにスタイルを設定します。それには、次のようなコードを子テーマのstyle.cssまたは「外観」-「カスタマイズ」-「追加CSS」メニューなどに入力します。幅が広くなったタイミングで連絡先を画面右上に表示しています。

@media (min-width: 1001px) {
    .head-tel {
        float: right;
    }
}

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

画面右上に連絡先が表示される
画面右上に連絡先が表示される

これで完成です。以上、Luxeritas(ルクセリタス)のヘッダー右上に連絡先画像を表示する手順を紹介しました。参考にしてください。