a-little-log

WordPressのテーマ開発はPHPが中心ですが、フロント部分（ユーザーが見る部分）ではJavaScriptを使う場面も意外と多くあります。

特に「オブジェクト」や「配列」を扱う処理は、UIの実装やAPI連携でよく登場します。今回は、その代表例をいくつか紹介します。

1.DOMから配列を作る

ページ内の要素をまとめて処理したい場合は、配列に変換するのが基本です。
例えば、テーマのナビゲーションやサイドバーリンクをJSでまとめて配列化することがあります。

以下の例では、記事タイトルをまとめて目次を作ります。

<ul class="post-list">
  <li class="post-item" data-category="news"><h2>記事タイトル1</h2></li>
  <li class="post-item" data-category="event"><h2>記事タイトル2</h2></li>
  <li class="post-item" data-category="news"><h2>記事タイトル3</h2></li>
</ul>

<div class="toc"></div>

const headings = [...document.querySelectorAll(".post-item h2")];
const toc = document.querySelector(".toc");

const ul = document.createElement("ul");

headings.forEach((h2) => {
  const li = document.createElement("li");
  li.textContent = h2.textContent;
  ul.appendChild(li);
});

toc.appendChild(ul);

「NodeList → 配列」に変換するだけで、map や filter が使えるようになります。

Array.from() や スプレッド構文 [...] を使って、配列化するのが基本です。

const posts = [...document.querySelectorAll(".post-item")];

2.配列を使ったフィルタリング

カテゴリごとに記事を絞り込むUIやタブ切り替えでも、配列操作が役立ちます。

<button data-filter="all">すべて</button>
<button data-filter="news">ニュース</button>
<button data-filter="event">イベント</button>

• data-filter="news" のボタンを押すと「ニュースカテゴリ」だけ表示
• data-filter="all" なら全部表示

const buttons = document.querySelectorAll("button[data-filter]");
const posts = [...document.querySelectorAll(".post-item")];

buttons.forEach((btn) => {
  btn.addEventListener("click", () => {
    const filter = btn.dataset.filter;

    posts.forEach((post) => {
      const category = post.dataset.category;

      post.style.display = filter === "all" || category === filter ? "" : "none";
    });
  });
});

配列メソッド .map と .filter を組み合わせると、「絞り込み → 必要なデータだけ取り出し」がスッキリ書けます。

// 記事タイトル一覧を取得
const titles = posts.map((post) => post.textContent);

// "ニュース"カテゴリだけ抜き出す
const newsOnly = posts.filter((post) => post.dataset.category === "news");

3.PHPから渡されたオブジェクトを使う（wp_localize_script）

PHPで作ったデータをJavaScriptに渡すときは、オブジェクトとして受け取ります。WordPressとJSをつなぐ重要な方法です。

// functions.php
wp_enqueue_script('theme-js', get_template_directory_uri() . '/js/front.js', ['jquery'], null, true);
wp_localize_script('theme-js', 'themeData', [
  'ajaxUrl' => admin_url('admin-ajax.php'),
  'siteUrl' => home_url(),
]);

// front.js
console.log(themeData.siteUrl); // PHPから渡されたオブジェクト

4.スライダーの設定オブジェクト

SwiperやSlickといったスライダーは、設定をオブジェクトでまとめて渡すのが基本です。

オブジェクトで設定をまとめるパターンは、フロント実装で非常によく登場します。

const swiper = new Swiper(".swiper", {
  loop: true,
  slidesPerView: 3,
  autoplay: { delay: 3000 },
});

5.REST APIで記事を読み込む

WordPressは標準でREST APIを備えており、記事一覧をJSONで取得できます。

JSONはオブジェクトや配列の集合なので、JavaScriptでの処理が必要です。

fetch("/wp-json/wp/v2/posts?per_page=5&page=2")
  .then(res => res.json())
  .then(posts => {
    posts.forEach(post => {
      console.log(post.title.rendered); // 配列をループ
    });
  });

無限スクロールや「もっと読む」ボタンの実装でよく使われます。

まとめ

WordPressテーマのフロント開発では、次のような場面でオブジェクトや配列が登場します。

• DOM要素を配列化して活用
• 配列のfilter/mapを使ったUI切り替え
• PHPから渡されるオブジェクトを利用
• スライダーなどの設定オブジェクト
• REST APIで記事データを配列として取得

PHPがメインのWordPressですが、JavaScriptの基礎（特にオブジェクトや配列の扱い）を理解すると、テーマの表現力や操作性を大きく広げることができます。