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.

WordCamp Tokyo2012 Session

5,335 views

Published on

WordCamp Tokyo 2012で発表した「ギャラリーサイトの制作手順」です。

  • Be the first to comment

WordCamp Tokyo2012 Session

  1. 1. WordPressを使ったギャラリーサイトの制作手順 WordCamp Tokyo 2012 大竹・塚口
  2. 2. 自己紹介 大竹 孔明 こうめ Twitter Bamboo_C facebook komei.otakeWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  3. 3. 自己紹介 塚口 祐司 Yuu Twitter regret_raym facebook regretraymWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  4. 4. アウトライン1. WordPressギャラリーサイトの事例2. サイト制作のワークフローについて3. 構築と運用を考慮した実装ポイントWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  5. 5. WordPress × GalleryWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  6. 6. I / O 3000 http://io3000.com/WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  7. 7. CARD OBSRVER http://cardobserver.com/WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  8. 8. POLIO STARS.NET http://www.foliostars.net/WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  9. 9. More…• ギャラリー用のテーマもある – Shotoku(β版)HTML5製のレスポンシブテーマ http://kachibito.net/wordpress/shotoku.html• ギャラリー用のプラグインもある – Next GEN Gallery http://wordpress.org/extend/plugins/nextgen- gallery/WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  10. 10. 会議WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  11. 11. 合宿WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  12. 12. 2つのサイトが出来ましたWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  13. 13. 名刺ギャラリーサイト 「NameCard.jp」WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  14. 14. ポートフォリオサイト「Arcted」WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  15. 15. ワークフローコンセプト 設計 実装WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  16. 16. コンセプトWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  17. 17. 設計
  18. 18. 実装WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  19. 19. 構築と運用の 実装ポイントWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  20. 20. 構築のポイント• コーディングのポイント• ギャラリー画像の最適化• カスタム投稿タイプの利用WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  21. 21. コーディングのポイント header.php sidebar.php footer.phpWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  22. 22. コーディングのポイント header.php sidebar.php footer.phpWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  23. 23. ギャラリー画像の最適化• ImageOptim• PNGGauntlet• JPEGmini WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  24. 24. カスタム投稿タイプの利用投稿・ページ以外の投稿タイプを用意するWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  25. 25. カスタム投稿タイプの利用 function custom_post_type_portfolio() { $labels = array( name => _x(ポートフォリオ,post type general name), singular_name => _x(ポートフォリオ, post type singular name), add_new => _x(新規ポートフォリオ, book), add_new_item => __(新しいポートフォリオを追加), edit_item => __(ポートフォリオを編集), new_item => __(新しいポートフォリオ), view_item => __(ポートフォリオを表示),functions.phpに記述 search_items => __(ポートフォリオを探す), not_found => __(ポートフォリオが見つかりません), not_found_in_trash => __(ゴミ箱にポートフォリオはありません), parent_item_colon => );プラグインなら、 $args = array( labels => $labels,Custom Post Type UI public => true, show_ui => true, query_var => true, hierarchical => false, menu_position => 2, has_archive => true, supports => array(title,editor, thumbnail) ); register_post_type(portfolio, $args); flush_rewrite_rules( false ); } add_action(init, custom_post_type_portfolio); WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  26. 26. 運用のポイント• カスタムフィールドの設計• 投稿画面のカスタマイズ• 画像の取得方法を考えるWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  27. 27. カスタムフィールドの設計 タイトルキャッチコピー 説明 URLWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  28. 28. カスタムフィールドの設計プラグインなら Advanced Custom Fields WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  29. 29. 投稿画面のカスタマイズ 必要のないフィールドは消すWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  30. 30. 投稿画面のカスタマイズ Editor Templates by jim912WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  31. 31. 投稿画面のカスタマイズWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  32. 32. 画像の取得方法を考える• アイキャッチ画像を使う• 投稿に添付する• カスタムフィールドを使う• APIを利用するWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  33. 33. 画像の取得方法を考える• アイキャッチ画像を使う – 一覧ページや詳細ページで1枚のみの表示として• 投稿に添付する – 1記事に対して大量の画像を使用する場合• カスタムフィールドを使う – 使用する画像枚数が決まっている場合• APIを利用する – サイトのスクリーンショットを取得する場合 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  34. 34. APIを利用する• WordPress.comの非公開APIで取得する – http://s.wordpress.com/mshots/v1/http%3A%2F %2Fname-card.jp%2F?w=500 ↓ – http://s.wordpress.com/mshots/v1/<?php echo urlencode(‘http://name-card.jp/’);?>?w=500 ※非公開APIは使用もリンクも自由だが、無保証 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  35. 35. APIを利用する APIで取得した スクリーンショットWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  36. 36. まとめ• コンセプトワークはしっかりと• WordPressに、少しの工夫を加えること で運用しやすいサイトになる• いろんな表現の仕方を楽しもう!WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  37. 37. 名刺ギャラリーサイト http://name-card.jp/ ポートフォリオサイト http://arcted.jp/WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  38. 38. ところでWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  39. 39. レンタル型のWordPressが あるのを知っていますか?WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  40. 40. WordPress.comWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
  41. 41. ご清聴有難うございましたWordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順

×