はじめに
- Category: WordPressでWebサイトを作ってみる
本講座で解説する内容の詳細
本講座*1でのWebサイト制作手順は以下の通り。
- デザインカンプ*2を制作
- 1.にそってHTMLを記述
- CSSを考慮しつつ画像をスライス。各パーツを書き出し。
- CSSを記述。2で書いたHTMLが1と同じ見た目になるように頑張る。
- 各コンテンツについて1〜4を繰り返す。
- 全コンテンツのページが出来たら、PHPを記述したりしてWordPressテーマ化する。
- 記事をテスト投稿してみて、動作・表示に問題がなさそうなら完成。
で、ここでは2〜7辺りを解説する。1については本読むなり、たくさんのサイト眺めるなりして各自で頑張って。
今回使うカンプはこれ。
手抜き過ぎるけど気にしない方向で。会社概要があって、製品情報があって、とありがちな企業のコーポレートサイトもどきをWordPressを利用して制作することに目標を据える。
必要なスキル
- HTMLの基礎知識
- 「h1？何それ」とかならない程度の知識があれば十分だと思う
- CSSの基礎知識
- ボックスの概念を理解していて、CSSのプロパティ集を読める程度の知識で十分
- WordPressの基礎知識
- Codex内のスタートガイドをさらっと読んだ程度の知識で十分。
利用するWebプログラム類
- WordPress
- これを使ってWebサイト作るので今更挙げるまでもないと思うけど、一往。
続いて利用するプラグイン。
- WP Multibyte Patch
- デフォルトで入っているけど必須。
- Top Level Categories
- カテゴリアーカイブのURLは通常「http://example.com/category/hoge」となっている。これを「http://example.com/hoge」に変更してくれるプラグインがこれ。それっぽくなるのでオススメ（謎）
- Custom Field GUI Utility SLUG
- Custom Field GUI Utility 3をカテゴリごとに設定ファイルを切り替えられるようにしたもの。デフォルトのままだとカスタムフィールドが使いづらくて仕方ないので実質必須。カスタム投稿機能はまだか。
作業に使うソフト
以下、今回私が作業するに当たって利用したソフト。もちろん似たようなことが出来れば何でも構わない。
- Adobe Fireworks
- カンプの制作と画像のスライス・書き出しに利用。職業柄、私は業務用ソフトを使っているけど、自分の使い慣れたグラフィックソフトであれば何でも構わない。あくまで個人的な好みではあるけど、カンプ制作に限ってはPhotoshopよりもFireworksの方が使いやすい。ベクターとビットマップを同一画面で扱えるので使い勝手がいい。
- Coda
- エディタについては、Macで作業するときはこれ。職場ではDreamweaverだけどね。Dreamweaverは、というかAdobeのソフトはどうもMacのインターフェイスと親和性が低い気がして、どうしても代替が利かないもの*3以外はあまり使いたくない。
- MAMP
- MacでApache、MySQL、PHPな環境を簡単に調えるソフト。ApacheとPHPはOSに標準で付属しているからそれを使ってもいいけど、MAMPの方がお手軽なので。WindowsならXAMPPかな。もちろん、適当なレンタルサーバで作業しても問題なし。ただ、実サーバにファイルをあげる前に不具合とかを確認出来るので、ローカルで色々実験出来る環境は整えておいた方がいいと思う。