html5でword pressテーマを作るよ！
Post on 18-Dec-2014
3.345 Views
Preview:
DESCRIPTION
TRANSCRIPT
WordPressのテーマを
HTML5でつくるよ！むゆう
名前 ： 藤田 無憂
所属 ： (株)ミツエーリンクス
職種 ： ディレクター
TW : @anticyborg
FB : muyuu
Blog : http://stackstock.net
Mail : anticyborg@gmail.com
毎度おなじみハー
ド
ディスクの人です
よー
はじめに
何でみんなHTML5に興味があるの？
はじめに
何でみんなHTML5に興味があるの？
‣今流行の技術をいち早く取り入れたいから？
はじめに
何でみんなHTML5に興味があるの？
‣今流行の技術をいち早く取り入れたいから？
‣今後不可欠になるから？
はじめに
何でみんなHTML5に興味があるの？
‣今流行の技術をいち早く取り入れたいから？
‣今後不可欠になるから？
‣Flashが嫌いだから？
はじめに
何でみんなHTML5に興味があるの？
‣今流行の技術をいち早く取り入れたいから？
‣今後不可欠になるから？
‣Flashが嫌いだから？
とてもステキで攻撃的で現実的だと思います
でも現実は
クライアントワークではまだまだ積極的に使おう
となる時期ではないかなぁと思います
でも現実は
クライアントワークではまだまだ積極的に使おう
となる時期ではないかなぁと思います
‣仕様が全然が固まっていない
でも現実は
クライアントワークではまだまだ積極的に使おう
となる時期ではないかなぁと思います
‣仕様が全然が固まっていない
‣まだ新要素が出たり消えたりしてる
むしろリスクを考えると使いづらいのかも
今日は白だったものが明日には真っ黒になってい
る可能性だって十分にあります
むしろリスクを考えると使いづらいのかも
今日は白だったものが明日には真っ黒になってい
る可能性だって十分にあります
‣section要素の存在是非が問われている最中
むしろリスクを考えると使いづらいのかも
今日は白だったものが明日には真っ黒になってい
る可能性だって十分にあります
‣section要素の存在是非が問われている最中
‣time要素は一度削除されてまた追加された
むしろリスクを考えると使いづらいのかも
今日は白だったものが明日には真っ黒になってい
る可能性だって十分にあります
‣section要素の存在是非が問われている最中
‣time要素は一度削除されてまた追加された
女心と秋の空とはこの事です。困ったもんですね。
でも、やる価値はあると思います
僕はたいした理由を持ってなくて、単に楽しそう
だから覚えてみようかなぁと思ってるだけなんで
す。
HTML5って、
夢が詰まってますよね！！
だって
もうちょっとマジメな意見ですと、
‣環境に左右されない(プラグインのいらない)世界(Web)を作ろう
‣htmlはもっとしっかりとした構造モデルを持つべきだ
こういう思想に共感した感じです。
今回の趣旨そんなhtml5を、我々WPerが精一杯愛してあげま
しょう、我々なりのやりかたで！
手のかかる子ほど可愛いですからね
ただし
今回はAPI関連に関しては触れません
それはhtml5での適切なコーディングを習得してか
らでも良いのかと思います
なので
そこは次回に期待！！(きっと誰かがやってくれるよ)
なので
まずはじめに
まずはじめにHTML5で「覚えるべきこと」を覚えましょ
まずはじめにHTML5で「覚えるべきこと」を覚えましょ
‣新しく追加された要素
‣廃止された要素
‣新しい概念、コンテンツモデル
‣アウトラインの概念
新しい要素
‣header ： 親レベル要素のヘッダー
‣footer ： 親レベル要素のフッター
‣section ： 各セクション(章、節)
‣nav ： ナビゲーション
‣article ： 単一の記事であることを示す
‣aside ： articleの内容と関連性の低い要素
他にもいっぱい(firure,video,audio等)
廃止された要素
basefont, big, center, font, s, strike, tt, u, frame,
frameset, noframes, acronym, applet, isindex, dir
主にタグの意味が装飾そのものだったタグがなく
なっているようです。html5では、装飾は全て
CSSで制御しましょう。
新しい概念、コンテンツモデル
今までは「ブロック要素」と「インライン要素」
に別れてました
div p h1～6ol liul
blockquote
etc...
dt dd
span a img
strongbr
textarea
etc...
abbr
form input
新しい概念、コンテンツモデル
今までは「ブロック要素」と「インライン要素」
に別れてました
div p h1～6ol liul
blockquote
etc...
dt dd
span a img
strongbr
textarea
etc...
abbr
form input×
‣文章構造を適切に分類できる要素の定義‣要素の中に入れて良い要素の種類を定義
新しい概念、コンテンツモデル
もちょっと細かく分類しましょ。って事で出来たのがコ
ンテンツモデルです。
‣Flow ： 大体全部フロー・コンテンツ‣Metadata ： コンテンツの定義用コンテンツ‣Sectioning ： コンテンツを区切るためのコンテンツ‣Haeading ： 見出し‣Phrasing ： テキスト(テキスト内のタグ含む)‣Embedded ： ドキュメントに埋め込むコンテンツ‣Intaractive ： ユーザーが行動を起こすコンテンツ
今までは見出しタグだけで文章構造を作成文章構造としての区切りは見出
しタグだけ
→ページに関する文章と本文の
区別などはなし
アウトライン
<h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
<h2>記事タイトル</h2>
<p>記事本文</p>
<h3>記事内サブタイトル</h3>
<p>記事本文</p>
そこんとこ、今回は強化させて頂いてます
•hgroupタグで親要素の見出しを定義
• articleタグで本文を定義• sectionタグで章を定義
<hgroup> <h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
</hgroup>
<article> <h2>記事タイトル</h2>
<p>記事本文</p>
<section> <h3>記事内サブタイトル</h3>
<p>記事本文</p>
</section></article>
文章に意味を持たせる事で、他
のシステムからのデータ流用を
容易に出来ます
そこんとこ、今回は強化させて頂いてます
• hgroupタグで親要素の見出しを定義
• articleタグで本文を定義• sectionタグで章を定義
<hgroup> <h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
</hgroup>
<article> <h2>記事タイトル</h2>
<p>記事本文</p>
<section> <h3>記事内サブタイトル</h3>
<p>記事本文</p>
</section></article>
文章に意味を持たせる事で、他
のシステムからのデータ流用を
容易に出来ます
そこんとこ、今回は強化させて頂いてます
•hgroupタグで親要素の見出しを定義
• articleタグで本文を定義• sectionタグで章を定義
<hgroup> <h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
</hgroup>
<article> <h2>記事タイトル</h2>
<p>記事本文</p>
<section> <h3>記事内サブタイトル</h3>
<p>記事本文</p>
</section></article>
文章に意味を持たせる事で、他
のシステムからのデータ流用を
容易に出来ます
そこんとこ、今回は強化させて頂いてます
•hgroupタグで親要素の見出しを定義
• articleタグで本文を定義• sectionタグで章を定義
<hgroup> <h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
</hgroup>
<article> <h2>記事タイトル</h2>
<p>記事本文</p>
<section> <h3>記事内サブタイトル</h3>
<p>記事本文</p>
</section></article>
文章に意味を持たせる事で、他
のシステムからのデータ流用を
容易に出来ます
余談ですが、Safariのリーダー機能はhtml5を
利用して実装されています
クリックすると、
余談ですが、Safariのリーダー機能はhtml5を
利用して実装されています
articleタグに書かれた部分だけを表示してくれる
HTML5は概ね
「もっと構造的に書こうね！」こんな感じです
まとめ
ということで、
じゃあそろそろWordPressで
作りましょうか
ということで、
既存のテーマをhtml5にする
今回は、今のテーマ(html4とかxhtml1.0とか)を
html5可する感じにしたいと思います
おっとその前に
IE対策
まずちょっと問題があります。
IEの場合、新要素を使うと、DOMツリーが期待通
りに構成されなかったりCSSが効かなかったりと
色々よろしくない事が起こってしまいます
IE対策
さすがIEさんです
まずちょっと問題があります。
IEの場合、新要素を使うと、DOMツリーが期待通
りに構成されなかったりCSSが効かなかったりと
色々よろしくない事が起こってしまいます
IE対策
DOMに関する問題
<header>
<hgroup>
<h1>サイトのタイトルが入ると思いますよ</h1>
<h2>サイトの説明とかが入るんじゃない？</h2>
</hgroup>
</header>
こんなhtmlの場合
IE対策
DOMに関する問題
期待されるDOMツリー
header
└ hgroup
├h1
└h2
実際のDOMツリー
header
hgroup
h1
h2
IE対策
DOMに関する問題の対策document.createElement('section'); //これはsection要素の定義
http://html5shiv.googlecode.com/svn/trunk/html5.js
このスクリプトで要素を生成させます
これを使わせてもらいましょう
IE対策
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
こうしてもいいですね
<!--[if lte IE 8]><script src="<?php bloginfo('template_url'); ?>/j/html5.js"></script><![endif]-->
もしくはJSファイルをDLしてテンプレートフォルダにアップして
これをheaderタグ内に記述します
IE対策
CSSの問題と対策
<style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>
CSSで未定義要素をブロック要素として定義してあげましょう
header, footer, section 等の新要素はIEで定義されていないの
でスタイルが効きません
上手にできましたー(/'□')/
では気を取り直して実際に
進めていきましょう
htmlタグ、ヘッダー等
DOCTYPE
やたらと長く、本当に意味があったのかよく分
からないDOCTPEはすっかり短くなりました
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
DOCTYPE
やたらと長く、本当に意味があったのかよく分
からないDOCTPEはすっかり短くなりました
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
短っ！！
htmlタグ
htmlタグにもいっぱい属性を書けと強いられて
いた記憶がありますね
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<html lang="ja">
htmlタグ
htmlタグにもいっぱい属性を書けと強いられて
いた記憶がありますね
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<html lang="ja">
短っ！！
文字エンコーディング
html5は基本的にUTF-8を推奨しており、他は非
推奨らしいですよ
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
文字エンコーディング
html5は基本的にUTF-8を推奨しており、他は非
推奨らしいですよ
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
短っ！！
文字エンコーディング
html5は基本的にUTF-8を推奨しており、他は非
推奨らしいですよ
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
下位互換があるので上の書き方でも良いらしい
レイアウト
画面大枠のタグ構成
ブログだったら大体みなさんこんな構成になってるんじゃないでしょうか
body
div#header
div#footer
div#content
div#main div#sidebar
画面大枠のタグ構成
こうしましょう
body
header#header
footer#footer
div#content
section#main aside#sidebar
↑sectionタグに変更 ↑asideタグに変更
←headerタグに変更
←footerタグに変更
画面大枠のタグ構成
こうしましょ
気になるところなんでid=header、footerつけ
てんの？要らなくね？
→はい要りませんね。
ただ、現行テーマはidとかclass
とかでスタイルを定義している
ケースが多そうなのでつけたま
まの方が楽かと思いました。
「いらない、何も、捨ててしま
おう」と言えないのが残念です
body
header#header
footer#footer
div#content
section#main aside#sidebar
↑sectionタグに変更 ↑asideタグに変更
←headerタグに変更
←footerタグに変更
body
header#header
footer#footer
div#content
section#main aside#sidebar
↑sectionタグに変更 ↑asideタグに変更
←headerタグに変更
←footerタグに変更
画面大枠のタグ構成
こうしましょ
気になるところ何でdiv#contentはsectionにし
ないの？
→sectionは単なるdivの代替タ
グではなく文章のまとまりを意
味するので、特に文章として意
味をなさない#contentにはdiv
を使う方が適切
画面大枠のタグ構成
こうしましょ
body
div#content
section#main
気になるところ右のウィジェットメニューは
navじゃないの？
→navは「主要なナビゲーショ
ン」に使われるべきタグであ
り、全てのリンクの塊に使うタ
グではない。
また通常サイドメニューは「メ
インコンテンツに関係する」リ
ンクばかりではないケースが多
いのでasideを使う方が無難
↑asideタグに変更
header#header
footer#footer
aside#sidebar
←headerタグに変更
←footerタグに変更
↑sectionタグに変更(single.phpならarticle)
各所の細かい対応
コンテンツ部分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; ?>
コンテンツ部分こんな感じに変更します
<?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; ?>
変更→追加→
追加→
追加→
追加→変更→
コンテンツ部分こんな感じに変更します
<?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> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>
※変更点•div#articleをarticleに変更•記事タイトルにhgroupを追加•関連記事をsectionで纏める
変更→追加→
追加→
追加→
追加→変更→
コンテンツ部分こんな感じに変更します
<?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> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>
気になるところ記事内にもheaderって使える
の？
→はい。headerは「ページの
ヘッダー」を指定するものでは
なく、「親要素に対するヘッ
ダ」になります。
コンテンツ部分こんな感じに変更します
<?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> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>
気になるところ関連するページをsection内に
入れたんなら何故記事本文は
sectionに入れないの？
→セクショニングコンテンツに
は見出しを入れるようにすべき
で、the_content(‘’); には見出し
がないケースの方が多いため
sectionに入れていません
コンテンツ部分こんな感じに変更します
<?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> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>
気になるところ何で関連するページがh1に
なってるの？
→h1はページに対してユニー
クではなくなりました。
section(正確にはセクショニン
グコンテンツ)で区切られた要
素の中身に記載する見出しレベ
ルは自由に設定する事が出来ま
す
サイドナビ部分とりあえずウィジェットを使っているとして、吐き出
されるコードを変更しましょう
<div id=”xx” class=”widget”> <h2 class=”widget_title”>Recent Post</h2> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul></div>
サイドナビ部分変更箇所は大してありませんね
<section id=”xx” class=”widget”> <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul></section>
変更→
変更→
変更→
サイドナビ部分変更箇所は大してありませんね
<section id=”xx” class=”widget”> <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul></section>
変更→
変更→
※変更点•div#xxをsectionに変更•h2をh1に変更
変更→
フッター・ヘッダー部分フッター・ヘッダーに関してはこれと言った定番がな
いので、「何となくこんな感じ？」を例に出します
<div id=”header”>
<h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2>
<ul> <?php wp_list_pages('title_li='); ?> </ul></div>
<div id=”footer”><p>copyright © <?php echo date(‘Y’); ?> blogname</p></div>
header.php
footer.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 id=”footer”><p>copyright © <?php echo date(‘Y’); ?> blogname</p></footer>
header.php
footer.php
変更→追加→
追加→
変更→
変更→
変更→
フッター・ヘッダー部分こんな感じに変更します
<header id=”header”> <hgroup> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2> </hgroup> <ul> <?php wp_list_pages('title_li='); ?> </ul></header>
<footer id=”footer”><p>copyright © <?php echo date(‘Y’); ?> blogname</p></footer>
header.php
footer.php
変更→追加→
追加→
変更→
変更→
変更→
※変更点•div#headerをheaderに変更•hgroupを追加•div#footerをfooterに変更
フッター・ヘッダー部分こんな感じに変更します
<header id=”header”> <hgroup> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2> </hgroup> <ul> <?php wp_list_pages('title_li='); ?> </ul></header>
<footer id=”footer”><p>copyright © <?php echo date(‘Y’); ?> blogname</p></footer>
header.php
footer.php
気になるところhgroupって？
→見出しが複数の見出しレベル
を持つ場合にグループ化し、ど
れが見出しになるかを定義
※最大の見出し以外はアウトラ
インに表示されません
HTML5はまだまだ未定な部分も多く、
分かりづらいとこ、？なとこも多いです
最後にひとつおねがい
みんなで情報を収集して
みんなで情報を共有する
そんな良いサイクルを作りませんか？
なので
最後まで読ん
でくれて
ありがとー(/
'□')/
top related