BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. JavaScriptでWordPressからXML、JSONを取得する方法
by ウラカワ ウラカワ

JavaScriptでWordPressからXML、JSONを取得する方法

JavaScriptでWordPressからXML、JSONを取得する方法

こんにちは、ウラカワです。

コロナウイルスの影響で人生初のリモートワークを体験中です。

さて、今回はWordPressから新着を取得して表示する方法ご紹介します。

JavaScriptで取得する方法は大まかに以下2つになります。

  1. XML(RSS 1.0, RSS 2.0, Atom)
  2. JSON(JSONP)

これらの形式から好きなものを使えば良いわけですが、最大の問題がクロスドメインです。

クロスドメイン環境で実装する場合、配信側で設定が出来ない限り基本的にJSONPになります。
(httpsからhttpへの通信だとどれもNGなので注意が必要です)

ただ、WordPress 4.4.0からREST APIにクロスドメイン対策が予め施されています。

Access-Control-Allow-Originがセットされていますね。

なので、環境にもよりますが通常のJSONも取得可能です。

取得サンプル

XML

サンプルはRSS 2.0です。Atomの場合は参照するタグが変わってきます。

JSON

JSONP

各アーカイブの取得

XML

アーカイブページの末尾に /feed/ もしくは ?feed=rss を指定します。

https://magnets.jp/category/web_design/design/feed/

Atomの場合は /feed/atom/ もしくは ?feed=atom になります。

https://magnets.jp/category/web_design/design/feed/atom/

JSON

カテゴリー、タグのアーカイブはパラメータでIDを指定します。

https://magnets.jp/wp-json/wp/v2/posts?categories=1

https://magnets.jp/wp-json/wp/v2/posts?tags=47

カスタム投稿タイプを取得する場合はregister_post_typeでshow_in_restをtrueにする必要があります。

https://your-domain.dev/wp-json/wp/v2/post_type_name

JSONP

JSONのURLからさらにコールバック関数をパラメータで指定します。

https://your-domain.dev/wp-json/wp/v2/posts?categories=1&_jsonp=callback

JSONカスタマイズ

複雑な条件の場合はregister_rest_routeで独自のエンドポイントを追加して好きな値を返しましょう。

投稿データはWP_Queryクラスで取得すると楽ですね。

サンプルのエンドポイントは以下のようになります。

https://your-domain.dev/wp-json/myapi/v1/my_rest_route

最後に

WordPressからの取得はクロスドメインにさえ気をつければ難しくはありません。

REST APIはかなり柔軟に対応出来るので、配信側の編集が可能な場合はガッツリ使っていきたいですね!

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る