Html5でword pressテーマを作るよ！

1. WordPressのテーマを HTML5でつくるよ！むゆう

2. 名前：藤田無憂所属： (株)ミツエーリンクス職種：ディレクターみハードー毎度おなじ人ですよ TW : @anticyborg ディスクの FB : muyuu Blog : http://stackstock.net Mail : anticyborg@gmail.com

3. はじめに何でみんなHTML5に興味があるの？

4. はじめに何でみんなHTML5に興味があるの？ ‣ 今流行の技術をいち早く取り入れたいから？

5. はじめに何でみんなHTML5に興味があるの？ ‣ 今流行の技術をいち早く取り入れたいから？ ‣ 今後不可欠になるから？

6. はじめに何でみんなHTML5に興味があるの？ ‣ 今流行の技術をいち早く取り入れたいから？ ‣ 今後不可欠になるから？ ‣ Flashが嫌いだから？

7. はじめに何でみんなHTML5に興味があるの？ ‣ 今流行の技術をいち早く取り入れたいから？ ‣ 今後不可欠になるから？ ‣ Flashが嫌いだから？とてもステキで攻撃的で現実的だと思います

8. でも現実はクライアントワークではまだまだ積極的に使おうとなる時期ではないかなぁと思います

9. でも現実はクライアントワークではまだまだ積極的に使おうとなる時期ではないかなぁと思います ‣ 仕様が全然が固まっていない

10. でも現実はクライアントワークではまだまだ積極的に使おうとなる時期ではないかなぁと思います ‣ 仕様が全然が固まっていない ‣ まだ新要素が出たり消えたりしてる

11. むしろリスクを考えると使いづらいのかも今日は白だったものが明日には真っ黒になっている可能性だって十分にあります

12. むしろリスクを考えると使いづらいのかも今日は白だったものが明日には真っ黒になっている可能性だって十分にあります ‣ section要素の存在是非が問われている最中

13. むしろリスクを考えると使いづらいのかも今日は白だったものが明日には真っ黒になっている可能性だって十分にあります ‣ section要素の存在是非が問われている最中 ‣ time要素は一度削除されてまた追加された

14. むしろリスクを考えると使いづらいのかも今日は白だったものが明日には真っ黒になっている可能性だって十分にあります ‣ section要素の存在是非が問われている最中 ‣ time要素は一度削除されてまた追加された女心と秋の空とはこの事です。困ったもんですね。

15. でも、やる価値はあると思います僕はたいした理由を持ってなくて、単に楽しそうだから覚えてみようかなぁと思ってるだけなんです。

16. だって HTML5って、夢が詰まってますよね！！

17. もうちょっとマジメな意見ですと、 ‣ 環境に左右されない(プラグインのいらない)世界 (Web)を作ろう ‣ htmlはもっとしっかりとした構造モデルを持つべきだこういう思想に共感した感じです。

18. 今回の趣旨そんなhtml5を、我々WPerが精一杯愛してあげましょう、我々なりのやりかたで！手のかかる子ほど可愛いですからね

19. ただし今回はAPI関連に関しては触れませんそれはhtml5での適切なコーディングを習得してからでも良いのかと思います

20. なので

21. なのでそこは次回に期待！！ (きっと誰かがやってくれるよ)

22. まずはじめに

23. まずはじめに HTML5で「覚えるべきこと」を覚えましょ

24. まずはじめに HTML5で「覚えるべきこと」を覚えましょ ‣ 新しく追加された要素 ‣ 廃止された要素 ‣ 新しい概念、コンテンツモデル ‣ アウトラインの概念

25. 新しい要素 ‣header ：親レベル要素のヘッダー ‣footer ：親レベル要素のフッター ‣section ：各セクション(章、節) ‣nav ：ナビゲーション ‣article ：単一の記事であることを示す ‣aside ： articleの内容と関連性の低い要素他にもいっぱい(ﬁrure,video,audio等)

26. 廃止された要素 basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir 主にタグの意味が装飾そのものだったタグがなくなっているようです。html5では、装飾は全て CSSで制御しましょう。

