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/

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

コーディングのポイント

header.php

sidebar.php

footer.php

ギャラリー画像の最適化

• ImageOptim

• PNGGauntlet

• JPEGmini

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

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

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

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');

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

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

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

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

キャッチコピー

説明

タイトル

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

投稿画面のカスタマイズ

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

Editor Templates by jim912

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

• 投稿に添付する

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

• 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/

ところで

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

WordPress.com

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

WordCamp Tokyo2012 Session

Documents

Transcript of WordCamp Tokyo2012 Session

WordCamp KOBE 2011 LT

WordCamp SP 2016

Wordcamp seoul 2012_kang

WordCamp Vienna 2018

Talk WordCamp Porto 2013

BlogNation al WordCamp

WordCamp Kansai 2014 OpeningSpeech

Wordcamp Israel 2008

WordCamp Paris : présentation d'intro

WordCamp Lisbon

Autoblog Wordcamp 2009

WordCamp Tokyo 2012 Concept

Prezentare Wordcamp Opencoffee

Potancok wordcamp woo

Wordcamp gdynia

Wordcamp 2011-new1

Wordcamp Perú 2009 - Themes

WordCamp Philly - Edit Flow

WordCamp 2016 / Helsinki

Presentation WordCamp Paris