Web Design Leaves

fetch('http://example.com/wp-json/wp/v2/posts', {method: 'GET'})
.then(response => response.json()) // レスポンスを JSON として解析
.then(data => {
  console.log(data);  // 投稿のデータをコンソールに出力
});

// ボタン
const loadButton = document.getElementById("booklist-load-books");
// テキストエリア
const textarea = document.getElementById("booklist-listarea");

if (loadButton && textarea) {
  // ボタンにクリックイベントのリスナーを設定
  loadButton.addEventListener("click", () => {
    //  fetch() メソッドを使って HTTP リクエストを送信 （ example.com の部分は適宜変更します）
    fetch("http://example.com/wp-json/wp/v2/books")
      .then((response) => response.json())
      .then((books) => {
        textarea.value = ""; // 既存の内容をクリア
        // 配列のデータ books を forEach で処理
        books.forEach((book) => {
          // テキストエリアに各投稿のタイトルとパーマリンクを出力
          textarea.value += `${book.title.rendered}, ${book.link}\n`;
        });
      });
  });
}

add_action('admin_enqueue_scripts', 'booklist_admin_enqueue_scripts');
function booklist_admin_enqueue_scripts($hook) {
  $allowed_pages = ['book_page_book-list'];
  if (in_array($hook, $allowed_pages)) {
    wp_enqueue_script(
      'booklist-admin',
      plugin_dir_url(__FILE__) . '/booklist-admin.js',
      array('wp-api'),  // 依存関係を追加
      '1.0.0',
      true
    );
  }
}

const posts = new wp.api.collections.Posts();

posts.fetch().then(function (collection) {
  console.log(collection); // 投稿のデータをコンソールに出力
});

const loadButton = document.getElementById("booklist-load-books");
const textarea = document.getElementById("booklist-listarea");

if (loadButton && textarea) {
  loadButton.addEventListener("click", () => {
    // book 一覧を管理するための Backbone.Collection インスタンスを作成
    const allBooks = new wp.api.collections.Books();
    allBooks.fetch().then((books) => {
      textarea.value = "";
      books.forEach((book) => {
        textarea.value += `${book.title.rendered}, ${book.link}\n`;
      });
    });
  });
}

add_action('admin_enqueue_scripts', 'booklist_admin_enqueue_scripts');
function booklist_admin_enqueue_scripts($hook) {
  $allowed_pages = ['book_page_book-list'];
  if (in_array($hook, $allowed_pages)) {
    wp_enqueue_script(
      'booklist-admin',
      plugin_dir_url(__FILE__) . '/booklist-admin.js',
      array('wp-api-fetch'),  // 依存関係に wp-api-fetch を追加
      '1.0.0',
      true
    );
  }
}

% npx @wordpress/create-block@latest --variant=dynamic booklist-block 

% cd booklist-block
% npm start

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";
// @wordpress/data から useSelect をインポート
import { useSelect } from "@wordpress/data";

export default function Edit() {
  // core ストアから postType が book の投稿データを取得
  const books = useSelect(
    // select 関数で core ストアにアクセスして getEntityRecords セレクターで book の投稿データを取得
    (select) => select("core").getEntityRecords("postType", "book"),
    [],
  );

  // 取得したデータ（books）を map() でループして各投稿のタイトルにリンクを設定してレンダリング
  return (
    <div {...useBlockProps()}>
      {books &&
        books.map((book) => (
          <p>
            <a href={book.link}>{book.title.rendered}</a>
          </p>
        ))}
    </div>
  );
}

<?php
/**
* Plugin Name:       Booklist Block
* Description:       Example block scaffolded with Create Block tool.
* Version:           0.1.0
* Requires at least: 6.7
* Requires PHP:      7.4
* Author:            The WordPress Contributors
* License:           GPL-2.0-or-later
* License URI:       https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain:       booklist-block
*
* @package CreateBlock
*/

if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}

// 以下に変更
function create_block_booklist_block_block_init() {
  register_block_type( __DIR__ . '/build/booklist-block' );
}
add_action( 'init', 'create_block_booklist_block_block_init' );

// サブメニューページのHTMLを描画するコールバック関数
function booklist_render_book_list() {
?>
  <div class="wrap" id="booklist-admin">
    <h1>Actions</h1>
    <div>
      <button id="booklist-load-books">Load Books</button>
    </div>
    <h2>Books</h2>
    <div>
      <textarea id="booklist-listarea" cols="70" rows="20"></textarea>
    </div>
    <div>
      <button id="booklist-load-more" style="display:none;">Load More</button>
    </div>
  </div>
<?php
}

let currentPage = 1;  // 現在のページ（最初は1）

const loadButton = document.getElementById("booklist-load-books");
const loadMoreButton = document.getElementById("booklist-load-more");
const textarea = document.getElementById("booklist-listarea");
// 1ページあたりの取得件数
const perPage = 10;

function loadBooks(page = 1) {
  wp.apiFetch({
    // page と per_page のパラメータを追加
    path: `/wp/v2/books?_fields=id,title,link&page=${page}&per_page=${perPage}`,
    parse: false  // JSON を解析しない（レスポンスヘッダーを取得するために必要）
  })
  .then((response) => {
    // 総ページ数
    const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);

    return response.json().then((books) => {
      // 取得した投稿のデータがあれば
      if (books.length > 0) {
        const newLine = page === 1 ? "" : "\n"; // 改行文字
        textarea.value +=  newLine + books
          .map((book) => `${book.title.rendered} (${book.id}) ${book.link}`)
          .join("\n");
        // 「Load More」ボタンの表示判定（現在のページが最後のページ未満なら表示）
        loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
      } else {
        loadMoreButton.style.display = 'none';
      }
    });
  })
  .catch((error) => console.error("Failed to fetch books:", error));
}

// 最初に投稿を読み込む（Load Books ボタンがクリックされた時の動作）
loadButton.addEventListener("click", () => {
  textarea.value = '';  // 既存の投稿を消去
  currentPage = 1;  // ページをリセット
  loadBooks(currentPage);
});

// Load More ボタンがクリックされた時の動作
loadMoreButton.addEventListener("click", () => {
  currentPage++;  // 次のページ
  loadBooks(currentPage);
});

wp.apiFetch({
  path: "/wp/v2/posts?&per_page=10", // 投稿のエンドポイント
  parse: false
}).then((response) => {
  const totalPosts = response.headers.get("X-WP-Total");
  const totalPages = response.headers.get("X-WP-TotalPages");
  console.log("Total Posts:", totalPosts, "Total Pages:", totalPages);
});

// サブメニューページのHTMLを描画するコールバック関数
function booklist_render_book_list() {
?>
  <div class="wrap" id="booklist-admin">
    <h1>Actions</h1>
    <div>
      <label for="booklist-orderby">Order by:</label>
      <select id="booklist-orderby">
        <option value="date">Date</option>
        <option value="title">Title</option>
        <option value="modified">Last Modified</option>
        <option value="id">ID</option>
      </select>
      <label>
        <input type="radio" name="booklist-order" value="asc"> Ascending
      </label>
      <label>
        <input type="radio" name="booklist-order" value="desc" checked> Descending
      </label>
    </div>
    <div>
      <button id="booklist-load-books">Load Books</button>
    </div>
    <h2>Books</h2>
    <textarea id="booklist-listarea" cols="70" rows="20"></textarea>
    <div>
      <button id="booklist-load-more" style="display:none;">Load More</button>
    </div>
  </div>
<?php
}

let currentPage = 1;
const loadButton = document.getElementById("booklist-load-books");
const loadMoreButton = document.getElementById("booklist-load-more");
const textarea = document.getElementById("booklist-listarea");
const perPage = 10;
// orderby のセレクト要素（プルダウン）
const orderbySelect = document.getElementById("booklist-orderby");

function loadBooks(page = 1) {
  // orderby のセレクト要素で選択された値
  const orderby = orderbySelect.value;
  // order のラジオボタンで選択された値
  const order = document.querySelector('[name="booklist-order"]:checked').value;
  wp.apiFetch({
    // エンドポイントに orderby と order を追加
    path: `/wp/v2/books?_fields=id,title,link&page=${page}&per_page=${perPage}&orderby=${orderby}&order=${order}`,
    parse: false
  })
  .then((response) => {
    const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
    return response.json().then((books) => {
      if (books.length > 0) {
        const newLine = page === 1 ? "" : "\n";
        textarea.value +=  newLine + books
          .map((book) => `${book.title.rendered} (${book.id}) ${book.link}`)
          .join("\n");
        loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
      } else {
        loadMoreButton.style.display = 'none';
      }
    });
  })
  .catch((error) => console.error("Failed to fetch books:", error));
}

