simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.12.1

【WordPress】シンプルなオリジナルテーマの作り方(6)~アーカイブページ~

WordPress

先日来進めているWordPressのオリジナルテーマ作成。一気に進めてしまいたいのですが、少し間が空いてしまいました。さすがに年末ともなると本業の方が中々忙しくなってきてしまい・・・言い訳ですが。昔の上司に言われた「時間は作るもの」という言葉を改めて肝に命じなくてはいけません。

で、前回は投稿した記事を表示するsingle.phpを作りました。今日は、カテゴリー別に記事を一覧表示するためのページを作っていこうと思います。

アーカイブページを作る

投稿された記事をカテゴリーやタグ、投稿した日時、投稿者などに分類して表示するページをアーカイブページと言います。ページの最初で条件分岐をして、カテゴリー別ならそのカテゴリーに属する記事を、タグ別ならそのタグに属する記事をずらっと並べていきます。ただし、今回はカテゴリー別の一覧だけを使うことを想定しているので、条件分岐すら使いません。

他には、カテゴリー別の記事一覧にはcategory.php、タグ別の記事一覧にはtag.php、日時別ならdate.php・・・とそれぞれのテンプレートを作る方法もありますので、必要に応じて使い分けても良いかも知れません。

archive.php

まずarchive.phpというファイルを作ります。なるべく楽をするために、index.phpをコピー&リネームして使います。最初に中身を紹介するとこんな感じですが。

<?php get_header(); ?>

<div class="container">

		<p class="headline">
			<?php $cat = get_the_category(); ?>
			<?php $cat = $cat[0]; ?>
			<?php echo get_cat_name($cat->term_id); ?>
			の記事
		</p>

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

				<article>
					<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<p class="postdate"><?php the_time('Y/m/j') ?></p>
				</article>

			<?php endwhile; ?>

			<section class="pagination_wrap">
				<?php 
				if (function_exists("pagination")) { 
					pagination($additional_loop->max_num_pages); 
				} 
				?> 
			</section>

		<?php else : ?>
			<p>記事がありませんでした</p>
		<?php endif; ?>

</div>

<?php get_footer(); ?>

初めの方はindex.phpより若干複雑そうになっていますが、ループ以降はほとんど一緒です。

カテゴリー名を表示させるテンプレートタグ

カテゴリー名を表示するのは下記の部分です。

<?php $cat = get_the_category(); ?>
<?php $cat = $cat[0]; ?>
<?php echo get_cat_name($cat->term_id); ?>

カテゴリーページのタイトル部分なので、リンクは付けないで表示するようにしています。

ちなみに、リンクありでカテゴリー名を表示させるテンプレートタグはこのようになります。

<?php the_category(); ?>

ループの中身

ループ内の記事一覧からカテゴリー名を外しています。もちろんあっても構わないと思いますが、「A」というカテゴリーの記事一覧の中に、「この記事は”A”というカテゴリー」という説明は個人的に必要無いと思うので。大局に影響する部分ではないので、ホントどっちでもいいんですけどね。

style.css

今回は特に追記するものはありません。index.phpを作ったときに書いたCSSをそのまま使えるので。

表示してみる

トップページの一覧にあるカテゴリー名から、カテゴリーページを開くと下記のようになっているかと思います。

ハッピーガールちゃん1歳になる

LIFE

ハッピーガールちゃん1歳になる

娘のオモチャはブックオフで買っています

LIFE

娘のオモチャはブックオフで買っています

テレビスターの悲劇~Regulation Killed the TV Star~

THOUGHT

テレビスターの悲劇~Regulation Killed the TV Star~

httpsのページにhttpのサイトの動画を埋め込むときは注意が必要らしい

WEB

httpsのページにhttpのサイトの動画を埋め込むときは注意が必要らしい

ハッピーガールちゃんとの大阪での日々

LIFE

ハッピーガールちゃんとの大阪での日々

WordPressでChart.jsをつかってみる

WEB

WordPressでChart.jsをつかってみる

これまでに買った赤ちゃんグッズその2

LIFE

これまでに買った赤ちゃんグッズその2

Bootstrap4でデバイス別に表示・非表示を切り替えるclass

WEB

Bootstrap4でデバイス別に表示・非表示を切り替えるclass