カスタムエンドポイントにtagを追加する
WEB
Vue.jsでRest APIの情報を取得する
Vue.jsでWordpressのRest APIで情報を取得する際に、カテゴリーやタグはIDのみ取得されてる状態なので、タグ名やタグアーカイブへのリンクを自身で追加する必要がある。
その自身で追加するポイントをカスタムエンドポイントと言います。
カスタムエンドポイントへの追加方法は、PHPを使います。
カテゴリー名の取得なんかは色んなところで紹介されてますがタグ名に関しては記事が少なかったのでブログにしました。
完成形は上記画像です。
内容としては、
- 投稿別に、tag配列を作る
- その配列の中にタグ名とタグアーカイブへのリンクを追加する
これでVue.jsで描画しやすくなります。
functions.phpでタグ取得関数を設置
- 配列を格納する空配列を準備する（＄array,＄link,＄name ）
- foreachで配列の一つ一つに対して処理を書く
- 配列の値にkeyと、valueを定義
- 用意した空配列にarray_pushで送る
- 送ったそれぞれの配列をarray_replace_recursiveで結合
- 結合した配列を空配列にarray_pushで送る
- 最後の配列をreturnで返す
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function get_tags_all( $object ) { $array = []; //空配列 $link = []; //空配列 $name = []; //空配列 $tags = get_the_tags(); //WP用タグ取得関数 foreach($tags as $key => $tag){ $tag_link['link'] = get_tag_link($tag->term_id); $tag_name['name'] = $tag->name; array_push($link,$tag_link); array_push($name,$tag_name); } $array_in = array_replace_recursive($link,$name); array_push($array,$array_in); return $array; } |
register_rest_fieldで最初の関数の内容をcallbackする
|
1 2 3 4 5 6 7 8 9 |
function register_tags_all() { //register_rest_field関数を用いget_tags_all関数からタグ名を取得し、追加する register_rest_field( 'post', 'tags_all', array( 'get_callback' => 'get_tags_all' ) ); } |
最後にadd_actionで登録する
|
1 2 |
// タグ名を取得する関数を登録 add_action( 'rest_api_init', 'register_tags_all' ); |
この流れでタグ名を取得します
ここまで準備できれば、v-forで配列を回しながら描画可能です。
＊余談ですがこのブログのタグも同じ機能で取得・描画しています。
Let’s Enjoy Coding Life!!