loadButton.addEventListener("click", () => {
  textarea.value = '';
  currentPage = 1;
  loadBooks(currentPage);
});

loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadBooks(currentPage);
});

import { addQueryArgs } from '@wordpress/url';
const newUrl = addQueryArgs(url, params);

const newUrl = wp.url.addQueryArgs(url, params);

 wp.apiFetch({
  path: `/wp/v2/books?_fields=id,title,link&page=${page}&per_page=${perPage}&orderby=${orderby}&order=${order}`,
  parse: false
})

 wp.apiFetch({
  // addQueryArgs() で明示的にクエリパラメータを追加
  path: wp.url.addQueryArgs("/wp/v2/books", {
    _fields: "id,title,link",
    page: page,
    per_page: perPage,
    orderby: orderby,
    order: order
  }),
  parse: false
})

let currentPage = 1;
const loadButton = document.getElementById("booklist-load-books");
const loadMoreButton = document.getElementById("booklist-load-more");
const textarea = document.getElementById("booklist-listarea");
const perPage = 10;
const orderbySelect = document.getElementById("booklist-orderby");

function loadBooks(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="booklist-order"]:checked').value;
  wp.apiFetch({
    // addQueryArgs() で明示的にクエリパラメータを追加
    path: wp.url.addQueryArgs("/wp/v2/books", {
      _fields: "id,title,link",
      page: page,
      per_page: perPage,
      orderby: orderby,
      order: order
    }),
    parse: false
  })
  .then((response) => {
    const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
    return response.json().then((books) => {
      if (books.length > 0) {
        const newLine = page === 1 ? "" : "\n";
        textarea.value +=  newLine + books
          .map((book) => `${book.title.rendered} (${book.id}) ${book.link}`)
          .join("\n");
        loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
      } else {
        loadMoreButton.style.display = 'none';
      }
    });
  })
  .catch((error) => console.error("Failed to fetch books:", error));
}

loadButton.addEventListener("click", () => {
  textarea.value = '';
  currentPage = 1;
  loadBooks(currentPage);
});

loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadBooks(currentPage);
});

let currentPage = 1;
const loadButton = document.getElementById("booklist-load-books");
const loadMoreButton = document.getElementById("booklist-load-more");
const textarea = document.getElementById("booklist-listarea");
const perPage = 5;
const orderbySelect = document.getElementById("booklist-orderby");

function loadBooks(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="booklist-order"]:checked').value;

  // クエリパラメータを作成
  const params = {
    _fields: "id,title,link",
    page: page,
    per_page: perPage,
    orderby: orderby,
    order: order
  };

  // URLSearchParams でクエリ文字列を作成
  const queryString = new URLSearchParams(params).toString();

  wp.apiFetch({
    // path にクエリ文字列を直接追加
    path: `/wp/v2/books?${queryString}`,
    parse: false
  })
  .then((response) => {
    const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
    return response.json().then((books) => {
      if (books.length > 0) {
        const newLine = page === 1 ? "" : "\n";
        textarea.value +=  newLine + books
          .map((book) => `${book.title.rendered} (${book.id}) ${book.link}`)
          .join("\n");
        loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
      } else {
        loadMoreButton.style.display = 'none';
      }
    });
  })
  .catch((error) => console.error("Failed to fetch books:", error));
}

loadButton.addEventListener("click", () => {
  textarea.value = '';
  currentPage = 1;
  loadBooks(currentPage);
});

loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadBooks(currentPage);
});

const sanitizeUrl = (url) => {
  try {
    const sanitizedUrl = new URL(url);
    if (sanitizedUrl.protocol === 'http:' || sanitizedUrl.protocol === 'https:') {
      return sanitizedUrl.href;
    }
  } catch (e) {
    console.warn("Invalid URL:", url);
  }
  return '';
};

const sanitizeHtml = (htmlRendered) => {
  if (!htmlRendered) return "";
  const elem = document.createElement("div");
  elem.innerHTML = htmlRendered;
  return elem.textContent || elem.innerText || "";
};

let currentPage = 1;
const loadButton = document.getElementById("fetch-posts-load-posts");
const loadMoreButton = document.getElementById("fetch-posts-load-more");
const postList = document.getElementById("fetch-posts-list");
const perPage = 5;
const orderbySelect = document.getElementById("fetch-posts-orderby");

function loadPosts(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="fetch-posts-order"]:checked').value;
  wp.apiFetch({
    path: wp.url.addQueryArgs("/wp/v2/posts", {
      // _links.wp:featuredmedia を追加
      _fields: "id,title,link, _links.wp:featuredmedia",  // または "id,title,link,_links.wp:featuredmedia,_embedded",
      page: page,
      per_page: perPage,
      orderby: orderby,
      order: order,
      _embed: 'wp:featuredmedia' // _embed に featuredmedia を指定
    }),
    parse: false
  })
  .then((response) => {
    const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
    return response.json().then((posts) => {
      console.log(posts);
      if (posts.length > 0) {
        const html = posts.map((post) => {
          const sanitizedLink = sanitizeUrl(post.link);
          const sanitizedTitle = sanitizeHtml(post.title?.rendered);
          // アイキャッチ画像の thumbnail サイズの URL を取得
          const featuredMedia = post._embedded?.["wp:featuredmedia"]?.[0]?.media_details?.sizes?.thumbnail?.source_url;
          // アイキャッチ画像の URL を取得できれば img 要素を作成し、取得できなければ空文字列を変数に代入
          const image = featuredMedia ? `<img src="${featuredMedia}" alt="${sanitizedTitle}" />` : '';
          // アイキャッチ画像を追加
          return `<li><a href="${sanitizedLink}">${sanitizedTitle} (ID: ${post.id}) ${image}</a></li>`;
        }).join("");
        postList.insertAdjacentHTML('beforeend', html);
        loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
      } else {
        loadMoreButton.style.display = 'none';
      }
    });
  })
  .catch((error) => console.error("Failed to fetch posts:", error));
}

loadButton.addEventListener("click", () => {
  postList.innerHTML = '';
  currentPage = 1;
  loadPosts(currentPage);
});

loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadPosts(currentPage);
});

<div class="fetch-post-wrapper">
  <div>
    <label for="fetch-posts-category">Category:</label>
    <select id="fetch-posts-category"></select>
  </div>
  <div style="margin-top:20px">
    <label for="fetch-posts-orderby">Order by:</label>
    <select id="fetch-posts-orderby">
      <option value="date">Date</option>
      <option value="title">Title</option>
      <option value="modified">Last Modified</option>
      <option value="id">ID</option>
    </select>
    <label>
      <input type="radio" name="fetch-posts-order" value="asc"> Ascending
    </label>
    <label>
      <input type="radio" name="fetch-posts-order" value="desc" checked> Descending
    </label>
  </div>
  <div style="margin-top:20px">
    <button id="fetch-posts-load-posts">Load Posts</button>
  </div>
  <ul id="fetch-posts-list"></ul>
  <div style="margin-top:20px">
    <button id="fetch-posts-load-more" style="display:none;">Load More</button>
  </div>
</div>

// カテゴリーを取得してセレクトボックスに追加する関数
function loadCategories() {
  wp.apiFetch({ path: "/wp/v2/categories?_fields=id,name" })
    .then((categories) => {
      categorySelect.innerHTML = '<option value="">All Categories</option>' +
        categories.map(cat => `<option value="${cat.id}">${sanitizeHtml(cat.name)}</option>`).join('');
    })
    .catch((error) => console.error("Failed to fetch categories:", error));
}

