本を読もう!

カスタムポストタイプで読書記録を作ろう!(表示編)

2011.11.27(日) CSS, WordPress, テーマ
このエントリーをはてなブックマークに追加

前回、カスタムポストタイプを使用して、読書記録用の登録画面を作成しました。それで、登録した記事は、通常の記事と一緒には出てきません。表示させるには、関数を使用して、自分で表示用のページを作成しなければなりません。うーん、面倒くさそうですね。ボクは、htmlとか、cssとか苦手なので、尻込みしてましたが、思ったてたよりも簡単にできたと思いますので、是非チャレンジしてください。
[divider_flat]

[divider_flat]

まずはURLの確認から

カスタムポストタイプを表示する場合のパーマリンクは、以下のようになります。
[box]http://サイトのURL/?post_type=ポストタイプ名[/box]
このURLを直接アドレスバーに打ち込んで表示させると、通常のブログと同じように最新記事からn件分表示されます。各記事毎のリンクで飛ぶと、単一ページもちゃんと表示されます。じゃあ、それでいいじゃないかとお思いでしょうが、その場合カスタムフィールドは表示されません。
今回は、Amazonリンクと、お気に入りのセリフを入れたいので、それじゃあ困ります。カスタムフィールドを出すためには、やはりオリジナルのページを作成する必要があります。
[divider_flat]

ページ構造の理解から始めてみよう

今回は、わかりやすいように、「twenty ten」テーマで作成してみますが、まずはそのページ構造を見てみましょう。このテーマの構成は、上から順に、以下のようになっています。
[box]
index.php トップページ(ヘッダー、ブログロール、サイドバー、フッターの表示)
└loop.php ブログロールにより、最新よりn個の記事を表示
 └single.php 記事の単一表示用ページ(ヘッダー、単一記事、サイドバー、フッターの表示)
  └loop-single.php  単一記事の表示
[/box]
この構造とほぼ同じものを作成して、カスタムポストを表示させる必要があります。この時点で面倒くさそうなんですが、ほとんどコピペで行けますのでご安心を。
[divider_flat]

アーカイブページで一覧表示を作成

まずは、トップページの代わりに、archive-ポストタイプ名.phpというファイルを作成します。これは、カスタムポストタイプのURLを実行した際に、自動的に読み込まれます。今回の場合は、archive-mybooks.phpというファイル名ですね。

<?php /* ヘッダー表示 */
	get_header();
 ?>
<div id="container">
	<div id="content">

<?php
	/* 記事があれば投稿データをロード(表示はしない) */
 	if ( have_posts() )
		the_post(); ?>

	<!-- タイトル表示 -->
	<h1 class="page-title"><?php echo '読んだ本の記録です。気になったセリフや文章などを書きたいと思います。'; ?></h1>
	<?php
		/* 投稿を巻き戻し */
 		rewind_posts();
 		/* loop-mybooks.phpか、なければloop.phpを使用する */
 		get_template_part( 'loop', 'mybooks' ); ?>

	</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); /* サイドバーの表示 */ ?>
<?php get_footer();  /* フッターバーの表示 */ ?>

[divider_flat]
このファイルは、archive.phpをコピーして作成しました。ほとんど同じですが、違いは18行目のところで、loop-mybooks.phpを使用するようにしています。こちらのファイルも当然作成することになります。
[divider_flat]


<?php
/* 記事のループを開始し、次の投稿がある場合は記事を表示します。*/
?>
<?php while ( have_posts() ) : the_post(); ?>
	<div>
		<!-- タイトルの表示 -->
		<h2 class="sxs_entry-title">
			<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
		<?php the_title(); ?></a></h2>
		<?php
			/* amazonをキーとして、カスタムフィールド値を取得 */
		    $amazon = get_post_custom_values('amazon');
		    if( $amazon  ){
		    		/* amazonへのリンクをechoにより出力 */
		    		echo '<div class="sxs_amazon">';
					echo  $amazon[0];
		    		echo '</div>';
		    }
			/* linesをキーとして、カスタムフィールド値を取得 */
		    $lines = get_post_custom_values('lines');
		    if( $lines  ){
		    		echo '<div class="sxs_lines" >';
		    		/* お気に入りのセリフを、echoにより出力 */
		            echo( $lines[0] );
					/* lines_subをキーとして、カスタムフィールド値を取得 */
				    $lines_sub = get_post_custom_values('lines_sub');
				    if( $lines_sub  ){
			    		/* お気に入りのセリフを言った人を、- by -の間にechoで表示 */
			    		echo '<div class="sxs_lines_sub" >';
			    		echo( '- by ' );
			            echo( $lines_sub[0] );
			    		echo( ' -' );
		    	        echo '</div>';
		    	       }
		            echo '</div>';
		    }
	    ?>
		<div class="entry-utility">
			<!-- カテゴリの表示 -->
			<?php if ( count( get_the_category() ) ) : ?>
				<span class="cat-links">
					<?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
				</span>
				<span class="meta-sep">|</span>
			<?php endif; ?>
			<!-- タグの表示 -->
			<?php
				$tags_list = get_the_tag_list( '', ', ' );
				if ( $tags_list ):
			?>
				<span class="tag-links">
					<?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
				</span>
				<span class="meta-sep">|</span>
			<?php endif; ?>
			<!-- コメントの表示 -->
			<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
			<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
			<?php echo  get_the_term_list( $post->ID, 'ganres', '', ', ', '' ); ?>
		</div><!-- .entry-utility -->

	</div>
