WordPressで長い文章を折りたたむ方法｜続きを読むボタンの見本とコード

<div class="waza-readmore">
  <div class="waza-readmore-content">
    <p>WordPressでカスタマイズするときは、最初に作りたい表示を決めます。コードを追加する前に、標準ブロックやテーマの設定だけで作れないか確認してください。追加CSSで調整する場合も、変更前の内容を保存してから一つずつ試します。表示できたら、スマホの幅に切り替えて、文字の折り返しやボタンの押しやすさも確かめます。公開後に困らないよう、元へ戻すために削除する範囲も記録しておきましょう。</p>
    <p><a href="https://motoki-design.co.jp/wordpress/swell-customize-matome/">目的別のカスタマイズ一覧を見る</a></p>
  </div>
</div>

.waza-readmore > [hidden] { display: none !important; }
.waza-readmore > .waza-readmore-button {
  min-height: 44px;
  padding: .6em 1.2em;
  border: 1px solid #888;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font: inherit;
  cursor: pointer;
}
.waza-readmore > .waza-readmore-button:focus-visible {
  outline: 3px solid #245bba;
  outline-offset: 3px;
}

(function () {
  function initReadMore() {
    document.querySelectorAll('.waza-readmore').forEach(function (box, index) {
      if (box.dataset.wazaReady) return;
      const content = Array.from(box.children).find(function (el) {
        return el.classList.contains('waza-readmore-content');
      });
      if (!content) return;
      const text = Array.from(content.textContent.trim());
      const limit = 160;
      if (text.length <= limit) return;
      const preview = document.createElement('p');
      preview.className = 'waza-readmore-preview';
      preview.textContent = text.slice(0, limit).join('') + '…';
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'waza-readmore-button';
      button.textContent = '続きを読む';
      let id = 'waza-readmore-panel-' + index;
      while (document.getElementById(id)) id += '-x';
      if (!content.id) content.id = id;
      button.setAttribute('aria-controls', content.id);
      button.setAttribute('aria-expanded', 'false');
      content.before(preview);
      content.after(button);
      content.hidden = true;
      button.addEventListener('click', function () {
        const open = button.getAttribute('aria-expanded') === 'true';
        content.hidden = open;
        preview.hidden = !open;
        button.setAttribute('aria-expanded', String(!open));
        button.textContent = open ? '続きを読む' : '閉じる';
      });
      box.dataset.wazaReady = '1';
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initReadMore, { once: true });
  else initReadMore();
})();