// 投稿を取得する関数
function loadPosts(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="fetch-posts-order"]:checked').value;
  // セレクトボックスで選択されたカテゴリーの値
  const category = categorySelect.value;

  // クエリパラメータを作成
  const query = {
    _fields: "id,title,link",
    page: page,
    per_page: perPage,
    orderby: orderby,
    order: order
  };
  // カテゴリーが選択されていれば、クエリパラメータに追加
  if (category) query.categories = category;

  // addQueryArgs() で path にクエリパラメータを追加
  wp.apiFetch({ path: wp.url.addQueryArgs("/wp/v2/posts", query), parse: false })
    .then((response) => {
      const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
      return response.json().then((posts) => {
        if (posts.length > 0) {
          const html = posts.map((post) => {
            const sanitizedLink = sanitizeUrl(post.link);
            const sanitizedTitle = sanitizeHtml(post.title.rendered);
            return `<li><a href="${sanitizedLink}">${sanitizedTitle} (ID: ${post.id})</a></li>`;
          }).join("");
          postList.insertAdjacentHTML('beforeend', html);
          loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
        } else {
          loadMoreButton.style.display = 'none';
        }
      });
    })
    .catch((error) => console.error("Failed to fetch posts:", error));
}

const sanitizeUrl = (url) => {
  try {
    const sanitizedUrl = new URL(url);
    if (sanitizedUrl.protocol === 'http:' || sanitizedUrl.protocol === 'https:') {
      return sanitizedUrl.href;
    }
  } catch (e) {
    console.warn("Invalid URL:", url);
  }
  return '';
};

const sanitizeHtml = (htmlRendered) => {
  if (!htmlRendered) return "";
  const elem = document.createElement("div");
  elem.innerHTML = htmlRendered;
  return elem.textContent || elem.innerText || "";
};

let currentPage = 1;
const loadButton = document.getElementById("fetch-posts-load-posts");
const loadMoreButton = document.getElementById("fetch-posts-load-more");
const postList = document.getElementById("fetch-posts-list");
const perPage = 5;
const orderbySelect = document.getElementById("fetch-posts-orderby");
// カテゴリーを選択するセレクトボックス
const categorySelect = document.getElementById("fetch-posts-category");

// カテゴリーを取得してセレクトボックスに追加する関数
function loadCategories() {
  wp.apiFetch({ path: "/wp/v2/categories?_fields=id,name" })
    .then((categories) => {
      categorySelect.innerHTML = '<option value="">All Categories</option>' +
        categories.map(cat => `<option value="${cat.id}">${sanitizeHtml(cat.name)}</option>`).join('');
    })
    .catch((error) => console.error("Failed to fetch categories:", error));
}

function loadPosts(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="fetch-posts-order"]:checked').value;
  // セレクトボックスで選択されたカテゴリーの値
  const category = categorySelect.value;

  // クエリパラメータを作成
  const query = {
    _fields: "id,title,link",
    page: page,
    per_page: perPage,
    orderby: orderby,
    order: order
  };
  // カテゴリーが選択されていれば、クエリパラメータに追加
  if (category) query.categories = category;

  // addQueryArgs() で path にクエリパラメータを追加
  wp.apiFetch({ path: wp.url.addQueryArgs("/wp/v2/posts", query), parse: false })
    .then((response) => {
      const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
      return response.json().then((posts) => {
        if (posts.length > 0) {
          const html = posts.map((post) => {
            const sanitizedLink = sanitizeUrl(post.link);
            const sanitizedTitle = sanitizeHtml(post.title.rendered);
            return `<li><a href="${sanitizedLink}">${sanitizedTitle} (ID: ${post.id})</a></li>`;
          }).join("");
          postList.insertAdjacentHTML('beforeend', html);
          loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
        } else {
          loadMoreButton.style.display = 'none';
        }
      });
    })
    .catch((error) => console.error("Failed to fetch posts:", error));
}

// 初期カテゴリーの取得（カテゴリーを取得してセレクトボックスに追加）
loadCategories();

loadButton.addEventListener("click", () => {
  postList.innerHTML = '';
  currentPage = 1;
  loadPosts(currentPage);
});

loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadPosts(currentPage);
});

<div class="fetch-post-wrapper">
  <div>
    <label for="fetch-posts-post-types">Post Type:</label>
    <select id="fetch-posts-post-types"></select>
  </div>
  <div style="margin-top:20px">
    <label for="fetch-posts-orderby">Order by:</label>
    <select id="fetch-posts-orderby">
      <option value="date">Date</option>
      <option value="title">Title</option>
      <option value="modified">Last Modified</option>
      <option value="id">ID</option>
    </select>
    <label>
      <input type="radio" name="fetch-posts-order" value="asc"> Ascending
    </label>
    <label>
      <input type="radio" name="fetch-posts-order" value="desc" checked> Descending
    </label>
  </div>

  <div style="margin-top:20px">
    <button id="fetch-posts-load-posts">Load Posts</button>
  </div>
  <ul id="fetch-posts-list"></ul>
  <div style="margin-top:20px">
    <button id="fetch-posts-load-more" style="display:none;">Load More</button>
  </div>
</div>

function loadPostTypes() {
  wp.apiFetch({ path: "/wp/v2/types" })
    .then((types) => {
      postTypeSelect.innerHTML = ""; // 初期化
      // types はオブジェクト
      Object.keys(types).forEach((type) => {
        // typeData は各投稿タイプのオブジェクト（詳細データ）
        const typeData = types[type];
        const option = document.createElement("option");
        option.value = typeData.rest_base; // REST API route の base URL
        option.textContent = typeData.name;
        postTypeSelect.appendChild(option);
      });
    })
    .catch((error) => console.error("Failed to fetch post types:", error));
}

{
  "post": {
    "name": "Posts",
    "slug": "post",
    "rest_base": "posts",
    ・・・
  },
  "page": {
    "name": "Pages",
    "slug": "page",
    "rest_base": "pages",
    ・・・
  },
  "attachment": {
    "name": "Media",
    "slug": "attachment",
    "rest_base": "media",
    ・・・
  },
  "wp_navigation": {
    "name": "Navigation Menus",
    "slug": "wp_navigation",
    "rest_base": "navigation",
    ・・・
  }
}

const sanitizeUrl = (url) => {
  try {
    const sanitizedUrl = new URL(url);
    if (sanitizedUrl.protocol === 'http:' || sanitizedUrl.protocol === 'https:') {
      return sanitizedUrl.href;
    }
  } catch (e) {
    console.warn("Invalid URL:", url);
  }
  return '';
};

const sanitizeHtml = (htmlRendered) => {
  if (!htmlRendered) return "";
  const elem = document.createElement("div");
  elem.innerHTML = htmlRendered;
  return elem.textContent || elem.innerText || "";
};

let currentPage = 1;
const loadButton = document.getElementById("fetch-posts-load-posts");
const loadMoreButton = document.getElementById("fetch-posts-load-more");
const postList = document.getElementById("fetch-posts-list");
const perPage = 5;
const orderbySelect = document.getElementById("fetch-posts-orderby");
// 投稿タイプを選択するセレクトボックス
const postTypeSelect = document.getElementById("fetch-posts-post-types");

function loadPostTypes() {
  wp.apiFetch({ path: "/wp/v2/types" })
    .then((types) => {
      postTypeSelect.innerHTML = ""; // 初期化
      // types はオブジェクト
      Object.keys(types).forEach((type) => {
        // typeData は各投稿タイプのオブジェクト
        const typeData = types[type];
        const option = document.createElement("option");
        option.value = typeData.rest_base; // REST API route の base URL
        option.textContent = typeData.name;
        postTypeSelect.appendChild(option);
      });
    })
    .catch((error) => console.error("Failed to fetch post types:", error));
}

function loadPosts(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="fetch-posts-order"]:checked').value;

  wp.apiFetch({
    path: wp.url.addQueryArgs(`/wp/v2/${postTypeSelect.value}`, {
      _fields: "id,title,link",
      page: page,
      per_page: perPage,
      orderby: orderby,
      order: order,
    }),
    parse: false,
  })
    .then((response) => {
      const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
      return response.json().then((posts) => {
        if (posts.length > 0) {
          const html = posts.map((post) => {
            const sanitizedLink = sanitizeUrl(post.link);
            const sanitizedTitle = sanitizeHtml(post.title.rendered);
            return `<li><a href="${sanitizedLink}">${sanitizedTitle} (ID: ${post.id})</a></li>`;
          }).join("");
            postList.insertAdjacentHTML('beforeend', html);
          loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
        } else {
          loadMoreButton.style.display = 'none';
        }
      });
    })
    .catch((error) => console.error("Failed to fetch posts:", error));
}

// ページロード時に投稿タイプを取得
document.addEventListener("DOMContentLoaded", loadPostTypes);

loadButton.addEventListener("click", () => {
  postList.innerHTML = '';
  currentPage = 1;
  loadPosts(currentPage);
});

loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadPosts(currentPage);
});

