3.6What’s new! TwentyThirteen + WordPress3.6

2013.6.15上村崇

@uemera

WordPressの次期バージョン3.6を一挙レビュー！「コンテンツ編集」を強化した新しいWordPressを見よ！

最近のオレ

PHPフレームワーク(FuelPHP)

ExcelVBA

サーバーインフラ(Webサーバ構築など)

WordPress

JavaScript、jQuery

勉強会準備(WordBench等)

ネットショップ支援(CS-Cart、SoyCMS)

@uemera

uemura

フリーランスのシステムエンジニアです。西宮在住。

上村 崇

超簡単WordPressテーマdoshiroutoを作りました＼(^o^)／

WordPressの地域勉強会”WordBench神戸”に来てね!

このプレゼンでは、

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

質問

・みなさんはどういう立場の人ですか？

・最新版のWordPress(3.5.1)使ってますか？

・3.6のBeta3を試してみた人はどれくらいいますか？

WordPress3.6はまだリリースされていません。現時点では5/11にリリースされたBeta3が最新です。

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

過去のバージョンを振り返ってみましょう。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

バージョン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月か？

進捗

2013/6/15時点74%

1. 新テーマ(外観)の登場。　新デフォルトテーマTwentyThirteenにより、見た目が変わります。

2. 改訂履歴機能が強化されます。(リビジョン比較)　→ 誰が修正したのかが分かります。記事の比較もできます。

3. 自動保存機能 (AutoSave)　→ インターネット回線が途切れても大丈夫！

4. 投稿ロック (PostLocking) → 自分が編集するときに、他の編集者に編集させないようにできます。

5. メニュー機能の使い勝手改善

6. 投稿フォーマットの刷新 (をする予定だった)　→ 投稿画面に投稿フォーマットのボタンが設けられました。

「ver3.6はコンテンツ編集機能に重点を置いて開発されています。」

3.6ではこんな機能が搭載されます!

新テーマ TwentyThirteen

これは現行テーマのTwentyTwelve画像がない

サイドバーあり

新テーマ TwentyThirteen

特徴・あかぬけたデザイン

・サイドブロックがフッタ部分に移動しました。

・Webフォントの採用で、絵文字のような小さいアイコンが表示されます。

・レスポンシブデザインを採用しています。(パソコン、スマホ両対応)

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

.categories-­‐links  a:first-­‐child:before  {   content:  "\f301";}

Webフォントのアイコンが随所に使われています。

.entry-­‐meta  .date  a:before  {   content:  "\f303";}

TwentyThirteenの見た目：通常の投稿

Imageポスト

画像ファイルを掲載するときに使います。

Galleryポスト

複数の画像ファイルを掲載するときに使います。

Linkポスト

記事投稿時にリンクURL専用の入力欄があります。

記事のタイトルをクリックすると登録したURLにジャンプします。(通常の投稿では記事そのものにリンクしますが、リンク投稿の場合は登録したリンク先にジャンプします。)

Videoポスト

YouTube等から動画ファイルを埋め込むことができます。

YouTubeのURLを投稿するだけで埋め込み記事になります。

編集画面上でも埋め込みになります。

Audioポスト

音声ファイルを埋め込むことができます。

編集画面上でも埋め込みになります。

Chatポスト

たろう: こんにちは

というような記事を書けば、チャット形式に自動的に整形してくれます。

Statusポスト

Twitterのツイートのようなもの。

Quoteポスト

引用記事と引用元URLを投稿すると自動的に引用記事になります。

Asideポスト

メモのような感覚で気軽に残せるもの。

タイトルは表示されません。

改訂履歴機能の強化

改訂履歴の比較(リビジョン比較)

記事

比較

更新&保存

記事の差分をビジュアルに比較することができます。

更新&保存 更新&保存

比較

記事のどこが変化したか分かる！

消した箇所は赤色 追加した箇所は緑色

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

