2024-08-30

REAT-APIでヘッドレスなWordPress

Introduction

この記事では、WordpressをヘッドレスCMSとして活用してみます。

いわゆる、APIとして使ってみるわけですね。

Motivation and Context

今回、わざわざフロントの機能までついてるWordpressをバックエンド機能のみで利用しようと思った理由は1つです。

ぜひとも、Reactと組み合わせてみたい。

最近よく別プロジェクトでReactを使っているのですが、優秀ですよね。

ReactというよりNext.jsを使うのですが、今回はその前段階としてWordpressをAPIとして利用できないかというものです。

    Detail / Usage example

    01. WP-CLIの導入

    まずはWordpressにWP-CLIというツールをインストールします。

    Dockerをよく利用しているので、Dockerfileでインストールします。

    こんな感じになりますね。

    FROM wordpress:latest
    
    # WP-CLIインストール
    RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \
      && chmod +x wp-cli.phar \
      && mv wp-cli.phar /usr/local/bin/wp \
      && wp --info

    02. WP-CLIのバージョンを確認

    とりあえず、WP-CLIがちゃんと入って動いてくれているか確認します。

    どんなツールでもバージョンチェックが動けば、大丈夫そうですよね。

    $ docker compose exec wordpress wp cli version

    03. 投稿の一覧を取得する

    WP-CLIはコマンドからデータを取得できるツールです。

    ここでは基本となる、投稿の一覧を取得してみましょう。

    とりあえずcurlコマンドで取得してみます。

    json形式でデータが取得できていれば成功です。

    $ curl -X GET http://localhost:9999/wp-json/wp/v2/posts

    あとの応用は無限大

    ここまでくれば、他のサービスで自由にWordpressコンテンツを応用できますね。

    WordPressは優秀なのですが、より柔軟性の高い機能開発になると、他のツールで作った方が効率が良かったりもします。

    WP-CLIはちょっと使ってみただけでも使いやすくて優秀ですね。

    もっといろいろ試してみたい!

    よくあるご質問

    Artisanの活動頻度を教えてください

    Artisanは基本的に1ヶ月に1回、2時間程度開催しています。そこでは、ブログのアイディアやサイトの改修を行なっています。 参加は強制ではないので、ご安心ください。そのとき暇なメンバーがフラッと参加する感じです。

    エンジニアなのですが、Artisanに参加できますか?

    Artisanは利益組織ではありませんので、給与はでず、有志の集団です。 趣味程度の活動です。 興味がありましたら、インスタグラムよりご相談くださいませ。 現在だと、ウェブデザイナーさんやフロントエンドのエンジニアさんにきていただけると、非常にありがたいです。

    wordpressのテーマ作れますか?

    ワードプレスのテーマ開発は得意なメンバーがいます。 実際にwordpressでサイト制作を請け負う際は、全てオリジナルテーマを作っております。 また、一般用にwordpressテーマ自体を販売もしております。

    Artisanってデザイナー?

    どちらかというと、エンジニです。 ウェブデザインやグラフィックも多少やりますが、メインはウェブ開発者ですね。

    Wordpressテーマ販売中