PC、ゲーム、デジタル機器などの初心者向けの話題や小技などをつらつらと……

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Loading...

WordPressのメイン記事分をHTML5準拠でコーディングする

 今回は前回作成したWordPress用HTMLテンプレートを基に、HTML5に準拠した形でメインとなる部分のコーディングを行っていく。

 前回からえらく時間が空いてしまったが、全ては決算月が悪いということで(笑)

 今回行うのはメイン部分=コンテンツとなる部分の全体枠及び、各記事を表示する部分のコーディング。この部分をHTML5に準拠したタグを用いてコーディングしていく。

 具体的に言うと、HTML5で新たに定義された要素である<article><section><header><footer><aside>の5つを用い、全体の形を整えていく。

 ちなみにこれら新要素は、既に前回紹介したHTML5対応のノーマライズCSSにてブロックレベル要素としてレンダリングされるように指定済み。
 もしブロックレベル要素へのレンダリング指定をしていないようなら、作業前に別途CSSにて指定しておくことを推奨。

ヘッダー部分を<header>を用いてコーディング

 従来(HTML4.x~XHTML)では、ヘッダー部分は<div>に「header」等のclassを付けてコーディングしていたが、HTML5ではヘッダー部分に使用するために新要素の<header>が新たに定義されたので、これを<div class="header">の代わりに用いる。

タイトル

 <?php echo home_url(); ?>は現在のブログタイトルのホームURLを返すテンプレートタグ。('/')とすることで、URLの最後にスラッシュを追加している。
 <?php bloginfo('description'); ?>は現在のブログの説明を表示するテンプレートタグ。具体的には管理画面の設定>一般設定>キャッチフレーズに入力した内容を表示する。

 ブログタイトルは従来通り<h1>でマークし、これらの内容を<header></header>で囲えばヘッダー部分は完成となる。

 ちなみにタイトルを文字ではなく画像にする場合は、文字の代わりに

<img src="画像のURL" />とすれば、タイトルを画像で表示可能となる。画像のURL取得は、現在の有効テーマのフォルダのURLを出力する<?php echo get_template_directory_uri(); ?>を使えば、テーマフォルダ直下の画像URLを容易に取得可能。

コンテンツ部分を<article>及び<section>を用いてコーディング

 今回の作業で最も重要かつ一番手間となる、メインとなるコンテンツ部分のコーディング。用いるタグの種類と用途は以下の通り。

  • <div>:コンテンツ全体を囲むために使用。
  • <article>:コンテンツ内の各記事部分全体を囲むために使用。
  • <section>:<article>内の<header>から<footer>までを囲むために使用。
  • <header>:各記事内のタイトル(<h2>)投稿日時等部分を囲むために使用。
  • <footer>:各記事内の下部情報部分(カテゴリー表記等)を囲むために使用。

 このコンテンツ部分を含むサイト全体像を簡単に図解すると、以下のような形となる。

150419_01.png

 迷いに迷ったのが記事を囲むタグの選定で、当初は<article>と<section>の使い方がよく分からず、ネット上での意見も極めて多種多様で何度も試行錯誤したが、最終的にはこちらの記事を参考とした上で、この形に落ち着いた。

 これまで調べたことを独自解釈で要約すると、<article>は例えばブログの個別記事のようにそれ自体で独立完結するセクションに用いるタグで、<section>は見出し要素(<h1>~<h6>)を内包し、各記事内の章や節等の階層を分けるために用いるタグとなる。
 この解釈でいけば、<section>は<article>の内部で<h2>や<h3>等の見出しタグで分けられる部分に用いるのが正解となり、いくら見出しタグを含もうとも<div>の代わりに記事を囲むタグとするのは不適切となる。

 これらを踏まえた上で、メインとなるコンテンツのループテンプレート部分をヘッダー部分やフッター部分の付加情報なども含めてコーディングしたのが以下となる。

<div id="content">
  <?php if(have_posts()): while(have_posts()): the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <section>
      <header>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php echo get_the_date(); ?></p>
      </header>
      <?php the_content(); ?>
      <footer>
        <p><?php the_category(', '); ?></p>
      </footer>
    </section>
  </article>
  <?php endwhile; endif; ?>
</div>

 <header>~</header>は各記事のタイトル(<h2>)及び投稿日時部分として使用。タイトルはテンプレートタグ<a href="<?php the_permalink(); ?>"><?php the_title(); ?>にて記事への個別リンク付きで出力。投稿日時は<?php echo get_the_date(); ?>にて取得。

