WordPressの次期バージョン3.6の解説と、新デフォルトテーマTwentyThirteenの解説です

1. 3.6What’s new!
TwentyThirteen + WordPress3.6
2013.6.15
上村崇
@uemera
WordPressの次期バージョン3.6を一挙レビュー！
「コンテンツ編集」を強化した新しいWordPressを見よ！

2. 最近のオレ
PHPフレームワーク
(FuelPHP)
ExcelVBA
サーバーインフラ
(Webサーバ構築など)
WordPress
JavaScript、jQuery
勉強会準備
(WordBench等)
ネットショップ支援
(CS-Cart、SoyCMS)
@uemera
uemura
フリーランスのシステムエンジニアです。西宮在住。
上村 崇

3. 超簡単WordPressテーマdoshiroutoを作りました＼(^o^)／
WordPressの地域勉強会 WordBench神戸 に来てね!

4. このプレゼンでは、
次期バージョンであるWordPress3.6と、
新デフォルトテーマのTwentyThirteen
について解説します。

5. 質問
・みなさんはどういう立場の人ですか？
・最新版のWordPress(3.5.1)使ってますか？
・3.6のBeta3を試してみた人はどれくらいいますか？

6. WordPress3.6はまだリリースされていません。
現時点では5/11にリリースされたBeta3が最新です。
新デフォルトテーマTwentyThirteenも、ver3.6に同梱される
ものなのでまだリリースされていません。
ただし、WordPress.comではTwentyThirteenがすでに使えるようになっています。

7. 過去のバージョンを振り返ってみましょう。
3.0からの歴史
Ver リリース 主な変更
3.0 2010/6 マルチサイト機能、カスタム投稿タイプ、TwentyTen
3.1 2011/2 adminバー、投稿フォーマット、テーマ検索
3.2 2011/7 フルスクリーン編集、TwentyEleven、PHP5.2.4以上
3.3 2011/12 新メディアアップローダー
3.4 2012/6 テーマカスタマイザー
3.5 2012/12 RETINA対応、カラーピッカー、TwentyTwelve

8. バージョン3.6 リリーススケジュール
2013/ 1/ 2 要件確定
2013/ 1/ 9 開発開始
2013/ 4/ 4 Beta1
2013/ 4/29 Beta2
2013/ 5/ 3 → 5/11 Beta3
2013/ 5/ 8 → ？？？ リリース候補1 (RC1)
2013/ 5/16 → ？？？ リリース候補2 (RC2)
2013/ 5/20 → ？？？ リリース
いろいろあって遅れている模様。リリースは7月か？

9. 進捗
2013/6/15時点
74%

10. 1. 新テーマ(外観)の登場。
新デフォルトテーマTwentyThirteenにより、見た目が変わります。
2. 改訂履歴機能が強化されます。(リビジョン比較)
→ 誰が修正したのかが分かります。記事の比較もできます。
3. 自動保存機能 (AutoSave)
→ インターネット回線が途切れても大丈夫！
4. 投稿ロック (PostLocking)
→ 自分が編集するときに、他の編集者に編集させないようにできます。
5. メニュー機能の使い勝手改善
6. 投稿フォーマットの刷新 (をする予定だった)
→ 投稿画面に投稿フォーマットのボタンが設けられました。
「ver3.6はコンテンツ編集機能に重点を置いて開発されています。」
3.6ではこんな機能が搭載されます!

11. 新テーマ TwentyThirteen

12. これは現行テーマのTwentyTwelve
画像がない
サイドバーあり

13. 新テーマ TwentyThirteen
特 徴
・あかぬけたデザイン
・サイドブロックがフッタ部分に移動しました。
・Webフォントの採用で、絵文字のような小さいアイコンが表示されます。
・レスポンシブデザインを採用しています。(パソコン、スマホ両対応)

14. TwentyTwelveではサイドバーに配置されていた
ウィジェットがフッタに移動しました。

15. .categories-­‐links
a:first-­‐child:before
{
content:
"f301";
}
Webフォントのアイコンが随所に使われています。
.entry-­‐meta
.date
a:before
{
content:
"f303";
}

16. TwentyThirteenの見た目：通常の投稿

17. Imageポスト
画像ファイルを掲載する
ときに使います。

18. Galleryポスト
複数の画像ファイルを掲載する
ときに使います。

19. Linkポスト
記事投稿時にリンクURL専用の入力
欄があります。
記事のタイトルをクリックすると登録
したURLにジャンプします。
(通常の投稿では記事そのものに
リンクしますが、リンク投稿の
場合は登録したリンク先にジャンプし
ます。)

20. Videoポスト
YouTube等から動画ファイルを埋
め込むことができます。
YouTubeのURLを投稿するだけ
で埋め込み記事になります。
編集画面上でも埋め込みになりま
す。

