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,''); var html = ''; html += '';
html += '
';
var temp1 = html.replace( /\<(img[^\>]*)\>/, '\\<$1\>\' );
temp1 = temp1.replaceAll('"','"').replaceAll('\n', '');
var temp2 = 'javascript:$(\'#html\').text(\'' + temp1 + '\'); $(\'#preview\').html( \'' + temp1 + '\' );';
html = html.replace( /\<(img[^\>]*)\>/, '\\<$1\>\' );
list += html;
});
$('#article-list').html( list );
},
error: function(data) {
alert('error');
}
});
}),
$( '#clean' ).click( function() {
$('#html').html( null );
$('#article-list').html( null );
$('#preview').html( null );
})
function init() {
$('#category').children().remove();
$('#category').append( $('';
html += '
';
html += '
';
html += '';
html += '
';
html += '';
html += '';
html += '' + item.title.rendered + '';
html += '';
html += '
';
html += '';
html += '' + excerpt + '';
html += '
';
html += '