JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

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

    UI

    • 他のウィンドウが開くことができないポップアップのUIです。

      モーダル

      モーダル

    • 並列な関係を持つ情報を1つずつ格納するUIです。

      タブ

      タブ

    • サイドから全体を覆うほど大きいメニュー表示するUIです。

      ドロワー

      ドロワー

    • 画像などのコンテンツをスライド表示させるUIです。

      スライダー

      スライダー

    • スクロールで表示が変化するスニペットです。

      スクロール

      スクロール

    • クリックすると隠れていた部分が開閉するUIです。

      アコーディオン

      アコーディオン

    • ページのhタグを取得して目次を生成するスニペットです。

      目次

      目次

    • ページの読み込み時にアニメーションをするスニペットです。

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

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

    • マウスオーバーした際に表示される補足説明です。

      ツールチップ

      ツールチップ

    • ページ内上部にあるナビゲーションUIです。

      ヘッダー

      ヘッダー

    • 行と列の組み合わせでできているUIです。

      テーブル

      テーブル

    • データを表やグラフで可視化して見せるUIです。

      グラフ

      グラフ

    • 背景をアニメーションで動かすスニペットです。

      背景

      背景

    フォーム

    • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

      フォーム

      フォーム

    文字

    • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

      文字の装飾

      文字の装飾

    • 文字列の操作をして、置換・変更を行うスニペットです。

      文字の操作

      文字の操作

    • 文字列をカウントして表示などを行うスニペットです。

      文字のカウント

      文字のカウント

    • 数字の要素を取得して、変更するスニペットです。

      数字の操作

      数字の操作

    ウィンドウ

    classの操作

    • 要素を取得して、classを追加・削除するスニペットです。

      classの操作

      classの操作

    要素の操作

    API

    • WordPressのAPIを取得して表示するスニペットです。

      WP REST API

      WP REST API

    • Google Books APIsで書籍の情報を表示するスニペットです。

      Google Books APIs

      Google Books APIs

    • 楽天市場のAPIを取得して表示するスニペットです。

      楽天市場API

      楽天市場API

    • openBDのAPIを取得して表示するスニペットです。

      openBD

      openBD

    画像・動画

    • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

      画像の操作

      画像の操作

    • YouTubeの動画を表示するスニペットです。

      YouTube

      YouTube

    リンク

    • ページ内のリンクを取得して変更・操作するスニペットです。

      リンク

      リンク

    • Google Analyticsとの連携をするスニペットです。

      Google Analytics

      Google Analytics

    cookie

    • ブラウザのcookieを利用するスニペットです。

      cookie

      cookie

    検索

    • 指定した要素の中から検索を行うスニペットです。

      検索

      検索