WordCamp Tokyo2012 Session

WordPressを使ったギャラリーサイトの制作手順

WordCamp Tokyo 2012 大竹・塚口

自己紹介

大竹孔明

こうめ

Twitter

facebook

Bamboo_C

komei.otake

WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順

自己紹介

塚口祐司 Yuu

Twitter facebook

regret_raym regretraym


アウトライン 1. WordPressギャラリーサイトの事例

2. サイト制作のワークフローについて

3. 構築と運用を考慮した実装ポイント


WordPress ×

Gallery


I / O 3000 http://io3000.com/


http://io3000.com/

http://io3000.com/

CARD OBSRVER http://cardobserver.com/


http://cardobserver.com/

POLIO STARS.NET http://www.foliostars.net/


http://www.foliostars.net/

More… • ギャラリー用のテーマもある

– Shotoku（β版）HTML5製のレスポンシブテーマ http://kachibito.net/wordpress/shotoku.html

• ギャラリー用のプラグインもある

– Next GEN Gallery http://wordpress.org/extend/plugins/nextgen-gallery/


http://kachibito.net/wordpress/shotoku.html

http://wordpress.org/extend/plugins/nextgen-gallery/

http://wordpress.org/extend/plugins/nextgen-gallery/

会議


合宿


２つのサイトが出来ました


名刺ギャラリーサイト「NameCard.jp」


ポートフォリオサイト「Arcted」


コンセプト

設計

実装

ワークフロー


コンセプト


設計

実装


構築と運用の実装ポイント


構築のポイント

• コーディングのポイント

• ギャラリー画像の最適化

• カスタム投稿タイプの利用


コーディングのポイント


header.php

sidebar.php

footer.php

ギャラリー画像の最適化

• ImageOptim

• PNGGauntlet

• JPEGmini


http://imageoptim.com/

http://pnggauntlet.com/

http://pnggauntlet.com/

http://www.jpegmini.com/

カスタム投稿タイプの利用


投稿・ページ以外の投稿タイプを用意する

カスタム投稿タイプの利用


functions.phpに記述プラグインなら、 Custom Post Type UI

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' => __('ポートフォリオを表示'), 'search_items' => __('ポートフォリオを探す'), 'not_found' => __('ポートフォリオが見つかりません'), 'not_found_in_trash' => __('ゴミ箱にポートフォリオはありません'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, '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');

http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&ved=0CCUQFjAA&url=http://wordpress.org/extend/plugins/custom-post-type-ui/&ei=9HFTUMfsJqTBiQeni4EY&usg=AFQjCNFK5rxABuuqVajK42aI-Y8ln1_OIA







運用のポイント • カスタムフィールドの設計

• 投稿画面のカスタマイズ

• 画像の取得方法を考える


カスタムフィールドの設計


キャッチコピー

説明

URL

タイトル

カスタムフィールドの設計プラグインなら Advanced Custom Fields


http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&ved=0CDQQFjAB&url=http://wordpress.org/extend/plugins/advanced-custom-fields/&ei=RIJTUOCeIK-XiQfs7YEw&usg=AFQjCNF8LrLA-4uX30cLYVJJ2tCRqZWc-g

投稿画面のカスタマイズ


必要のないフィールドは消す



Editor Templates by jim912

http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&ved=0CCYQFjAA&url=http://editor-templates.warna.info/&ei=zHhTUKvUDISYiAfV9YDABA&usg=AFQjCNHWxn8JFb50jM5FYmx_486NthewDA

http://profiles.wordpress.org/jim912/

http://www.warna.info/

画像の取得方法を考える • アイキャッチ画像を使う

• 投稿に添付する

• カスタムフィールドを使う

• APIを利用する WordCamp Tokyo 2012 WordPressで作るギャラリーサイト制作手順

画像の取得方法を考える • アイキャッチ画像を使う

– 一覧ページや詳細ページで1枚のみの表示として

• 投稿に添付する – 1記事に対して大量の画像を使用する場合

• カスタムフィールドを使う

– 使用する画像枚数が決まっている場合

• APIを利用する – サイトのスクリーンショットを取得する場合


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は使用もリンクも自由だが、無保証


APIを利用する


APIで取得したスクリーンショット

まとめ • コンセプトワークはしっかりと

• WordPressに、少しの工夫を加えることで運用しやすいサイトになる

• いろんな表現の仕方を楽しもう！


名刺ギャラリーサイト http://name-card.jp/

ポートフォリオサイト http://arcted.jp/


http://name-card.jp/

http://arcted.jp/

ところで


レンタル型のWordPressがあるのを知っていますか？


WordPress.com


ご清聴有難うございました


WordCamp Tokyo2012 Session

Documents

Transcript of WordCamp Tokyo2012 Session