27. 新しい概念、コンテンツモデル今までは「ブロック要素」と「インライン要素」に別れてました div p h1∼6 span a img ul ol li dt dd br strong abbr blockquote form input textarea etc... etc...

28. 新しい概念、コンテンツモデル今までは「ブロック要素」と「インライン要素」に別れてました div p h1∼6 span a img ul ol li dt dd br strong abbr blockquote form input textarea etc... etc...

29. 新しい概念、コンテンツモデルもちょっと細かく分類しましょ。って事で出来たのがコンテンツモデルです。 ‣文章構造を適切に分類できる要素の定義 ‣要素の中に入れて良い要素の種類を定義

30. ‣Flow ：大体全部フロー・コンテンツ ‣Metadata ：コンテンツの定義用コンテンツ ‣Sectioning ：コンテンツを区切るためのコンテンツ ‣Haeading ：見出し ‣Phrasing ：テキスト(テキスト内のタグ含む) ‣Embedded ：ドキュメントに埋め込むコンテンツ ‣Intaractive ：ユーザーが行動を起こすコンテンツ

31. アウトライン今までは見出しタグだけで文章構造を作成文章構造としての区切りは見出 <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> しタグだけ →ページに関する文章と本文の <h2>記事タイトル</h2> <p>記事本文</p> 区別などはなし <h3>記事内サブタイトル</h3> <p>記事本文</p>

32. そこんとこ、今回は強化させて頂いてます <hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義 </hgroup> • articleタグで本文を定義 <article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます </article>

36. 余談ですが、Safariのリーダー機能はhtml5を利用して実装されていますクリックすると、

37. 余談ですが、Safariのリーダー機能はhtml5を利用して実装されています articleタグに書かれた部分だけを表示してくれる

38. まとめ HTML5は概ね「もっと構造的に書こうね！」こんな感じです

39. ということで、

40. ということで、じゃあそろそろWordPressで作りましょうか

41. 既存のテーマをhtml5にする今回は、今のテーマ(html4とかxhtml1.0とか)を html5可する感じにしたいと思います

42. おっとその前に

43. IE対策まずちょっと問題があります。 IEの場合、新要素を使うと、DOMツリーが期待通りに構成されなかったりCSSが効かなかったりと色々よろしくない事が起こってしまいます

44. IE対策まずちょっと問題があります。 IEの場合、新要素を使うと、DOMツリーが期待通りに構成されなかったりCSSが効かなかったりと色々よろしくない事が起こってしまいますさすがIEさんです

45. IE対策 DOMに関する問題こんなhtmlの場合 <header> <hgroup> <h1>サイトのタイトルが入ると思いますよ</h1> <h2>サイトの説明とかが入るんじゃない？</h2> </hgroup> </header>

46. IE対策 DOMに関する問題期待されるDOMツリー実際のDOMツリー header header └ hgroup hgroup ├h1 h1 └h2 h2

47. IE対策 DOMに関する問題の対策 document.createElement('section'); //これはsection要素の定義このスクリプトで要素を生成させます http://html5shiv.googlecode.com/svn/trunk/html5.js これを使わせてもらいましょう

48. IE対策これをheaderタグ内に記述します  もしくはJSファイルをDLしてテンプレートフォルダにアップして  こうしてもいいですね

49. IE対策 CSSの問題と対策 header, footer, section 等の新要素はIEで定義されていないのでスタイルが効きません CSSで未定義要素をブロック要素として定義してあげましょう <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>

50. 上手にできましたー(/'□')/ では気を取り直して実際に進めていきましょう

51. htmlタグ、ヘッダー等

52. DOCTYPE やたらと長く、本当に意味があったのかよく分からないDOCTPEはすっかり短くなりました <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>

53. DOCTYPE やたらと長く、本当に意味があったのかよく分からないDOCTPEはすっかり短くなりました <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> 短っ！！

54. htmlタグ htmlタグにもいっぱい属性を書けと強いられていた記憶がありますね <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <html lang="ja">

