見出し画像

WordpressからmicroCMSへの移行ガイド vol.5

yonis

【注意事項】
この記事ではPHPでmicroCMSを利用してページを実装する方法を解説しています。記事データの移行方法については以下のオフィシャルチュートリアルを参照してください。

一覧ページにページャー実装

前回の記事で、microCMSのAPIを利用してPHPで一覧ページを表示させるコードを掲載しました。
では最後に必ず必要となる、ページャー実装の解説をしていきます。

archive2.php

前回のarchive.phpをもとに、別のarchive2.phpを作成して実装します。
とりあえず表示させたい方は以下をコピペすれば、ページャー付きの一覧ページが表示されます。

<?php require './ini.php'; ?>

<?php
$newsPerPage = 12;
$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($currentPage - 1) * $newsPerPage;
$url = $CMS_NEWS_URL . '?limit=' . $newsPerPage . '&offset=' . $offset;

function fetchApiData($url, $_KEY) {
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
  
  $headers = ['X-Api-Key: ' . $_KEY];
  curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
  $response = curl_exec($ch);
  curl_close($ch);
  
  return json_decode($response, true);
}

$newsResult = fetchApiData($url, $_KEY);
$newsContents = [];
$totalNews = isset($newsResult['totalCount']) ? $newsResult['totalCount'] : 0;

foreach ($newsResult['contents'] as $content) {
  $newsContents[] = [
    'curl' => htmlspecialchars('./single.php?id=' . $content['id'], ENT_QUOTES, 'UTF-8'),
    'title' => htmlspecialchars($content['title'], ENT_QUOTES, 'UTF-8'),
    'category' => htmlspecialchars($content['category'], ENT_QUOTES, 'UTF-8'),
    'thumb' => htmlspecialchars($content['thumb']['url'], ENT_QUOTES, 'UTF-8'),
  ];
}

