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」の両方からアクセス可能なのがコツです。


・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


http://yourdomain.com/team


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


http://yourdomain.com/portfolio


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


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


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


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


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


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


「位置」エリアのルールで投稿タイプ＝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' );

へ変更します。


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

クリエイターのカテゴリーは

echo get_the_term_list($post->ID, 'creator_type');

で呼び出します。
echoの後htmlspecialcharsみたいなのをつけたほうがいいかもです。


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


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

query_posts('post_type=team&posts_per_page=6&paged='.$paged);
if (have_posts()) :

というようなにif文の前にquery_postsを設定します。
ついでに、ページ送りリンクを整形しました。


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を利用しています。

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

■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 -->

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>

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


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


・Demoはこちら

関連記事

• 比較的サクッとできる系WordPressプラグインや外部php 2015/03/17
• WordPressで「ささっと作る」で請けれなくなってる現状。 2014/11/25
• WordPressを使うかどうかを見極めることが必要になってきていると感じています 2013/05/20
• WordPressで複数のクリエイターが存在するポートフォリオを作る考え方 2013/03/13
• WordPress3.6ではUIの更新と、タンブラー風テーマが付属されるかも 2013/03/09
• Wordpressの公式テンプレート階層チャートで命名規則をチェック 2013/02/26
• wordpress3.5.1で使えるメンテナンスモードプラグイン「Maintenance by fruitfulcode」 2013/02/25