function loadPostTypes() {
  // context に edit を指定
  wp.apiFetch({ path: "/wp/v2/types?context=edit" })
    .then((types) => {
      postTypeSelect.innerHTML = ""; // 初期化

      Object.keys(types).forEach((type) => {
        const typeData = types[type];
        // フィルター条件:
        // 1. viewable が true であること
        // 2. capabilities.edit_posts が true であること（省略可能）
        if (typeData.viewable && typeData.capabilities?.edit_posts) {
          const option = document.createElement("option");
          option.value = typeData.rest_base; // REST API route の base URL
          option.textContent = typeData.name;
          postTypeSelect.appendChild(option);
        }
      });
    })
    .catch((error) => console.error("Failed to fetch post types:", error));
}

const sanitizeUrl = (url) => {
  try {
    const sanitizedUrl = new URL(url);
    if (sanitizedUrl.protocol === 'http:' || sanitizedUrl.protocol === 'https:') {
      return sanitizedUrl.href;
    }
  } catch (e) {
    console.warn("Invalid URL:", url);
  }
  return '';
};

const sanitizeHtml = (htmlRendered) => {
  if (!htmlRendered) return "";
  const elem = document.createElement("div");
  elem.innerHTML = htmlRendered;
  return elem.textContent || elem.innerText || "";
};

let currentPage = 1;
const loadButton = document.getElementById("fetch-posts-load-posts");
const loadMoreButton = document.getElementById("fetch-posts-load-more");
const postList = document.getElementById("fetch-posts-list");
const perPage = 5;
const orderbySelect = document.getElementById("fetch-posts-orderby");
// 投稿タイプを選択するセレクトボックス
const postTypeSelect = document.getElementById("fetch-posts-post-types");

function loadPostTypes() {
  // context に edit を指定
  wp.apiFetch({ path: "/wp/v2/types?context=edit" })
    .then((types) => {
      postTypeSelect.innerHTML = ""; // 初期化

      Object.keys(types).forEach((type) => {
        const typeData = types[type];
        // フィルター条件:
        // 1. viewable が true であること
        // 2. capabilities.edit_posts が true であること
        if (typeData.viewable && typeData.capabilities?.edit_posts) {
          const option = document.createElement("option");
          option.value = typeData.rest_base; // REST API route の base URL
          option.textContent = typeData.name;
          postTypeSelect.appendChild(option);
        }
      });
    })
    .catch((error) => console.error("Failed to fetch post types:", error));
}

function loadPosts(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="fetch-posts-order"]:checked').value;

  wp.apiFetch({
    path: wp.url.addQueryArgs(`/wp/v2/${postTypeSelect.value}`, {
      _fields: "id,title,link",
      page: page,
      per_page: perPage,
      orderby: orderby,
      order: order,
    }),
    parse: false,
  })
    .then((response) => {
      const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
      return response.json().then((posts) => {
        if (posts.length > 0) {
          const html = posts.map((post) => {
            const sanitizedLink = sanitizeUrl(post.link); // URL をサニタイズ
            const sanitizedTitle = sanitizeHtml(post.title.rendered); // タイトルをサニタイズ
            return `<li><a href="${sanitizedLink}">${sanitizedTitle} (ID: ${post.id})</a></li>`;
          }).join("");
            postList.insertAdjacentHTML('beforeend', html);
          loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
        } else {
          loadMoreButton.style.display = 'none';
        }
      });
    })
    .catch((error) => console.error("Failed to fetch posts:", error));
}

// ページロード時に投稿タイプを取得
document.addEventListener("DOMContentLoaded", loadPostTypes);

loadButton.addEventListener("click", () => {
  postList.innerHTML = '';
  currentPage = 1;
  loadPosts(currentPage);
});

loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadPosts(currentPage);
});

function loadPostTypes() {
  wp.apiFetch({ path: "/wp/v2/types" })
    .then((types) => {
      postTypeSelect.innerHTML = ""; // 初期化
      Object.keys(types).forEach((type) => {
        // 除外する投稿タイプのリスト
        const excludedTypes = [
          "attachment",  // メディア
          "nav_menu_item", // ナビゲーションメニューの項目
          "wp_block", // パターン
          "wp_font_face", // フォントフェイス
          "wp_font_family", // フォントファミリー
          "wp_global_styles", // グローバルスタイル
          "wp_navigation", // ナビゲーションメニュー
          "wp_template", // テンプレート
          "wp_template_part",  // テンプレートパーツ
        ];

        // 除外リストにない投稿タイプのみ表示（option に設定）
        if (!excludedTypes.includes(type)) {
          const option = document.createElement("option");
          const typeData = types[type];
          option.value = typeData.rest_base;
          option.textContent = typeData.name;
          postTypeSelect.appendChild(option);
        }
      });
    })
    .catch((error) => console.error("Failed to fetch post types:", error));
}

const sanitizeUrl = (url) => {
  try {
    const sanitizedUrl = new URL(url);
    if (sanitizedUrl.protocol === 'http:' || sanitizedUrl.protocol === 'https:') {
      return sanitizedUrl.href;
    }
  } catch (e) {
    console.warn("Invalid URL:", url);
  }
  return '';
};

const sanitizeHtml = (htmlRendered) => {
  if (!htmlRendered) return "";
  const elem = document.createElement("div");
  elem.innerHTML = htmlRendered;
  return elem.textContent || elem.innerText || "";
};

let currentPage = 1;
const loadButton = document.getElementById("fetch-posts-load-posts");
const loadMoreButton = document.getElementById("fetch-posts-load-more");
const postList = document.getElementById("fetch-posts-list");
const perPage = 5;
const orderbySelect = document.getElementById("fetch-posts-orderby");
const postTypeSelect = document.getElementById("fetch-posts-post-types");

function loadPostTypes() {
  wp.apiFetch({ path: "/wp/v2/types" })
    .then((types) => {
      postTypeSelect.innerHTML = ""; // 初期化
      Object.keys(types).forEach((type) => {
        // 除外する投稿タイプのリスト
        const excludedTypes = [
          "attachment",  // メディア
          "nav_menu_item", // ナビゲーションメニューの項目
          "wp_block", // パターン
          "wp_font_face", // フォントフェイス
          "wp_font_family", // フォントファミリー
          "wp_global_styles", // グローバルスタイル
          "wp_navigation", // ナビゲーションメニュー
          "wp_template", // テンプレート
          "wp_template_part",  // テンプレートパーツ
        ];

        // 除外リストにない投稿タイプのみ表示
        if (!excludedTypes.includes(type)) {
          const option = document.createElement("option");
          const typeData = types[type];
          option.value = typeData.rest_base;
          option.textContent = typeData.name;
          postTypeSelect.appendChild(option);
        }
      });
    })
    .catch((error) => console.error("Failed to fetch post types:", error));
}

function loadPosts(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="fetch-posts-order"]:checked').value;

  wp.apiFetch({
    path: wp.url.addQueryArgs(`/wp/v2/${postTypeSelect.value}`, {
      _fields: "id,title,link",
      page: page,
      per_page: perPage,
      orderby: orderby,
      order: order,
    }),
    parse: false,
  })
    .then((response) => {
      const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
      return response.json().then((posts) => {
        if (posts.length > 0) {
          const html = posts.map((post) => {
            const sanitizedLink = sanitizeUrl(post.link);
            const sanitizedTitle = sanitizeHtml(post.title.rendered);
            return `<li><a href="${sanitizedLink}">${sanitizedTitle} (ID: ${post.id})</a></li>`;
          }).join("");
            postList.insertAdjacentHTML('beforeend', html);
          loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
        } else {
          loadMoreButton.style.display = 'none';
        }
      });
    })
    .catch((error) => console.error("Failed to fetch posts:", error));
}

// ページロード時に投稿タイプを取得
document.addEventListener("DOMContentLoaded", loadPostTypes);

loadButton.addEventListener("click", () => {
  postList.innerHTML = '';
  currentPage = 1;
  loadPosts(currentPage);
});

loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadPosts(currentPage);
});

(() => {
  // ここにスクリプトを記述
})();

