ワードプレスでCSSのキャッシュ対策
kurumin
プログラミングのーと
wordpressのRest APIからデータを取得
kurumin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wordpressのRest APIからデータを取得</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container">
<h1 class="mb-5">wordpressのRest APIからデータを取得</h1>
<div class="row mb-3">
<div class="col-12">
<div class="row">
<div class="col-2">
<label>
<input type="radio" value="" v-model="currentCategoryId">
<span>全てのカテゴリ</span>
</label>
</div>
<div class="col-2" v-for="category in categories">
<label>
<input type="radio" :value="category.id" v-model="currentCategoryId">
<span v-text="category.name"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 p-2" v-for="post in posts">
<div class="card">
<div class="card-body">
<h5 class="card-title" v-text="post.title.rendered"></h5>
<h6 class="card-subtitle mb-2 text-muted" v-text="getDate(post.date)"></h6>
<p class="card-text" v-html="post.excerpt.rendered"></p>
<div class="text-right">
<a :href="post.link" class="card-link">表示する</a>
</div>
</div>
</div>
</div>
<div v-if="!posts.length">
記事が見つかりませんでした。
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
posts: [],
categories: [],
currentCategoryId: ''
},
methods: {
getCategories() { // カテゴリ一覧を取得
const url = 'https://study.krm-dev.site/wp-json/wp/v2/categories';
axios.get(url)
.then(response => {
this.categories = response.data;
});
},
getPosts() { // 記事一覧を取得
if (this.currentCategoryId === '') {
url = 'https://study.krm-dev.site/wp-json/wp/v2/posts';
} else {
url = 'https://study.krm-dev.site/wp-json/wp/v2/posts?categories=' + this.currentCategoryId;
};
axios.get(url)
.then(response => {
this.posts = response.data;
});
},
getDate(date) {
const dt = new Date(date);
return dt.getFullYear() + '/' + (dt.getMonth() + 1) + '/' + dt.getDate()
}
},
watch: {
currentCategoryId() { // カテゴリの選択が変更になったとき実行
this.getPosts(); // 記事一覧を取得
}
},
mounted() {
this.getCategories(); // カテゴリ一覧を取得
this.getPosts(); // 記事一覧を取得
}
});
</script>
</body>
</html>ABOUT ME
