通知エリアのメッセージをメニュー設定から複数登録して縦スクロールする方法

はじめに

テーマ「Cocoon」には、サイト上部に重要な案内を表示できる便利な「通知エリア」機能が備わっています。
しかし、標準機能では1つのテキストと1つのリンクしか設定できず、複数の案内を表示することはできません。

そこで、WordPressのメニュー画面を活用し、複数の通知メッセージを登録して、Swiperによる滑らかな縦スクロールでループ再生させるカスタマイズを行います。

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

完成イメージ

実装手順

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

// メニュー位置を追加
add_action('init', function () {
  register_nav_menus([
    'notice-menu' => '通知エリア',
  ]);
});


// Cocoon設定（通知）の通知メッセージを変更
add_filter('get_notice_area_message', function ($msg) {
  $GLOBALS['notice_swiper_enabled'] = false;

  if (is_admin()) {
    return $msg;
  }

  // メニュー位置を取得
  $locations = get_nav_menu_locations();
  if (empty($locations['notice-menu'])) {
    return $msg;
  }

  // メニューに登録されているアイテムを取得
  $menu_items = wp_get_nav_menu_items($locations['notice-menu']);
  if (empty($menu_items)) {
    return $msg;
  }

  // 各メニューアイテムのHTML化処理
  $target_attr = is_notice_link_target_blank() ? ' target="_blank" rel="noopener"' : '';
  $items_html  = [];

  foreach ($menu_items as $item) {
    $url   = trim($item->url);
    $title = esc_html($item->title);

    if ($url !== '' && $url !== '#') {
      $items_html[] = '<a href="' . esc_url($url) . '"' . $target_attr . '>' . $title . '</a>';
    } else {
      $items_html[] = $title;
    }
  }

  $count = count($items_html);
  if ($count === 0) {
    return $msg;
  }

  // アイテム数に応じた出力切り替え
  if ($count === 1) {
    $msg = $items_html[0];
  } else {
    global $_IS_SWIPER_ENABLE;

    $_IS_SWIPER_ENABLE = true;
    $GLOBALS['notice_swiper_enabled'] = true;

    $slides_html = '';
    foreach ($items_html as $item_html) {
      $slides_html .= '<div class="swiper-slide">' . $item_html . '</div>';
    }

    $msg = '<div class="swiper swiper-vertical"><div class="swiper-wrapper">' . $slides_html . '</div></div>';
  }

  // Cocoon設定を無効化
  global $_THEME_OPTIONS;
  $_THEME_OPTIONS['notice_area_url'] = '';

  return $msg;
});


// テンプレート（カスタムJavaScript）の直後に追加
add_action('cocoon_part_after__tmp/footer-javascript', function () {
  if (empty($GLOBALS['notice_swiper_enabled'])) {
    return;
  }
  ?>
  <script>
  const noticeSwiper = new Swiper('.notice-area-message .swiper', {
    loop: true,
    direction: 'vertical',
    autoplay: {
      delay: 8000
    },
    speed: 2000
  });
  </script>

  <style>
  .notice-area {
    line-height: 1.8em;
  }

  .notice-area .swiper-wrapper {
    height: 1.8em;
    margin: 0;
  }
  </style>
  <?php
});

さいごに

今回紹介した方法を使えば、Cocoonの標準機能だけでは難しかった「複数メッセージの柔軟な切り替え」が、使い慣れたWordPressのメニュー画面からいつでも簡単に行えるようになります。
サイト訪問者の目を引きつつ、限られたスペースを有効活用して多くの情報を届けることができるため、お知らせやキャンペーン情報が多いサイトはぜひ試してみてください。