WordCamp Tokyo2012 Session

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

WordCamp Tokyo 2012
大竹・塚口

自己紹介

大竹孔明
こうめ

Twitter Bamboo_C
facebook komei.otake

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

自己紹介

塚口祐司
Yuu
Twitter regret_raym
facebook regretraym


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

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

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


WordPress
×
Gallery


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


CARD OBSRVER
http://cardobserver.com/


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


More…
• ギャラリー用のテーマもある
– Shotoku（β版）HTML5製のレスポンシブテーマ
http://kachibito.net/wordpress/shotoku.html

• ギャラリー用のプラグインもある
– Next GEN Gallery
http://wordpress.org/extend/plugins/nextgen-
gallery/


会議


合宿


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


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


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


ワークフロー

コンセプト

設計

実装


コンセプト


実装


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


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

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

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


コーディングのポイント
header.php

sidebar.php

footer.php


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

• PNGGauntlet

• JPEGmini


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

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


カスタム投稿タイプの利用
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');


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

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

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


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

キャッチコピー

説明

URL


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


投稿画面のカスタマイズ

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


Editor Templates by jim912


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

• 投稿に添付する

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

• APIを利用する


画像の取得方法を考える
• アイキャッチ画像を使う
– 一覧ページや詳細ページで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/


ところで


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


WordPress.com


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


WordCamp Tokyo2012 Session

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie WordCamp Tokyo2012 Session

Ähnlich wie WordCamp Tokyo2012 Session (20)

Mehr von regret raym

Mehr von regret raym (17)

WordCamp Tokyo2012 Session