WordPress APIを用いてHTMLを自動投稿する方法（TypeScript）

手作業でブログ記事を投稿していると、「毎回同じような構成の記事を量産するのが面倒だな」と感じることはありませんか？
そんなときに便利なのが、プログラミングからWordPressに記事を自動投稿する仕組みです。

この記事では、TypeScript を使って HTML形式のコンテンツを WordPress に投稿する方法を紹介します。

利用する技術
必要な準備
投稿用のコード（TypeScript）
実行方法
1. まとめ

利用する技術

WordPress APIを利用して、プログラムから投稿させます。

WordPress APIのPosts APIを利用します。

他にもいろんなことができるのでリファレンスをみてみてください。

WordPress Developer Resources | Developer.WordPress.org

Official WordPress developer resources including a code reference, handbooks (for APIs, plugin and theme development, bl...

必要な準備

まずは、必要な環境変数を .env ファイルにまとめてください。

WP_USER=your_wp_user
WP_APP_PASSWORD=your_app_password
WP_SITE_URL=https://your-site.com

WP_USER：WordPressのユーザー名（管理者権限が必要）
WP_APP_PASSWORD：WordPressのアプリケーションパスワード（管理画面から発行）
WP_SITE_URL：WordPressサイトのURL（例：https://example.com）

アプリケーションパスワードは、WordPressの管理画面から、「ユーザー」→「プロフィール」の画面へ移動し、下の方の「アプリケーションパスワード」という項目で発行できます。

投稿用のコード（TypeScript）

以下のコードでは、画像＋テキストを含むHTMLを組み立て、それをWordPressへ投稿します。

カテゴリ・タグ・スラッグの設定や、SEO用のメタ情報（タイトル・キーワード）も可能です。

import fetch from 'node-fetch';
import dotenv from 'dotenv';

dotenv.config();

interface ContentItem {
  name: string;
  link: string;
  description: string;
  imageUrl: string;
}

async function postToWordPress(items: ContentItem[], gameName: string) {
  const WP_USER = process.env.WP_USER || '';
  const WP_APP_PASSWORD = process.env.WP_APP_PASSWORD || '';
  const WP_SITE_URL = process.env.WP_SITE_URL || '';

  const content =  `
    <div style="margin-bottom: 40px;">
      <p>投稿するhtmlの内容</p>
      </div>
    </div>
  ;

  const postData = {
    title: 投稿記事のタイトルを記載`,
    content: `
      ${content}
    `,
    status: 'draft', // 公開する場合は 'publish'
    categories: [11], // カテゴリID
    tags: [1],       // タグID
    slug: `URLの末尾`, //https://XXX.com/xxxx のxxxx部分
  };

  try {
    const response = await fetch(
      `${WP_SITE_URL.replace(/\/$/, '')}/wp-json/wp/v2/posts`,
      {
        method: 'POST',
        headers: {
          'Authorization': `Basic ${Buffer.from(`${WP_USER}:${WP_APP_PASSWORD}`).toString('base64')}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData),
      }
    );

    const result = await response.json();
    console.log('投稿成功:', result);
  } catch (error) {
    console.error('WordPressへの投稿エラー:', error);
  }
}

実行方法

まず必要なライブラリをインストールしてください

npm i node-fetch
npm i dotenv

その後、コードを実行すればwordpressへ投稿が完了していると思います。

npx ts-node your-script.ts

WordPress APIを無効化していたり、レンタルサーバーのWAF機能で投稿ができない場合がありますのでご注意ください。

まとめ

この方法を使えば、以下のような記事を自動生成・投稿できます：

HTMLで組んだリッチなUIの生成
WordPressカテゴリ／タグの自動設定
定期的に更新したい記事の修正＆更新自動化

「定型の記事を量産したい」「外部データを使って記事を作りたい」という場合にとても便利なので参考にしてみてください！