<footer>~</footer>にはテンプレートタグ<?php the_category(', '); ?>にてカテゴリー分類を取得・出力している。

 WordPressにて肝心要となる投稿記事表示のループテンプレート<?php if(have_posts()): while(have_posts()): the_post(); ?>~<?php endwhile; endif; ?>は<div>~</div>の直前直後に、記事本文の出力を行う<?php the_content(); ?>は<header>と<footer>の間に記述する。

 ちなみに<article>には自動でidやclassを取得する<?php the_ID(); ?>と<?php post_class(); ?>を記述しており、後のCSSコーディングを容易にしている。
 またここでは省いてはいるが、<section>や<header>等にも適当なidやclass等を付与しており、後でまとめてCSSでスタイルの体裁を整えていく。

 取りあえずメインとなるコンテンツ箇所のコーディングはこれで落ち着いたが、実際問題<article>等の使い方が上記で正しいのかどうかはまだ明確には決まっておらず、コンテンツ全体を囲むのは<div>ではなく<article>とする意見があったりもする。

 ただ、あまり神経質になっても仕方がないし、HTML5自体まだ普及もしきっていないということも踏まえ、これから本格的に運用されていく中で明確な用途が定まっていくだろうから、また後々気付いた時にでもコーディング内容を変えていきたいと思う。

フッター部分を<footer>を用いてコーディング

 コンテンツ部分に比べてフッター部分は極めて単純明快であり、変に凝りさえしなければフッターに必要なのは著作権表記等の限られた情報しかないが、<head>部分に記述した<?php wp_head(); ?>同様、WordPressの運営上絶対に外せない記述があるので要注意。

  

This site is written in Japanese.Japanese fonts required to view this site.

Copyright © 2003- サイト名, All right reserved.
</div> <?php wp_footer(); ?> </body> </html>

 部分抜粋なので少々分かりにくいが、純粋なフッター部分は<footer>~</footer>内。</div>はコンテンツ部分全体を囲んでいる<div class="content">の終了タグになる。
 <footer>内には「このサイトは日本語表記のみ」と示す文面「This site is written in Japanese.Japanese fonts required to view this site.」と、サイト公開年及び著作権を示す文面「Copyright © 2015-<?php echo date('Y');?> サイト名, All right reserved.」を記述。
 サイト公開年の現在年は毎年変動するため、<?php echo date('Y');?>で現在年を自動取得するようにすると毎年の手動変更の手間が省けて楽になる。

 ちなみに上記の日本語表記と著作権表記の文面に関してはこれで正しいのかどうかはイチマチ自身がないので、これらをそのまま使用する場合は自己責任にてどうぞ(笑)

 最後にWordPressプラグインの正常動作のために必要となるテンプレタグ<?php wp_footer(); ?>は、<footer>内ではなく、</body>の直前に入れるのが推奨とされているため、</body>直前に記述。

メインコンテンツ部分のコーディング終了

 これでメイン部分のコーディングは終了したので、次回からは各記事のナビゲーション等の細部を整えていくことになる。
 これらの紹介は3月が忙しかったこともあって随分とゆっくりしてしまったが、実際作成中のWordPressサイト自体はほぼ公開直前にまで整っているので、これからの過程は比較的早く紹介できる……はず。多分。



Loading...
コメント
コメントの投稿
【Font & Icon】
管理者にだけ表示を許可する
プロフィール

雪陽炎

Author:雪陽炎
 PCやデジタル機器類いじりの他にも、あれやこれやと趣味を持つ器用貧乏な奈良県民。
 初心者向け兼自身の忘備録としてPC及びデジタル機器関連の情報をまとめてます。

参加ブログランキング

にほんブログ村 PC家電ブログ パソコン・周辺機器へ にほんブログ村 PC家電ブログ 家電・AV機器へ
にほんブログ村 PC家電ブログ PCオーディオへ
人気ブログランキングへ
人気ブログランキングへ
最新記事
スポンサ-ドリンク
最新コメント
最新トラックバック
Amazon
楽天
ブロとも申請フォーム

この人とブロともになる

関連記事Loader

[猫カフェ]futaha

スポンサードリンク
本館/別館サイト
カテゴリ
ブックマーク
最近のチェックリスト / PC関連
最近のチェックリスト / AV関連
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。