Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,124 views

Published on

  • Be the first to comment

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

  1. 1. WordPressのテーマをHTML5でつくるよ! むゆう
  2. 2. 名前 : 藤田 無憂 所属 : (株)ミツエーリンクス 職種 : ディレクター みハード ー毎 度おなじ 人ですよ TW : @anticyborgデ ィスクの FB : muyuu Blog : http://stackstock.net Mail : anticyborg@gmail.com
  3. 3. はじめに何でみんなHTML5に興味があるの?
  4. 4. はじめに何でみんなHTML5に興味があるの? ‣ 今流行の技術をいち早く取り入れたいから?
  5. 5. はじめに何でみんなHTML5に興味があるの? ‣ 今流行の技術をいち早く取り入れたいから? ‣ 今後不可欠になるから?
  6. 6. はじめに何でみんなHTML5に興味があるの? ‣ 今流行の技術をいち早く取り入れたいから? ‣ 今後不可欠になるから? ‣ Flashが嫌いだから?
  7. 7. はじめに何でみんなHTML5に興味があるの? ‣ 今流行の技術をいち早く取り入れたいから? ‣ 今後不可欠になるから? ‣ Flashが嫌いだから?とてもステキで攻撃的で現実的だと思います
  8. 8. でも現実はクライアントワークではまだまだ積極的に使おうとなる時期ではないかなぁと思います
  9. 9. でも現実はクライアントワークではまだまだ積極的に使おうとなる時期ではないかなぁと思います‣ 仕様が全然が固まっていない
  10. 10. でも現実はクライアントワークではまだまだ積極的に使おうとなる時期ではないかなぁと思います‣ 仕様が全然が固まっていない‣ まだ新要素が出たり消えたりしてる
  11. 11. むしろリスクを考えると使いづらいのかも今日は白だったものが明日には真っ黒になっている可能性だって十分にあります
  12. 12. むしろリスクを考えると使いづらいのかも今日は白だったものが明日には真っ黒になっている可能性だって十分にあります‣ section要素の存在是非が問われている最中
  13. 13. むしろリスクを考えると使いづらいのかも今日は白だったものが明日には真っ黒になっている可能性だって十分にあります‣ section要素の存在是非が問われている最中‣ time要素は一度削除されてまた追加された
  14. 14. むしろリスクを考えると使いづらいのかも今日は白だったものが明日には真っ黒になっている可能性だって十分にあります‣ section要素の存在是非が問われている最中‣ time要素は一度削除されてまた追加された女心と秋の空とはこの事です。困ったもんですね。
  15. 15. でも、やる価値はあると思います僕はたいした理由を持ってなくて、単に楽しそうだから覚えてみようかなぁと思ってるだけなんです。
  16. 16. だって HTML5って、夢が詰まってますよね!!
  17. 17. もうちょっとマジメな意見ですと、‣ 環境に左右されない(プラグインのいらない)世界(Web)を作ろう‣ htmlはもっとしっかりとした構造モデルを持つべきだこういう思想に共感した感じです。
  18. 18. 今回の趣旨そんなhtml5を、我々WPerが精一杯愛してあげましょう、我々なりのやりかたで!手のかかる子ほど可愛いですからね
  19. 19. ただし今回はAPI関連に関しては触れませんそれはhtml5での適切なコーディングを習得してからでも良いのかと思います
  20. 20. なので
  21. 21. なのでそこは次回に期待!! (きっと誰かがやってくれるよ)
  22. 22. まずはじめに
  23. 23. まずはじめにHTML5で「覚えるべきこと」を覚えましょ
  24. 24. まずはじめにHTML5で「覚えるべきこと」を覚えましょ‣ 新しく追加された要素‣ 廃止された要素‣ 新しい概念、コンテンツモデル‣ アウトラインの概念
  25. 25. 新しい要素‣header : 親レベル要素のヘッダー‣footer : 親レベル要素のフッター‣section : 各セクション(章、節)‣nav : ナビゲーション‣article : 単一の記事であることを示す‣aside : articleの内容と関連性の低い要素他にもいっぱい(firure,video,audio等)
  26. 26. 廃止された要素 basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir主にタグの意味が装飾そのものだったタグがなくなっているようです。html5では、装飾は全てCSSで制御しましょう。
  27. 27. 新しい概念、コンテンツモデル今までは「ブロック要素」と「インライン要素」に別れてました div p h1∼6 span a imgul ol li dt dd br strong abbrblockquote form input textarea etc... etc...
  28. 28. 新しい概念、コンテンツモデル今までは「ブロック要素」と「インライン要素」に別れてました div p h1∼6 span a imgul ol li dt dd br strong abbrblockquote form input textarea etc... etc...
  29. 29. 新しい概念、コンテンツモデルもちょっと細かく分類しましょ。って事で出来たのがコンテンツモデルです。‣文章構造を適切に分類できる要素の定義‣要素の中に入れて良い要素の種類を定義
  30. 30. ‣Flow : 大体全部フロー・コンテンツ‣Metadata : コンテンツの定義用コンテンツ‣Sectioning : コンテンツを区切るためのコンテンツ‣Haeading : 見出し‣Phrasing : テキスト(テキスト内のタグ含む)‣Embedded : ドキュメントに埋め込むコンテンツ‣Intaractive : ユーザーが行動を起こすコンテンツ
  31. 31. アウトライン 今までは見出しタグだけで文章構造を作成 文章構造としての区切りは見出<h1>ページのタイトル</h1><h2>ページのサブタイトル</h2> しタグだけ →ページに関する文章と本文の<h2>記事タイトル</h2><p>記事本文</p> 区別などはなし<h3>記事内サブタイトル</h3><p>記事本文</p>
  32. 32. そこんとこ、今回は強化させて頂いてます<hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義</hgroup> • articleタグで本文を定義<article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます</article>
  33. 33. そこんとこ、今回は強化させて頂いてます<hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義</hgroup> • articleタグで本文を定義<article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます</article>
  34. 34. そこんとこ、今回は強化させて頂いてます<hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義</hgroup> • articleタグで本文を定義<article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます</article>
  35. 35. そこんとこ、今回は強化させて頂いてます<hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義</hgroup> • articleタグで本文を定義<article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます</article>
  36. 36. 余談ですが、Safariのリーダー機能はhtml5を利用して実装されています クリックすると、
  37. 37. 余談ですが、Safariのリーダー機能はhtml5を利用して実装されています articleタグに書かれた部分だけを表示してくれる
  38. 38. まとめ HTML5は概ね「もっと構造的に書こうね!」 こんな感じです
  39. 39. ということで、
  40. 40. ということで、じゃあそろそろWordPressで 作りましょうか
  41. 41. 既存のテーマをhtml5にする今回は、今のテーマ(html4とかxhtml1.0とか)をhtml5可する感じにしたいと思います
  42. 42. おっとその前に
  43. 43. IE対策まずちょっと問題があります。IEの場合、新要素を使うと、DOMツリーが期待通りに構成されなかったりCSSが効かなかったりと色々よろしくない事が起こってしまいます
  44. 44. IE対策まずちょっと問題があります。IEの場合、新要素を使うと、DOMツリーが期待通りに構成されなかったりCSSが効かなかったりと色々よろしくない事が起こってしまいますさすがIEさんです
  45. 45. IE対策DOMに関する問題こんなhtmlの場合<header> <hgroup> <h1>サイトのタイトルが入ると思いますよ</h1> <h2>サイトの説明とかが入るんじゃない?</h2> </hgroup></header>
  46. 46. IE対策DOMに関する問題期待されるDOMツリー 実際のDOMツリーheader header└ hgroup hgroup ├h1 h1 └h2 h2
  47. 47. IE対策DOMに関する問題の対策document.createElement(section); //これはsection要素の定義このスクリプトで要素を生成させますhttp://html5shiv.googlecode.com/svn/trunk/html5.jsこれを使わせてもらいましょう
  48. 48. IE対策これをheaderタグ内に記述します<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->もしくはJSファイルをDLしてテンプレートフォルダにアップして<!--[if lte IE 8]><script src="<?php bloginfo(template_url); ?>/j/html5.js"></script><![endif]-->こうしてもいいですね
  49. 49. IE対策 CSSの問題と対策header, footer, section 等の新要素はIEで定義されていないのでスタイルが効きませんCSSで未定義要素をブロック要素として定義してあげましょう<style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>
  50. 50. 上手にできましたー(/□)/では気を取り直して実際に 進めていきましょう
  51. 51. htmlタグ、ヘッダー等
  52. 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. 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. 54. htmlタグ htmlタグにもいっぱい属性を書けと強いられて いた記憶がありますね<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><html lang="ja">
  55. 55. htmlタグ htmlタグにもいっぱい属性を書けと強いられて いた記憶がありますね<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><html lang="ja"> 短っ!!
  56. 56. 文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非 推奨らしいですよ<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta charset="UTF-8" />
  57. 57. 文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非 推奨らしいですよ<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta charset="UTF-8" /> 短っ!!
  58. 58. 文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非 推奨らしいですよ<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta charset="UTF-8" /> 下位互換があるので上の書き方でも良いらしい
  59. 59. レイアウト
  60. 60. 画面大枠のタグ構成ブログだったら大体みなさんこんな構成になってるんじゃないでしょうかbody div#header div#content div#main div#sidebar div#footer
  61. 61. 画面大枠のタグ構成こうしましょうbody header#header ←headerタグに変更 div#content section#main aside#sidebar ↑sectionタグに変更 ↑asideタグ に変更 footer#footer ←footerタグに変更
  62. 62. 画面大枠のタグ構成こうしましょbody 気になるところ header#header ←headerタグに変更 なんでid=header、footerつけ てんの?要らなくね? div#content →はい要りませんね。 section#main aside#sidebar ただ、現行テーマはidとかclass ↑sectionタグに変更 ↑asideタグ とかでスタイルを定義している に変更 ケースが多そうなのでつけたま まの方が楽かと思いました。 「いらない、何も、捨ててしま おう」と言えないのが残念です footer#footer ←footerタグに変更
  63. 63. 画面大枠のタグ構成こうしましょbody 気になるところ header#header ←headerタグに変更 何でdiv#contentはsectionにし ないの? div#content →sectionは単なるdivの代替タ section#main aside#sidebar グではなく文章のまとまりを意 ↑sectionタグに変更 ↑asideタグ 味するので、特に文章として意 に変更 味をなさない#contentにはdiv を使う方が適切 footer#footer ←footerタグに変更
  64. 64. 画面大枠のタグ構成こうしましょbody 気になるところ header#header ←headerタグに変更 右のウィジェットメニューは navじゃないの? div#content →navは「主要なナビゲーショ section#main aside#sidebar ン」に使われるべきタグであ ↑sectionタグに変更 ↑asideタグ り、全てのリンクの塊に使うタ (single.phpならarticle) に変更 グではない。 また通常サイドメニューは「メ インコンテンツに関係する」リ ンクばかりではないケースが多 footer#footer ←footerタグに変更 いのでasideを使う方が無難
  65. 65. 各所の細かい対応
  66. 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. 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. 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. 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. 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. 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. 72. サイドナビ部分とりあえずウィジェットを使っているとして、吐き出されるコードを変更しましょう<div id=”xx” class=”widget”> <h2 class=”widget_title”>Recent Post</h2> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul></div>
  73. 73. サイドナビ部分 変更箇所は大してありませんね変更→ <section id=”xx” class=”widget”> 変更→ <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul>変更→ </section>
  74. 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. 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 &copy; <?php echo date(‘Y’); ?> blogname</p> </div>
  76. 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 &copy; <?php echo date(‘Y’); ?> blogname</p>変更→ </footer>
  77. 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 &copy; <?php echo date(‘Y’); ?> blogname</p>変更→ </footer>
  78. 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 &copy; <?php echo date(‘Y’); ?> blogname</p> </footer>
  79. 79. 最後にひとつおねがいHTML5はまだまだ未定な部分も多く、分かりづらいとこ、?なとこも多いです
  80. 80. なので みんなで情報を収集して みんなで情報を共有するそんな良いサイクルを作りませんか?
  81. 81. でく れて まで 読ん最後 (/ □)/あり がとー

×