WordPressのテーマを作ってみます。テーマの名前は「Yamashina」ってのにしようかと。まだできていませんが、完成したらGitHubにアップしてダウンロードできるようにします。この記事ではまずベースになるHTMLを作るところまでを書きます。デザインは作れるけどHTMLが書けないという人はこの記事を読むとHTML5のコーディングの流れがなんとなく分かるんじゃないかと思います。

WordPressのオリジナルテーマ作成の手順

ゴールはWordPressのオリジナルテーマ作成です。全体の流れを示すと
  1. テーマでつくる種類（コーポレートサイトなのか店のサイトなのか個人ブログなのか）を決める
  2. HTMLでコーディングする
  3. デザインに基づいてCSSを書く
  4. htmlファイルをphpファイルにして各パーツ（ヘッダーやフッターやサイドバーなどなど）に切り分ける
  5. phpファイルの中身をWordPress関数で書き換えていく
とまぁこんな感じになります。今回は1~2までです。

どんなテーマにするの？

ずばりブログ用のテーマです。ありふれてますが。ただ画像をほとんど使わずに文章メインのブログを書く人向けにします。プログラミングとかの技術的なことを書く場合だとだいたいそうなりますから。トップページには記事の一覧を表示させますが、そのときもサムネイル的な画像は表示させません。投稿記事のタイトルと概要、投稿日時とタグ＆カテゴリくらいです。それで十分だと思います。

トップページのデザイン

今回のデザインは自分のブログで使っているデザインを参考にします（パクリじゃないです）。見た目はこんな感じです； 左のサイドバーは固定で
  • プロフィール画像
  • サイトの作成者名
  • サイトの説明
  • タグクラウド
  • カテゴリ一覧
  • SNSのリンク
があります。タグクラウドとカテゴリ一覧はどっかをクリックしたらサッと入れ替わる感じにします。固定ページ一覧もそのうちここで切り替えられるようにしようと思っています。 右のメイン部分には
  • 投稿記事のタイトル
  • 冒頭部分の文章
  • 投稿日時
  • 投稿記事につけられたタグ
  • 投稿記事のカテゴリ
  • 「記事を読む」的なもの（画像だと”more >>”がそれ）
がズラッと並ぶ感じです。一番下に著作権情報をつけます。 タブレットやスマホの場合は左にあったサイドバーが一番上に表示される感じにします；

まずはトップページの骨組みとhead要素を書いてくよ

HTMLの骨組みです。 以上です。これでhtmlファイルができました。index.htmlとかって名前で保存してブラウザで開くと何もない真っ白のページが表示されます。 次にhead要素です。後で色々つけたしますが今のところは でおKです。文字コードの設定とページのタイトル、それとあとでつくるcssファイルの読み込みです。

トップページのbody要素のアウトラインをつくる

まずはbody要素のアウトラインをつくります。この段階で使う要素はセクショニング・コンテンツであるarticle、aside、nav、sectionとヘディング・コンテンツであるh1、h2、h3、h4、h5、h6だけです。 左のサイドバー
  • プロフィール画像
  • サイトの作成者名
  • サイトの説明
  • タグクラウド
  • カテゴリ一覧
  • SNSのリンク
のうち、タグクラウドとカテゴリはnavにします。それぞれサイトにとって主要なナビになるからです。例えば検索を経由してサイトに訪れた人は、タグやカテゴリから他にめぼしい記事がないかを探すことになります。個別の記事ページにいくとパンくずリストをつくることになりますが、これもnavになります。ですがトップページにはパンくずリストは必要ないでしょう。 右のメイン部分はsection要素でセクションをつくり、その中にarticle要素で各記事ごとにセクションをつくります。section直下の見出し要素には「投稿記事一覧」、各々のarticle要素の見出し要素は投稿記事のタイトルになります。 ということでbody要素のセクショニングはこんな感じです； HTML 5 Outlinerでアウトラインを見るとこんな感じになってます；
  1. ブログの名前
    1. タグ一覧
    2. カテゴリ一覧
    3. ソーシャルボタン
    4. 投稿記事一覧
      1. 投稿記事1のタイトル

参考ページ

アウトラインに肉付けしていくよ

アウトラインができたので、header、footer、段落、リスト、リンク、画像等々を加えて肉付けします。左のサイドバー部分に表示させる

  • プロフィール画像
  • サイトの作成者名
  • サイトの説明
  • タグクラウド
  • カテゴリ一覧
  • SNSのリンク
のうち、上の3つをheader要素に書きます。HTML5でのheaderはセクションのヘッダーにあたる部分を表します。body要素はセクショニングルートになっているので、body要素の直下にheaderをおくことで、ページ全体という一つのセクションのヘッダーを表すことになります。 最後のSNSリンクはfooterに入れておきます。著作権者情報に関するリンクということにします。レイアウトはCSSでごにょごにょして左のサイドバーにもってくるようにします。 右のメイン部分ですが、各記事毎のarticle要素の中にheaderとfooterを用意します。HTML5に慣れてないと変に思うかもしれませんが、HTML5での<header>や<footer>はHTML5以前での<div id="header">や<div id="footer">とは別物です。header要素の中には、投稿記事のタイトル、投稿日時、投稿記事につけられたタグ、投稿記事のカテゴリを入れておきます。footer要素は空のままにしてあります。トップページでは各記事の著作権者情報を表示させないつもりです。 ということでコードはこんな感じになります； だいぶそれらしくなってきました。

参考ページ

トップページのMicrodataを設定するよ

次はMicrodataの設定です。できればすでに使われている要素にMicrodataを設定したかったのですが、一部難しいところがあったのでそこではmeta要素を使っています。

参考ページ

投稿ページを書いてくよ

トップページのマークアップがとりあえず一段落したので次に各投稿記事用のページをつくります。こんな感じの見た目を目指します； 左サイドはトップページと全く同じで、右側に投稿記事が表示されるようになっているだけです。あとはページの一番下にこんな感じ でこの記事の前後に投稿された記事へのナビを付け足します。ということでmain要素の部分はこんな感じになります； 関連記事一覧とかコメント欄は今のところ用意していません。あとあと付け足していこうかと。とりあえずトップページと投稿記事ページが表示できるようにします。

まとめ

これでトップページと投稿記事ページのHTMLの基礎が完成しました。HTML5でのマークアップするときは、ここでやったように
  1. セクショニング・コンテンツとヘディング・コンテンツを使って全体のアウトラインをつくる
  2. headerやfooterなどを付け足して全体を肉付けする
  3. Microdataを設定する
の順番でやっていくのが良いんじゃないかと思います。次のCSSを書く段階で
  • デザインをあてるためのclassやidを設定して、必要であればパーツをdivでラップする
というのをします。これは次回。