55. htmlタグ htmlタグにもいっぱい属性を書けと強いられていた記憶がありますね <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <html lang="ja"> 短っ！！

56. 文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非推奨らしいですよ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta charset="UTF-8" />

57. 文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非推奨らしいですよ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta charset="UTF-8" /> 短っ！！

58. 文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非推奨らしいですよ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta charset="UTF-8" /> 下位互換があるので上の書き方でも良いらしい

59. レイアウト

60. 画面大枠のタグ構成ブログだったら大体みなさんこんな構成になってるんじゃないでしょうか body div#header div#content div#main div#sidebar div#footer

61. 画面大枠のタグ構成こうしましょう body header#header ←headerタグに変更 div#content section#main aside#sidebar ↑sectionタグに変更 ↑asideタグに変更 footer#footer ←footerタグに変更

62. 画面大枠のタグ構成こうしましょ body 気になるところ header#header ←headerタグに変更なんでid=header、footerつけてんの？要らなくね？ div#content →はい要りませんね。 section#main aside#sidebar ただ、現行テーマはidとかclass ↑sectionタグに変更 ↑asideタグとかでスタイルを定義しているに変更ケースが多そうなのでつけたままの方が楽かと思いました。「いらない、何も、捨ててしまおう」と言えないのが残念です footer#footer ←footerタグに変更

63. 画面大枠のタグ構成こうしましょ body 気になるところ header#header ←headerタグに変更何でdiv#contentはsectionにしないの？ div#content →sectionは単なるdivの代替タ section#main aside#sidebar グではなく文章のまとまりを意 ↑sectionタグに変更 ↑asideタグ味するので、特に文章として意に変更味をなさない#contentにはdiv を使う方が適切 footer#footer ←footerタグに変更

64. 画面大枠のタグ構成こうしましょ body 気になるところ header#header ←headerタグに変更右のウィジェットメニューは navじゃないの？ div#content →navは「主要なナビゲーショ section#main aside#sidebar ン」に使われるべきタグであ ↑sectionタグに変更 ↑asideタグり、全てのリンクの塊に使うタ (single.phpならarticle) に変更グではない。また通常サイドメニューは「メインコンテンツに関係する」リンクばかりではないケースが多 footer#footer ←footerタグに変更いのでasideを使う方が無難

65. 各所の細かい対応

66. コンテンツ部分 index.php, single.php 等のコンテンツ部分を変更します <?php while (have_posts()) : the_post(); ?> <div id="article"> <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> <?php the_content(''); ?> <h2>関連するページ</h2> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </div> <?php endwhile; ?>

67. コンテンツ部分こんな感じに変更します <?php while (have_posts()) : the_post(); ?> 変更→ <article id="article"> 追加→ <header> <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> 追加→ </header> <?php the_content(''); ?> 追加→ <section> <h2>関連するページ</h2> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> 追加→ </section> 変更→ </article> <?php endwhile; ?>

68. コンテンツ部分こんな感じに変更します <?php while (have_posts()) : the_post(); ?> ※変更点変更→ <article id="article"> 追加→ <header> •div#articleをarticleに変更 <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> •記事タイトルにhgroupを追加追加→ </header> •関連記事をsectionで纏める <?php the_content(''); ?> 追加→ <section> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> 追加→ </section> 変更→ </article> <?php endwhile; ?>

69. コンテンツ部分こんな感じに変更します <?php while (have_posts()) : the_post(); ?> 気になるところ <article id="article"> <header> 記事内にもheaderって使える <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> の？ </header> →はい。headerは「ページの <?php the_content(''); ?> ヘッダー」を指定するものでは <section> なく、「親要素に対するヘッ <h1>関連するページ</h1> ダ」になります。 <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section> </article> <?php endwhile; ?>