(() => {

  const sanitizeUrl = (url) => {
    try {
      const sanitizedUrl = new URL(url);
      if (sanitizedUrl.protocol === 'http:' || sanitizedUrl.protocol === 'https:') {
        return sanitizedUrl.href;
      }
    } catch (e) {
      console.warn("Invalid URL:", url);
    }
    return '';
  };

  const sanitizeHtml = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  let currentPage = 1;
  const loadButton = document.getElementById("fetch-posts-load-posts");
  const loadMoreButton = document.getElementById("fetch-posts-load-more");
  const postList = document.getElementById("fetch-posts-list");
  const perPage = 5;
  const orderbySelect = document.getElementById("fetch-posts-orderby");
  const postTypeSelect = document.getElementById("fetch-posts-post-types");

  function loadPostTypes() {
    wp.apiFetch({ path: "/wp/v2/types" })
      .then((types) => {
        postTypeSelect.innerHTML = ""; // 初期化
        Object.keys(types).forEach((type) => {
          // 除外する投稿タイプのリスト
          const excludedTypes = [
            "attachment",  // メディア
            "nav_menu_item", // ナビゲーションメニューの項目
            "wp_block", // パターン
            "wp_font_face", // フォントフェイス
            "wp_font_family", // フォントファミリー
            "wp_global_styles", // グローバルスタイル
            "wp_navigation", // ナビゲーションメニュー
            "wp_template", // テンプレート
            "wp_template_part",  // テンプレートパーツ
          ];

          // 除外リストにない投稿タイプのみ表示
          if (!excludedTypes.includes(type)) {
            const option = document.createElement("option");
            const typeData = types[type];
            option.value = typeData.rest_base;
            option.textContent = typeData.name;
            postTypeSelect.appendChild(option);
          }
        });
      })
      .catch((error) => console.error("Failed to fetch post types:", error));
  }

  function loadPosts(page = 1) {
    const orderby = orderbySelect.value;
    const order = document.querySelector('[name="fetch-posts-order"]:checked').value;

    wp.apiFetch({
      path: wp.url.addQueryArgs(`/wp/v2/${postTypeSelect.value}`, {
        _fields: "id,title,link",
        page: page,
        per_page: perPage,
        orderby: orderby,
        order: order,
      }),
      parse: false,
    })
      .then((response) => {
        const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
        return response.json().then((posts) => {
          if (posts.length > 0) {
            const html = posts.map((post) => {
              const sanitizedLink = sanitizeUrl(post.link);
              const sanitizedTitle = sanitizeHtml(post.title.rendered);
              return `<li><a href="${sanitizedLink}">${sanitizedTitle} (ID: ${post.id})</a></li>`;
            }).join("");
              postList.insertAdjacentHTML('beforeend', html);
            loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
          } else {
            loadMoreButton.style.display = 'none';
          }
        });
      })
      .catch((error) => console.error("Failed to fetch posts:", error));
  }

  // ページロード時に投稿タイプを取得
  document.addEventListener("DOMContentLoaded", loadPostTypes);

  loadButton.addEventListener("click", () => {
    postList.innerHTML = '';
    currentPage = 1;
    loadPosts(currentPage);
  });

  loadMoreButton.addEventListener("click", () => {
    currentPage++;
    loadPosts(currentPage);
  });

})();

function my_rest_filter_by_meta_location($args, $request) {
  if (isset($request['meta']['location'])) {
    $args['meta_query'][] = array(
      'key'     => 'location',
      'value'   => sanitize_text_field($request['meta']['location']),
      'compare' => 'LIKE', // 部分一致（完全一致なら '=' に変更）
    );
  }
  return $args;
}
add_filter('rest_post_query', 'my_rest_filter_by_meta_location', 10, 2);

add_action('rest_api_init', function () {
  register_rest_field(
    'post', // 対象の投稿タイプ（ここでは通常の投稿）
    'location', // 追加するフィールド名
    array(
      'get_callback'    => 'my_get_location',  // 値を取得する関数
      'update_callback' => 'my_update_location', // 値を更新する関数
      'schema'          => array( // フィールドのデータ仕様（スキーマ）
        'description' => '投稿のロケーション情報', // フィールドの説明
        'type'        => 'string', // 文字列データ
        'context'     => array('view', 'edit'), // view（閲覧時）と edit（編集時）に利用可能
      ),
    )
  );
});

// カスタムフィールドの値を取得する関数
function my_get_location($object, $field_name) {
  return get_post_meta($object['id'], $field_name, true);
}

// カスタムフィールドの値を更新する関数
function my_update_location($value, $object, $field_name) {
  return update_post_meta($object->ID, $field_name, sanitize_text_field($value));
}

{
  "title": "New Post Title 2",
  "content": "New Post Content 2",
  "status": "publish",
  "location": "Kyoto"
}

add_filter('rest_post_query', function ($args, $request) {
  if (isset($request['location'])) {
    $args['meta_query'][] = array(
      'key'     => 'location',
      'value'   => sanitize_text_field($request['location']),
      'compare' => 'LIKE', // 部分一致（完全一致なら '=' に変更）
    );
  }
  return $args;
}, 10, 2);

// isbn の値を検証する関数
function booklist_validate_isbn($isbn) {
  // ハイフンを削除
  $isbn = str_replace('-', '', $isbn);
  // 10桁または13桁の数字であれば true を返す
  return preg_match('/^\d{10}(\d{3})?$/', $isbn);
}

// update_callback
function booklist_rest_update_isbn($value, $object, $field_name) {
  if (!booklist_validate_isbn($value)) {
    // 値が正しくなければ、エラーにする
    return new WP_Error('invalid_isbn', __('Invalid ISBN format.', 'booklist'), array('status' => 400));
  }
  return update_post_meta($object->ID, $field_name, sanitize_text_field($value));
}

return new WP_Error(
  'invalid_isbn',  // エラーコード
  __('Invalid ISBN format.', 'booklist'),  // ユーザー向けのメッセージ（この例では翻訳関数を適用）
  array('status' => 400)  // HTTP ステータスコード
);

<div><!-- 追加 -->
  <label for="booklist-isbn">ISBN</label><br>
  <input type="text" id="booklist-isbn" placeholder="ISBN">
</div>

// 投稿を取得する関数
function loadBooks(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="booklist-order"]:checked').value;
  // ISBN 入力欄の値
  const isbn = document.getElementById("booklist-isbn").value.trim();

  // クエリパラメータを別途定義
  const query = {
    _fields: "id,title,link,isbn",  // isbn を追加
    page: page,
    per_page: perPage,
    orderby: orderby,
    order: order,
  };
  // isbn が入力されていれば、クエリパラメータに追加
  if (isbn) query.isbn = isbn;

  // addQueryArgs() で path にクエリパラメータを追加
  wp.apiFetch({
    path: wp.url.addQueryArgs("/wp/v2/books", query),
    parse: false,
  })
    .then((response) => {
      const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
      return response.json().then((books) => {
        if (books.length > 0) {
          const newLine = page === 1 ? "" : "\n";
          textarea.value +=  newLine + books
            .map((book) => {
              // isbn が取得できれば (ISBN: 123456789-0) のような形式で出力
              const isbn = book.isbn ? ` (ISBN: ${book.isbn}) `: "";
              return `${book.title.rendered} (${book.id}) ${book.link} ${isbn}`}
            ).join("\n");
          loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
        } else {
          loadMoreButton.style.display = 'none';
        }
      });
    })
    .catch((error) => console.error("Failed to fetch books:", error));
}

<?php

/**
 * Plugin Name: Booklist
 * Description: A plugin to manage books
 * Version: 0.0.1
 *
 */

if (! defined('ABSPATH')) {
  exit; // Exit if accessed directly.
}

// カスタム投稿タイプ book の登録
add_action('init', 'booklist_register_book_post_type');
function booklist_register_book_post_type() {
  $args = array(
    'labels'       => array(
      'name'          => 'Books',
      'singular_name' => 'Book',
      'menu_name'     => 'Books',
      'add_new'       => 'Add New Book',
      'add_new_item'  => 'Add New Book',
      'new_item'      => 'New Book',
      'edit_item'     => 'Edit Book',
      'view_item'     => 'View Book',
      'all_items'     => 'All Books',
    ),
    'public'       => true,
    'has_archive'  => true,
    'menu_icon' => 'dashicons-book',
    // REST API に公開する
    'show_in_rest' => true,
    // REST API route の base URL を book から books に変更
    'rest_base'    => 'books',
    // カスタムフィールドをサポート
    'supports'     => array('title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields'),
  );

  register_post_type('book', $args);
}

