0
3.6What’s new!TwentyThirteen + WordPress3.62013.6.15上村崇@uemeraWordPressの次期バージョン3.6を一挙レビュー!「コンテンツ編集」を強化した新しいWordPressを見よ!
最近のオレPHPフレームワーク(FuelPHP)ExcelVBAサーバーインフラ(Webサーバ構築など)WordPressJavaScript、jQuery勉強会準備(WordBench等)ネットショップ支援(CS-Cart、SoyCMS)@u...
超簡単WordPressテーマdoshiroutoを作りました\(^o^)/WordPressの地域勉強会 WordBench神戸 に来てね!
このプレゼンでは、次期バージョンであるWordPress3.6と、新デフォルトテーマのTwentyThirteenについて解説します。
質問・みなさんはどういう立場の人ですか?・最新版のWordPress(3.5.1)使ってますか?・3.6のBeta3を試してみた人はどれくらいいますか?
WordPress3.6はまだリリースされていません。現時点では5/11にリリースされたBeta3が最新です。新デフォルトテーマTwentyThirteenも、ver3.6に同梱されるものなのでまだリリースされていません。ただし、WordPre...
過去のバージョンを振り返ってみましょう。3.0からの歴史Ver リリース 主な変更3.0 2010/6 マルチサイト機能、カスタム投稿タイプ、TwentyTen3.1 2011/2 adminバー、投稿フォーマット、テーマ検索3.2 2011/...
バージョン3.6 リリーススケジュール2013/ 1/ 2 要件確定2013/ 1/ 9 開発開始2013/ 4/ 4 Beta12013/ 4/29 Beta22013/ 5/ 3 → 5/11 Beta32013/ 5/ 8 → ??? リ...
進捗2013/6/15時点74%
1. 新テーマ(外観)の登場。 新デフォルトテーマTwentyThirteenにより、見た目が変わります。2. 改訂履歴機能が強化されます。(リビジョン比較) → 誰が修正したのかが分かります。記事の比較もできます。3. 自動保存機能 (Aut...
新テーマ TwentyThirteen
これは現行テーマのTwentyTwelve画像がないサイドバーあり
新テーマ TwentyThirteen特 徴・あかぬけたデザイン・サイドブロックがフッタ部分に移動しました。・Webフォントの採用で、絵文字のような小さいアイコンが表示されます。・レスポンシブデザインを採用しています。(パソコン、スマホ両対応)
TwentyTwelveではサイドバーに配置されていたウィジェットがフッタに移動しました。
.categories-­‐links	  a:first-­‐child:before	  {	   content:	  "f301";}Webフォントのアイコンが随所に使われています。.entry-­‐meta	  .date	  a:b...
TwentyThirteenの見た目:通常の投稿
Imageポスト画像ファイルを掲載するときに使います。
Galleryポスト複数の画像ファイルを掲載するときに使います。
Linkポスト記事投稿時にリンクURL専用の入力欄があります。記事のタイトルをクリックすると登録したURLにジャンプします。(通常の投稿では記事そのものにリンクしますが、リンク投稿の場合は登録したリンク先にジャンプします。)
VideoポストYouTube等から動画ファイルを埋め込むことができます。YouTubeのURLを投稿するだけで埋め込み記事になります。編集画面上でも埋め込みになります。
Audioポスト音声ファイルを埋め込むことができます。編集画面上でも埋め込みになります。
Chatポストたろう: こんにちはというような記事を書けば、チャット形式に自動的に整形してくれます。
StatusポストTwitterのツイートのようなもの。
Quoteポスト引用記事と引用元URLを投稿すると自動的に引用記事になります。
Asideポストメモのような感覚で気軽に残せるもの。タイトルは表示されません。
改訂履歴機能の強化
改訂履歴の比較(リビジョン比較)記事比 較更新&保存記事の差分をビジュアルに比較することができます。更新&保存 更新&保存比 較
記事のどこが変化したか分かる!消した箇所は赤色 追加した箇所は緑色
リビジョンに投稿者アイコンが表示されるようになりました。
自動保存機能(AutoSave)
aaaaaa自動保存機能の動作:書きかけの投稿画面を開いたまま席を離れている間に、セッションが切れたら再度ログインを促すポップアップが出現します。再ログイン後も編集中の記事は失われていないので、そのまま続きを書くことができます。
・記事を書いている途中に、上司に呼ばれて会議に出るはめに なったとき (セッションの有効期限切れ)・サンドイッチを買ってすぐに戻ってくるつもりが、ランチ ミーティングになってしまったとき。 (セッションの有効期限切れ)・電車がトンネルにはいった...
自動保存機能のしくみ:管理画面にログインしたとき、CookieにWordPressのセッション情報が保存されます。ブラウザのインスペクタを見ると、Cookieが保存されているのが分かります。このCookieにより2日間ログイン状態が維持されます...
SessionStorageもインスペクタで見ることができます。記事の内容がjson形式で保存されていることが分かります。
SessionStorageもインスペクタで見ることができます。記事の内容がjson形式で保存されていることが分かります。{	  	  	  	  "post_178":	  {	  	  	  	  	  	  	  	  "_format_...
投稿ロック(PostLocking)
自分が記事を書いている時に、別の編集者が同じ記事を編集しようとしてしまったら?その危険を回避する仕組みが 投稿ロック です。編 集 中 Bさんは、Aさんが編集中であることを知ることができます。誰が編集しているか分かるので、干渉を避けられます。こ...
投稿一覧画面で、誰が編集中であるかが分かります。
誰が編集中であるか分かっているにも関わらず、強引に編集しようとすると、ポップアップが表示され、キャンセルするか編集権を奪うかを聞いてきます。誰が編集中であるか分かっているにもかかわらず、強引に編集しようとすると、ポップアップが表示されます。キャ...
編集権を奪われた中本氏の管理画面。編集権を奪われた側のユーザにもポップアップが出ます。一方、編集権を奪われた中本氏の投稿画面は...
投稿ロックのしくみ編 集 中Aさん BさんWordPressサーバーheartbeat1. Aさんが編集中は15秒おきに  heartbeatを送信している。(Aさんロック中のステータス)3. Bさんに編集権が移ったので、 lock_error...
メニュー機能改善
WordPressのメニューバー。表示する項目を自由に設定出来ます。設定は管理画面から。WordPressのメニューバー。表示する項目を自由に設定出来ます。管理画面で設定します。
Ver3.5のメニューを振り返ってみましょう。1. メニュー名を入力2. メニューを作成3. メニューに入れるアイテムを選ぶ(リンク、固定ページ、カテゴリー)3.5のメニューの特徴・左からではなく右ブロックから入力させるので分かりにくい。・新規...
これが新しくなったver3.6のメニュー1. 新規作成ではなく既存メニュー編集なので、 メニュー名にはすでにデフォルト値が入っている。2. メニューを作成(なぜか同じボタンが下にもある?)3. メニューに入れるアイテムを選ぶ(固定ページ、 リン...
投稿フォーマットの刷新(をする予定だった)
ver3.5の投稿フォーマットのデフォルトは・標準・アサイド・画像・リンク・引用・ステータスの6種類。ver3.5の投稿フォーマットのデフォルトは・標準・アサイド・画像・リンク・引用・ステータスの6種類。Ver3.5の投稿フォーマット
ver3.6(Beta3)のフォーマット。上部に移動して見やすくなりました。「Gallery」「Video」「Audio」「Chat」が増えました。ver3.6(Beta3)のフォーマット。上部に移動して見やすくなりました。「Gallery」「...
・テストする人手が足りない。・投稿フォーマットのでかいボタンを配置すると、 投稿画面がごちゃごちゃしてしまいシンプルさに欠ける。・投稿フォーマットUIはcoreには含めず、プラグインで対応する。_人人人人人人人人人_> 突然の仕様変更 < ̄Y^...
・テストする人手が足りない。・投稿フォーマットのでかいボタンを配置すると、 投稿画面がごちゃごちゃしてしまいシンプルさに欠ける。・投稿フォーマットUIはcoreには含めず、プラグインで対応する。_人人人人人人人人人_> 突然の仕様変更 < ̄Y^...
その他の変更点
jQueryのバージョンが 1.8.3 → 1.10.1 になりました。(#24426)jQuery1.9で廃止されたメソッドが多くあるので、3.6にバージョンアップするときは要注意です。 プラグインが動かなくなる可能性があります。ただし、互換...
・テーマアップデート時、WordPressの最低動作バージョンをチェックする機構を設ける。(#13780)・the_extra_content() を the_remaining_content() に名称変更。 (#23877)・タイトルを決...
・wp_unset_object_terms() の新設。 (#15475)・管理画面で使っているjQueryを、プラグインで勝手に上書きされないようにする。(#22896)・flic.kr のURLを貼るだけで画像を埋め込みできるようにする。(...
最後に:iPhoneアプリも更新があります。WordPress for iOS はVersion3.6がリリースされています。・デザインが刷新されました。・新規投稿作成へのステップがより簡単になりました。
3.6待ち遠しいですね><@uemera uemuraありがとうございました。
What's new! TwentyThirteen + WordPress3.6
Upcoming SlideShare
Loading in...5
×

What's new! TwentyThirteen + WordPress3.6

9,518

Published on

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

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,518
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
5
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "What's new! TwentyThirteen + WordPress3.6"

  1. 1. 3.6What’s new!TwentyThirteen + WordPress3.62013.6.15上村崇@uemeraWordPressの次期バージョン3.6を一挙レビュー!「コンテンツ編集」を強化した新しいWordPressを見よ!
  2. 2. 最近のオレPHPフレームワーク(FuelPHP)ExcelVBAサーバーインフラ(Webサーバ構築など)WordPressJavaScript、jQuery勉強会準備(WordBench等)ネットショップ支援(CS-Cart、SoyCMS)@uemerauemuraフリーランスのシステムエンジニアです。西宮在住。上村 崇
  3. 3. 超簡単WordPressテーマdoshiroutoを作りました\(^o^)/WordPressの地域勉強会 WordBench神戸 に来てね!
  4. 4. このプレゼンでは、次期バージョンであるWordPress3.6と、新デフォルトテーマのTwentyThirteenについて解説します。
  5. 5. 質問・みなさんはどういう立場の人ですか?・最新版のWordPress(3.5.1)使ってますか?・3.6のBeta3を試してみた人はどれくらいいますか?
  6. 6. WordPress3.6はまだリリースされていません。現時点では5/11にリリースされたBeta3が最新です。新デフォルトテーマTwentyThirteenも、ver3.6に同梱されるものなのでまだリリースされていません。ただし、WordPress.comではTwentyThirteenがすでに使えるようになっています。
  7. 7. 過去のバージョンを振り返ってみましょう。3.0からの歴史Ver リリース 主な変更3.0 2010/6 マルチサイト機能、カスタム投稿タイプ、TwentyTen3.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. 8. バージョン3.6 リリーススケジュール2013/ 1/ 2 要件確定2013/ 1/ 9 開発開始2013/ 4/ 4 Beta12013/ 4/29 Beta22013/ 5/ 3 → 5/11 Beta32013/ 5/ 8 → ??? リリース候補1 (RC1)2013/ 5/16 → ??? リリース候補2 (RC2)2013/ 5/20 → ??? リリースいろいろあって遅れている模様。リリースは7月か?
  9. 9. 進捗2013/6/15時点74%
  10. 10. 1. 新テーマ(外観)の登場。 新デフォルトテーマTwentyThirteenにより、見た目が変わります。2. 改訂履歴機能が強化されます。(リビジョン比較) → 誰が修正したのかが分かります。記事の比較もできます。3. 自動保存機能 (AutoSave) → インターネット回線が途切れても大丈夫!4. 投稿ロック (PostLocking)→ 自分が編集するときに、他の編集者に編集させないようにできます。5. メニュー機能の使い勝手改善6. 投稿フォーマットの刷新 (をする予定だった) → 投稿画面に投稿フォーマットのボタンが設けられました。「ver3.6はコンテンツ編集機能に重点を置いて開発されています。」3.6ではこんな機能が搭載されます!
  11. 11. 新テーマ TwentyThirteen
  12. 12. これは現行テーマのTwentyTwelve画像がないサイドバーあり
  13. 13. 新テーマ TwentyThirteen特 徴・あかぬけたデザイン・サイドブロックがフッタ部分に移動しました。・Webフォントの採用で、絵文字のような小さいアイコンが表示されます。・レスポンシブデザインを採用しています。(パソコン、スマホ両対応)
  14. 14. TwentyTwelveではサイドバーに配置されていたウィジェットがフッタに移動しました。
  15. 15. .categories-­‐links  a:first-­‐child:before  {   content:  "f301";}Webフォントのアイコンが随所に使われています。.entry-­‐meta  .date  a:before  {   content:  "f303";}
  16. 16. TwentyThirteenの見た目:通常の投稿
  17. 17. Imageポスト画像ファイルを掲載するときに使います。
  18. 18. Galleryポスト複数の画像ファイルを掲載するときに使います。
  19. 19. Linkポスト記事投稿時にリンクURL専用の入力欄があります。記事のタイトルをクリックすると登録したURLにジャンプします。(通常の投稿では記事そのものにリンクしますが、リンク投稿の場合は登録したリンク先にジャンプします。)
  20. 20. VideoポストYouTube等から動画ファイルを埋め込むことができます。YouTubeのURLを投稿するだけで埋め込み記事になります。編集画面上でも埋め込みになります。
  21. 21. Audioポスト音声ファイルを埋め込むことができます。編集画面上でも埋め込みになります。
  22. 22. Chatポストたろう: こんにちはというような記事を書けば、チャット形式に自動的に整形してくれます。
  23. 23. StatusポストTwitterのツイートのようなもの。
  24. 24. Quoteポスト引用記事と引用元URLを投稿すると自動的に引用記事になります。
  25. 25. Asideポストメモのような感覚で気軽に残せるもの。タイトルは表示されません。
  26. 26. 改訂履歴機能の強化
  27. 27. 改訂履歴の比較(リビジョン比較)記事比 較更新&保存記事の差分をビジュアルに比較することができます。更新&保存 更新&保存比 較
  28. 28. 記事のどこが変化したか分かる!消した箇所は赤色 追加した箇所は緑色
  29. 29. リビジョンに投稿者アイコンが表示されるようになりました。
  30. 30. 自動保存機能(AutoSave)
  31. 31. aaaaaa自動保存機能の動作:書きかけの投稿画面を開いたまま席を離れている間に、セッションが切れたら再度ログインを促すポップアップが出現します。再ログイン後も編集中の記事は失われていないので、そのまま続きを書くことができます。
  32. 32. ・記事を書いている途中に、上司に呼ばれて会議に出るはめに なったとき (セッションの有効期限切れ)・サンドイッチを買ってすぐに戻ってくるつもりが、ランチ ミーティングになってしまったとき。 (セッションの有効期限切れ)・電車がトンネルにはいったとき。(ネットワーク回線の切断)・不注意による画面遷移・ブラウザの異常終了・キーボードの上を猫が歩く・子供がよだれを垂らす自動保存はモダンブラウザのWebStorage(SessionStorage)を使うことで実現しています。( IE8以降、Safari5以降 )自動保存機能で救われるのはこんなケース
  33. 33. 自動保存機能のしくみ:管理画面にログインしたとき、CookieにWordPressのセッション情報が保存されます。ブラウザのインスペクタを見ると、Cookieが保存されているのが分かります。このCookieにより2日間ログイン状態が維持されます。「ログイン状態を保存する」にチェックをつけてログインした場合は14日間維持されます。このCookieの有効期限が切れたときに、自動保存機能が効果を発揮します。
  34. 34. SessionStorageもインスペクタで見ることができます。記事の内容がjson形式で保存されていることが分かります。
  35. 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. 36. 投稿ロック(PostLocking)
  37. 37. 自分が記事を書いている時に、別の編集者が同じ記事を編集しようとしてしまったら?その危険を回避する仕組みが 投稿ロック です。編 集 中 Bさんは、Aさんが編集中であることを知ることができます。誰が編集しているか分かるので、干渉を避けられます。これを無視して強引に編集権を奪うこともできます。AさんBさん
  38. 38. 投稿一覧画面で、誰が編集中であるかが分かります。
  39. 39. 誰が編集中であるか分かっているにも関わらず、強引に編集しようとすると、ポップアップが表示され、キャンセルするか編集権を奪うかを聞いてきます。誰が編集中であるか分かっているにもかかわらず、強引に編集しようとすると、ポップアップが表示されます。キャンセルするか編集権を奪うかを聞いてきます。
  40. 40. 編集権を奪われた中本氏の管理画面。編集権を奪われた側のユーザにもポップアップが出ます。一方、編集権を奪われた中本氏の投稿画面は...
  41. 41. 投稿ロックのしくみ編 集 中Aさん BさんWordPressサーバーheartbeat1. Aさんが編集中は15秒おきに  heartbeatを送信している。(Aさんロック中のステータス)3. Bさんに編集権が移ったので、 lock_errorをAさんのブラウザに返す。 → Aさんの編集権がなくなる。2. Bさんが編集権を 奪取した編集中ステータスはpostmetaテーブルの_edit_lock キーに保存されます。
  42. 42. メニュー機能改善
  43. 43. WordPressのメニューバー。表示する項目を自由に設定出来ます。設定は管理画面から。WordPressのメニューバー。表示する項目を自由に設定出来ます。管理画面で設定します。
  44. 44. Ver3.5のメニューを振り返ってみましょう。1. メニュー名を入力2. メニューを作成3. メニューに入れるアイテムを選ぶ(リンク、固定ページ、カテゴリー)3.5のメニューの特徴・左からではなく右ブロックから入力させるので分かりにくい。・新規作成モードからメニューを作ることになるので、 先にメニュー名を決めないと始められません。
  45. 45. これが新しくなったver3.6のメニュー1. 新規作成ではなく既存メニュー編集なので、 メニュー名にはすでにデフォルト値が入っている。2. メニューを作成(なぜか同じボタンが下にもある?)3. メニューに入れるアイテムを選ぶ(固定ページ、 リンク、 カテゴリー)カタチはアコーディオン型に変更された。・新規作成モードではなく、既存メニューの編集モードから始まるので、 メニュー名を考えなくてもとりあえずカスタマイズできるようになりました。・相変わらず、左からではなく右ブロックから入力させる形式。・UIは3.5よりも良くなったけど、まだ迷走している感じがします。
  46. 46. 投稿フォーマットの刷新(をする予定だった)
  47. 47. ver3.5の投稿フォーマットのデフォルトは・標準・アサイド・画像・リンク・引用・ステータスの6種類。ver3.5の投稿フォーマットのデフォルトは・標準・アサイド・画像・リンク・引用・ステータスの6種類。Ver3.5の投稿フォーマット
  48. 48. ver3.6(Beta3)のフォーマット。上部に移動して見やすくなりました。「Gallery」「Video」「Audio」「Chat」が増えました。ver3.6(Beta3)のフォーマット。上部に移動して見やすくなりました。「Gallery」「Video」「Audio」「Chat」が増えました。
  49. 49. ・テストする人手が足りない。・投稿フォーマットのでかいボタンを配置すると、 投稿画面がごちゃごちゃしてしまいシンプルさに欠ける。・投稿フォーマットUIはcoreには含めず、プラグインで対応する。_人人人人人人人人人_> 突然の仕様変更 < ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
  50. 50. ・テストする人手が足りない。・投稿フォーマットのでかいボタンを配置すると、 投稿画面がごちゃごちゃしてしまいシンプルさに欠ける。・投稿フォーマットUIはcoreには含めず、プラグインで対応する。_人人人人人人人人人_> 突然の仕様変更 < ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
  51. 51. その他の変更点
  52. 52. 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)
  53. 53. ・テーマアップデート時、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)
  54. 54. ・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で追うことができます。
  55. 55. 最後に:iPhoneアプリも更新があります。WordPress for iOS はVersion3.6がリリースされています。・デザインが刷新されました。・新規投稿作成へのステップがより簡単になりました。
  56. 56. 3.6待ち遠しいですね><@uemera uemuraありがとうございました。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×