WordPress

まずはHTMLでスタティック(静的)ページを作ろう

投稿日:

前回、WordPressテーマ制作の大まかな流れについてご紹介しました。

ここでは、その流れに沿ってまずはテーマ制作の下準備としてHTMLによるスタティック(静的)ページの制作についてご紹介していこうと思います。

スタティック(静的)ページとは?

スタティックページとは、いつどこから読み込んでも内容が変動しないWebページのことを言います。

HTMLで作成したファイルには、あらかじめページの生成に必要なすべての情報を記述しておき、ブラウザで表示させる内容はいつどこから、誰が読み込んでも同じものです。

それに対してダイナミック(動的)ページは、ブラウザで表示する際にプログラムによって情報を組み合わせて生成するページのことを言います。

ブログのトップページをイメージしてみてください。ブログのトップページには一般的に最新記事の一覧が表示されているかと思いますが、これらの記事の情報はページにアクセスする日時によって異なります。SNSやネット掲示板でも同じですね。

これらのページは、ブラウザで表示させる際に骨組みとなるテンプレートにPHPやCGIなどのプログラムによって情報を埋め込んで生成されるため、ユーザーがアクセスする日時や地域などによって違う内容を返します。

HTMLで作成したウェブサイトはスタティック(静的)ページで構成され、WordPressサイトはダイナミック(動的)ページで構成されています。WordPressの場合、下図のようにしてページを生成しています。

WodPressのページ生成の流れ

勘違いしやすいところですが、JavaScriptなどで動きをつけたページはダイナミック(動的)ページではなくスタティック(静的)ページです。

JavaScriptで動きをつける場合、その動きの部分を含めてあらかじめすべてのソースを作成した状態でサーバーにアップロードしておき、ブラウザで表示する際には、用意したファイルがすべてそのまま読み込まれます。

ダイナミック(動的)ページは、サーバーにはページを構成するファイルを部品の状態で上げておき、ブラウザで表示する際にそれらを組み合わせてページを生成します。

大きく分けて、静的ページと動的ページの違いはこの部分です。

なぜスタティックページを作るのか?

ではなぜWordPressテーマを制作するのに、まずスタティックページを作る必要があるのか? ということですが、もっとも大きな理由は制作工程が煩雑になるのを防ぐためです。

テーマを制作する場合、必ずと言っていいほど製作途中で表示崩れなどの不具合が発生します。そんなときにHTMLとプログラムの記述を同時に進めていると、不具合の原因がHTMLの記述にあるのか、それともプログラムにあるのか、原因の特定に時間が掛かってしまいます。

しかしHTML(CSSとJavaScriptも)の作成を先に済ませておけば、WordPressテーマに変換する段階で不具合が起きた場合に原因をPHPの記述の部分に絞ることができます。

WordPressテーマの場合、元となるHTMLソースに動的に生成する必要のある箇所をPHPで埋め込む形で成り立っているものがほとんどですので、静的な部分と動的な部分を分けて作成することで、制作をスムーズに進めることができるというわけです。

スタティックページ制作の流れ

スタティックページ制作の流れは、業者に頼らず自分で作る!初心者のためのウェブサイト制作ガイド【全10回】で詳しく説明していますので、そちらをご覧ください。

なお、WordPressテーマ制作に限らずウェブコンテンツを制作するにはある程度のHTML、CSS、JavaScriptの知識は必要になります。これまで一度もウェブサイトを作ったことがないという人は、いきなりWordPressテーマの制作にかからず、まずはHTMLでのウェブサイト制作にチャレンジして頂ければと思います。

これまでウェブサイト運営というとブログを書くだけとか、更新は制作の知識のある人にお任せ状態だった人には是非、この機会に制作の知識を身に付けてみてほしいと思います。

サイト運営をする上で、制作について知っているのといないのとでは大違いです。知識があればウェブサイトでできることの幅が広がりますし、新たなアイディアをひらめくヒントにもなります。また制作を業者に依頼する場合にぼったくられるリスクも減らすことができるでしょう。

これが制作についてまったく知らないと、どこかで見たサイトの猿真似の域をいつまでも出られなかったり、業者の見積もりが適正かどうかを見極められなかったりします※。

※制作業者の見積もりは、安ければ安いほどよく、高ければいつもぼったくりというわけではありません。品質を担保するために人的・時間的リソースを割く必要があると考えている業者の場合、他者と比べて見積金額が高くなることもあります。反対に見積金額が極端に低い場合、品質に問題があったり要望と違うものが納品されたりというトラブルにつながる恐れもあります。見積もり内容が適正か判断するためにも、制作についてある程度知っておくことをおすすめします。

WordPressテーマ化を見越した階層構造で

WordPressテーマにすることを想定してHTMLファイルを作成する場合、スタイルシート(CSSファイル)とHTMLファイルをルート階層に配置しておくと後の工程がスムーズです。

WordPressを使わずにウェブサイトを制作する場合、下層ページごとにディレクトリを分けて、それぞれのページで使う画像などのファイルもその中に… というような感じで階層構造化します。

しかしWordPressテーマの場合、スタイルシートとそれを読み込むテンプレートファイル(PHPファイル)がルートに配置されているのが一般的です。

そのため、WordPressテーマに変換するときにパスの修正をしなくてもいいように、この段階でテーマの階層構造にならって各ファイルを配置しておくようにします。

WordPressテーマ化のための階層構造

ここでしっかり構成の確認を!

ウェブサイトの構成は、できるだけこの段階でしっかりと詰めておきましょう。制作するサイトにどんなページが必要になるのか、またはどんなコンテンツが必要になるのかを明確にしておくことで、あとあとになって不足に気付いて作業があっちこっち散らかってしまうということを避けられます。

作業が煩雑化することはトラブルの原因になりますので、そういったリスクを避ける意味でも

  • 各ページ内のコンテンツ
  • アーカイブページ(記事一覧など構成から抜けていないか)
  • 補足的な内容の下層ページ

などを重点的に、「ユーザーが快適にサイト内を見て回るためにはどんなページが必要か?」をイメージしながら構成を確認してみてください。

-WordPress

Copyright© DAINASHI YESTERDAY , 2017 All Rights Reserved.