$totalPages = ceil($totalNews / $newsPerPage);
?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no">
  <title>お知らせ</title>

  <style>
    *{ margin: 0; padding: 0; }
    ul{ width: 100vw; display: grid; grid-template-columns: repeat(auto-fill, 200px); }
    li{ padding: 10px; border-bottom: 1px #ccc solid; list-style: none; }
    li h2,li p{ font-size: 14px }
    li img{ width: 100% }
    .pager{ padding: 20px 0; display: flex; gap: 5px; justify-content: center; }
    .pager a,.pager span{ padding: 5px; background: #ccc; }
  </style>
</head>

<body>
  <h1>お知らせ</h1>
  <section>
    <ul>
    <?php foreach ($newsContents as $news): ?>
      <li>
        <h2>タイトル：<?= $news['title']; ?></h2>
        <img src="<?= $news['thumb']; ?>" alt="<?= $news['title']; ?>">
        <p>カテゴリー：<?= $news['category']; ?></p>
        <p><a href="<?= $news['curl']; ?>">詳細に進む</a></p>
      </li>
    <?php endforeach; ?>
    </ul>

    <div class="pager">
      <?php if ($currentPage > 1): ?><a href="?page=<?= $currentPage - 1; ?>" class="page pager__prev">PREV</a><?php endif; ?>
        <?php for ($i = 1; $i <= $totalPages; $i++): ?>
            <?php if ($i === $currentPage): ?>
              <span class="page pager__active"><?= $i; ?></span>
            <?php else: ?>
              <a href="?page=<?= $i; ?>" class="page pager__link"><?= $i; ?></a>
            <?php endif; ?>
        <?php endfor; ?>
      <?php if ($currentPage < $totalPages): ?><a href="?page=<?= $currentPage + 1; ?>" class="page pager__next">NEXT</a><?php endif; ?>
    </div>
  </section>
</body>

</html>

解説

$newsPerPage = 12;
$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($currentPage - 1) * $newsPerPage;
$url = $CMS_NEWS_URL . '?limit=' . $newsPerPage . '&offset=' . $offset;

4行目から、ページャーに関する設定を入れていきます。

  • 1ページあたりに表示するニュース記事の数を設定（この場合12件）

  • URLパラメータに基づいて、現在のページ番号を取得

  • データの取得開始位置を計算

  • APIリクエスト用のURLを生成して次の処理に渡す準備

function fetchApiData($url, $_KEY)

10〜21行目はarchive.phpとほぼ同じですが、APIの情報を幾つ取得するかをlimit、offsetで変える必要があるため、関数化しています。

$newsResult = fetchApiData($url, $_KEY);
$newsContents = [];
$totalNews = isset($newsResult['totalCount']) ? $newsResult['totalCount'] : 0;

  • 関数を呼び出し、APIからデータを取得

  • 空の配列 $newsContents を初期化

  • 総ニュース記事数の取得

foreach ($newsResult['contents'] as $content) {
  $newsContents[] = [
    'curl' => htmlspecialchars('./single.php?id=' . $content['id'], ENT_QUOTES, 'UTF-8'),
    'title' => htmlspecialchars($content['title'], ENT_QUOTES, 'UTF-8'),
    'category' => htmlspecialchars($content['category'], ENT_QUOTES, 'UTF-8'),
    'thumb' => htmlspecialchars($content['thumb']['url'], ENT_QUOTES, 'UTF-8'),
  ];
}

  • 配列の各要素をループで取り出し、整形して$newsContents に蓄積

  • 各お知らせ記事の詳細ページリンク、タイトル、カテゴリ、サムネイル画像URLをエスケープ処理で格納

<?php foreach ($newsContents as $news): ?>
  <li>
    <h2>タイトル：<?= $news['title']; ?></h2>
    <img src="<?= $news['thumb']; ?>" alt="<?= $news['title']; ?>">
    <p>カテゴリー：<?= $news['category']; ?></p>
    <p><a href="<?= $news['curl']; ?>">詳細に進む</a></p>
  </li>
<?php endforeach; ?>

63行目のhtmlでは、for文で$newsContents 配列の各要素を1件ずつ取り出してhtml形式で出力。
ここも処理内容としてはarchive.phpとほぼ同じことをしています。

ページャー解説

<?php if ($currentPage > 1): ?><a href="?page=<?= $currentPage - 1; ?>" class="page pager__prev">PREV</a><?php endif; ?>
  <?php for ($i = 1; $i <= $totalPages; $i++): ?>
    <?php if ($i === $currentPage): ?>
      <span class="page pager__active"><?= $i; ?></span>
    <?php else: ?>
      <a href="?page=<?= $i; ?>" class="page pager__link"><?= $i; ?></a>
    <?php endif; ?>
  <?php endfor; ?>
<?php if ($currentPage < $totalPages): ?><a href="?page=<?= $currentPage + 1; ?>" class="page pager__next">NEXT</a><?php endif; ?>

74行目のページャーのhtml部分です。

  • 現在のページ番号が1より大きい場合のみ、prevを表示

  • ページ番号を1から$totalPagesまでループし、それぞれのページ番号リンクを生成（$i は現在処理しているページ番号）

  • $iが現在のページ番号と一致する場合のみ、spanタグで表示
    現在のページではない場合は、aタグで表示

  • 現在のページ番号が $totalPagesより小さい場合のみ、nextを表示

ページャー付き一覧ページ

無事、ページャーが実装できました。
以上が、今回の解説となります。いかがでしたでしょうか？

まとめ

設定やループの処理、if文などはデザイナーにとっては少し分かりにくいコードになっていますが、それさえ出来てしまえば、とても簡単に実装出来たと思います。
もっとmicroCMSで出来ることがたくさんあるので、このコードを元にしてチャレンジしていければ、デザイナーでもとても簡単にヘッドレスCMSを実装することが出来るようになりますね。

あとは初めての解説記事で分かりにくいところがたくさんありましたよね。
もっと上手く伝えれるように、これからも記事作成をしてみようと思います。

読んでいただいて、ありがとうございました！
気に入っていただけましたら、X（Twitter）などで拡散して頂けると喜びます！


私たちボトラでは、デジタルマーケティングを中心にオフィシャルサイト制作、LP制作、生成AI導入サポート、Dify構築代行などを行なっています。
お気軽にご相談ください。
info@votra.jp

いいなと思ったら応援しよう！