WP Rest APIとvue.jsでお知らせを一覧を作ってみる

#WP Rest APIとvue.jsでお知らせを一覧を作る

最近vue.jsを勉強し始めたのでWordpressとの連携を試してみたかったので
実装頻度が高そうなお知らせ一覧で作ってみようと思います。

実装環境

・WP REST API（WPプラグインで投稿内容のjsonを返してくれる）
・投稿はカスタム投稿を使用します。（カスタム投稿名はnewsで設定）
・vue.jsとaxionはCDNで読み込み。

##WP側の設定
ドメイン名/news/ でアクセスされたらjsonを返すよう、functions.phpに下記の内容を記述。

functions.php

	 function get_news_feed(){
	   register_rest_route(
	     'wp/v1/', 'news', //jsonを取得するためのurlを設定
	     array(
	       'method' => 'GET',
	       'args' => array(
	         'paged' => array(
	           'default' => 1,
	           'sanitize_callback' => 'absint'
	         )
	       ),
	       'callback' => 'news_add'
	    ));
	 }

	 function news_add() {
		$result = array();

		$query = new WP_Query(array(
			'post_type' => 'news', //設定済みのカスタム投稿名
			'posts_per_page' => 3 // 表示数
		));

		$items = array();//投稿情報を格納するための配列を作成
		while($query->have_posts()) {
			$query->the_post();
			$item = array();
            // 表示させたい内容をを配列に入れていく
			$item['title'] = get_the_title();//タイトル名
			$item['date'] = get_the_time("Y.m.d");//日付
			$item['permalink'] = get_the_permalink();//個別記事のリンク
			$item['content'] = mb_substr(strip_tags(get_the_content()), 0, 120, 'UTF-8');//記事本文
			$item['thumbnail'] = get_the_post_thumbnail_url(
				get_the_ID(), 'news_list'); //サムネイル画像
			$items[] = $item;
			}
			$result['items'] = $items;
			return $result;
	}

wp側の設定は以上。

JS側の設定

適当なファイル名で作成（今回はnewsfeed.js）

newsfeed.js

new Vue({
  el: '#newsFeed',
  data: {
    items: []//カスタム投稿の内容を入れる変数を用意
  },
  created: function created() {
    axios.get('https://example/news/').then(function (response) {
      // 取得完了したらlistリストに代入
      this.items = response.data;
    }.bind(this)).catch(function (e) {
      console.error(e);
    }.bind(this));
  }
})

html側の設定

作成したJSファイルの読み込み

<script src="newsfeed.js"></script>

vue.jsの読み込み

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

axioxの読み込み

<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>

後は表示させたい箇所でJSで受け取った値をリストで表示するための記述をして実装完了。

index.html

<div id="newsFeed">
	<div v-for="item in items" class="news_list_item">
		<a v-bind:href="item.permalink">
			<div class="news_list_img"><img v-bind:src="item.thumbnail" alt=""></div>
			<h3 class="news_list_title">{{ item.title }}</h3>
			<time class="news_list_time">{{ item.date }}</time>
			<div class="news_list_txt newsBar">{{ item.content }}</div>
			<span class="news_list_link din_bold">READ MORE...</span>
		</a>
	</div>
</div>

終わり

今回一覧のみのシンプルな実装ですが、さらに使えるようになり要件に沿った実装ができたらと
いいなーと思いました。