WP-APIを使ってみよう&No PHPテーマという考え方

PHP使わんでもいける WordPressテーマの話 2015 WordBench 奈良

はじめに

今日持って帰って欲しいもの • WP-APIという新しいAPIの存在 • JavaScriptで記事リストや検索機能を作るアイデア • 「Polymerすげぇ！」という気持ち • WordCamp Kansai 2015の参加確認メール

なまえ：おかもとひでたか いえ：きょうと しごと：PHPえんじにあ そのほか：WordCamp Kansai 2015広報 きになること：WP-API, React.js, Polymer,JSON-LD

1 WP-APIとは？

WP-APIとは？ • 「WordPressそのもの」のAPI • 投稿・固定ページ・メディア・コメントetc.. • コア機能実装予定のβ版プラグインが存在する

https://wordpress.org/plugins/json-rest-api/

• https://wordpress.org/plugins/json-rest-api/

2 とりあえず つかってみよう

↓ACCESS↓ http://bit.ly/1HE1nHe

• http://bit.ly/1HE1nHe

WP-API 実験場

URLを入れて・・・ Submit！

WP-APIがある時

サイトの情報が表示される

WP-APIが無い時

Try it! • http://wp-kyoto.net/ • http://www.aiship.jp/knowhow/ • http://demo.media-assembly-kit.com/

• http://wp-kyoto.net/
• http://www.aiship.jp/knowhow/
• http://demo.media-assembly-kit.com/

APIらしく データを 指定してみよう

↓ACCESS↓ http://bit.ly/1dEE7Sg

• http://bit.ly/1dEE7Sg

filterクエリ 実験場

１:取りたいデータを設定して・・・ ２:Submit！

記事リスト

RSSよりも 絞り込みが効く

Try it! http://wp-api.org/#posts_retrieve-posts_input

• http://wp-api.org/#posts_retrieve-posts_input

jQueryで いろいろと いじってみよう

↓ACCESS↓ http://bit.ly/1JLvxOM

• http://bit.ly/1JLvxOM

Click!!

Customize:)

3 こんなこともできる WP-API

1 No PHPなWebサイト

http://media-assembly-kit.com/

• http://media-assembly-kit.com/

Media Assembly Kit • WP-APIを活用したサイト構築サービス • PHPを使わないテーマも存在している • GitHubにテーマファイルも公開されている

http://media-assembly-kit.com/demo

• http://media-assembly-kit.com/demo

https://facebook.github.io/react/

• https://facebook.github.io/react/

React.js • Facebookが開発したJSライブラリ • 双方向ではなく１方向のデータフロー（Flux） • React-Routerなどでサイト構築も可能

https://www.polymer-project.org/1.0/

• https://www.polymer-project.org/1.0/

Polymer • 2015年のGoogle I/Oでついに1.0公開 • WebComponentsが（比較的）簡単に使える • もっと注目されるべき

2 モダンな検索フォーム

モダンな検索フォーム • JSを使ってAPI経由でデータを取得する • $.ajaxなどで非同期データ処理が可能 • 入力に即反応する検索フォームが作成可能

3 アプリ基盤

アプリ基盤としてのWordPress • 実は記事投稿とかもできちゃうWP-API • WordPressでデータ処理 アプリで表示・操作 • 今あるサイトをそのままアプリに転用！？

WP-APIの 今後

WP-APIの今後 • 現在のバージョンは1.2.2(2015/06/01時点) • GitHubでは2.0が開発進行中 • 2015年内のコア実装目指している・・・らしい

WP_Queryとの共存 • PHPの方が便利・早い時も多い • • PHP7.0やHHVMの方がいいかも・・・？ 用法用量に応じて使い分けるのが吉 • Above The FoldはPHPで • サブコンテンツはAPIでLazy loadする

というかNoPHPでは 公式テーマは多分ムリ

JSON-LD & WebComponent

http://bit.ly/1AFYAAf

• http://bit.ly/1AFYAAf

JSON-LD || 構造化データ http://bit.ly/1AFYAAf

• http://bit.ly/1AFYAAf

WebComponents || オリジナルHTMLタグ http://bit.ly/1AFYAAf

• http://bit.ly/1AFYAAf

つまり http://bit.ly/1AFYAAf

• http://bit.ly/1AFYAAf

SEOに強くて コーディング超楽な 未来のサイト構築方法 http://bit.ly/1AFYAAf

• http://bit.ly/1AFYAAf

https://www.polymer-project.org/1.0/

• https://www.polymer-project.org/1.0/

Polymer もっと流行れ https://www.polymer-project.org/1.0/

• https://www.polymer-project.org/1.0/

https://wordpress.org/plugins/ejls-easy-json-ld-setter/

• https://wordpress.org/plugins/ejls-easy-json-ld-setter/

https://wordpress.org/plugins/make-json-ld-for-customfields/

• https://wordpress.org/plugins/make-json-ld-for-custom-fields/

JSON-LDも もっと流行れ https://wordpress.org/plugins/make-json-ld-for-customfields/

• https://wordpress.org/plugins/make-json-ld-for-custom-fields/

おわりに （宣伝）

1 WordCampとは？

WordCampとは？ • WordPressのユーザーが集まるカンファレンス • WordPressに関する様々なセッションを開催 • 初心者〜コア開発者までが交流できる場所 • 日本では2014年に東京・関西の２地域で開催

WordCamp Kansai2015 • 2015年7月25日26日の土日開催 • 会場は大阪大学豊中キャンパス • 入場無料、定員両日５００名

2 2015年の見どころ

1 参加型！

参加型コンテンツが沢山！ • テーマ制作 • ユニットテスト／継続的インテグレーション • 初心者のためのWordPress.com入門 • etc.. 現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。

• http://WordPress.com

2 WordPress × ？

周辺技術も学べるセッション • GitHub • オープンデータ • 継続的インテグレーション／デプロイ • NPO／NGO／地域化活動 • コアコントリビューション 現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。

3 参加費無料！

3 参加方法

http://kansai.wordcamp.org/2015/

• http://kansai.wordcamp.org/2015/

https://kansai.wordcamp.org/2015/tickets/

• https://kansai.wordcamp.org/2015/tickets/

ぜひご参加を ٩( ‘ω’ )‫و‬