自動保存機能(AutoSave)

aaa

aaa

自動保存機能の動作:

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

・記事を書いている途中に、上司に呼ばれて会議に出るはめに　なったとき (セッションの有効期限切れ)・サンドイッチを買ってすぐに戻ってくるつもりが、ランチ　ミーティングになってしまったとき。 (セッションの有効期限切れ)・電車がトンネルにはいったとき。(ネットワーク回線の切断)・不注意による画面遷移・ブラウザの異常終了・キーボードの上を猫が歩く・子供がよだれを垂らす

自動保存はモダンブラウザのWebStorage(SessionStorage)を使うことで実現しています。( IE8以降、Safari5以降 )

自動保存機能で救われるのはこんなケース

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

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

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"        }}

投稿ロック(PostLocking)

自分が記事を書いている時に、別の編集者が同じ記事を編集しようとしてしまったら？その危険を回避する仕組みが”投稿ロック”です。

編 集 中 Bさんは、Aさんが編集中であることを知ることができます。誰が編集しているか分かるので、干渉を避けられます。

これを無視して強引に編集権を奪うこともできます。

Aさん

Bさん

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

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

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

編集権を奪われた中本氏の管理画面。編集権を奪われた側のユーザにもポップアップが出ます。

一方、編集権を奪われた中本氏の投稿画面は...

投稿ロックのしくみ

編 集 中

Aさん Bさん

WordPressサーバー

heartbeat

1. Aさんが編集中は15秒おきに　 heartbeatを送信している。 (Aさんロック中のステータス)

3. Bさんに編集権が移ったので、　lock_errorをAさんのブラウザに返す。　→ Aさんの編集権がなくなる。

2. Bさんが編集権を　奪取した

編集中ステータスはpostmetaテーブルの_edit_lock キーに保存されます。

メニュー機能改善

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

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

Ver3.5のメニューを振り返ってみましょう。

1. メニュー名を入力2. メニューを作成

3. メニューに入れるアイテムを選ぶ (リンク、固定ページ、カテゴリー)

3.5のメニューの特徴・左からではなく右ブロックから入力させるので分かりにくい。・新規作成モードからメニューを作ることになるので、　先にメニュー名を決めないと始められません。

これが新しくなったver3.6のメニュー1. 新規作成ではなく既存メニュー編集なので、　メニュー名にはすでにデフォルト値が入っている。

2. メニューを作成(なぜか同じボタンが下にもある？)

3. メニューに入れるアイテムを選ぶ (固定ページ、 リンク、 カテゴリー) カタチはアコーディオン型に変更された。

・新規作成モードではなく、既存メニューの編集モードから始まるので、　メニュー名を考えなくてもとりあえずカスタマイズできるようになりました。・相変わらず、左からではなく右ブロックから入力させる形式。・UIは3.5よりも良くなったけど、まだ迷走している感じがします。

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

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

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

Ver3.5の投稿フォーマット

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

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

・テストする人手が足りない。

・投稿フォーマットのでかいボタンを配置すると、　投稿画面がごちゃごちゃしてしまいシンプルさに欠ける。

・投稿フォーマットUIはcoreには含めず、プラグインで対応する。

＿人人人人人人人人人＿＞　突然の仕様変更　＜‾Y^Y^Y^Y^Y^Y^Y^Y‾

・テストする人手が足りない。

・投稿フォーマットのでかいボタンを配置すると、　投稿画面がごちゃごちゃしてしまいシンプルさに欠ける。

・投稿フォーマットUIはcoreには含めず、プラグインで対応する。

＿人人人人人人人人人＿＞　突然の仕様変更　＜‾Y^Y^Y^Y^Y^Y^Y^Y‾

その他の変更点

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)

・テーマアップデート時、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)

・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のTrachttp://core.trac.wordpress.org/report/6で追うことができます。

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

3.6待ち遠しいですね><@uemera uemura

ありがとうございました。