Home > スポンサー広告 > WordPressで複数のクリエイターが存在するポートフォリオを作る考え方

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/82-5f27b9f8
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > WordPressで複数のクリエイターが存在するポートフォリオを作る考え方

Home > wordpress > WordPressで複数のクリエイターが存在するポートフォリオを作る考え方

WordPressで複数のクリエイターが存在するポートフォリオを作る考え方

  • vanillate
  • 2013-03-13 Wed 13:41:10
  • wordpress
wp-portfolio1.jpg

WPを使って複数のクリエイターがいて、カスタムタクソノミー・カスタム投稿タイプを利用してポートフォリオを連動させるようなテーマを作る考え方を実際に作ってみながらすすめていきたいとおもいます。

こんな動きをするものを作ります

PCと、windows8 tabletのスタートアプリ(IE)でサクサク見れるように作りたかったので、ナビゲーションなども同時に考えていきます。

どんなページ遷移をするか設計をします
実際の案件の場合は直接デザイン案に落とし込み、あとでどうやって実装していくか考えることが多いのですが、今回は解説のためにざっくりとどんなイメージになるかを図にします。

カスタム投稿タイプと、カスタムタクソノミーの設計をします
今回の場合は、ポートフォリオの詳細ページと、クリエイターの詳細ページが必要なので投稿タイプに「team」「portfolio」を(以下カスタム投稿=「post_type」カスタムタクソノミー=「taxonomy」として表記します。)
また、「post_type:team」はカテゴリー分けしておきたいので「taxonomy:creator_type」を
ポートフォリオでは「post_type:project」と、「post_type:team」との紐付けがしたいので「post_type:project」→「taxonomy:creator_name」というタクソノミーを連結させてみます。
また、「post_type:team」から「post_type:project」を呼び出すフラグとしてタクソノミー「taxonomy:creator_name」→「post_type:team」にも連動させておきます。
「taxonomy:creator_name」は、「post_type:project」と「post_type:team」の両方からアクセス可能なのがコツです。

post_typeとtaxonomyを設定するプラグインを入れます

GD Custom Posts And Taxonomies Tools

GD Custom Posts And Taxonomies Toolsを使って、設定をしていきます

Post_typeの設定→Taxonomyの設定→Post_typeの設定に戻ってTaxnomoyを設定というような順序で設定していきます。
Post_typeの設定では、Name,Labels,Settiings:Taxonomiesの設定を最低限やっておけばいいとおもいます。
Taxonomyの設定では、Name,Labels,Settings:Post Typesの設定ですね。

ダッシュボード>ナビゲーションにて表示を確認

post_type:portfolioには taxonomy:project と taxonomy:creator_name が、 post_type:team には taxonomy:creator_type , taxonomy:creator_name が表示されていれば成功です。

パーマリンク設定をしていきます

URLをできるだけ簡潔にしたいので、パーマリンク設定をしていきます。
パーマリンク設定で「カスタム構造」を選択し、/archives/%postname% とします。

サーバーによってまちまちなのですが、これで動かないときは
オプションのカテゴリーベース:category
タグベース:tag

と明示することで動くことがあります。(ver:WP3.5)

パーマリンクをシンプルにするプラグインを入れて有効化します

Top Level Categories
Top Level Categories Fix

