PHP使わんでもいけるWordPressテーマの話

2015 WordBench 奈良

はじめに

今日持って帰って欲しいもの

• WP-APIという新しいAPIの存在

• JavaScriptで記事リストや検索機能を作るアイデア

• 「Polymerすげぇ！」という気持ち

• WordCamp Kansai 2015の参加確認メール

なまえ：おかもとひでたか

いえ：きょうと

しごと：PHPえんじにあ

そのほか：WordCamp Kansai 2015広報

きになること：WP-API, React.js, Polymer,JSON-LD

1WP-APIとは？

WP-APIとは？

• 「WordPressそのもの」のAPI

• 投稿・固定ページ・メディア・コメントetc..

• コア機能実装予定のβ版プラグインが存在する

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

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

↓ACCESS↓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/

APIらしくデータを

指定してみよう

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

filterクエリ 実験場

２:Submit！

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

記事リスト

RSSよりも 絞り込みが効く

Try it!

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

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

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

Click!!

Customize:)

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

1No PHPなWebサイト

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

Media Assembly Kit

• WP-APIを活用したサイト構築サービス

• PHPを使わないテーマも存在している

• GitHubにテーマファイルも公開されている

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

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

React.js

• Facebookが開発したJSライブラリ

• 双方向ではなく１方向のデータフロー（Flux）

• React-Routerなどでサイト構築も可能

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

WebComponents ||

オリジナルHTMLタグ

http://bit.ly/1AFYAAf

つまり

http://bit.ly/1AFYAAf

SEOに強くて コーディング超楽な 未来のサイト構築方法

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

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

Polymer もっと流行れ

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

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

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

JSON-LDも もっと流行れ

おわりに（宣伝）

1WordCampとは？

WordCampとは？

• WordPressのユーザーが集まるカンファレンス

• WordPressに関する様々なセッションを開催

• 初心者～コア開発者までが交流できる場所

• 日本では2014年に東京・関西の２地域で開催

WordCamp Kansai2015

• 2015年7月25日26日の土日開催

• 会場は大阪大学豊中キャンパス

• 入場無料、定員両日５００名

22015年の見どころ

1参加型！

参加型コンテンツが沢山！

• テーマ制作

• ユニットテスト／継続的インテグレーション

• 初心者のためのWordPress.com入門

• etc..

現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。

2WordPress × ？

周辺技術も学べるセッション• GitHub

• オープンデータ

• 継続的インテグレーション／デプロイ

• NPO／NGO／地域化活動

• コアコントリビューション

現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。

3参加費無料！

3参加方法

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

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

ぜひご参加を

٩( ‘ω’ )و