複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

何ができるか

複数の外部ブログの最新記事を取得し、更新日でソートして降順に並べられる

背景

カテゴリが異なるサイトの更新情報を、それぞれのWordPress 記事として投稿している。大本のサイトでは、全情報を表示できるようにしたい。なおかつ、時系列でソートしたい。

技術情報

  • jQuery の$.getJSON(url, function(results){…}) で各店のWordPress ブログ記事を取得
    • getJSON()は非同期通信なので、データ取得後にHTML の描写を行うようにする
  • 取得したJSON データで必要なものをallArticles.push() で格納
    • 配列”allArticles” にオブジェクトを追加している
  • 全データ取得後、underscore.js を使い、allArticles をsortBy() で時系列降順にソート
    • 各店のJSON 読み込みにばらつきがあるので、setTimeout() で2秒の待機時間を付けている
    • allArticles をHTML として書き出す

配列を指定した項目でソートする

事前準備

jquery および、underscore.js を事前に読み込んでおく

underscore.js のsortBy() を使って、数字を降順に並べる

出力結果

year を比較して、降順に並び変わった

JavaScript で、複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

HTML

JavaScript

解説

  • getBlogInfo() で指定されたWordPress のJSON を取得して、ブログ最新記事を変数に格納
  • showBlogInfo() で記事をHTML に書きだす
  • 取得した記事をソートするとき、配列”allArticles”が空だった時が一番作業が煮詰まった。
    jQuery.getJSON() が非同期通信するため、読み込みが終わっていないタイミングで配列を参照していたのが原因だった。
  • 取得した記事のソートはこの部分。”-item.datenum” のマイナスを記載すると、降順になる。

参考

sortBy()
http://www.elder-flower.com/blog/2015/04/sortby.html
sortBy() の使い方

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示する方法

何ができるか?

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示できる。

WordPress のテンプレートタグは使えないのか?

「複数サイト」という条件があると、使えない。

PHP でこれを付けると、同じドメインに限り記事を読み込めるが、「複数サイト」で読み込む方法が見つからなかった。

方法

jQuery で、WordPress のJSON を読み込む

“http://www.hogehoge.com/wp1/” にWordPress がインストールされている場合、次のURL でアクセスすると、JSON が取得できる。

“posts”以降の記述は、”_embed”で写真データを要求、”per_page=3” で記事を3つ取得

HTML の表示部分

JavaScript コード

複数ブログを読み込む

HTML の表示部分

JavaScript コード

Excel の表からHTML を書きたい

クライアントからリストを渡されて、それをHTML 化するとき、エディタでコピペするのは面倒だ。かといってデータベースを使うほどでもない時に、Excel を使う。

HTML構造

手順:

1)Excel で、品名、価格、コメントのリストを作成

表

2)Excel で、タグのセルではさまれた列に、それぞれのデータを貼り付け

HTML表 HTMLに表を貼り付け

3)タグを含んだセルを丸ごとコピーして、エディタで開いたHTML に貼り付け
例)

4)コードを整形

DreamWeaver CC
編集>コード>ソースフォーマットの適応

Eclipse
ソース>フォーマット
もしくは[Ctrl+Shift+F]ショートカット

小ネタ

ホームページから直接データを拾ってくる場合、表ならFirefox 限定で表選択(Ctrl + マウスドラッグ)ができる。

または、文章ダブルクリックで単語選択
トリプルクリックで段落選択できるので、これを利用する。