70. コンテンツ部分こんな感じに変更します <?php while (have_posts()) : the_post(); ?> 気になるところ <article id="article"> <header> 関連するページをsection内に <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> 入れたんなら何故記事本文は </header> sectionに入れないの？ <?php the_content(''); ?> →セクショニングコンテンツに <section> は見出しを入れるようにすべき <h1>関連するページ</h1> で、the_content(‘’); には見出し <ul> <li>ページタイトル</li> がないケースの方が多いため <li>ページタイトル</li> sectionに入れていません </ul> </section> </article> <?php endwhile; ?>

71. コンテンツ部分こんな感じに変更します <?php while (have_posts()) : the_post(); ?> 気になるところ <article id="article"> <header> 何で関連するページがh1に <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> なってるの？ </header> →h1はページに対してユニー <?php the_content(''); ?> クではなくなりました。 <section> <h1>関連するページ</h1> section(正確にはセクショニン <ul> <li>ページタイトル</li> グコンテンツ)で区切られた要 <li>ページタイトル</li> 素の中身に記載する見出しレベ </ul> </section> ルは自由に設定する事が出来ま </article> <?php endwhile; ?> す

72. サイドナビ部分とりあえずウィジェットを使っているとして、吐き出されるコードを変更しましょう <div id=”xx” class=”widget”> <h2 class=”widget_title”>Recent Post</h2> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul> </div>

73. サイドナビ部分変更箇所は大してありませんね変更→ <section id=”xx” class=”widget”> 変更→ <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul> 変更→ </section>

74. サイドナビ部分変更箇所は大してありませんね変更→ <section id=”xx” class=”widget”> ※変更点変更→ <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> •div#xxをsectionに変更 <li>テキストテキスト</li> •h2をh1に変更 <li>テキストテキスト</li> </ul> 変更→ </section>

75. フッター・ヘッダー部分フッター・ヘッダーに関してはこれと言った定番がないので、「何となくこんな感じ？」を例に出します header.php <div id=”header”> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2> <ul> <?php wp_list_pages('title_li='); ?> </ul> </div> footer.php <div id=”footer”> <p>copyright © <?php echo date(‘Y’); ?> blogname</p> </div>

76. フッター・ヘッダー部分こんな感じに変更します header.php 変更→ <header id=”header”> 追加→ <hgropu> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2> 追加→ </hgroup> <ul> <?php wp_list_pages('title_li='); ?> </ul> 変更→ </header> footer.php 変更→ <footer id=”footer”> <p>copyright © <?php echo date(‘Y’); ?> blogname</p> 変更→ </footer>

77. フッター・ヘッダー部分こんな感じに変更します header.php 変更→ <header id=”header”> ※変更点追加→ <hgroup> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> •div#headerをheaderに変更 <h2><?php bloginfo(‘description’); ?></h2> 追加→ </hgroup> •hgroupを追加 <ul> <?php wp_list_pages('title_li='); ?> •div#footerをfooterに変更 </ul> 変更→ </header> footer.php 変更→ <footer id=”footer”> <p>copyright © <?php echo date(‘Y’); ?> blogname</p> 変更→ </footer>

78. フッター・ヘッダー部分こんな感じに変更します header.php <header id=”header”> 気になるところ <hgroup> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> hgroupって？ <h2><?php bloginfo(‘description’); ?></h2> </hgroup> →見出しが複数の見出しレベル <ul> を持つ場合にグループ化し、ど <?php wp_list_pages('title_li='); ?> </ul> れが見出しになるかを定義 </header> ※最大の見出し以外はアウトラインに表示されません footer.php <footer id=”footer”> <p>copyright © <?php echo date(‘Y’); ?> blogname</p> </footer>

79. 最後にひとつおねがい HTML5はまだまだ未定な部分も多く、分かりづらいとこ、？なとこも多いです

80. なのでみんなで情報を収集してみんなで情報を共有するそんな良いサイクルを作りませんか？

81. でくれてまで読ん最後 (/' □')/ ありがとー

Html5でword pressテーマを作るよ！

Html5でword pressテーマを作るよ！

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Html5でword pressテーマを作るよ！

Similar to Html5でword pressテーマを作るよ！(20)

More from Muyuu Fujita

More from Muyuu Fujita(14)

Html5でword pressテーマを作るよ！