前回までで、テンプレートファイルの編集はほとんど終わりました。今回は残っているファイルを編集が終わればいよいよ完成です。
残っているのは、
✔ archive.php → カテゴリアーカイブページなどに適用される。
✔ page.php → 現状以外の固定ページ(新規作成した場合)に適用される。
✔ index.php → テーマに必須のファイル。ページの種類に関係なく、他に適用されるファイルがなければこれが適用される。
の3種類です。
早速やっていきましょう。
archive.phpの編集
今回はカテゴリアーカイブページのためにarchive.phpを使用します。
選択したカテゴリをもつ記事のみを一覧表示するページになります。
中身はhome.phpとほぼ同じです。
<?php get_header();?>
<main>
<section class="page-ttl">
<div class="inner">
<h2>NEWS</h2>
</div>
</section>
<section class="news-index">
<div class="inner">
<div class="articles">
<?php
while ( have_posts() ) :
the_post();
?>
<a href="<?php the_permalink(); ?>">
<article>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(); ?>
<?php else : ?>
<img src="<?php echo get_theme_file_uri('/img/noimage.png'); ?>" alt="no-image" />
<?php endif ; ?>
<p class="category">
<?php $cats = get_the_category(); ?>
<?php echo $cats[0]->name; ?>
</p>
<p class="time"><?php the_time( "Y年n月j日" ); ?></p>
<p class="blog-ttl"><?php the_title(); ?></p>
</article>
</a>
<?php
endwhile;
?>
</div>
</div>
</section>
<?php
the_posts_navigation( array(
'prev_text' => '次のページへ',
'next_text' => '前のページへ',
) );
?>
<?php get_template_part('contact');?>
</main>
<?php get_footer();?>ヘッダー、フッター、共通部分の読み込み。
選択されたカテゴリに属する投稿をループで取得して表示。
ページネーションの設置。という今までの記事でやってきたことをやっているだけです。
page.phpの編集
現時点では、新規で固定ページを作成した場合にこのファイルが適用される状態になっています。
なのでこれも中身はシンプルで大丈夫です。
<?php get_header();?>
<main>
<section class="page-ttl">
<div class="inner">
<h2><?php single_post_title(); ?></h2>
</div>
</section>
<?php
while ( have_posts() ) :
the_post();
?>
<?php the_content(); ?>
<?php
endwhile;
?>
<?php get_template_part('contact');?>
</main>
<?php get_footer();?>ヘッダー、フッター、共通部分の読み込みはいつもどおり。
固定ページのタイトルは他のページと同じ形式で出力して表示。
後はシンプルに固定ページの内容を表示させているだけです。
固定ページ特有の情報などを表示させたい場合はコードを追加していけばOKです。
index.phpの編集
このファイルはページの種類に関わらず、他に優先して適用されるファイルがない場合に適用されるファイルです。”最後の砦”的なイメージがわかりやすいかもしれません。
こちらもかなりシンプルなコードです。今回はpage.phpと全く同じ作りになっています。
<?php get_header();?>
<main>
<section class="page-ttl">
<div class="inner">
<h2><?php single_post_title(); ?></h2>
</div>
</section>
<?php
while ( have_posts() ) :
the_post();
?>
<?php the_content(); ?>
<?php
endwhile;
?>
<?php get_template_part('contact');?>
</main>
<?php get_footer();?>これですべてのファイルの編集が終わりました。お疲れさまでした！！
ここまでの作業でHTMLのみでコーディングされていたファイルがWordPressのオリジナルテーマとして認識され、正常に動作するようになったはずです。
次回は「パンくずリスト」や「コンタクトフォーム」を設置するためのプラグインについて、紹介していきます。