// book エンドポイントのトップレベルのフィールドにスタムフィールド isbn を追加
add_action('rest_api_init', 'booklist_add_rest_fields');
function booklist_add_rest_fields() {
  register_rest_field(
    'book',
    'isbn',
    array(
      'get_callback'    => 'booklist_rest_get_isbn',
      'update_callback' => 'booklist_rest_update_isbn',
      'schema'          => array(
        'description' => __('The ISBN of the book'), // フィールドの説明
        'type'        => 'string', // 文字列データ
        'context'     => array('view', 'edit'), // view（閲覧時）と edit（編集時）に利用可能
      ),
    )
  );
}
// get_callback
function booklist_rest_get_isbn($object, $field_name) {
  return get_post_meta($object['id'], $field_name, true);
}
// isbn の値を検証する関数
function booklist_validate_isbn($isbn) {
  // ハイフンを削除
  $isbn = str_replace('-', '', $isbn);
  // 10桁または13桁の数字であれば true を返す
  return preg_match('/^\d{10}(\d{3})?$/', $isbn);
}
// update_callback
function booklist_rest_update_isbn($value, $object, $field_name) {
  if (!booklist_validate_isbn($value)) {
    // 値が正しくなければ、エラーにする
    return new WP_Error(
      'invalid_isbn',
      __('Invalid ISBN format.', 'booklist'),
      array('status' => 400)
    );
  }
  return update_post_meta($object->ID, $field_name, sanitize_text_field($value));
}

// GET クエリで検索可能に
add_filter('rest_book_query', function ($args, $request) {
  if (isset($request['isbn'])) {
    $args['meta_query'][] = array(
      'key'     => 'isbn',
      'value'   => sanitize_text_field($request['isbn']),
      'compare' => '=', // 完全一致
    );
  }
  return $args;
}, 10, 2);

// サブメニューページを追加
add_action('admin_menu', 'booklist_add_submenu', 11);
function booklist_add_submenu() {
  add_submenu_page(
    'edit.php?post_type=book', // 親メニューのスラッグ
    'Book List', // サブメニューページのタイトル
    'Book List', // サブメニューページのメニューのタイトル
    'edit_posts', // サブメニューページにアクセスできるユーザーの権限
    'book-list', // サブメニューページを参照するスラッグ
    'booklist_render_book_list' // サブメニューページを描画するコールバック関数
  );
}

// サブメニューページのHTMLを描画するコールバック関数
function booklist_render_book_list() {
?>
  <div class="wrap" id="booklist-admin">
    <h1>Actions</h1>
    <div style="margin-top:20px">
      <label for="booklist-orderby">Order by:</label>
      <select id="booklist-orderby">
        <option value="date">Date</option>
        <option value="title">Title</option>
        <option value="modified">Last Modified</option>
        <option value="id">ID</option>
      </select>
      <label>
        <input type="radio" name="booklist-order" value="asc"> Ascending
      </label>
      <label>
        <input type="radio" name="booklist-order" value="desc" checked> Descending
      </label>
    </div>
    <div style="margin-top:20px"><!-- 追加 -->
      <label for="booklist-isbn">ISBN</label><br>
      <input type="text" id="booklist-isbn" placeholder="ISBN">
    </div>
    <div style="margin-top:20px">
      <button id="booklist-load-books">Load Books</button>
    </div>
    <h2>Books</h2>
    <textarea id="booklist-listarea" cols="90" rows="20"></textarea>
    <div>
      <button id="booklist-load-more" style="display:none;">Load More</button>
    </div>
    <div style="width:50%; margin-top:300px">
      <h2>Add Book</h2>
      <div>
        <label for="booklist-book-title">Book Title</label><br>
        <input type="text" id="booklist-book-title" placeholder="Title">
      </div>
      <div>
        <label for="booklist-book-content">Book Content</label><br>
        <textarea id="booklist-book-content" cols="70" rows="10"></textarea>
      </div>
      <div><!-- 追加 -->
        <label for="booklist-book-isbn">ISBN</label><br>
        <input type="text" id="booklist-book-isbn" placeholder="ISBN">
      </div>
      <div style="margin-top:20px">
        <button id="booklist-submit-book">Add</button>
      </div>
    </div>
    <div style="width:50%;">
      <h2>Update Book</h2>
      <div>
        <label for="booklist-update-book-id">Book ID</label><br>
        <input type="text" id="booklist-update-book-id" placeholder="ID">
      </div>
      <div>
        <label for="booklist-update-book-title">Book Title</label><br>
        <input type="text" id="booklist-update-book-title" placeholder="Title">
      </div>
      <div>
        <label for="booklist-update-book-content">Book Content</label><br>
        <textarea id="booklist-update-book-content" cols="70" rows="10"></textarea>
      </div>
      <div><!-- 追加 -->
        <label for="booklist-update-book-isbn">ISBN</label><br>
        <input type="text" id="booklist-update-book-isbn" placeholder="ISBN">
      </div>
      <div style="margin-top:20px">
        <button id="booklist-update-book">Update</button>
      </div>
    </div>
    <div style="width:50%;">
      <h2>Delete Book</h2>
      <div>
        <label for="booklist-delete-book-id">Book ID</label><br>
        <input type="text" id="booklist-delete-book-id" placeholder="ID">
      </div>
      <div>
        <input type="checkbox" id="booklist-delete-force">
        <label for="booklist-delete-force">Force Delete</label>
      </div>
      <div>
        <button id="booklist-delete-book">Delete</button>
      </div>
    </div>
  </div>
<?php
}

// サブメニューページに JavaScript ファイル（booklist-admin.js）を読み込む
add_action('admin_enqueue_scripts', 'booklist_admin_enqueue_scripts');
function booklist_admin_enqueue_scripts($hook) {
  $allowed_pages = ['book_page_book-list'];
  if (in_array($hook, $allowed_pages)) {
    wp_enqueue_script(
      'booklist-admin',
      plugin_dir_url(__FILE__) . '/booklist-admin.js',
      array('wp-api-fetch'),
      '1.0.0',
      true
    );
  }
}

// 投稿を取得してリスト表示する処理
let currentPage = 1;
const loadButton = document.getElementById("booklist-load-books");
const loadMoreButton = document.getElementById("booklist-load-more");
const textarea = document.getElementById("booklist-listarea");
const perPage = 10;
const orderbySelect = document.getElementById("booklist-orderby");

// 投稿を取得する関数
function loadBooks(page = 1) {
  const orderby = orderbySelect.value;
  const order = document.querySelector('[name="booklist-order"]:checked').value;
  // ISBN 入力欄の値
  const isbn = document.getElementById("booklist-isbn").value.trim();

  // クエリパラメータを別途定義
  const query = {
    _fields: "id,title,link,isbn",  // isbn を追加
    page: page,
    per_page: perPage,
    orderby: orderby,
    order: order,
  };
  // isbn が入力されていれば、クエリパラメータに追加
  if (isbn) query.isbn = isbn;

  // addQueryArgs() で path にクエリパラメータを追加
  wp.apiFetch({
    path: wp.url.addQueryArgs("/wp/v2/books", query),
    parse: false,
  })
    .then((response) => {
      const totalPages = parseInt(response.headers.get("X-WP-TotalPages"), 10);
      return response.json().then((books) => {
        if (books.length > 0) {
          const newLine = page === 1 ? "" : "\n";
          textarea.value +=  newLine + books
            .map((book) => {
              // isbn が取得できれば (ISBN: 123456789-0) のような形式で出力
              const isbn = book.isbn ? ` (ISBN: ${book.isbn}) `: "";
              return `${book.title.rendered} (${book.id}) ${book.link} ${isbn}`}
            ).join("\n");
          loadMoreButton.style.display = currentPage < totalPages ? 'inline-block' : 'none';
        } else {
          loadMoreButton.style.display = 'none';
        }
      });
    })
    .catch((error) => console.error("Failed to fetch books:", error));
}
loadButton.addEventListener("click", () => {
  textarea.value = "";
  currentPage = 1;
  loadBooks(currentPage);
});
loadMoreButton.addEventListener("click", () => {
  currentPage++;
  loadBooks(currentPage);
});

