【Cocoonカスタマイズ】ヘッダーに電話番号と問い合わせリンクを追加する方法

はじめに

以下を実現します。

【Cocoon】ヘッダー右上に電話番号＋問い合わせボタンを設置するカスタマイズ方法｜かんた🌊SWELLマニア

SWELLマニアの、かんた（@swell_mania）です。 Web制作の仕事でWordPressテーマCocoonのヘッダーの右上に「電話番号」と、「問い合わせフォームページへのボタン」を設置するカスタマイズをしました。【デモページ】 ...

ヘッダーに電話番号や問い合わせ情報を追加することで、ユーザーが簡単に連絡できるようになり、サイトの利便性を向上させることができます。

この記事では、この方法について説明します。

完成イメージ

画面幅が768pxより大きいとき、電話番号のリンクを無効とします。

実装手順

以下の手順で実装します。

ラベル

Cocoon設定

表1に示す項目を設定します。

Cocoon設定

設定	大項目	項目	設定値
全体	全体設定	サイトアイコンフォント	Font Awesome 5
ヘッダー	ヘッダー設定	ヘッダーレイアウト	センターロゴ
ヘッダー	ヘッダー設定	キャッチフレーズの位置	表示しない
モバイル	モバイル設定	モバイルメニュー	フッターモバイルボタン
モバイル	モバイル設定	サイトヘッダーロゴを表示する	オフ

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

add_action('wp_header_logo_after_open', function () {
  // 連絡先用の電話番号を設定
  $tel = '99-9999-9999';

  // ハイフンを除去してtelスキーム用のURLに適合させる
  $href = str_replace('-', '', $tel);

  ob_start();
  ?>
  <div class="my-header">
    <div class="my-box">
      <!-- お問い合わせ案内 -->
      <div class="my-message">ご相談・ご質問はお気軽に</div>

      <!-- 電話番号の表示 -->
      <div class="my-phone">
        <a href="tel:<?= esc_attr($href); ?>">
          <i class="fas fa-phone-square-alt" aria-hidden="true"></i> <?= esc_html($tel); ?>
        </a>
      </div>

      <!-- 営業時間の表示 -->
      <div class="my-hour">営業時間 10:00～18:00 [祝日を除く平日]</div>
    </div>

    <!-- お問い合わせボタン -->
    <div class="btn-wrap">
      <a href="#"><i class="fas fa-envelope" aria-hidden="true"></i> お問い合わせ</a>
    </div>

    <!-- 資料請求ボタン -->
    <div class="btn-wrap">
      <a href="#"><i class="fas fa-book" aria-hidden="true"></i> 資料のご請求</a>
    </div>
  </div>
  <?php
  echo ob_get_clean();
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.header-in {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  &::after {
    content: none;
  }
}

.logo-text {
  padding: 10px 0;
}

.my-header {
  align-items: center;
  display: flex;
  gap: 10px;

  .btn-wrap {
    margin-bottom: 0;
  }

  .btn-wrap a {
    font-size: clamp(10px, 2vw, 16px);
    margin-bottom: 0;
  }
}

.my-box > div {
  font-size: 12px;
}

.my-phone {
  &,
  a {
    color: #333;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: bold;
    text-decoration: none;
  }
}

@media (min-width: 769px) {
  a[href*="tel:"] {
    pointer-events: none;
  }
}

応用：別に記述したHTMLを出力する方法

前述のコードでは、wp_header_logo_after_open()フック内に直接HTMLを記述しています。

しかし、この方法ではコードミスが発生した場合、ページ全体に影響し、表示が崩れたり真っ白になるといった致命的エラーを引き起こす可能性があります。

これを回避するために、外部に記述したHTMLを呼び出して出力する方法を2つ紹介します（表2参照）。

HTMLを出力する方法

方法	注意点
PHPで直接出力	PHPに不慣れな場合、コードミスを起こしやすく、致命的エラーで画面が真っ白になるリスクがある。
カスタムHTMLウィジェット	入力エリアが狭いため長文HTMLには不向き。 HTMLタグの記述ミスにより、表示崩れが発生しやすい。
パターンの呼び出し	Gutenbergのブロックエディター上で、ドラッグ＆ドロップによる安全な編集が可能で、構造を崩しにくい。

「カスタムHTML」ウィジェットにHTMLを記述する方法

ヘッダー専用のウィジェット領域を新しく追加し、そこに設定した内容をヘッダーに表示します。
「カスタムHTML」ウィジェットに、必要なHTMLを入力して配置します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// ウイジェットを追加
add_action('widgets_init', function () {
  register_sidebar([
    'name'          => 'ヘッダー領域追加コンテンツ',
    'id'            => 'add-header-contents',
    'description'   => 'ヘッダー領域に追加コンテンツを表示するウィジェットです。',
    'before_widget' => '<div class="add-header-contents">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ]);
});


// ヘッダーロゴ後に追加
add_action('wp_header_logo_after_open', function () {
  // 指定したウィジェットエリアにウィジェットが登録されている場合のみ出力
  if (is_active_sidebar('add-header-contents')) {
    dynamic_sidebar('add-header-contents');
  }
});

パターンにHTMLを記述する方法

パターン機能を使って、あらかじめ必要なHTMLを定義します。
定義したパターンをヘッダーに反映させます。

実装手順

以下のコードをfunctions.phpに追加します。

add_action('wp_header_logo_after_open', function () {
  echo do_shortcode('[pattern id="123"]');
});