リストページをデザインする

リストページは複数のドキュメントを一覧リストで表示するページです。

1ページに何個表示するか？は、「設定の表示設定」で指定します。

このリストページには下記の物があります。

種類	プログラム	備考
カテゴリページ	category.php	ウィジェットやパンくずからカテゴリを指定
アーカイブページ	archive.php	ウィジェットやパンくずからアーカイブを指定
検索結果ページ	search.php	検索結果が0の時のエラー処理が必要

1.プログラム比較

デザインの基本は投稿ページと同じなので、これを基準に解説します。

single.php
category.php
archive.php
search.php

投稿ページプログラムは下記になります。

<?php get_header(); ?>
<div id='background'>
	<div id='post-contener'>
		<div id='post-contener-in'>
			<?php while(have_posts()):the_post(); ?>
				<div class='fa fa-clock-o'></div>【<?php the_modified_date('Y年m月d日');?>】
				<div id='my-before-title'></div>
				<h1><?php the_title(); ?></h1>
				<div id='my-after-title'> </div>
				<div class='contents'>
						<?php the_content(); ?>
				</div>
			<?php endwhile; ?>
		</div>
		<?php edit_post_link('編集','<','>',''); ?>
	</div>
	<div id='widget-contener'>
			<?php get_sidebar(); ?>
	</div>
</div>
<?php get_footer(); ?>

※1.タイトル(the_title())だけを表示しています。

※2.記事全体(the_content())を表示しています。

カテゴリとアーカイブのプログラム下記になります。

<?php get_header(); ?>
<div id='background'>
	<div id='post-contener'>
		<div id='post-contener-in'>
			<?php my_pagenavi($wp_query);?><!-- ページナビゲーション -->
			<?php while(have_posts()):the_post(); ?>
				<div class='list-box'>
					<div class='fa fa-clock-o'></div>【<?php the_modified_date('Y年m月d日');?>】
					<div id='my-before-title'></div>
					<h1><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></h1>
					<div id='my-after-title'> </div>
					<div class='contents'>
						<?php the_excerpt(); ?>
					</div>
				</div>
			<?php endwhile;?>
			<?php my_pagenavi($wp_query);?><!-- ページナビゲーション -->
		</div>
	</div>
	<div id='widget-contener'>
			<?php get_sidebar(); ?>
	</div>
</div>
<?php get_footer(); ?>

※1.タイトル(the_title())にリンク先(the_permalink())を追加してます。

※2.記事は複数あるので個々の記事を「class=’list-box’」で囲み、記事の抜粋(the_excerpt())をここに表示しています。

※3.記事一覧の前後にページナビ(my_pagenavi($wp_query))を表示しています。
ぺージナビの詳細は自作のページネーションを作成するを参照してください。

検索結果のプログラムは下記になります。

<div id='background'>
	<div id='post-contener'>
		<div id='post-contener-in'>
			<?php if(have_posts()):?>
				<?php my_pagenavi($wp_query);?><!-- ページナビゲーション -->
				<?php while(have_posts()):the_post(); ?>
					<div class='list-box'>
						<div class='fa fa-clock-o'></div>【<?php the_modified_date('Y年m月d日');?>】
						<div id='my-before-title'></div>
						<h1><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></h1>
						<div id='my-after-title'> </div>
						<div class='contents'>
							<?php the_excerpt(); ?>
						</div>
					</div>
				<?php endwhile;?>
				<?php my_pagenavi($wp_query);?><!-- ページナビゲーション -->
			<?php else:?>
				<div class='list-box'>
          <p>検索ワード=<?php the_search_query();?></P>
          <p>上記で検索した結果、対象ドキュメントはありませんでした。</p>
          <p>他のワードで再検索して下さい。</p>
        </div>
			<?php endif;?>
		</div>
	</div>
	<div id='widget-contener'>
			<?php get_sidebar(); ?>
	</div>
</div>
<?php get_footer(); ?>

※1.記事リストのループの前に「if(have_posts())」で検索結果記事の有無をチェックしています。

※2.検索結果の記事が無い場合はエラーメッセージを出力しています。

2.CSSでデバイス対応処理を行う

ここでは投稿ページのデザインがそのまま採用されているので、「class=’list-box’」の所だけ設定している。

/********************/
/* 一覧リストの設定 */
/********************/
#post-contener-in .list-box{
	border:1px solid #c0c0c0;
	box-shadow:1px 1px 10px #c0c0c0;
	border-radius: 10px;
	padding:20px;
	margin-bottom:10px;}
#post-contener-in .list-box h1{
	font-size:20px;font-size:1.25rem;
	color:#400fff;font-weight:bold;}