カスタム投稿タイプを活用する：実際に作成してみよう！その3：『カスタム投稿タイプ一覧をつくる！』

2012.11.08 Category:WordPress Tag:summary

前回のカスタム投稿タイプを使って『ScrapBook』という名のブックマークを目的とした子ブログを作成しましたという記事の第4弾です。

ScrapBook作成目次

カスタム投稿とは？　作成方法をプラグインも含めて考える。
パーマリンクについて！
実際に作成してみよう！その1：トップページをつくる！
実際に作成してみよう！その2：シングルページをつくる！
実際に作成してみよう！その3：カスタム投稿タイプ一覧をつくる！←　いまここ

カスタム分類のテンプレート階層

taxonomy-カスタム分類の種類名-カスタム分類のスラッグ.php

↓

taxonomy-カスタム分類の種類名.php

↓

taxonomy.php

↓

archive.php

↓

index.php

上記のような順位で、テンプレートが選ばれます。

今回は、『カスタム投稿タイプ一覧をつくる！』ですが、indexに表示させるや、固定ページに表示させるなどなどいろいろと考えたのですが、デザインは、トップページのままで、表示させたいのとカテゴリごとに表示させたかったので、taxonomy.phpを作成しました。

※　ここで言うカテゴリとは、taxonomyの事です。

最終的な目標

タームに属する記事を自動判別し表示させる。

この1点です！

実際に書いたものがこちら

<?php get_header(2); ?>//ヘッダー

<!--  Start Page -->
<div id="page">

//コンテンツ
	<section class="content">
		<div id="s-title">Category:  <?php single_tag_title(); ?></div>
<?php
$term = array_shift(get_the_terms($post->ID, 'scrapbook_category'));
?>
<?php $tax_posts = get_posts('post_type=scrapbook&taxonomy=scrapbook_category&term='.esc_html($term->slug));  if($tax_posts): ?>

//ループ始まり
<?php foreach($tax_posts as $tax_post): ?>
<div id="scrappost">
 <div class="item">
<a rel="nofollow" class="relatedthumb" href="<?php echo get_permalink($tax_post->ID); ?>" rel="bookmark" title="<?php echo esc_html($tax_post->post_title); ?>"><span class="rthumb-s"><?php echo get_the_post_thumbnail( $tax_post->ID, $size, $attr ); ?></span></a>

<span class="item-title"><a href="<?php echo get_permalink($tax_post->ID); ?>"><?php echo esc_html($tax_post->post_title); ?></a></span>

<div class="post-info-s"><time><?php the_time('F j, Y'); ?></time><span class="thecategory"><?php the_terms( $post->ID, 'scrapbook_category' ); ?></span>
</div>							
								
</div><!-- .item -->
</div><!--.scrappost-->
	<?php endforeach; ?>

<?php endif; ?>	
//ループ終わり
</section><!--#content-->

<?php get_footer(2); ?>

<?php get_header(2); ?>//ヘッダー

//コンテンツ

<div id="s-title">Category: <?php single_tag_title(); ?></div>

<?php

$term = array_shift(get_the_terms($post->ID, 'scrapbook_category'));

<?php $tax_posts = get_posts('post_type=scrapbook&taxonomy=scrapbook_category&term='.esc_html($term->slug)); if($tax_posts): ?>

//ループ始まり

<?php foreach($tax_posts as $tax_post): ?>

<a rel="nofollow" class="relatedthumb" href="<?php echo get_permalink($tax_post->ID); ?>" rel="bookmark" title="<?php echo esc_html($tax_post->post_title); ?>"><span class="rthumb-s"><?php echo get_the_post_thumbnail( $tax_post->ID, $size, $attr ); ?></span></a>

<span class="item-title"><a href="<?php echo get_permalink($tax_post->ID); ?>"><?php echo esc_html($tax_post->post_title); ?></a></span>

<div class="post-info-s"><time><?php the_time('F j, Y'); ?></time><span class="thecategory"><?php the_terms( $post->ID, 'scrapbook_category' ); ?></span>

</div>

</div>

</div>

<?php endforeach; ?>

<?php endif; ?>

//ループ終わり

</section>

<?php get_footer(2); ?>

カテゴリーと一致するものを取得して、表示させるだけ！

今回作成したものは、検索機能などをつけていないのでこれだけで済みました。ギャラリーのようなモノを想定しているのでいらないかなと。。

検索機能とかあったほうがいいかなとも思いましたが、正規表現の[壁|(･д･｡ )))｡｡｡　[壁|(･д･｡ )))｡｡｡

これで、子テーマとして最低限の機能を持たせた物ができました。

最後にメニューを表示させる！！で終わりだったのですが、わたしのメニューの表示のさせ方が少し問題でして、HOMEと固定ページしか表示させない様になっていたのです。　←自分でやったんですけどね。。

元はこちら

<nav id="navigation" >
<ul>
<li><a href="<?php bloginfo('url'); ?>"><?php _e('Home', 'scopethemes') ?></a></li>
 <li ><?php wp_list_pages('sort_column=menu_order&depth=3&title_li='); ?></li>
</ul>
</nav><!-- END #navigation -->

<ul>

</ul>

</nav>

どうしたものか、と考えた末にとった策は、カスタム投稿用メニューをくっつけるという荒業。

出来上がりはこちら

<nav id="navigation" >
<ul>
<li><a href="<?php bloginfo('url'); ?>"><?php _e('Home', 'scopethemes') ?></a></li>
 <li ><?php wp_list_pages('sort_column=menu_order&depth=3&title_li='); ?></li>
</ul>
<?php
$args = array(
'public'   => true,
'has_archive' => true,
'_builtin'    => false
);
$output = 'objects'; 
$post_types = get_post_types($args, $output);
if (!empty($post_types)) {
echo "<ul>";
foreach ($post_types as $post_type ) {
echo '<li><a href="'.get_post_type_archive_link($post_type->name).'">' . esc_html($post_type->labels->singular_name) . '</a></li>';
}
echo "</ul>";
}
?>
</nav><!-- END #navigation -->