トップメニューのときSWELL風のキャッチフレーズを表示する方法

はじめに

Cocoon設定→ヘッダー→ヘッダーレイアウト「トップメニュー」に設定をすると、キャッチフレーズは表示されません。

そこで、ヘッダーにSWELL風のキャッチフレーズとSNSフォローボタンを表示します。

「ヘッダー・ロゴ画像」のデザイン・レイアウト設定 | WordPressテーマ SWELL

このページではヘッダー周りとロゴ画像についてのデザインやレイアウトの設定方法を解説していきます。 カスタマイザーの起動 ヘッダー周りの設定はカスタマイザー内の「ヘッダー」というメニュー内で設定できます。 ヘッダーカラーの設定 「外観」&gt

swell-theme.com

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

完成イメージ

実装手順

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

// テンプレート（ヘッダー）の直前に追加
add_action('cocoon_part_before__tmp/header-container', function () {
  // ヘッダーレイアウト「トップメニュー」以外は処理対象外
  if (!is_header_layout_type_top()) {
    return;
  }

  // キャッチフレーズを取得
  ob_start();
  cocoon_template_part('tmp/header-tagline');
  $tagline = ob_get_clean();

  // SNSフォローボタンを取得
  ob_start();
  get_template_part_with_option('tmp/sns-follow-buttons', SF_MOBILE);
  $sns = ob_get_clean();

  ?>
  <div class="site-tagline">
    <div class="wrap">
      <?= $tagline; ?>
      <?= $sns; ?>
    </div>
  </div>
  <?php
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .site-tagline {
    background-color: #04384c;

    .wrap {
      align-items: center;
      display: flex;
    }

    .tagline {
      color: #fff;
      font-size: 12px;
      margin: 0;
    }

    .sns-follow {
      margin-left: auto;
    }

    .sns-follow-message {
      display: none;
    }

    .sns-follow-buttons {
      margin: 0;

      a {
        background-color: unset;
        font-size: 16px;
        height: unset;
        width: unset;
      }
    }
  }

  @media screen and (max-width: 1023px) {
    .site-tagline {
      display: none;
    }
  }
  <?php

  $handle = 'site-tagline';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});

さいごに

今回紹介した方法を使えば、「トップメニュー」でもSWELLのようにキャッチフレーズやSNSフォローボタンをヘッダーに表示させることができます。