WordPressで用意されているWP REST API v2を参照してブログ記事の検索を行う。備忘も兼ねたサンプル実行など
- advertisement -
- advertisement -
目次
概要
WordPressの記事情報をフロント側から参照したい場合はないだろうか。APIを呼び出して結果がJSONで返ってくれさえすれば、どんな処理も実装できる。
内部のデータベース(MySQL)をサーバサイドのPHPで参照して結果をJSONに変換しそれを返すのでもよいのだが、WordPressにはWP REST APIというAPIが実装されているため、今回はこれをつかって記事一覧から選択した記事のリンクを作成する機能を実装する。
要件は以下とし、
- 検索条件の「カテゴリ」を選択することで対象のカテゴリのみを抽出
- カテゴリの一覧はWordPressからREST APIで取得し選択できるようにする
- 検索条件のキーワードが入力された場合、そのキーワードが含まれる記事を対象とする
- 指定された並び順項目の昇順もしくは降順で並び替えて一覧表示させる
- 選択された件数分の記事を取得(1~最大100件)※今回は1~10
- 記事内に挿入するための記事リンク(html)を出力できるようにする
以下が返すJSONを参照する。
https://kaztsu.com/wp-json/wp/v2/
実装
'; $('#html').html( null ); $('#preview').html( null ); $.ajax({ url: url, dataType:'json', timeout: 10000, success: function(results) { var list = ''; $.each( results , function( key, item ) { // 画像 const text = item.content.rendered; const parser = new DOMParser(); const htmlDoc = parser.parseFromString(text, 'text/html'); const img = htmlDoc.querySelector('img'); var src = ''; if (img) { if (/.*\_q\.jpg$/.test(img.src) ) { src = img.src; } else { src = img.src.replace( /\.jpg$/, '_q.jpg' ); } } // 概要 var excerpt = item.excerpt.rendered.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,''); let u = new Date( item.date ); let b = u.getFullYear() + '/' + ('0' + (u.getMonth() + 1)).slice(-2) + '/' + ('0' + u.getDate()).slice(-2); var html = ''; html += ''; html += ''; html += '' + item.title.rendered + ''; html += ''; html += '
'; html += '検索条件
出力結果
プレビュー:
以下をサイトの任意の場所に貼り付ける。
解説
WP REST APIとは、WordPressで作成したブログ記事などのデータにアクセスするために用意されたAPI。WordPress 4.7以上であれば下記のURLにアクセスすることで、JSONを取得することなどが可能。
投稿一覧取得
固定ページ一覧取得
カテゴリ一覧
また、「?args=value」というようなパラメータを追加すると検索条件で絞り込みや並び順の指定が可能。
- カテゴリ指定 categories
例)categories=2 - 取得件数 per_page
例)per_page=10 - キーワード search
例)search=keyword - 並び替え項目 orderby
例)orderby=date - 並び順 order
例)order=desc
POSTして記事を投稿したりもできるようだが、今回は検索機能についてまとめることにした。
まとめ
これにより、何ができるようになるのか
- 通常は投稿日の降順で一覧表示されるのが一般的だが、パラメータの指定により並び順を変えて取得可能。
- 別サーバや別サイトからAPIを参照してコンテンツの操作が可能になる。(今回参照のみ)
- REST APIさえ理解すれば、フロントエンドは好きな言語・環境で実装可能。
例えば、現在Twitterで一定リツイート数が前回比であった場合にリツイート数を自動ツイートしており、これは公開日の降順・直近10件をRSSより取得したものをその対象としているのだが、REST APIで更新日時の降順でリスト化したものを対象としたほうがよいのかもしれない。
フロントエンド側からWordPressの記事一覧を容易に取得する用途でその真価が発揮できると思われる。
テストで使用したhtmlファイルは以下からダウンロード可能
ダウンロード:
上記「wprestapi.zip」をダウンロード後に解凍し「wprestapi.html」の内容をブログやWebサイトの好きな場所に貼り付けます。
注意点:
- 「kaztsu.com」をご自身のWordPressのドメインに変更します。
履歴:
- ver.1.0.0 新規リリース(2021/12/3)
まだまだ改善点はありますが、何かの参考になればと思います。不具合やご要望あればご連絡ください。