21. Audioポスト
音声ファイルを埋め込むことが
できます。
編集画面上でも埋め込みになります。

22. Chatポスト
たろう: こんにちは
というような記事を書けば、
チャット形式に自動的に整形
してくれます。

23. Statusポスト
Twitterのツイートのようなもの。

24. Quoteポスト
引用記事と引用元URLを投稿
すると自動的に引用記事に
なります。

25. Asideポスト
メモのような感覚で気軽に残せる
もの。
タイトルは表示されません。

26. 改訂履歴機能の強化

27. 改訂履歴の比較(リビジョン比較)
記事
比 較
更新&保存
記事の差分をビジュアルに比較することができます。
更新&保存 更新&保存
比 較

28. 記事のどこが変化したか分かる！
消した箇所は赤色 追加した箇所は緑色

29. リビジョンに投稿者アイコンが表示されるようになりました。

30. 自動保存機能(AutoSave)

31. aaa
aaa
自動保存機能の動作:
書きかけの投稿画面を開いたまま席を離れている間に、セッションが切れたら再度ログインを
促すポップアップが出現します。
再ログイン後も編集中の記事は失われていないので、そのまま続きを書くことができます。

32. ・記事を書いている途中に、上司に呼ばれて会議に出るはめに
なったとき (セッションの有効期限切れ)
・サンドイッチを買ってすぐに戻ってくるつもりが、ランチ
ミーティングになってしまったとき。 (セッションの有効期限切れ)
・電車がトンネルにはいったとき。(ネットワーク回線の切断)
・不注意による画面遷移
・ブラウザの異常終了
・キーボードの上を猫が歩く
・子供がよだれを垂らす
自動保存はモダンブラウザのWebStorage(SessionStorage)を使うこ
とで実現しています。
( IE8以降、Safari5以降 )
自動保存機能で救われるのはこんなケース

33. 自動保存機能のしくみ:
管理画面にログインしたとき、
CookieにWordPressのセッション情報が保存されます。
ブラウザのインスペクタを見ると、Cookieが保存されているのが分かります。
このCookieにより2日間ログイン状態が維持されます。
「ログイン状態を保存する」にチェックをつけてログインした場合は
14日間維持されます。
このCookieの有効期限が切れたときに、自動保存機能が効果を発揮します。

34. SessionStorageもインスペクタで見ることができます。
記事の内容がjson形式で保存されていることが分かります。

35. SessionStorageもインスペクタで見ることができます。
記事の内容がjson形式で保存されていることが分かります。
{
"post_178":
{
"_format_audio_embed":
"",
"_format_image":
"",
"_format_link_url":
"",
"_format_quote_source_name":
"",
"_format_quote_source_url":
"",
"_format_url":
"",
"_format_video_embed":
"",
"action":
"autosave",
"autosave":
true,
"autosavenonce":
"e49ecfb454",
"catslist":
"1",
"comment_status":
"open",
"content":
"本文本文本文本文本文本文本文",
"excerpt":
"",
"ping_status":
"open",
"post_author":
"1",
"post_format":
"",
"post_id":
"178",
"post_title":
"タイトル",
"post_type":
"post",
"save_time":
1370945158804,
"status":
"draft"
}
}

36. 投稿ロック(PostLocking)

37. 自分が記事を書いている時に、別の編集者が同じ記事を
編集しようとしてしまったら？
その危険を回避する仕組みが 投稿ロック です。
編 集 中 Bさんは、Aさんが編集中である
ことを知ることができます。
誰が編集しているか分かるので、
干渉を避けられます。
これを無視して強引に編集権を奪
うこともできます。
Aさん
Bさん

38. 投稿一覧画面で、誰が編集中であるかが分かります。

39. 誰が編集中であるか分かっているにも関わらず、強引に編
集しようとすると、ポップアップが表示され、キャンセル
するか編集権を奪うかを聞いてきます。
誰が編集中であるか分かっているにもかかわらず、強引に
編集しようとすると、ポップアップが表示されます。
キャンセルするか編集権を奪うかを聞いてきます。

40. 編集権を奪われた中本氏の管理画面。編集権を奪われた側のユーザにもポップアップが出ます。
一方、編集権を奪われた中本氏の投稿画面は...

41. 投稿ロックのしくみ
編 集 中
Aさん Bさん
WordPressサーバー
heartbeat
1. Aさんが編集中は15秒おきに
heartbeatを送信している。
(Aさんロック中のステータス)
3. Bさんに編集権が移ったので、
lock_errorをAさんのブラウザに返す。
→ Aさんの編集権がなくなる。
2. Bさんが編集権を
奪取した
編集中ステータスは
postmetaテーブルの
_edit_lock キーに保存されます。

42. メニュー機能改善

