20130911_1.png

WordPressテーマの制作の流れ PART.1

WordPressテーマの制作の流れ PART.1

20130911 1

WordPressをCMSとして採用する場面は、弊社(株式会社wEVA)でも多い方です。積極的な更新が必要なサイトであったり…サイトの運営形態にもあわせて選択するように心がけていますがそれでも資料の多さやカスタマイズのしやすさからもWordPressを採用する場面は結構多いのではないかと思います。

WordPressのオリジナルテーマの制作方法は他のサイトや書籍でもいろいろと紹介されているので、ここであらためて書く必要もないように思いましたが、聞かれることも多いのでまとめてみます。

WordPressのインストール

まず、ここから先の記事はWordPressがインストールされていることを前提に解説します。レンタルサーバーでも構いませんがローカルのマシンにWordPressをインストールしておくと、その都度FTPする必要もありませんし、使っては壊して…という感じでいくらでも実験もできるので是非インストールをオススメします。

  • XAMPPやMAMPの環境をつくる
  • WordPressを解凍し、Webサーバーのサイトフォルダにコピーする
  • WordPressを解凍してコピーしたフォルダをブラウザで開く
  • 完了!!(笑)

インストールの説明についてはさらっと(^^;

WordPressオリジナルテーマの制作

WordPressのオリジナルテーマの制作は以下の様な流れでおこないます。

  1. まずはワイヤーフレームを制作する
  2. HTMLとCSSでサイトデザインする
  3. style.cssを制作する
  4. 各パーツに分解する
  5. 確認

まずは、上記の順番に沿って説明していきます。

WordPressの管理画面の枠の中にコピペしている方を見かけますが、自分の場合は「wp-content」の下の「themes」フォルダにFTPするようにしています。

まずはワイヤーフレームを制作する

まずは通常のサイトを制作するのと同様にワイヤーフレームを制作します。ここで書かれたワイヤーフレームはこの後もページを分解してパーツにした時などの設計図にもなるので重要です。ページのヘッダはどこからどこまでなのか?サイドバーはどうするか?フッタもどこからどこまでなのか?…この他にも共通してサイト内で利用される部品化のできる部分はどこなのかを明確にしましょう。

HTMLとCSSでサイトデザインする

ワイヤーフレーム(モックアップ)に従ってコーディングを始めます。この時点ではWordPressはそんなに意識せず、出来上がったフHTMLファイルをブラウザでチェックするなど、一般のサイトを作る時と同じ流れでHTMLファイルとCSSファイルを制作します。

また、CSSについては次で制作する「style.css」に内容を書き足しても構いませんし、「style.css」から「@import url('stylesheets/style.css');」のように外部ファイルとして読み込んでも構いません(弊社の場合は管理上楽なので後者の外部ファイル形式でやっています)

style.cssを制作する

テーマを入れるフォルダに必ず必要な「style.css」を制作します。このファイルには一番最初に以下のような記述が必要です。ここに書かれた内容をWordPressは判断し、このフォルダの中身がテーマファイル一式だと認識します(同時にscreenshot.pngも作っておきます)。

各パーツに分解する

WordPressのテンプレートファイルで一番最初に読み込まれるファイルは「index.php」です。このファイルをざっくり書くと以下の様な構成になっています。いきなりPHPが書かれているのでびっくりする方もいるかもしれませんが、ここで書かれているPHPのコードはそれぞれ「header.phpを読み込む」、「sidebar.phpを読み込む」、「footer.phpを読み込む」とだけ書かれています。

まずは、さっき制作したHTMLファイルをワイヤーフレームを参考にしながらヘッダ、フッタ、必要ならばサイドバーに分割します。

分割したファイルはそれぞれ「header.php」、「footer.php」、「sidebar.php」と名前をつけて保存します。

上のコードを参考にしての「index.php」も制作しておきます。この時点ではメインの記事の部分はダミーのテキストのままでも空っぽでも構いません。

ここで一旦、制作出来たファイルを全てローカルの「wp-content」の下の「themes」フォルダ配下にテーマ専用のフォルダをつくって保存し、WordPressの管理画面から「外観」→「テーマ」を開いてみましょう。ここまでの流れがうまくできていれば「利用可能なテーマ」の中に先ほど保存したscreenshot.pngと、テーマの情報が表示されているはずです。

試しにそのテーマを「有効化」してページを開いてみましょう。

記事はダミーか何もないけれども、サイトが表示されているのは確認できましたか?

次回に続きます

今回はここまでですが、次回はここで制作したトップページに記事を読み込んで表示する部分を説明していこうと思います。

※こうしてテンプレートのつくり方をあらためて書き上げておきましたが、実際の現場で必要とされているWordPressの説明は全く違うものなので、いつか機会を設けて解説する機会があればと思います。

基礎からのWordPress (BASIC LESSON For Web Engineers)
高橋 のり
ソフトバンククリエイティブ
売り上げランキング: 7,396
【Amazon.co.jp限定特典付き】本格ビジネスサイトを作りながら学ぶ WordPressの教科書2  スマートフォン対応サイト編
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 755
プロが選ぶ WordPress優良プラグイン事典
相原 知栄子 一戸 健宏 鳥山 優子 西川 伸一 服部 久純 星野 邦敏 松田 千尋 吉澤 富美 大串 肇 大島 義裕 大曲 仁 北村 崇 小島 勝茂 後藤 賢司 染谷 昌利 高野 直子 高橋 文樹
エムディエヌコーポレーション
売り上げランキング: 65,169

この記事を書いた人

Takamasa Suzuki株式会社wEVA代表取締役Twitter:@webcrafts
沖縄に移住してあっというまに四年が経過しました。大勢の方と知り合え、本土にいたままでは経験できないようなこともいっぱい経験させてもらえて感謝の毎日です。

投稿者:

Takamasa Suzuki

沖縄に移住してあっというまに四年が経過しました。大勢の方と知り合え、本土にいたままでは経験できないようなこともいっぱい経験させてもらえて感謝の毎日です。