ホーム>Web制作>【WordPressテーマ作成】記事一覧・詳細ページを作成しよう（初心者向け）

公開日：2021.04.28

【WordPressテーマ作成】記事一覧・詳細ページを作成しよう（初心者向け）

Tags: php; wordpress

Pocket

はてブ

Twitter

この記事の目次（クリックで項目へジャンプします）

こんにちは！
24時間、甘いものを食べていたい、どうもS.Fです。

前回、こんな記事を書きました。

【超初心者向け】WordPress自作テーマを作ろう！

https://mmm.monomode.co.jp/programming/wordpress-theme.html

こんにちは！SF映画はあまり見ないけれど宇宙には行ってみたい。どうも、S.Fです。今回はhtmlやcssで静的構築はできるけれど...

こちらの記事では、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>をループして生成してくれます。

はい！こんな感じで、

記事一覧（アーカイブ）ページ
記事詳細（シングル）ページ

いかがだったでしょうか？
ざっくりとでも理解していただけたら幸いです(‘ω’)

ウェブサイトやECサイトの制作・運用で
お悩みではありませんか？
私たち、monomodeにご相談ください。

CORPORATE SITE

この記事を書いた人

f.sato：フロントエンドエンジニア

なんでもマヨネーズかけて食べます。趣味「ゲーム実況」を見ることです。

Pocket

はてブ

Twitter

サービス紹介

【WordPressテーマ作成】記事一覧・詳細ページを作成しよう（初心者向け）

必要なPHPファイル

ループ処理

そもそも「ループ処理」とは？

メインループとサブループ

メインループの書き方

single.php作成

archive.php作成

サービス紹介

【WordPressテーマ作成】記事一覧・詳細ページを作成しよう（初心者向け）

必要なPHPファイル

ループ処理

そもそも「ループ処理」とは？

メインループとサブループ

メインループの書き方

single.php作成

archive.php作成

完全無料で使える高品質なベクターアイコン素材まとめ

サイト納品前に確認!! WordPressの管理画面カスタマイズ

改めてモバイルファーストを考えてみる

そのキーワードで検索する意図を考えよう

iPhoneXの登場！iPhoneの歴史振り返り！（後編）

WEB制作の中心で「アニメーション開発が得意」と叫びたい ～実装編～

サービス紹介

WEB制作の中心で「アニメーション開発が得意」と叫びたい～実装編～