<?php endwhile; // ループ終了 ?>

<!-- 前の記事と後の記事へのリンクを表示 -->
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
				<div id="nav-below" class="navigation">
					<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
					<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
				</div><!-- #nav-below -->
<?php endif; ?>

[divider_flat]
こちらは、やや難しいですが、基本的にはget_post_custom_values関数を使用して、カスタムフィールド値を取得します。キーは、カスタムフィールドテンプレートにて定義したコントロール毎のキーです。
amazonリンクと、セリフなどのカスタムフィールド値を取得して、それをcssを使用して、横にならべています。

.sxs_amazon{
float:left;    /*float指定にて、以降のボックスは右回りに*/
height:180px;  /*高さは180ピクセル*/
width:250px;   /*幅は250ピクセル*/
}
.sxs_lines{
float:left;    /*float指定により、sxs_amazonの右に配置される*/
width:380px;    /*幅は380pxで記事の幅ギリギリまで*/
font-size:16px;  /*フォントサイズ*/
margin-top: 50px;  /*上に余白を50pxとり、真ん中に寄せる*/
text-align: center; /*テキストを中央寄せ*/
text-shadow: 1px 1px 5px #000;  /*テキストにシャドウをつける*/
}
.sxs_lines_sub{
width:360px; /*sxs_linesの下に配置される*/
font-size:14px; /*フォントサイズ*/
text-align: right; /*テキストは右寄せ*/
text-shadow: 1px 1px 5px #000;  /*テキストにシャドウをつける*/
}

[divider_flat]
[divider_flat]

シングルページ(単一記事)での表示を作成

さて、一覧表示ができたので、最後に単一記事での表示です。通常は、single.phpで表示されるのですが、カスタムポストはsingle-ポストタイプ名.phpで表示します。今回の場合は、single-mybooks.phpですね。

<?php get_header(); /* ヘッダー表示 */ ?>

<div id="container">
	<div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

		<!-- タイトル表示 -->
		<h1 class="sxs_entry-title"><?php the_title(); ?></h1>
		<div class="entry-meta">
			<?php twentyten_posted_on(); ?>
		</div><!-- .entry-meta -->

		<!-- archiveページと同じ方法で、amazonリンクとセリフ等を表示 -->
		<?php
		    $amazon = get_post_custom_values('amazon');
		    if( $amazon  ){
		    		echo '<br><div class="sxs_amazon">';
					echo  $amazon[0];
		    		echo '</div>';
		    }
		    $lines = get_post_custom_values('lines');
		    if( $lines  ){
		    		echo '<div class="sxs_lines" >';
		            echo( $lines[0] );
				    $lines_sub = get_post_custom_values('lines_sub');
				    if( $lines_sub  ){
			    		echo '<div class="sxs_lines_sub" >';
			    		echo( '- by ' );
			            echo( $lines_sub[0] );
			    		echo( ' -' );
		    	        echo '</div>';
		    	       }
		            echo '</div>';
		    }
	    ?>

		<!-- 記事を表示 -->
		<div class="entry-content">
			<?php the_content(); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->

		<?php
			/* concerndをキーとして、カスタムフィールド値を取得 */
		    $concernd = get_post_custom_values('concernd');
		    if( $concernd  ){
					echo '<div class="sxs_concernd">同じ作者のおすすめ本</div>';
		    		/* 同じ作者のお勧めなどのamazonリンクを出力 */
		    		echo '<br><div class="sxs_amazon">';
					echo  $concernd[0];
		    		echo '</div>';
		    }
		?>

	</div><!-- #post-## -->

	<!-- 前の記事、次の記事へのリンクを表示 -->
	<div id="nav-below" class="navigation">
		<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
		<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
	</div><!-- #nav-below -->

	<!-- コメント表示 -->
	<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

	</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); /* サイドバー表示 */ ?>
<?php get_footer(); /* フッター表示 */ ?>

customposttype-10

[divider_flat]

アーカイブから作成するのが面倒な場合は、このファイルだけ作成すれば、単一表示の際には、こちらで表示されます。
実際に作成したサンプルページがこちらです。
[divider_flat]
[button link="http://stepxstep.net/sample/?post_type=mybooks" size="large" color="purple" window="yes"]Sampleページ[/button] [divider_flat]
さて、こちらはあくまでサンプルページとして作成したので、本当は、このHPに作成したいのですが、はやく反映せねば・・・

コメントをどうぞ