「新着情報」をスクロール表示で切り替える方法

はじめに

通知メッセージとは別に、独自のメッセージを表示する機能を追加します。

新着情報を3件切り替えながら、投稿日と投稿タイトルをスクロール表示させることで、最新の情報を目立たせることができます。

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

通知エリアのメッセージをスクロール表示する方法

「Cocoonの通知エリアを横スクロール表示する方法」を解説。通知メッセージをCSSで流れる文字として表示する方法や、Cocoon本体のタグを活用してCSSのみで実装する方法、縦方向に切り替えるニュースティッカーの作り方も分かりやすく紹介します。

chuya.s239.xrea.com

完成イメージ

本ページに完成イメージを反映させます。

実装手順

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

// テンプレート（ヘッダー）の後ろに追加
add_action('cocoon_part_after__tmp/header-container', function () {
  $args = array(
    'posts_per_page' => 3,
    'post_type'      => 'post',
  );

  // 新着記事を取得
  $posts = get_posts($args);
  if ($posts) {
    ob_start();
    ?>
    <div class="ticker">
      <div class="ticker__wrap wrap">
        <div class="ticker__title">新着</div>
        <ul class="ticker__list">
          <?php foreach ($posts as $post) : ?>
            <li class="ticker__item">
              <span class="ticker__date"><?= date('Y-m-d', strtotime($post->post_date)); ?></span>
              <a class="ticker__link" href="<?= get_permalink($post->ID); ?>"><?= esc_html($post->post_title); ?></a>
            </li>
          <?php endforeach; ?>
        </ul>
      </div>
    </div>
    <?php
    echo ob_get_clean();
  }
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .ticker {
    background-color: #333;
    font-size: 14px;
  }

  .ticker * {
    line-height: calc(1em + 20px);
  }

  .ticker__wrap {
    display: flex;
    position: relative;
  }

  .ticker__title {
    background-color: rgb(255 255 255 / 10%);
    color: #fff;
    flex-shrink: 0;
    padding: 0 10px;
    width: 50px;
  }

  .ticker__list {
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
  }

  .ticker__item {
    animation: listShow 24s linear infinite;
    line-height: 1;
    list-style: none;
    padding-left: 90px;
    position: absolute;
    visibility: hidden;
    width: 100%;
    z-index: 3;
  }

  @keyframes listShow {
    from {
      opacity: 1;
      visibility: visible;
    }
    33% {
      opacity: 1;
      visibility: visible;
    }
    34% {
      opacity: 0;
      visibility: hidden;
    }
    99% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .ticker__item:nth-of-type(2) {
    animation-delay: 8s;
    z-index: 2;
  }

  .ticker__item:nth-of-type(3) {
    animation-delay: 16s;
    z-index: 1;
  }

  .ticker__date {
    background-color: rgb(255 255 255 / 10%);
    color: orange;
    left: 0;
    position: absolute;
    width: 90px;
  }

  .ticker__link {
    animation: listScroll 24s linear infinite;
    color: #fff;
    display: block;
    overflow: hidden;
    padding: 0 10px;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: 0.5s;
    white-space: nowrap;
  }

  .ticker__item:nth-of-type(2) .ticker__link {
    animation-delay: 8s;
  }

  .ticker__item:nth-of-type(3) .ticker__link {
    animation-delay: 16s;
  }

  @keyframes listScroll {
    from {
      transform: translateX(100%);
    }
    4% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }
  <?php

  $handle = 'ticker';

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

さいごに

今回紹介した方法を使えば、新着情報を自動でスクロールしながら表示できるため、訪問者に最新の投稿を目立たせることができます。
カスタマイズ次第で表示件数やデザインを変更できるので、サイトのスタイルに合わせて調整してみてください。