WordPressのオリジナルテーマ「Yamashina」ってのをつくってみるよ – (1) HTML5でのマークアップ編

記事更新日 

記事公開日 

タグ：,

  1. Home
  2.  > TECHBLOG
  3.  > CMS
  4.  > WordPress

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の骨組みです。

<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>

以上です。これでhtmlファイルができました。index.htmlとかって名前で保存してブラウザで開くと何もない真っ白のページが表示されます。

次にhead要素です。後で色々つけたしますが今のところは

<head>
  <meta charset="utf-8">
  <title>ブログのタイトル</title>
  <link rel="stylesheet" href="#">
</head>

でおKです。文字コードの設定とページのタイトル、それとあとでつくるcssファイルの読み込みです。

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

まずはbody要素のアウトラインをつくります。この段階で使う要素はセクショニング・コンテンツであるarticle、aside、nav、sectionとヘディング・コンテンツであるh1、h2、h3、h4、h5、h6だけです。

左のサイドバー

  • プロフィール画像
  • サイトの作成者名
  • サイトの説明
  • タグクラウド
  • カテゴリ一覧
  • SNSのリンク

のうち、タグクラウドとカテゴリはnavにします。それぞれサイトにとって主要なナビになるからです。例えば検索を経由してサイトに訪れた人は、タグやカテゴリから他にめぼしい記事がないかを探すことになります。個別の記事ページにいくとパンくずリストをつくることになりますが、これもnavになります。ですがトップページにはパンくずリストは必要ないでしょう。

右のメイン部分はsection要素でセクションをつくり、その中にarticle要素で各記事ごとにセクションをつくります。section直下の見出し要素には「投稿記事一覧」、各々のarticle要素の見出し要素は投稿記事のタイトルになります。

ということでbody要素のセクショニングはこんな感じです；

<body>
 
  <h1>ブログの名前</h1>
 
  <nav>
    <h1>タグ一覧</h1>
  </nav>
 
  <nav>
    <h1>カテゴリ一覧</h1>
  </nav>
 
  <section>
    <h1>ソーシャルボタン</h1>
  </section>
 
  <section>
 
    <h1>投稿記事一覧</h1>
 
    <article>
      <h1>投稿記事1のタイトル</h1>
    </article>
 
    <!-- 記事の数だけarticleを繰り返す -->
 
  </section>
 
</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要素は空のままにしてあります。トップページでは各記事の著作権者情報を表示させないつもりです。

ということでコードはこんな感じになります；

<body>
 
  <header>
 
    <h1><a href="#">ブログの名前</a></h1>
    <p>ブログの説明</p>
    <p>ブログ作成者</p>
    <a href="#"><img src="#" alt="profile picture"></a>
 
    <nav>
      <h1>タグ一覧</h1>
      <ul>
        <li><a href="#">タグ1</a></li>
        <!-- タグの数だけliを繰り返す -->
      </ul>
    </nav>
 
    <nav>
      <h1>カテゴリ一覧</h1>
      <ul>
        <li><a href="#">カテゴリーA</a></li>
        <!-- カテゴリの数だけliを繰り返す -->
      </ul>
    </nav>
 
  </header>
 
  <main role="main">
 
    <section>
 
      <h1>投稿記事一覧</h1>
 
      <article>
        <header>
          <h1><a href="#">投稿記事1のタイトル</a></h1>
          <a href="#">
            <time datatime="#">投稿時間</time>
          </a>
          <a href="#">
            <ul>
              <li><a href="#">記事に付けられたタグ1</a></li>
              <!-- タグの数だけliを繰り返す -->
            </ul>
          </a>
          <a href="#">記事の入っているカテゴリ</a>
        </header>
        <p>投稿記事1概要</p>
        <p><a href="#">記事を読む</a></p>
        <footer>
        </footer>
      </article>
 
      <!-- 記事の数だけarticleを繰り返す -->
 
    </section>
 
  </main>
 
  <footer>
    <address><a href="#">サイトの著作者情報</a></address>
    <section>
      <h1>SNSリンク</h1>
      <ul>
        <li><a href="#">SNSリンク1</a></li>
        <!-- SNSリンクの数だけliを繰り返す -->
      </ul>
    </section>
    <address><a href="#">テーマファイルの著作者情報</a></address>
  </footer>
 
</body>

だいぶそれらしくなってきました。

参考ページ

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

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

