COLUMN

JSONで読み込んで、ページングで表示させてみる(その1)

H.A

118_ext_01_0.jpg

CMSでサイト構築していると、他のCMSや静的なデータから記事を表示させたいことや、同一のCMS上から上手く記事データをもってこれないことが、ままあります。

そういったときに、CMSの機能に依存せずに、javascriptで表示すると便利です。

今回は、wordpress上で、jsonを使用してjsで記事一覧をページングで表示させたいと思います。

まず、目的に必要な作業をまとめると下記項目になります。

  • 1)静的な記事一覧を、json形式のデータで作成する。
  • 2)WP上で、記事一覧を、json形式で生成させる。
  • 3)静的な記事データと、WPで生成された記事データを結合して、jsで一覧を表示させる。
  • 4)jsで表示させた一覧データにページング機能をつける。

以上の項目を、複数回にわたって掲載したいきます。

1)静的な記事一覧を、json形式のデータで作成する。

jsonは、XMLと同じくテキストベースのデータフォーマットです。
jsの、配列やオブジェクトでデータを格納できるので、jsで読み込む際に便利です。

オブジェクトや配列と聞くと難しく考えがちですが、『箱』や『カード』のようなものと考えると分かりやすいと思います。

今回の例として、下記項目のデータが必要になるので、それをjson形式のデータにしていきます。

  • 1)日付
  • 2)サムネイル画像のパス
  • 3)記事のリンク
  • 4)記事タイトル

上記の項目のデータ一式を、『カード』にみたて、それを『箱』にしまうイメージで、オブジェクトでデータを作成し、配列に格納していきます。

実際に、例として、『一枚のカード』をコードとして書いてみると下記のようになります。

{
    'date':  '08 May 2017',
    'img':   '/img/thumb/20170508-001.jpg',
    'link':  '/column/?id=20170508-001',
    'title': 'カスタマイズしやすいCMSを検討する'
}

各項目データは『名称』と『内容』を『:』でつないで対とします。
複数のデータがある場合は、『,』でつなぎます。
それを『{}』で囲むこととなり、一枚の『カード』ができました。

この『カード』を、さらに、『,』でつなぎ、『[]』で囲み、_dataという名前の『箱』にしまいます。

var _data = [{データ},{データ},{データ},{データ},{データ}…]

次回は、『2)WP上で、記事一覧を、json形式で生成させる。』の解説します。

CALENDAR

2017年
8月
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

アーカイブ