// POST リクエスト送信用ボタン
const submitBookButton = document.getElementById("booklist-submit-book");
if (submitBookButton) {
  submitBookButton.addEventListener("click", () => {
    const title = document.getElementById("booklist-book-title").value;
    const content = document.getElementById("booklist-book-content").value;
    if (!title || !content) {
      alert("Both title and content are required.");
      return;
    }
    // POST リクエストの ISBN 入力欄の値
    const isbnPost = document.getElementById("booklist-book-isbn").value.trim();
    // data を別途定義
    const data = {
      title: title,
      content: content,
      status: "publish",
    }
    // ISBN が入力されていれば data に追加
    if (isbnPost) data.isbn = isbnPost;

    wp.apiFetch({
      path: "/wp/v2/books/",
      method: "POST",
      data: data, // 別途定義した data を指定
    })
      .then((result) => {
        alert("Book saved!");
        console.log("Book created:", result);
      })
      .catch((error) => {
        console.error("Failed to create book:", error);
        alert("Failed to save book.");
      });
  });
}

// PUT リクエスト送信用ボタン
const updateBookButton = document.getElementById("booklist-update-book");
if (updateBookButton) {
  updateBookButton.addEventListener("click", function () {
    const id = document.getElementById("booklist-update-book-id").value.trim();
    const title = document.getElementById("booklist-update-book-title").value.trim();
    const content = document.getElementById("booklist-update-book-content").value.trim();
    // PUT リクエストの ISBN 入力欄の値
    const isbnPut = document.getElementById("booklist-update-book-isbn").value.trim();

    // 判定条件に ISBN も追加
    if (!id || isNaN(id) || !(title || content || isbnPut)) {
      alert("ID は数値であり、タイトルまたはコンテンツ、ISBN のいずれかが必要です。");
      return;
    }

    wp.apiFetch({ path: `/wp/v2/books/${id}`, method: "GET" })
      .then((currentBook) => {
        return wp.apiFetch({
          path: `/wp/v2/books/${id}`,
          method: "PUT",
          data: {
            title: title || currentBook.title.rendered,
            content: content || currentBook.content.rendered,
            isbn: isbnPut || currentBook.isbn,  // ISBN が空なら元の値を保持
            status: currentBook.status,
          },
        });
      })
      .then((updatedBook) => {
        alert("Book updated successfully!");
        console.log("Book updated:", updatedBook);
      })
      .catch((error) => {
        console.error("Failed to update book:", error);
        alert("Failed to update book: " + (error.message || "Unknown error"));
      });
  });
}

// DELETE リクエスト送信用ボタン
const deleteBookButton = document.getElementById("booklist-delete-book");
if (deleteBookButton) {
  deleteBookButton.addEventListener("click", function () {
    const id = document.getElementById("booklist-delete-book-id").value.trim();
    const forceDelete = document.getElementById(
      "booklist-delete-force"
    ).checked;

    if (!id || isNaN(id)) {
      alert("ID は数値ででなければなりません。");
      return;
    }
    wp.apiFetch({
      path: `/wp/v2/books/${id}`,
      method: "DELETE",
      data: forceDelete ? { force: true } : {},
    })
      .then((result) => {
        alert("Book deleted!");
        console.log("Book deleted:", result);
      })
      .catch((error) => {
        console.error("Failed to delete book:", error);
        alert("Failed to delete book: " + (error.message || "Unknown error"));
      });
  });
}

// エンドポイントに独自のフィールドを追加
function custom_register_rest_fields() {
  register_rest_field(
    'post', // 対象の投稿タイプ（通常の投稿）
    'featured_image_url', // 追加するフィールド名
    [
      // 値を取得する関数
      'get_callback' => function ($post) {
        $thumbnail_id = get_post_thumbnail_id($post['id']);
        // アイキャッチ画像の ID が取得できれば
        if ($thumbnail_id) {
          // 画像のソースを取得（以下の場合は large サイズ）
          $image = wp_get_attachment_image_src($thumbnail_id, 'large');
          // $image[0] は画像ファイルの URL
          return $image ? $image[0] : null;
        }
        return null;
      },
      // スキーマ（フィールドのデータ仕様）デフォルトの null を指定（省略可能）
      'schema' => null,
    ]
  );
}
add_action('rest_api_init', 'custom_register_rest_fields');

(() => {
  // URL サニタイズ用の関数
  const sanitizeUrl = (url) => {
    try {
      const sanitizedUrl = new URL(url);
      if ( sanitizedUrl.protocol === "http:" || sanitizedUrl.protocol === "https:") {
        return sanitizedUrl.href;
      }
    } catch (e) {
      console.warn("Invalid URL:", url);
    }
    return "";
  };

  // HTML からテキストを取得する関数
  const sanitizeHtml = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  // 指定されたエンドポイントの URL から投稿のアイキャッチ画像とタイトル、リンクを取得して出力する関数
  const renderPostLinks = (url, target) => {
    const sanitizedUrl = sanitizeUrl(url);
    if (!sanitizedUrl) {
      console.error("無効な API URL");
      return;
    }

    // 投稿リストを出力する ul 要素を作成し、出力先に追加
    const list = document.createElement("ul");
    list.setAttribute("id", "post-list");
    list.style.setProperty("list-style-type", "none");
    target.appendChild(list);

    // URLSearchParams でオブジェクト形式のパラメータをクエリ文字列に変換
    const params = new URLSearchParams({
      // featured_image_url を取得できるように _fields パラメータに指定。
      _fields: "title,link,featured_image_url",
      per_page: 10,
      order: "desc"
    }).toString();

    fetch(`${sanitizedUrl}?${params}`)
      .then((response) => {
        if (!response.ok)
          throw new Error(
            `リクエスト失敗: ${response.status} ${response.statusText}`
          );
        return response.json();
      })
      .then((posts) => {
        list.innerHTML = posts
          .map((post) => {
            const sanitizedLink = sanitizeUrl(post.link);
            const sanitizedTitle = sanitizeHtml(post.title?.rendered);
            // アイキャッチ画像の URL を post.featured_image_url で取得
            const imageUrl = post.featured_image_url ? sanitizeUrl(post.featured_image_url) : undefined;
            return sanitizedLink
              ? `<li style="margin-bottom:20px">
                  <a href="${sanitizedLink}">
                  ${imageUrl ? `<div><img src="${imageUrl}" alt="${sanitizedTitle}" style="max-width:200px;"></div>`: ""}
                  <div>${sanitizedTitle}</div>
                  </a>
                </li>`
              : "";
          })
          .join("");
      })
      .catch((error) => {
        console.warn("投稿の取得エラー:", error);
        if (list)
          list.innerHTML = `<li>投稿の取得に失敗しました：${error.message}</li>`;
      });
  };

  document.addEventListener("DOMContentLoaded", () => {
    // 投稿（post）エンドポイントの URL （http://example.com の部分は適宜変更）
    const url = "http://example.com/wp-json/wp/v2/posts";
    // 出力先の要素
    const target = document.getElementById("fetch-posts");
    // 出力先の要素が存在すれば
    if (target) {
      // エンドポイントの URL と出力先の要素を指定して、投稿を取得して表示
      renderPostLinks(url, target);
    }
  });
})();

function custom_register_rest_fields() {
  register_rest_field('post', 'featured_image_urls', [
    'get_callback' => function ($post) {
      $thumbnail_id = get_post_thumbnail_id($post['id']);
      if ($thumbnail_id) {
        return [
          'full'      => wp_get_attachment_image_src($thumbnail_id, 'full')[0] ?? null,
          'large'     => wp_get_attachment_image_src($thumbnail_id, 'large')[0] ?? null,
          'medium'    => wp_get_attachment_image_src($thumbnail_id, 'medium')[0] ?? null,
          'thumbnail' => wp_get_attachment_image_src($thumbnail_id, 'thumbnail')[0] ?? null,
        ];
      }
      return null;
    },
    'schema' => null,
  ]);
}
add_action('rest_api_init', 'custom_register_rest_fields');

const params = new URLSearchParams({
  // 独自のフィールドを featured_image_urls に変更。
  _fields: "title,link,featured_image_urls",
  per_page: 10,
  order: "desc"
}).toString();

list.innerHTML = posts
  .map((post) => {
    const sanitizedLink = sanitizeUrl(post.link);
    const sanitizedTitle = sanitizeHtml(post.title?.rendered);
    // アイキャッチ画像 URL のオブジェクト
    const imageUrls = post.featured_image_urls || {};
    // アイキャッチ画像 URL（medium サイズを優先）
    const imageUrl = imageUrls.medium || imageUrls.large || "";
    return sanitizedLink
      ? `<li style="margin-bottom:20px">
          <a href="${sanitizedLink}">
          ${imageUrl ? `<div><img src="${imageUrl}" alt="${sanitizedTitle}" style="max-width:200px;"></div>`: ""}
          <div>${sanitizedTitle}</div>
          </a>
        </li>`
      : "";
  })
  .join("");

