Vue.jsとWordPressAPIでwebサイトを作る

Vue.jsとWordPressApiを利用しwebサイトを作りました。

作成したwebサイト

withレイクタウンというサイトを作成しました。

基本的な作りは以下のページをご参照下さい。

main.vueに手を入れています。

サンプル画面あり Vue Routerで簡単なSPAの作り方

WordPressApiの利用

記事自体はwordpressで作成していています。

トップ画面はvue.jsで作成しており、WordPressAPIで記事の情報を取得してトップ画面に「お勧め情報」や「新着情報」を表示しています。

以下のリクエストでwordpressで作ったサイトのjsonデータを取得できます。

http://{ドメイン}/wp-json/wp/v2/posts?

お勧め記事の取得

WordPressAPIは条件を指定して情報を抽出することも出来ます。カテゴリーを条件に記事の情報を取得します。
記事に「PICUP」というカテゴリーを追加し、そのカテゴリーの記事を取得します。

アイキャッチ画像を取得するために「_embed」の条件を付けます。

また、categories=n で指定したカテゴリーの記事を抽出することが出来ます。

「PICUP」というカテゴリーをアイキャッチ画像付きで取得するURLは以下になります。

https://www.with-laketown.com/wp-json/wp/v2/posts?_embed&categories=5

created()メソッドはVueインスタンスが作成された直後に呼ばれます。

また、 axiosを使用することで非同期通信を実施することができます。

非同期で「PICUP」カテゴリー記事を取得しに行っています。

  created() {
       // axiosで非同期通信を実施
    　 axios.get('https://www.with-laketown.com/wp-json/wp/v2/posts?_embed&categories=5')
      .then(resp => {
          // 返却されたjsonをpickUpList[]に格納
          this.pickUpList = resp.data;

          this.pickUpImage[0] = resp.data[0]['_embedded']['wp:featuredmedia'][0]['source_url'];
          this.pickUpImage[1] = resp.data[1]['_embedded']['wp:featuredmedia'][0]['source_url'];
          this.pickUpImage[2] = resp.data[2]['_embedded']['wp:featuredmedia'][0]['source_url'];
  
      })

返却されたjsonデータは配列pickUpList[]に格納しています。

this.pickUpList = resp.data;

注意点ですが、アイキャッチ画像についてはHTMLの中で取得することが出来なかったので、 created()メソッドの中でjson構造を辿って取得しています。

 this.pickUpImage[0] = resp.data[0]['_embedded']['wp:featuredmedia'][0]['source_url'];

取得したデータは<template>内で使用できます。

<h1 class="new-info">お勧め情報</h1>

<slick ref="slick" :options="slickOptions" class="slick-outer">
  <div><a v-bind:href="pickUpList[0].link" class="slick-text"><img :src="pickUpImage[0]" class="slick-img">{{pickUpList[0].title.rendered}}</a></div>
  <div><a v-bind:href="pickUpList[1].link" class="slick-text"><img :src="pickUpImage[1]" class="slick-img">{{pickUpList[1].title.rendered}}</a></div>
  <div><a v-bind:href="pickUpList[2].link" class="slick-text"><img :src="pickUpImage[2]" class="slick-img">{{pickUpList[2].title.rendered}}</a></div>
</slick>

記事のURLリンクは pickUpList[0].link で取得しています。

記事のタイトルは pickUpList[0].title.rendered で取得しています。

Vue.jsのvue-slickを利用しお勧め記事をカルーセルスライダーで表示させています。

サンプル画面あり Vue.jsのvue-slickプラグインでカルーセルスライダーを実装する

レイクタウン情報

Flexboxのcssで作っています。記事をカテゴリーで抽出したwordpressのページに遷移します。

<div class="parent">
  <div class="contents-box border">
    <a href="https://www.with-laketown.com/category/%e3%83%9f%e3%83%ab%e3%82%af%e3%83%ab%e3%83%bc%e3%83%a0-%e3%82%ad%e3%83%83%e3%82%ba%e3%83%88%e3%82%a4%e3%83%ac/">
      <img src="static/img/baby.png" alt="baby" class="contents-img">
    </a>
    <h2 class='subtitle'>ミルクルーム/キッズトイレ</h2>
  </div>
            	
  <div class="contents-box border">
    <a href="https://www.with-laketown.com/category/%e7%84%a1%e6%96%99%e9%81%8a%e3%81%b3%e5%a0%b4/">
      <img src="static/img/free.png" alt="free" class="contents-img">
    </a>
    <h2 class='subtitle'>無料で遊べるスペース</h2>
  </div>
        
  <div class="contents-box">
    <a href="https://www.with-laketown.com/category/%e4%be%bf%e5%88%a9%e6%83%85%e5%a0%b1/">
      <img src="static/img/info.png" alt="info" class="contents-img">
    </a>
    <h2 class='subtitle'>耳寄り情報/便利情報</h2>
  </div>
</div>

サンプル画面あり Vue CLIとCSS Flexboxでwebページを作る

新着記事

WordPressAPIで per_page=n を指定することで取得するデータ数を指定できます。

per_page=3 とし、最新の３記事の情報を取得します。

https://www.with-laketown.com/wp-json/wp/v2/posts?_embed&per_page=3

      axios.get('https://www.with-laketown.com/wp-json/wp/v2/posts?_embed&per_page=3')
      .then(resp => {
          this.list = resp.data;
          console.log(this.list);

          this.image[0] = resp.data[0]['_embedded']['wp:featuredmedia'][0]['source_url'];
          this.image[1] = resp.data[1]['_embedded']['wp:featuredmedia'][0]['source_url'];
          this.image[2] = resp.data[2]['_embedded']['wp:featuredmedia'][0]['source_url'];
          
          for (var i =0; i<3 ;i++){
            var str = resp.data[i]['excerpt']['rendered'];
            var str2 = str.slice( 3 ) ;
            this.text[i] = str2.slice( 0,-5 ) ;
          }

      })

resp.data[i][‘excerpt’][‘rendered’]　で記事の抜粋を取得していますが、前後に不要なタグが入っているので slice を利用し文字列を除去しています。

<h1 class="new-info">新着記事</h1>

  <div class="new-parent">
      
    <div class="newtopic-box">
      <div>
      <a v-bind:href="list[0].link" class="slick-text">
        <div class="newtopic-img">
          <img :src="image[0]" class="slick-img">
        </div>
        <div class="newtopic-title">
          <h3>{{list[0].title.rendered}}</h3>
          <p>{{text[0]}}</p>
        </div>
      </a>
      </div>
    </div>
            	
    <div class="newtopic-box">
      <div>
        <a v-bind:href="list[1].link" class="slick-text">
          <div class="newtopic-img">
            <img :src="image[1]" class="slick-img">
          </div>
          <div class="newtopic-title">
            <h3>{{list[1].title.rendered}}</h3>
            <p>{{text[1]}}</p>
          </div>
        </a>
      </div>
    </div>

    <div class="newtopic-box">
      <div>
        <a v-bind:href="list[2].link" class="slick-text">
          <div class="newtopic-img">
            <img :src="image[2]" class="slick-img">
          </div>
          <div class="newtopic-title">
            <h3>{{list[2].title.rendered}}</h3>
            <p>{{text[2]}}</p>
          </div>
        </a>
      </div>
    </div>

まとめ