<body>
 
  <!--
    トップページのヘッダ情報です
  -->
  <header itemscope itemtype="http://schema.org/Blog">
 
    <h1 itemprop="name"><a href="#" itemprop="url">ブログの名前</a></h1>
    <p itemprop="description">ブログの説明</p>
    <p itemprop="author creator editor copyrightHolder">ブログ作成者</p>
    <a href="#"><img src="#" alt="profile picture" id="profile-picture" itemprop="image"></a>
    <meta itemprop="inLanguage" content="ja">
    <meta itemprop="copyrightYear" content="2014">
 
    <nav>
      <h1>タグ一覧</h1>
      <ul>
        <li><a href="#">タグ1</a></li>
        <li><a href="#">タグ2</a></li>
        <!-- タグの数だけliを繰り返す -->
      </ul>
      <meta itemprop="keywords" content="タグ1,タグ2">
    </nav>
 
    <nav>
      <h1>カテゴリ一覧</h1>
      <ul>
        <li><a href="#">カテゴリーA</a></li>
        <li><a href="#">カテゴリーB</a></li>
        <!-- カテゴリの数だけliを繰り返す -->
      </ul>
    </nav>
 
  </header>
 
  <!--
    トップページのメイン部分です
  -->
  <main role="main">
 
    <section>
 
      <header>
        <h1>投稿記事一覧</h1>
      </header>
 
      <article itemscope itemtype="http://schema.org/BlogPosting">
        <header>
          <h1 itemprop="name"><a href="#">投稿記事1のタイトル</a></h1>
          <meta itemprop="inLanguage" content="ja">
          <a href="#">
            <time datetime="2014-10-13T00:00:00.000Z" itemprop="datePublished">Oct 13 2014</time>
          </a>
          <ul>
            <li><a href="#">記事に付けられたタグ1</a></li>
            <li><a href="#">記事に付けられたタグ2</a></li>
            <!-- タグの数だけliを繰り返す -->
          </ul>
          <meta itemprop="keywords" content="記事に付けられたタグ1,記事に付けられたタグ2">
          <a href="#">記事の入っているカテゴリ</a>
        </header>
        <p itemprop="articleBody">投稿記事1概要</p>
        <p><a href="#">記事を読む</a></p>
        <footer>
        </footer>
      </article>
 
      <!-- 記事の数だけarticleを繰り返す -->
 
    </section>
 
  </main>
 
  <!--
    トップページのフッタ情報です
  -->
  <footer itemscope itemtype="http://schema.org/Person" itemref="profile-picture">
 
    <span>©</span>
    <span>2014</span>
    <span itemprop="name">ブログ作成者名</span>
 
    <section>
      <h1>SNSリンク</h1>
      <ul>
        <li><a href="#" itemprop="sameAs url">SNSリンク1</a></li>
        <li><a href="#" itemprop="sameAs url">SNSリンク2</a></li>
        <!-- SNSリンクの数だけliを繰り返す -->
      </ul>
    </section>
 
    <span><a href="http://wordpress.org">WordPress</a> theme <a href="#">"Yamashina"</a> by <a href="http://yukiyamashina.github.io/blog/">Yuki Yamashina</a></span>
 
  </footer>
 
</body>

参考ページ

投稿ページを書いてくよ

トップページのマークアップがとりあえず一段落したので次に各投稿記事用のページをつくります。こんな感じの見た目を目指します；

左サイドはトップページと全く同じで、右側に投稿記事が表示されるようになっているだけです。あとはページの一番下にこんな感じ

でこの記事の前後に投稿された記事へのナビを付け足します。ということでmain要素の部分はこんな感じになります；

<!--
  投稿ページのメイン部分です
-->
<main role="main">
 
  <article itemscope itemtype="http://schema.org/BlogPosting">
 
    <header>
      <h1 itemprop="name"><a href="#">投稿記事1のタイトル</a></h1>
      <meta itemprop="inLanguage" content="ja">
      <a href="#">
        <time datetime="2014-10-13T00:00:00.000Z" itemprop="datePublished">Oct 13 2014</time>
      </a>
      <ul>
        <li><a href="#">記事に付けられたタグ1</a></li>
        <li><a href="#">記事に付けられたタグ2</a></li>
        <!-- タグの数だけliを繰り返す -->
      </ul>
      <meta itemprop="keywords" content="記事に付けられたタグ1,記事に付けられたタグ2">
      <a href="#">記事の入っているカテゴリ</a>
    </header>
 
    <p itemprop="articleBody">投稿記事1の内容</p>
 
    <nav>
      <h1>記事の前後に投稿された記事へのナビ</h1>
      <a href="#">
        <span><</span>
        <span>新しい記事のタイトル</span>
      </a>
      <a href="#">
        <span><</span>
        <span>古い記事のタイトル</span>
      </a>
    </nav>
 
  </article>
 
 
</main>

関連記事一覧とかコメント欄は今のところ用意していません。あとあと付け足していこうかと。とりあえずトップページと投稿記事ページが表示できるようにします。

まとめ

これでトップページと投稿記事ページのHTMLの基礎が完成しました。HTML5でのマークアップするときは、ここでやったように

  1. セクショニング・コンテンツとヘディング・コンテンツを使って全体のアウトラインをつくる
  2. headerやfooterなどを付け足して全体を肉付けする
  3. Microdataを設定する

の順番でやっていくのが良いんじゃないかと思います。次のCSSを書く段階で

  • デザインをあてるためのclassやidを設定して、必要であればパーツをdivでラップする

というのをします。これは次回。

関連記事