WordBench東京でお話した時のスライドです。

1. Word Bench TokyoWord Bench Tokyo
カスタム投稿タイプと
カスタムフィールドで作る
Webサイト
Tsuyoshi. (@andante0727)

2. 自己紹介
名前
Tsuyoshi. @andante0727
生息地 福岡県
主なお仕事 Web制作全般（ディレクション以外）
コミュニティ参加歴
2011/11/28 WordCamp Tokyo 2011
2011/12/23 WordCamp Tokyo 2011 非公式忘年会
2012/01/21 WordCrab Fukui 2012
（何故に神戸や福岡のCampに参加してないのか…ごめんなさい。）
勉強中
・CS-Cart（仕事したいです。仕事下さい。）
・CakePHP（サービスを作る！）

3. テーマ
・WordPressをブログでしか使ったことがない
・仕事で使いたいけれど、どう作るか解らない
WordPressでWebサイトを作ってみましょう！

4. 目標とするWebサイト
デザインはb-cures.（ビーキュアズ）
のまあさんがしてくれました！
今回、架空の水族
館のページのテー
マを制作しまし
た。

5. サイト階層
水族館の魚の一
覧を表示する
ページです。
「水族館の魚たち」一覧ページ

6. サイト階層
水族館の魚の詳
細を表示する
ページです。
「水族館の魚たち」詳細ページ

7. サイト階層
このようにいっ
ぱい表示項目が
ある…。
どう作ればいいんだ！
「水族館の魚たち」一覧ページ
「水族館の魚たち」詳細ページ

8. サイト階層
カスタム投稿タイプと
カスタムフィールドを
使います。
このように投稿ページで
HTMLを流すようなことはせず

9. カスタム投稿タイプって？
この投稿タイプですが、独自のものを作れます。
・WordPress 3.0からの機能
・通常の投稿タイプはpost、固定ページはpage
これを「カスタム投稿タイプ」といいます。

10. カスタム投稿タイプって？
通常の投稿
カスタム投稿
(投稿タイプfishを作成)
固定ページ

11. カスタムフィールドて？
・投稿ページで、任意の入力フィールドを作ること
が出来ます。
カスタムフィールド
を使用して実現

12. 使用プラグイン一覧
・Custom Post Type UI（Ver0.7.1）
・Custom Field GUI Utility（Ver3.2.4）
（WordPressはVer3.3.1で検証しました。）
プラグインを使うと簡単！
何だか難しそう…。

13. テンプレート階層
fishの部分は投
稿タイプを表
しています。
index.php
archive-fish.php
single-fish.php
トップページ
「水族館の魚たち」一覧ページ
「水族館の魚たち」詳細ページ

14. テンプレート階層
実際のテーマ
構成はこうなっ
てます。
css
images
js
index.php
archive-fish.php
single-fish.php
header.php
sidebar.php
footer.php
style.css
… CSSフォルダ
… 画像フォルダ
… JSフォルダ
… トップページ
… 一覧ページ
… 詳細ページ
… ヘッダー
… サイドバー
… フッター
… テーマ用CSS

15. 詳しくはWebで！
ご清聴有難うございました。
http://webcake.no003.info