43. WordPressのメニューバー。
表示する項目を自由に設定出来ます。
設定は管理画面から。
WordPressのメニューバー。
表示する項目を自由に設定出来ます。
管理画面で設定します。

44. Ver3.5のメニューを振り返ってみましょう。
1. メニュー名を入力
2. メニューを作成
3. メニューに入れるアイテムを選ぶ
(リンク、固定ページ、カテゴリー)
3.5のメニューの特徴
・左からではなく右ブロックから入力させるので分かりにくい。
・新規作成モードからメニューを作ることになるので、
先にメニュー名を決めないと始められません。

45. これが新しくなったver3.6のメニュー
1. 新規作成ではなく既存メニュー編集なので、
メニュー名にはすでにデフォルト値が入っている。
2. メニューを作成
(なぜか同じボタンが下にもある？)
3. メニューに入れるアイテムを選ぶ
(固定ページ、 リンク、 カテゴリー)
カタチはアコーディオン型に変更された。
・新規作成モードではなく、既存メニューの編集モードから始まるので、
メニュー名を考えなくてもとりあえずカスタマイズできるようになりました。
・相変わらず、左からではなく右ブロックから入力させる形式。
・UIは3.5よりも良くなったけど、まだ迷走している感じがします。

46. 投稿フォーマットの刷新
(をする予定だった)

47. ver3.5の投稿フォーマットのデフォルトは
・標準
・アサイド
・画像
・リンク
・引用
・ステータス
の6種類。
ver3.5の投稿フォーマットのデフォルトは
・標準
・アサイド
・画像
・リンク
・引用
・ステータス
の6種類。
Ver3.5の投稿フォーマット

48. ver3.6(Beta3)のフォーマット。
上部に移動して見やすくなりました。
「Gallery」「Video」「Audio」「Chat」が増えました。
ver3.6(Beta3)のフォーマット。
上部に移動して見やすくなりました。
「Gallery」「Video」「Audio」「Chat」が増えました。

50. ・テストする人手が足りない。
・投稿フォーマットのでかいボタンを配置すると、
投稿画面がごちゃごちゃしてしまいシンプルさに欠ける。
・投稿フォーマットUIはcoreには含めず、プラグインで対応する。
＿人人人人人人人人人＿
＞ 突然の仕様変更 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣

51. ・テストする人手が足りない。
・投稿フォーマットのでかいボタンを配置すると、
投稿画面がごちゃごちゃしてしまいシンプルさに欠ける。
・投稿フォーマットUIはcoreには含めず、プラグインで対応する。
＿人人人人人人人人人＿
＞ 突然の仕様変更 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣

52. その他の変更点

53. jQueryのバージョンが 1.8.3 → 1.10.1 になりました。(#24426)
jQuery1.9で廃止されたメソッドが多くあるので、3.6にバージョンアップするとき
は要注意です。 プラグインが動かなくなる可能性があります。
ただし、互換性維持のためjquery-migrate.js もあわせて読み込んでいるので、そん
なに心配しなくてもいいかも知れません。
jQuery 1.8 → 1.9の主な変更点
$.browser() 廃止
$.live()廃止
$.die()廃止
$.sub()廃止
$.toggle(fn1(),fn2(),[...fnN()]) 廃止
$.add()変更
$.before()変更
$.after()変更
その他の変更点(1)

54. ・テーマアップデート時、WordPressの最低動作バージョンをチェックする
機構を設ける。(#13780)
・the_extra_content() を the_remaining_content() に名称変更。 (#23877)
・タイトルを決める必要がないStatusやAsideの投稿のために、タイトルを自動で
生成する。(#24011)
・引数の数が多い関数の引数array化。 (#24202)
例: get_content_media(
$type, &$content, $html = true, $remove = false, $limit = 0 )
・ユーザープロフィールからIM入力欄を削除。 (#11541)
・コメントフォームのHTML5化。 (#15080)
その他の変更点(2)

55. ・wp_unset_object_terms() の新設。 (#15475)
・管理画面で使っているjQueryを、プラグインで勝手に上書きされないように
する。(#22896)
・flic.kr のURLを貼るだけで画像を埋め込みできるようにする。(#23052)
・新規追加API "WP Heartbeat" (#23216)
・get_the_audio()、get_the_video()などのメディア系関数追加。 (#23572)
・chat内容を構造化データに変換する get_the_chat() 追加。 (#22625)
その他の変更点(3)
3.6に関する変更の詳細はWordPressのTrac
http://core.trac.wordpress.org/report/6
で追うことができます。

56. 最後に:
iPhoneアプリも更新があります。
WordPress for iOS はVersion3.6がリリースされています。
・デザインが刷新されました。
・新規投稿作成へのステップがより簡単になりました。

57. 3.6待ち遠しいですね><
@uemera uemura
ありがとうございました。