More Related Content
Similar to WordCamp Tokyo2012 Session (20)
WordCamp Tokyo2012 Session
- 1. WordPressを使った ギャラリーサイトの制作手順 WordCamp Tokyo 2012 大竹・塚口
- 2. 自己紹介 大竹 孔明 こうめ Twitter Bamboo_C facebook komei.otake WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 3. 自己紹介 塚口 祐司 Yuu Twitter regret_raym facebook regretraym WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 4. アウトライン 1. WordPressギャラリーサイトの事例 2. サイト制作のワークフローについて 3. 構築と運用を考慮した実装ポイント WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 5. WordPress × Gallery WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 6. I / O 3000 http://io3000.com/ WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 7. CARD OBSRVER http://cardobserver.com/ WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 8. POLIO STARS.NET http://www.foliostars.net/ WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 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. 会議 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 11. 合宿 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 12. ２つのサイトが出来ました WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 13. 名刺ギャラリーサイト 「NameCard.jp」 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 14. ポートフォリオサイト「Arcted」 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 15. ワークフロー コンセプト 設計 実装 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 16. コンセプト WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 17. 設計
- 18. 実装 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 19. 構築と運用の 実装ポイント WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 20. 構築のポイント • コーディングのポイント • ギャラリー画像の最適化 • カスタム投稿タイプの利用 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 21. コーディングのポイント header.php sidebar.php footer.php WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 22. コーディングのポイント header.php sidebar.php footer.php WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 23. ギャラリー画像の最適化 • ImageOptim • PNGGauntlet • JPEGmini WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 24. カスタム投稿タイプの利用 投稿・ページ以外の投稿 タイプを用意する WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 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. 運用のポイント • カスタムフィールドの設計 • 投稿画面のカスタマイズ • 画像の取得方法を考える WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 27. カスタムフィールドの設計 タイトル キャッチコピー 説明 URL WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 28. カスタムフィールドの設計 プラグインなら Advanced Custom Fields WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 29. 投稿画面のカスタマイズ 必要のないフィールドは消す WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 30. 投稿画面のカスタマイズ Editor Templates by jim912 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 31. 投稿画面のカスタマイズ WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 32. 画像の取得方法を考える • アイキャッチ画像を使う • 投稿に添付する • カスタムフィールドを使う • APIを利用する WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 33. 画像の取得方法を考える • アイキャッチ画像を使う – 一覧ページや詳細ページで1枚のみの表示として • 投稿に添付する – 1記事に対して大量の画像を使用する場合 • カスタムフィールドを使う – 使用する画像枚数が決まっている場合 • APIを利用する – サイトのスクリーンショットを取得する場合 WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 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. APIを利用する APIで取得した スクリーンショット WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 36. まとめ • コンセプトワークはしっかりと • WordPressに、少しの工夫を加えること で運用しやすいサイトになる • いろんな表現の仕方を楽しもう！ WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 37. 名刺ギャラリーサイト http://name-card.jp/ ポートフォリオサイト http://arcted.jp/ WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 38. ところで WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 39. レンタル型のWordPressが あるのを知っていますか？ WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 40. WordPress.com WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順
- 41. ご清聴有難うございました WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順