(() => {
  const sanitizeUrl = (url) => {
    try {
      const sanitizedUrl = new URL(url);
      if ( sanitizedUrl.protocol === "http:" || sanitizedUrl.protocol === "https:") {
        return sanitizedUrl.href;
      }
    } catch (e) {
      console.warn("Invalid URL:", url);
    }
    return "";
  };

  const sanitizeHtml = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  const renderPostLinks = (url, target) => {
    const sanitizedUrl = sanitizeUrl(url);
    if (!sanitizedUrl) {
      console.error("無効な API URL");
      return;
    }

    const list = document.createElement("ul");
    list.setAttribute("id", "post-list");
    list.style.setProperty("list-style-type", "none");
    target.appendChild(list);

    const params = new URLSearchParams({
      // 独自のフィールドを featured_image_urls に変更。
      _fields: "title,link,featured_image_urls",
      per_page: 10,
      order: "desc"
    }).toString();

    fetch(`${sanitizedUrl}?${params}`)
      .then((response) => {
        if (!response.ok)
          throw new Error(
            `リクエスト失敗: ${response.status} ${response.statusText}`
          );
        return response.json();
      })
      .then((posts) => {
        list.innerHTML = posts
          .map((post) => {
            const sanitizedLink = sanitizeUrl(post.link);
            const sanitizedTitle = sanitizeHtml(post.title?.rendered);
            // アイキャッチ画像 URL のオブジェクト
            const imageUrls = post.featured_image_urls || {};
            // アイキャッチ画像 URL（medium サイズを優先）
            const imageUrl = imageUrls.medium || imageUrls.large || "";
            return sanitizedLink
              ? `<li style="margin-bottom:20px">
                  <a href="${sanitizedLink}">
                  ${imageUrl ? `<div><img src="${imageUrl}" alt="${sanitizedTitle}" style="max-width:200px;"></div>`: ""}
                  <div>${sanitizedTitle}</div>
                  </a>
                </li>`
              : "";
          })
          .join("");
      })
      .catch((error) => {
        console.warn("投稿の取得エラー:", error);
        if (list)
          list.innerHTML = `<li>投稿の取得に失敗しました：${error.message}</li>`;
      });
  };

  document.addEventListener("DOMContentLoaded", () => {
    // 投稿（post）エンドポイントの URL （http://example.com の部分は適宜変更）
    const url = "http://example.com/wp-json/wp/v2/posts";
    const target = document.getElementById("fetch-posts");
    if (target) {
      renderPostLinks(url, target);
    }
  });
})();

// カスタム REST API のコールバック関数：指定された件数の投稿を取得し、JSON 形式で返す
function custom_get_posts_with_pagination(WP_REST_Request $request) {
  // per_page パラメータを取得（指定がない場合は10）
  $per_page = $request->get_param('per_page');
  $per_page = isset($per_page) ? intval($per_page) : 10;

  // image_size パラメータを取得（指定がない場合は 'medium'）
  $image_size = $request->get_param('image_size');
  $allowed_sizes = array('full', 'large', 'medium', 'thumbnail');
  if (!in_array($image_size, $allowed_sizes, true)) {
    $image_size = 'medium'; // デフォルトサイズ
  }

  // 投稿取得のためのクエリ引数を設定
  $args = array(
    'post_type'      => 'post',        // 通常の投稿タイプ
    'posts_per_page' => $per_page,     // 取得件数（リクエストに応じて変動）
    'post_status'    => 'publish',     // 公開済み投稿のみ
    'no_found_rows'  => true,          // ページネーション情報を無視して高速化
    'ignore_sticky_posts'  => true,    // スティッキーポストを無視（必要に応じて）
  );

  $query = new WP_Query($args); // 投稿クエリを実行
  $posts_data = array();        // レスポンス用の配列

  // 投稿が存在する場合はループでデータを整形
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      $posts_data[] = array(
        // タイトルから HTML タグを除去し、エスケープ
        'title' => esc_html(wp_strip_all_tags(get_the_title())),
        // 抜粋（excerpt）を取得し、HTML タグを除去してエスケープ
        'excerpt' => esc_html(wp_strip_all_tags(get_the_excerpt())),
        // 投稿のパーマリンクを取得・エスケープ
        'link'  => esc_url(get_permalink()),
        // 指定されたサイズのアイキャッチ画像 URL を取得・エスケープ
        'featured_image' => esc_url(get_the_post_thumbnail_url(get_the_ID(), $image_size)),
      );
    }
    wp_reset_postdata(); // グローバルな投稿データをリセット
  }

  // REST API レスポンスとして返却（自動で JSON 形式に変換される）
  return rest_ensure_response($posts_data);
}

// カスタム REST エンドポイントの登録
function register_custom_posts_endpoint() {
  register_rest_route('custom/v1', '/posts/', array(
    'methods'  => WP_REST_Server::READABLE, // GET / HEAD リクエストを許可
    'callback' => 'custom_get_posts_with_pagination', // コールバック関数を指定
    'permission_callback' => '__return_true', // 認証なしでアクセス可能にする
    'args'     => array(
      // per_page パラメータのバリデーションと説明
      'per_page' => array(
        'description' => '取得する投稿数（最大20件）',
        'type'        => 'integer',
        'default'     => 10,
        'minimum'     => 1,
        'maximum'     => 20,
        // バリデーション：正の整数のみ許可
        'validate_callback' => function ($param) {
          return is_numeric($param) && intval($param) > 0;
        }
      ),
      // image_size パラメータのバリデーションと説明
      'image_size' => array(
        'description' => '取得するアイキャッチ画像のサイズ（full, large, medium, thumbnail）',
        'type'        => 'string',
        'default'     => 'medium',
        'validate_callback' => function ($param) {
          return in_array($param, array('full', 'large', 'medium', 'thumbnail'), true);
        }
      ),
    ),
  ));
}

// REST API 初期化時にエンドポイントを登録
add_action('rest_api_init', 'register_custom_posts_endpoint');

(() => {
  // HTML からテキストを取得する関数
  const sanitizeHtml = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  // 指定されたエンドポイントの URL から投稿のアイキャッチ画像とタイトル、リンクを取得して出力する関数
  const renderPostLinks = (url, target) => {
    if (!url) {
      console.error("無効な API URL");
      return;
    }

    const list = document.createElement("ul");
    list.setAttribute("id", "post-list");
    list.style.setProperty("list-style-type", "none");
    target.appendChild(list);

    const params = new URLSearchParams({
      // 画像 URL は featured_image を指定。excerpt を追加（全てのフィールドを取得するので以下は省略可能）
      _fields: "title,link,featured_image,excerpt",
      // 取得件数を指定
      per_page: 5,
      // 取得する画像サイズを指定（省略するとデフォルトの medium）
      image_size: 'large',
    }).toString();

    fetch(`${url}?${params}`)
      .then((response) => {
        if (!response.ok)
          throw new Error(
            `リクエスト失敗: ${response.status} ${response.statusText}`
          );
        return response.json();
      })
      .then((posts) => {
        list.innerHTML = posts
          .map((post) => {
            const sanitizedLink = post.link;
            const sanitizedTitle = sanitizeHtml(post.title);
            const sanitizedExcerpt = sanitizeHtml(post.excerpt);
            // アイキャッチ画像の URL を post.featured_image で取得
            const imageUrl = post.featured_image || undefined;
            return sanitizedLink
              ? `<li style="margin-bottom:20px">
                  <a href="${sanitizedLink}">
                  ${imageUrl ? `<div><img src="${imageUrl}" alt="${sanitizedTitle}" style="max-width:200px;"></div>`: ""}
                  <h3>${sanitizedTitle}</h3>
                  </a>
                  <div>${sanitizedExcerpt}</div>
                </li>`
              : "";
          })
          .join("");
      })
      .catch((error) => {
        console.warn("投稿の取得エラー:", error);
        if (list)
          list.innerHTML = `<li>投稿の取得に失敗しました：${error.message}</li>`;
      });
  };

  document.addEventListener("DOMContentLoaded", () => {
    // 独自のエンドポイントを指定 （http://example.com の部分は適宜変更）
    const url = "http://example.com/wp-json/custom/v1/posts";
    const target = document.getElementById("fetch-posts");
    if (target) {
      renderPostLinks(url, target);
    }
  });
})();