WordPressによるサイト運営[6] [WordPress]
「一覧表示のテンプレート化」
複数の投稿を一覧表示するアーカイブ表示のテンプレート化を行う。
1.アーカイブのタイトルを表示
single_archieve_titleカスタムテンプレートタグを用いて、カテゴリー名、タグ名、年や月を一括表示する。
<header class="page-header">
<h1 class="page-title"><?php single_archive_title(); ?></h1>
</header>
2.カテゴリーの説明文表示に対応させる
アーカイブのタイトルの下にカテゴリーの説明文も合わせて表示させる。
<?php if ( category_description() ) : ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
3.ループの組込みとテンプレートタグの置き換え
①ループの組込み
記事をループで括る。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="hentry">
<header class="entry-header">
中略
</footer>
</article>
<?php endwhile; endif; ?>
②タイトル、投稿日をテンプレートタグに置き換える
the_titleタグでタイトル、the_timeタグで登校日を表示させる。
<header class="entry-header">
<h1 class="entry-title">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h1>
<div class="entry-meta">
<span class="sep">投稿日:<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<time class="entry-date" datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate="<?php the_time( 'Y-m-d' ); ?>">
<?php the_time( get_option( 'date_format' ) ); ?>
</time>
</a></span>
中略</div>
</header>
③投稿者をテンプレートタグに置き換える
the_authourテンプレートタグで作成者名を表示する。get_authour_posts_url タグと get_the_authour_meta(‘ID’)で作成者名アーカイブのリンクを得ている。
<span class="author vcard">投稿者:<a title="<?php the_author(); ?>" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" class="url fn n">
<?php the_author(); ?>
</a></span>
4.サイズの違うアイキャッチ画像を表示
get_post_thumnailタグのパラメータで、大きなサイズのアイキャッチ画像を表示する。
<p><a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail( 'large_thumbnail' );
else :
echo '<img src="' . get_default_image( 'default/post-thumbnail-default.png' ) . '" class="attachment-large_thumbnail wp-post-image" alt="" />';
endif; ?>
</a></p>
5.抜枠を表示
the_exceptテンプレートタグにより冒頭の一部もしくは抜粋専用のテキストを表示する。
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="more-link">続きを読む<span class="meta-nav">></span></a>
6.カテゴリーとタグの表示をテンプレート化
the_tagsテンプレートタグでタグを表示する。
<span class="cat-links">カテゴリー:<?php the_category( ', ' ); ?></span>
<span class="tag-links"><?php the_tags( 'タグ:' ); ?></span>
7.ページナビを表示
参考資料