タクソノミー・カスタム投稿へテスト投稿してアクセスできるか確認
1. クリエイター一覧(type=archive

http://yourdomain.com/team

2. クリエイター詳細(type=single

http://yourdomain.com/team/{slug}

3. ポートフォリーオ一覧(type=archive

http://yourdomain.com/portfolio

4. ポートフォリーオ詳細(type=single

http://yourdomain.com/portfolio/{slug}

5. プロジェクト一覧(type=archive

http://yourdomain.com/archives/project/{slug}

6. ポートフォリオ:クリエイター絞り込み(type=archive

http://yourdomain.com/archives/creator_name/{slug}

7. クリエイターのカテゴリー(type=archive

http://yourdomain.com/archives/creator_type/{slug}

Advanced custom fieldsプラグインを入れる

カスタムフィールドに手軽にリッチなUIを追加できるので、Advanced custom fieldsプラグインを入れます。
Advanced custom fields

Post_type:teamにカスタムフィールドを追加

「post_type:team」にクリエイターのサムネイル写真が入るようにします。

1:新規作成>フィールド追加
2:
フィールドラベル:「クリエイター画像」
フィールド名:「creator_image
フィールドタイプ:画像
必須か? はい
返り値:URL
プレビューサイズ:フルサイズ

「位置」エリアのルールで投稿タイプ=teamとなるように設定
その後、「公開」ボタンを押します。

post_type:teamのテンプレートを作成する

Bee1.2のテンプレートをベースにする場合、index.phpを複製→archive-team.php
loop.phpを複製→loop-team.php
archive-team.phpの中の
get_template_part( 'loop' );

get_template_part( 'loop-team' );
へ変更します。

loop-team.phpを編集していきます

while文の中でさきほどカスタムフィールドで設定した「creator_image」を呼び出します。
<?php the_title(); ?>

クリエイターのカテゴリーは
echo get_the_term_list($post->ID, 'creator_type');
で呼び出します。
echoの後htmlspecialcharsみたいなのをつけたほうがいいかもです。

現在のteam一覧を確認してみます。

こんな風に表示されていればOKです。

味気ないので軽くデザインを整えます

今回はCSS3で丸い感じにしてみました。

表示件数を調整し、ページネーションを追加します
query_posts('post_type=team&posts_per_page=6&paged='.$paged);
if (have_posts()) :
というようなにif文の前にquery_postsを設定します。
ついでに、ページ送りリンクを整形しました。

taxonomy:creator_typeで表示を切り替えるようにします。

archive-team.php → taxonomy-creator_type.php として複製します。
ループも分岐させたいので、loop-team.php → loop-creator_type.php と複製します。

■taxonomy-creator_type.php
<?php 
$taxonomy = $wp_query->get_queried_object();
$tax_slug = $taxonomy->name;
?>
<h2>team:<?php echo esc_html($tax_slug); ?></h2>
■loop-creator_type.php
<?php 
$taxonomy = $wp_query->get_queried_object();
$tax_slug = $taxonomy->name;
?>
<?php query_posts('post_type=team&creator_type='.$tax_slug.'&posts_per_page=6&paged='.$paged); ?>
<?php if (have_posts()) : ?>


チーム個別ページを作成します

single.php を複製→ single-team.php を作成し、整形します。

ポートフォリオページの作成準備としてカスタムフィールドを設定します

ポートフォリオのサムネイルフィールド:pf_thumb_img
ポートフォリオのスライドテキストエリア(html可)フィールド:pf_slide_img
を作成します。

テーマのセッティング

archive-team.php → archive-portfolio.php として複製します。
また、loop-team.php → loop-portfolio.php を複製し、サムネイルと、クリエイター名として下記のように書き換えます。
<ul>
<?php the_field('pf_slide_img',$post->ID); ?>
</ul>
<?php echo get_the_term_list($post->ID, 'creator_name'); ?>

また、single-team.php → single-portfolio.php として複製し
pf_slide_imgをdivで囲って呼び出します。
<div id="slides">
<?php the_field('pf_slide_img',$post->ID); ?>
<a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
<a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
</div>
ここで、スライドショーなjsを読み込んで処理します。今回はhttp://slidesjs.comを利用しています。

ポートフォリオ詳細デザインを整形しました


ポートフォリオのタイトル下にtaxonomy:projectを表示させます。

<ul class="tax_list contentsbox">
<?php wp_list_categories('taxonomy=project&title_li='); ?>
</ul>

あとはCSSで整形しておきます。

タクソノミーで絞り込んだ際の表示を設定します

taxonomy-creator_type.php → taxonomy-portfolio.php として複製します。
taxonomy-portfolio.pho → taxonomy-creator_name.php として複製します。
Loop-portfolio.pho → loop-portfolio-tax.php として複製します。

■Loop-portfolio-tax.phpでのquery_postsの分岐方法例:
<?php 
$taxonomy = $wp_query->get_queried_object();
$tax_name = $taxonomy->taxonomy;
$tax_slug = $taxonomy->name;
$tax_data = $tax_name.'='.$tax_slug;
?>
<?php query_posts('post_type=portfolio&'.$tax_data.'&posts_per_page=6&paged='.$paged); ?>


creator_nameのアーカイブページからプロフィールページへのリンクを追加します

■taxonomy-creator_name.phpで、プロフィールページへのリンクを追加します。
<div class="for_profile">
<?php //すべてのユーザリンクを作成する場合はposts_per_page=-1とする ?>
<?php query_posts('post_type=team&creator_name='.$tax_slug.'&posts_per_page=1'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>'s Profile</a>&nbsp;&nbsp;<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div><!-- for_profile -->

single-team.phpにポートフォリオへのリンクを追加します

whileループ内にこんな感じで追加しました。
<div class="team_portfolio_link">
<?php
if ($terms = get_the_terms($post->ID, 'creator_name')) {
foreach ( $terms as $term ) {
$creator_name_slug = esc_html($term->name);
}
}
?>

→<a href="<?php bloginfo('url'); ?>/archives/creator_name/<?php echo($creator_name_slug); ?>"><?php the_title(); ?>'s Portfolio</a>

</div>

front-page.phpやサイドバーを整理して出来上がり

ヘッダーや、ナビゲーションを仕上げたら出来上がりです。
今回は、フロントページで全画面スライドさせてみました。また、10.1インチのタブレットwindowsでも快適にブラウジングできるようなレイアウトにしてみました。

編集ページもUIが比較的優しい感じにできます

画像のアップロードもページ遷移なし、簡単な説明も付けられるので、編集時のインターフェイスも優しいようにできています。

Demoを公開しています

Demoはこちら
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/82-5f27b9f8
Listed below are links to weblogs that reference
WordPressで複数のクリエイターが存在するポートフォリオを作る考え方 from バニデザノート

Home > wordpress > WordPressで複数のクリエイターが存在するポートフォリオを作る考え方

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。