WordPressで「もっと見る」ボタンをシンプルに実装する方法

• カスタムフィールドから取得した画像リストに「もっと見る」ボタンを追加

• 最初に6件表示、それ以降はボタンで6件ずつ表示

• jQueryや外部ライブラリ不要

• 複数のリストにも対応可能

• CSSアニメーションを加えて自然な表示切り替えも可能

まずは WordPress の get_post_meta() を使って、画像を読み込む基本構造です。

<?php
$post_id = 14;
$field_images = get_post_meta($post_id, 'custom-field', true);

if (!empty($field_images) && is_array($field_images)) :
?>
  <ul class="img-wrap" id="img-wrap">
  <?php foreach ($field_images as $i => $url) : ?>
    <li class="img-item" style="<?php echo $i >= 6 ? 'display:none;' : ''; ?>">
    <img src="<?php echo esc_url($url); ?>" loading="lazy" alt="画像">
    </li>
  <?php endforeach; ?>
  </ul>

  <?php if (count($field_images) > 6) : ?>
  <button id="load-more-btn">もっと読む</button>
  <?php endif; ?>
<?php endif; ?>

複数の画像リストやコンテンツブロックに対しても再利用できるように、関数化しています。

<script>
document.addEventListener('DOMContentLoaded', function () {
  function setupLoadMore(itemsSelector, buttonId, step = 6) {
  const items = document.querySelectorAll(itemsSelector);
  const button = document.getElementById(buttonId);
  let current = step;

  items.forEach((item, index) => {
    if (index >= step) item.style.display = 'none';
  });

  if (button) {
    button.addEventListener('click', function () {
    for (let i = current; i < current + step && i < items.length; i++) {
      items[i].style.display = 'list-item';
    }
    current += step;
    if (current >= items.length) {
      button.style.display = 'none';
    }
    });
  }
  }

  setupLoadMore('.img-item', 'load-more-btn');
  //setupLoadMore('.〇〇〇〇', '〇〇〇〇〇〇');　必要であれば追加
});
</script>

表示されたアイテムに違和感なくフェードインさせたい場合は、以下の CSS を追加してください。

.img-item {
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}

.img-item.fade-in {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.load-more-button {
  margin-top: 1em;
  padding: 0.5em 1em;
  font-size: 1rem;
  cursor: pointer;
}

• 「もっと見る」ボタンはUXを向上させる便利な要素

• 上記のコードで、追加プラグインなしで実装可能

• 複数リストや異なるセクションにも簡単に拡張可能

• CSSアニメーションで自然な動きも演出可能

この機能を応用したサイトがこちらになります。

鎌人いち場 | つながるひろがる！コミュニティーマーケット

https://kamandoichiba.com/