Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Word Bench TokyoWord Bench Tokyo
カスタム投稿タイプと
カスタムフィールドで作る
Webサイト
Tsuyoshi. (@andante0727)
自己紹介
名前
     Tsuyoshi. @andante0727
生息地 福岡県
主なお仕事 Web制作全般(ディレクション以外)
コミュニティ参加歴
2011/11/28 WordCamp Tokyo 2011
2011/12/23 W...
テーマ
・WordPressをブログでしか使ったことがない
・仕事で使いたいけれど、どう作るか解らない
WordPressでWebサイトを作ってみましょう!
目標とするWebサイト
デザインはb-cures.(ビーキュアズ)
のまあさんがしてくれました!
今回、架空の水族
館のページのテー
マを制作しまし
た。
サイト階層
水族館の魚の一
覧を表示する
ページです。
「水族館の魚たち」一覧ページ
サイト階層
水族館の魚の詳
細を表示する
ページです。
「水族館の魚たち」詳細ページ
サイト階層
このようにいっ
ぱい表示項目が
ある…。
どう作ればいいんだ!
「水族館の魚たち」一覧ページ
「水族館の魚たち」詳細ページ
サイト階層
カスタム投稿タイプと
カスタムフィールドを
使います。
このように投稿ページで
HTMLを流すようなことはせず
カスタム投稿タイプって?
この投稿タイプですが、独自のものを作れます。
・WordPress 3.0からの機能
・通常の投稿タイプはpost、固定ページはpage
これを「カスタム投稿タイプ」といいます。
カスタム投稿タイプって?
通常の投稿
カスタム投稿
(投稿タイプfishを作成)
固定ページ
カスタムフィールドて?
・投稿ページで、任意の入力フィールドを作ること
が出来ます。
カスタムフィールド
を使用して実現
使用プラグイン一覧
・Custom Post Type UI(Ver0.7.1)
・Custom Field GUI Utility(Ver3.2.4)
(WordPressはVer3.3.1で検証しました。)
プラグインを使うと簡単!
何だか...
テンプレート階層
fishの部分は投
稿タイプを表
しています。
index.php
archive-fish.php
single-fish.php
トップページ
「水族館の魚たち」一覧ページ
「水族館の魚たち」詳細ページ
テンプレート階層
実際のテーマ
構成はこうなっ
てます。
css
images
js
index.php
archive-fish.php
single-fish.php
header.php
sidebar.php
footer.php
styl...
詳しくはWebで!
ご清聴有難うございました。
http://webcake.no003.info
Upcoming SlideShare
Loading in …5
×

カスタム投稿タイプとカスタムフィールドで作るWebサイト

1,023 views

Published on

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

Published in: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

カスタム投稿タイプとカスタムフィールドで作るWebサイト

  1. 1. Word Bench TokyoWord Bench Tokyo カスタム投稿タイプと カスタムフィールドで作る Webサイト Tsuyoshi. (@andante0727)
  2. 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. 3. テーマ ・WordPressをブログでしか使ったことがない ・仕事で使いたいけれど、どう作るか解らない WordPressでWebサイトを作ってみましょう!
  4. 4. 目標とするWebサイト デザインはb-cures.(ビーキュアズ) のまあさんがしてくれました! 今回、架空の水族 館のページのテー マを制作しまし た。
  5. 5. サイト階層 水族館の魚の一 覧を表示する ページです。 「水族館の魚たち」一覧ページ
  6. 6. サイト階層 水族館の魚の詳 細を表示する ページです。 「水族館の魚たち」詳細ページ
  7. 7. サイト階層 このようにいっ ぱい表示項目が ある…。 どう作ればいいんだ! 「水族館の魚たち」一覧ページ 「水族館の魚たち」詳細ページ
  8. 8. サイト階層 カスタム投稿タイプと カスタムフィールドを 使います。 このように投稿ページで HTMLを流すようなことはせず
  9. 9. カスタム投稿タイプって? この投稿タイプですが、独自のものを作れます。 ・WordPress 3.0からの機能 ・通常の投稿タイプはpost、固定ページはpage これを「カスタム投稿タイプ」といいます。
  10. 10. カスタム投稿タイプって? 通常の投稿 カスタム投稿 (投稿タイプfishを作成) 固定ページ
  11. 11. カスタムフィールドて? ・投稿ページで、任意の入力フィールドを作ること が出来ます。 カスタムフィールド を使用して実現
  12. 12. 使用プラグイン一覧 ・Custom Post Type UI(Ver0.7.1) ・Custom Field GUI Utility(Ver3.2.4) (WordPressはVer3.3.1で検証しました。) プラグインを使うと簡単! 何だか難しそう…。
  13. 13. テンプレート階層 fishの部分は投 稿タイプを表 しています。 index.php archive-fish.php single-fish.php トップページ 「水族館の魚たち」一覧ページ 「水族館の魚たち」詳細ページ
  14. 14. テンプレート階層 実際のテーマ 構成はこうなっ てます。 css images js index.php archive-fish.php single-fish.php header.php sidebar.php footer.php style.css … CSSフォルダ … 画像フォルダ … JSフォルダ … トップページ … 一覧ページ … 詳細ページ … ヘッダー … サイドバー … フッター … テーマ用CSS
  15. 15. 詳しくはWebで! ご清聴有難うございました。 http://webcake.no003.info

×