WP REST API

WP REST APIで記事一覧を表示

2022年2月19日2022年3月22日 3分

以前、WP REST APIを使った記事を書きましたが、jQueryだったので、この記事ではネイティブなJavaScriptとWP REST APIを使って記事一覧を出力できるスニペットです。

2021年9月18日WP REST APIのJavaScriptで他のWordPressの記事をJSONで出力

簡単な記述でできる内容ですが、順に解説していきます。

WP REST API
記事一覧のサンプル
サンプルのコード

WP REST API

WP REST APIは、WordPressのデータベースの情報をJSON形式で取得できるAPIで、WordPress4.7から標準搭載されています。

WP REST APIを使うことで、記事の「公開日」「公開状態」「投稿者」「カテゴリ・タグ」「取得する件数」「ソート順」など、詳細の情報を取得することができます。

かかかず

WordPressの関数を使わなくても記事の取得・出力ができるので、静的なページでも利用可能です。

記事一覧のサンプル

早速サンプルです。

以下は、別のWordPressの記事を「WP REST API」で取得して表示させた記事一覧です。

かかかず

これらのリンクカードは、別で運営している別サイトを指定してAPIで引っ張ってきています。

サンプルのコード

サンプルでは、HTML・CSS・JavaScriptの3種で構成されています。順に解説していきます。

HTML

HTMLは、以下の一文のみ設置したい場所に記述すればOKです。

<ul id="viewPosts"></ul>

サンプルではカード型のコンポーネントを li タグで出力するので、ul タグにしています。

JavaScript

JavaScriptでは、「WP REST API」のJSON ファイルを取得してコンソールに出力する fetch を使い、それを for 文でループさせて出力します。

const getPosts = "https://dubdesign.net/domain/wp-json/wp/v2/posts?_embed&per_page=10"

fetch(getPosts).then(
  response => {
    return response.json(); // get JSON data$
  }).then(data => {

for (let i = 0; i < data.length; i++) {
    var date2 = new Date(data[i].date);
    var year = date2.getFullYear();
    var month = date2.getMonth() + 1;
    var day = date2.getDate();
    viewPosts.innerHTML += '<li class="posts">' // contentwrapper
    + '<a href="' + data[i].link + '" class="linkID_' + data[i].id +'">'
    + '<img src="' + data[i]._embedded["wp:featuredmedia"][0].source_url + '" alt="' + data[i].title.rendered +'">'
   + '<time class="postTime dfont" itemprop="datePublished" datetime="' + data[i].date + '">' + year + '年' + month + '月' + day + '日' + '</time>'
    + '<p class="postTitle">' + data[i].title.rendered + '</p>'
    + '</a>' // href end
    + '</li>' // end content
  }

}).catch(err => {
  // Do something with error here
  console.log('Error: ' + err)
})

出力しているのは、「アイキャッチ画像」「タイトル」「投稿日」「リンク」の4種類です。

これ以外にも取得できるデータは色々あり、WordPress公式にハンドブックがあるので、これらを見て追加することが可能です。

参考 REST API HandbookWordPress.org

かかかず

上記を参考にして、用途によって追記するなりカスタマイズしてみてください。

CSS

CSSは、flexboxで表示させる時の見た目を整える程度のものなので、記述量はそこまで多くありません。

ul#viewPosts {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    border: none;
    justify-content: space-between;
    gap: 30px;
    margin: 0;
}
li.posts {
    width: 47.5%;
    margin: 0;
    padding: 0;
}
li.posts a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    background: #FFF;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    border-radius: 3px;
}
li.posts a:hover {
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}
li.posts a img {
    margin-bottom: 15px;
    object-fit: cover;
    height: 200px;
    border-radius: 3px 3px 0 0;
}
time.postTime {
    display: block;
    margin: 0 0 3px;
    color: #b5b5b5;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0 20px;
    position: relative;
}
time.postTime:before {
    content: "\f017";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 5px;
    font-size: 0.85rem;
    opacity: 0.6;
    vertical-align: bottom;
}
p.postTitle {
    padding: 0px 20px 0;
    font-size: 18px;
    line-height: 1.56;
    color: #555;
    font-weight: 600;
    margin-bottom: 1.2rem;
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
li.posts {
    width: 100%;
}
}

カードのコンポーネントは、当サイトでも使用しているWordPressテーマ「SANGO」のものなので、使うサイトによってカスタマイズして使いましょう。

かかかず

スマホ用にブレイクポイントを767pxで書いていますがかなりバックリしているので、メディアクエリも状況に応じて追加ください。