JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

WP REST APIで記事一覧を表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

WP REST API

WP REST APIで記事一覧を表示

WP REST APIで記事一覧を表示

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

WP REST APIのJavaScriptで他のWordPressの記事をJSONで出力

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

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で書いていますがかなりバックリしているので、メディアクエリも状況に応じて追加ください。