WordPressのテーマ自作は怖くない【第二回：記事一覧ページを作ろう】
こんにちは。Kalsarikannintのフロントエンド担当・daiです。
前回の更新から時間が空いてしまいましたが、引き続き、WordPressで最小構成でテンプレートを作成する手順を紹介していきます。
第二回の今回は、カテゴリごとやタグごとの記事、検索結果を一覧で表示するページを作成してみようと思います。このブログでいうとこのページに該当します。
前回のおさらい
前回は、「トップページ」と「記事詳細ページ」を表示させるために必要なファイルを作成しました。
wp-content/
└ themes/
└ kalsarikannint-theme/
├ images/
├ style/
│ ├ archive.css # new
│ ├ common.css
│ ├ front-page.css
│ └ single-post.css
├ archive.php # new
├ footer.php
├ front-page.php
├ functions.php
├ header.php
├ index.php
├ search.php # new
├ single-post.php
└ style.css
第二回となる今回は、「archive.php」と「style/archive.css」、「search.php」を作成し、function.phpを調整することで、カテゴリ/タグごとの記事一覧ページと検索結果ページを作成します。
それではコーディングしていきましょう
archive.php
カテゴリ・タグごとの一覧ページを司るのが「archive.php」というファイルになります。
WordPressでは、どのカテゴリを表示しているか？なども勝手に取得できるようになっているので、あまり深く考える必要なく実装できます。
▼ archive.php
<?php get_header(); ?>
<?php if(have_posts()) : ?>
<h1><?php echo get_the_archive_title(); ?></h1>
<div class="inner">
<?php while(have_posts()) : the_post(); ?>
<?php
// ------------------------------
// 各記事ごとの準備
// ------------------------------
// 本文の500文字だけ抜粋
$content = $post->post_content != '' ? str_replace('\\n', '', mb_substr(strip_tags($post-> post_content), 0, 500,'UTF-8')) : '本文が取得できませんでした。';
?>
<div class="article_list">
<a class="article_list--box" href="<?php the_permalink(); ?>">
<p class="article_list--title"><?php the_title(); ?></p>
<span class="article_list--content"><?php echo $content; ?></span>
</a>
</div>
<?php endwhile ?>
<?php
// ページネーション
the_posts_pagination(array(
'prev_text' => '前へ',
'next_text' => '次へ'
));
?>
</div><!-- /inner -->
<?php else: ?>
<div class="error error--no_article">
<h1>記事が見つかりませんでした</h1>
<a href="<?php echo get_home_url('/'); ?>" class="button">トップページ へ</a>
</div>
<?php endif; ?>
<?php get_footer(); ?>
search.php
検索結果を表示するためのテンプレートです。
WordPress には標準で検索機能が備わっており、?s=キーワード というパラメータをクエリにつけてアクセスすると、検索結果ページが表示されます。検索結果ページのテンプレートとして利用されるのが「search.php」ファイルです。
▼ search.php
<?php get_header(); ?>
<?php if(have_posts()) : ?>
<h1>「<?php echo get_search_query(); ?>」の検索結果</h1>
<div class="inner">
<?php while(have_posts()) : the_post(); ?>
<?php
// 本文を抜粋して表示（必要に応じて長さを変えてください）
$content = $post->post_content != ''
? str_replace('\\n', '', mb_substr(strip_tags($post->post_content), 0, 300, 'UTF-8'))
: '本文が取得できませんでした。';
?>
<div class="search_list">
<a class="search_list--box" href="<?php the_permalink(); ?>">
<p class="search_list--title"><?php the_title(); ?></p>
<span class="search_list--content"><?php echo $content; ?></span>
</a>
</div>
<?php endwhile; ?>
<?php
// ページネーション（検索結果でも使えます）
the_posts_pagination(array(
'prev_text' => '前へ',
'next_text' => '次へ',
));
?>
</div><!-- /inner -->
<?php else: ?>
<div class="error error--no_article">
<h1>「<?php echo get_search_query(); ?>」の検索結果はありませんでした</h1>
</div>
<?php endif; ?>
<?php get_footer(); ?>
このように、記事があれば検索キーワードに合わせた一覧を表示し、なければ見つからなかった旨を表示する流れです。
参考ドキュメント
- Search Result Template (search.php) | WordPress Developer Resources
- get_search_query() | WordPress Developer Resources
CSS（style/archive.css）の調整
今回、記事一覧をデザインするために「style/archive.css」というファイルを作成すると想定しています。
archive.php や search.php で使用するクラスに合わせて、最低限のデザインをあてていきましょう。たとえば、以下のようにクラスを割り当てた場合の例です。
▼ style/archive.css
.inner {
width: 90%;
max-width: 800px;
margin: 0 auto;
padding: 0 10px;
}
.article_list,
.search_list {
border: 1px solid #ccc;
margin-bottom: 20px;
padding: 15px;
border-radius: 4px;
background: #f9f9f9;
}
.article_list--box,
.search_list--box {
text-decoration: none;
color: #333;
}
.article_list--title,
.search_list--title {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 10px;
}
.article_list--content,
.search_list--content {
display: block;
font-size: 1rem;
color: #555;
}
.article_list.-new,
.search_list.-new {
border-color: #f00;
background: #fff3f3;
}
archive.php と search.php で同じクラス名を使ってもいいですし、ファイルごとに分けたい場合はクラス名も分けて管理してください。上の例のように共通化してしまえば、1つのCSSで両方のデザインをまかなうこともできます。
CSS の読み込み
「functions.php」または「header.php」などで archive.css を読み込むようにしてください。例として、functions.php でテーマ独自のCSSとして読み込む場合は下記のように記述できます。（詳しくはテーマのスタイルシートを読み込む | WordPress Codex を参照）
function kalsari_theme_enqueue_styles() {
// すでに style.css を読み込んでいる想定
wp_enqueue_style('archive-style', get_template_directory_uri().'/style/archive.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'kalsari_theme_enqueue_styles');
他ファイルの確認
前回同様、「header.php」や「footer.php」などのレイアウトファイルが正しく読み込まれているかも併せてチェックしましょう。
特に、WordPress では「検索フォーム」を表示するための get_search_form() という関数が用意されていますので、ヘッダーやサイドバーなどに以下のように検索フォームを挿入しておくと良いでしょう。
<?php get_search_form(); ?>
searchform.php を独自に作成すると、自由に検索フォームのマークアップを変更できます。searchform.php | WordPress Developer Resources
まとめ
以上で「カテゴリ/タグごとの記事一覧ページ (archive.php)」と「検索結果ページ (search.php)」を作成する流れと、ファイル変更（functions.php や style/archive.css など）の例を紹介しました。
archive.phpカテゴリ・タグなどの一覧表示に利用されるファイル。get_the_archive_title()を使ってアーカイブタイトルを出し、WordPressが用意するループ機能（have_posts()など）を回すだけで、指定したタクソノミー（カテゴリー、タグなど）の投稿一覧を表示できます。search.php検索結果一覧を表示するためのファイル。get_search_query()で検索キーワードを取得して表示し、あとはループを回せば OK。ページネーションも使えるので、サイト全体の検索結果を簡単に作成できます。functions.phpテーマ独自の関数や設定をまとめるファイル。 今回は例としてis_newest_post()関数を追加し、投稿が最新かどうかを判定する仕組みを入れました。style/archive.cssarchive.php/search.php用に最低限のデザインを当てる想定のファイル。
これで、WordPress で「トップページ」「記事詳細ページ」「カテゴリ・タグ一覧ページ」「検索結果ページ」がひととおり揃いました。サイトとしても最低限の流れが完成したと思います。
次回は、めんどくさい事はしたくない精神で行き着いた開発環境について紹介していければと思います。（いつになるかはわかりません！）
ここまでお読みいただきありがとうございました。今回の記事が、WordPress テーマの最小構成を作るうえでの参考になれば幸いです。
ご不明な点や質問などございましたら、お気軽にコメントやお問い合わせをいただければと思います！
