公開日：
【WordPressテーマ作成】記事一覧・詳細ページを作成しよう（初心者向け）
この記事の目次（クリックで項目へジャンプします）
こんにちは！
24時間、甘いものを食べていたい、どうもS.Fです。
前回、こんな記事を書きました。
こちらの記事では、WordPress初心者さんへ向けて、
WordPressの仕組みからサーバーの準備、
HTML・CSSで構築した静的サイトをWordPressのテーマとして読み込ませるまでの
手順をご紹介しました。
ですが、前回お伝えしたのは「TOPページ」のみ！
WordPressというと「ブログ」投稿機能のあるCMSです。
TOPページだけでは意味がありません。
ということで、今回は前回に引き続きWordPressテーマ作成について
「記事一覧アーカイブページ・記事詳細ページ」を作ってみます！！（ワーイ）
コーポレートサイトを想定しまして、今回作るのは
「お知らせ」の
- 記事詳細（シングル）ページ
- 記事一覧（アーカイブ）ページ
です(‘ω’)
必要なPHPファイル
- 投稿詳細ページ
single.php - 記事一覧（アーカイブ）ページ
archive.php
今回はこちらの二つのファイルを作成していきます！
そして前回と同じくHTMLを一部PHPに書き換えていきます。
まずは記事の詳細ページから。※HTMLは既に作ってある想定です。
（今回は↓こんな感じのHTMLを例とします。）
<!DOCTYPE html>
<html lang="ja">
<head>
～略～
</head>
<body>
<div class="wrapper">
<header class="header">
～略～
</header>
<div class="content">
<section class="mainvisual">
<h1 class="mainvisual__ttl">お知らせ</h1>
</section>
<section class="content-detail">
<div class="inner">
<div class="detail-news">
<p class="detail-news__date">2021.04.08</p>
<h2 class="detail-news__ttl">サイトリニューアルのお知らせ</h2>
</div>
<div class="detail-editor">
<h3>この度、ホームページをリニューアルしました</h3>
<p class="news-txt">今回のリニューアルでは、ご利用者のみなさまに、より見やすく、<br>
また、情報を分かりやすくお伝えできるホームページとなるようにデザインや構成を改善させて頂きました。<br>
今後もよりいっそう充実したホームページにしていきますので、今後ともよろしくお願い申し上げます。</p>
</div>
</div>
</section>
</div>
<footer class="footer">
～略～
</footer>
</div>
</body>
</html>
ループ処理
今回の記事ページにはPHPの「ループ処理」というものが必要になってきます。
そもそも「ループ処理」とは？
WordPressのページに投稿記事を出力するための処理をループ処理と呼びます。
PHPのwhile文を使って、
それぞれの記事の情報を取得し、表示させる処理
というイメージをもっていただければよいかと思います。
記事の情報を繰り返しデータを引っ張ってきて、一覧ページに表示させたりすることができます。
この辺はざっくり理解してもらえればいいかなと思います。
メインループとサブループ
そしてこのループ処理には2種類あり、
「メインループ」と「サブループ」というものがあります。
ここで二つの説明をしても初心者の方には逆にややこしくなってしまうと思うので割愛します…
（私がそうだった）
通常の投稿「お知らせなど」では、「メインループ」で問題ないです。
基本的に「メインループ」が主になります。
メインループの書き方
今回も基本の「メインループ」を使います。
そのテンプレートがコチラ。
<?php if(have_posts()): ?> //もし投稿記事データがあったら
<?php while(have_posts()): the_post(); ?> //情報を取り出してループ
～この中に記事のタイトルや本文などが入ります～
<?php endwhile; ?> //ここでループ終了
<?php endif; ?> //ここでif文が終了
【解説】
・もし投稿記事があったら if(have_posts())
<?php if(have_posts()): ?>
～
<?php endif; ?>
・データを取り出して繰り返し表示する while(have_posts()): the_post()
<?php while(have_posts()): the_post(); ?>
～
<?php endwhile; ?>
それぞれのイメージはこんな感じです。
ただ、あまり深く考えず、テンプレートだと思ってください。
WordPressはやっていくうちに自然と理解していけると思います！(^^)/
single.php作成
はい！ではご説明したループ処理のテンプレートを使って、HTMLに書き換えていきましょう。
まずは元の静的HTMLから。冒頭でも貼り付けたコードを使っていきます。
こんな感じで用意しました ↓
<!DOCTYPE html>
<html lang="ja">
<head>
～略～
</head>
<body>
<div class="wrapper">
<header class="header">
～略～
</header>
<div class="content">
<section class="mainvisual">
<h1 class="mainvisual__ttl">お知らせ</h1>
</section>
<section class="content-detail">
<div class="inner">
<div class="detail-news">
<p class="detail-news__date">2021.04.08</p>
<h2 class="detail-news__ttl">サイトリニューアルのお知らせ</h2>
</div>
<div class="detail-editor">
<h3>この度、ホームページをリニューアルしました</h3>
<p class="news-txt">今回のリニューアルでは、ご利用者のみなさまに、より見やすく、<br>
また、情報を分かりやすくお伝えできるホームページとなるようにデザインや構成を改善させて頂きました。<br>
今後もよりいっそう充実したホームページにしていきますので、今後ともよろしくお願い申し上げます。</p>
</div>
</div>
</section>
</div>
<footer class="footer">
～略～
</footer>
</div>
</body>
</html>
では、主にこの記事の内容(section)の部分 ↓ を書き換えていきます！
<section class="content-detail">
<div class="inner">
<div class="detail-news">
<p class="detail-news__date">2021.04.08</p>
<h2 class="detail-news__ttl">サイトリニューアルのお知らせ</h2>
</div>
<div class="detail-editor">
<h3>この度、ホームページをリニューアルしました</h3>
<p class="news-txt">今回のリニューアルでは、ご利用者のみなさまに、より見やすく、<br>
また、情報を分かりやすくお伝えできるホームページとなるようにデザインや構成を改善させて頂きました。<br>
今後もよりいっそう充実したホームページにしていきますので、今後ともよろしくお願い申し上げます。</p>
</div>
</div>
</section>
まずは、if文でこのsectionを丸ごと囲います。
if文で全体を囲うことで、
「投稿記事があったら～」という条件が通ったときだけ記事内容が表示されます。
<?php if(have_posts()): while(have_posts()): the_post(); ?>//←ココ
<section class="content-detail">
<div class="inner">
<div class="detail-news">
<p class="detail-news__date">2021.04.08</p>
<h2 class="detail-news__ttl">サイトリニューアルのお知らせ</h2>
</div>
<div class="detail-editor">
<h3>この度、ホームページをリニューアルしました</h3>
<p class="news-txt">今回のリニューアルでは、ご利用者のみなさまに、より見やすく、<br>
また、情報を分かりやすくお伝えできるホームページとなるようにデザインや構成を改善させて頂きました。<br>
今後もよりいっそう充実したホームページにしていきますので、今後ともよろしくお願い申し上げます。</p>
</div>
</div>
</section>
<?php endif; ?> //←ココ
次にwhile文でも囲います。
while文で囲むことにより、WordPress内で入力した投稿内容のデータを
ループ処理しながら取り出し、出力してくれます。
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php while(have_posts()): the_post(); ?> //←ココ
<section class="content-detail">
<div class="inner">
<div class="detail-news">
<p class="detail-news__date">2021.04.08</p>
<h2 class="detail-news__ttl">サイトリニューアルのお知らせ</h2>
</div>
<div class="detail-editor">
<h3>この度、ホームページをリニューアルしました</h3>
<p class="news-txt">今回のリニューアルでは、ご利用者のみなさまに、より見やすく、<br>
また、情報を分かりやすくお伝えできるホームページとなるようにデザインや構成を改善させて頂きました。<br>
今後もよりいっそう充実したホームページにしていきますので、今後ともよろしくお願い申し上げます。</p>
</div>
</div>
</section>
<?php endwhile; ?> //←ココ
<?php endif; ?>
whileによって取得した記事の情報、「投稿日時」や「タイトル」、
「本文」などを表示させるため、該当する部分もPHPに書き換えていきます。
・日付の部分
<p class="detail-news__date">2021.04.08</p>
↓
<p class="detail-news__date"><?php echo get_the_date('Y.m.d'); ?></p>
※get_the_date()・・・記事内で日付（公開日）を取得するためのテンプレートタグ。
括弧(‘Y.m.d’)の中を変えることで、様々な表示方法に変えることができます。
【例】
2021.04.27 <?php echo get_the_date('Y.m.d'); ?>
2021-4-27 <?php echo get_the_date('Y-m-d'); ?>
2021年04月27日 <?php echo get_the_date('Y年m月d日'); ?>
・タイトルの部分
<h2 class="detail-news__ttl">サイトリニューアルのお知らせ</h2>
↓
<h2 class="detail-news__ttl"><?php echo get_the_title(); ?></h2>
・本文部分
<div class="detail-editor">
<h3>この度、ホームページをリニューアルしました</h3>
<p class="news-txt">今回のリニューアルでは、ご利用者のみなさまに、より見やすく、<br>
また、情報を分かりやすくお伝えできるホームページとなるようにデザインや構成を改善させて頂きました。<br>
今後もよりいっそう充実したホームページにしていきますので、今後ともよろしくお願い申し上げます。
</p>
</div>
↓
<div class="detail-editor">
<?php the_content(); ?> //記事本文を出力
</div>
↑ <h3>とか<p>とか全部取っ払って
「<?php the_content(); ?>」のみ！！！で大丈夫です(/・ω・)/
では、最終的に完成したコードがこちら！
（ヘッダー、フッター部分も書き換えています。
→この解説は前回の記事でしています。）
<?php get_header(); ?>
<div class="content">
<section class="mainvisual">
<h1 class="mainvisual__ttl">お知らせ</h1>
</section>
<section class="content-detail">
<div class="inner">
<div class="detail-news">
<p class="detail-news__date">
<?php echo get_the_date('Y.m.d'); ?>
</p>
<h2 class="detail-news__ttl">
<?php echo get_the_title(); ?>
</h2>
</div>
<div class="detail-editor">
<?php the_content(); ?>
</div>
</div>
</section>
</div>
<?php get_footer(); ?>
最終的にこんなに短いコードになりました～！！！
これで記事の詳細ページは表示できるようになりました！
archive.php作成
では、記事一覧ページ（アーカイブページ）も作っていきます！
ここからはサクッと進みますね！
では元のHTMLがコチラ。
<!DOCTYPE html>
<html lang="ja">
<head>
～略～
</head>
<body>
<div class="wrapper">
<header class="header">
～略～
</header>
<div class="content">
<section class="mainvisual">
<h1 class="mainvisual__ttl">お知らせ一覧ページ</h1>
</section>
<section class="content-list">
<ul class="posts-list">
<li class="posts-list__item">
<time>2021.04.01</time>
<h2>サイトリニューアルのお知らせ</h2>
</li>
<li class="posts-list__item">
<time>2021.04.10</time>
<h2>イベント開催のお知らせ</h2>
</li>
<li class="posts-list__item">
<time>2021.04.27</time>
<h2>お得な新着記事！</h2>
</li>
</ul>
</section>
</div>
<footer class="footer">
～略～
</footer>
</div>
</body>
</html>
書き換えたPHPがコチラ
<?php get_header(); ?>
<div class="content">
<section class="mainvisual">
<h1 class="mainvisual__ttl">お知らせ一覧ページ</h1>
</section>
<?php if(have_posts()): ?>
<section class="content-list">
<ul class="posts-list">
<?php while(have_posts()): the_post(); ?>
<li class="posts-list__item">
<time><?php echo get_the_date('Y.m.d'); ?></time>
<h2><?php echo get_the_title(); ?></h2>
</li>
<?php endwhile; ?>
</ul>
</section>
<?php endif; ?>
</div>
<!-- end .content-->
<?php get_footer(); ?>
先ほど同じようにループ処理をして記事の情報を取得し、出力しています。
アーカイブページでは<ul>タグと<li>タグの間に
<?php while(have_posts()): the_post(); ?>を記述することで、記事数の分、<li>をループして生成してくれます。
はい！こんな感じで、
- 記事一覧（アーカイブ）ページ
- 記事詳細（シングル）ページ
いかがだったでしょうか？
ざっくりとでも理解していただけたら幸いです(‘ω’)
