[WordPress]REST APIを使って記事の取得を行う

WordPress4.7から取り込まれたREST API v2を使った、記事へのアクセス方法です

記事の検索


直近の記事10件を取得


http://example.com/wp-json/wp/v2/posts

  • トップページのの末尾に”/wp-json/wp/v2/posts”を付ければ、記事がjson形式で取得できます

2ページ目を取得(11~20件目)


http://example.com/wp-json/wp/v2/posts?page=2

  • page=nパラメータを付ければnページ目の値が取得できます

1度に20件取得する(最大100まで指定可能)


http://example.com/wp-json/wp/v2/posts?per_page=20

  • 1ページ当たりの件数も指定可能ですが、指定できるのは1~20の値のみです

記事取得の開始位置オフセットを指定


http://example.com/wp-json/wp/v2/posts?offset=6

  • この為、?per_page=5&page=4と、?per_page=5&offset=15は同じ意味です
    (16件目から5件分のデータを取得します)

トータルで何ページ分あるか


トータルで何ページ分あるかは、jsonの応答データを見ても分からないが、HTTPヘッダで把握できる。

  • X-WP-Total: Postが全部で何件あるか
  • X-WP-TotalPages: 何ページあるか(1ページの件数はper_pageで指定)



[WordPress] Rest APIに関する情報サイト一覧

[WordPress] Rest APIに関する情報サイト一覧

オフィシャルのドキュメント


REST API Handbook

予備知識


WP REST API のドキュメント内の用語集を簡単に翻訳する
基本的な用語の説明

WP REST API ドキュメント Discovery
既に存在するREST API対応のWordPressで、何のAPIが使えるかの調べ方。

WordPress 4.7リリースでの仕様変更


wordpress 4.7でREST-APIの仕様が変更になったので合わせる

WordPress 4.7リリース前の記事


WP REST APIをいろいろ触ってみるハンズオン@WordBench東京のメモ書き
WordBench東京による勉強会のまとめ

WordBench東京 3月ハンズオン
上の勉強会のスライド
導入事例がある

WordPress REST APIで投稿の取得から新規投稿を行う
REST APIの基本的な導入と、認証・投稿処理までの説明

WordPressの新着記事をJSON形式で取得し外部サイトで表示する方法
RESTによる基本的な記事の取得と、PHPによるjsonデータの加工処理

WordPress REST APIにOAuth1.0aで認証して投稿する – KayaMemo
PHPからOAuth認証を行う方法

WordPress REST API で、カスタム投稿タイプなどの情報を取得する

WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法

WORDPRESS REST APIを使った投稿と更新
REST APIを使って記事を投稿する方法

WP REST APIで投稿を追加する

古い情報(WP REST API v1を元にしたドキュメント)


WP REST API を使ってみる(前編)

JSON REST API (WP API) プラグインを利用して ブログを API 化したり、そこから情報を取得して表示したり
2014年の記事なので古い



[WordPress]Lightningテーマでパンくずリストに記事名を出さない

WordPressのBootstrapベースのテーマである、Lightningでパンくずリストのカスタマイズを行います。

個別記事ページにを表示させた場合、パンくずリストの末尾に記事タイトルが表示されます。PCで表示したばあいは違和感がないのですが、スマホで表示させたときにタイトルをパンくずリストにタイトルが表示されているとファーストビューに表示される情報量が少なくなってしまいます。またパン屑リストのすぐ下に、h1タグの記事名が出るため、同じ情報が連続表示されてしまい違和感があります。

このため、パンくずリストに記事名を出さないよう修正してみます。

Lightningテーマでパンくずリストから記事タイトルを消す方法

今回改造するファイルは、module_panList.phpです。Lightningテーマでは、このファイルでパンくずリストの表示を制御しています。このファイルでは、全てのページのパンくずリスト表示をコントロールしていますが、今回回収したいのは個別記事なので、「 if ( is_single() ) 」の分岐部分を修正します。この分岐内を見ると、最後にget_the_title()で記事タイトルを取得しているため、この行をコメントアウトしてしまえばOKです。

具体的には、以下のような形でコメントアウトを行います。

変更前:
/* Post type
/*-------------------------------*/
if ( ... ) {
   ...
} else if ( is_single() ) {
   ...
   $panListHtml .= '<li><span>' . get_the_title() . '</span></li>';
} else if ...

変更後:
/* Post type
/*-------------------------------*/
if ( is_archive() || ( is_single() && !is_attachment()) ) {
   ...
} else if ( is_single() ) {
   ...
   // $panListHtml .= '<li><span>' . get_the_title() . '</span></li>';
} else if ...


Lightningテーマで個別ページからカテゴリ名を消す方法

また、上記以外に個別ページではカテゴリ名の表示が、タイトル直下とパンくずリストの両方に出てしまい、ファーストビューの表示エリアを無駄遣いしています。タイトル直下のカテゴリ名の表示についてはWordPressのフィルタでフックできるようになっているため、function.phpに下記のフィルタを追加すれば消すことができます。

下記の例では、個別ぺーじが表示されたときに限って表示を抑制させています。
// 個別記事のヘッダで、サイト名の直下にカテゴリ名を出さない
add_filter( 'lightning_pageTitHtml', 'my_lightning_pageTitHtml' );
function my_lightning_pageTitHtml( $titleHtml ) {
    if ( is_single() ) {
        return "";
    }
    return $titleHtml;
}



[WordPress]All in one SEO packでカスタムフィードからTwitterカード画像をセットする方法

WordPressでSEO対策や、Facebook/Twitterなどのソーシャルサイト向けのタグを一括設定できるプラグインとしてAll in one SEO packがあります。

このプラグインでは、OGPという記事の要約や画像などをSNSサイトへ正しく伝えるためのメタタグを容易に設定することができます。WordPressでECサイトなどを管理している場合、Twitterカードに商品の画像を表示できるためページへのアクセスアップが期待できます。OGPの仕様では「meta property=”og:image…」というメタタグでページのメイン画像を指定できます。Twitterカードの場合は、「meta name=”twitter:image”…」での管理になります。

ですが、商品の紹介ページなどでカスタムフィールドに商品画像を管理している場合、All in one SEO packプラグインのデフォルト設定ではカスタムフィールドにセットした画像が使用されません。

今回は、カスタムフィールドに設定された画像ファイル名を、All in one SEO packプラグインを使用時にog:imageやtwitter:imageに指定する方法を説明します。

All in one SEO packでog:imageにカスタムフィールドを指定する

WordPressの管理画面にログインし、左メニューの「All in one SEO -> ソーシャルメディア」をクリックします。
170102_2_1


画像設定のOG:Imageソースを選択欄を、”Image From Custom Field”に変更します。
また、「画像にはカスタムフィールドを利用する」の欄に、使用したいカスタムフィードのフィールド名を指定します。設定を行ったらページ上部にある「設定を更新」ボタンを忘れずに押してください。
170102_2_2


設定の更新が終わったら、下記のサイトでOG:Imageが正しく設定されているかを確認できます。
Twitter Card validator



また、Twitterカードは効果測定が行える分析ページが存在します。設定が終わったら、翌日に下記のページにアクセスするとツイートがどの程度拡散されたかや、クリックされた回数などを確認することができます。
https://analytics.twitter.com/