🍋

WordPressのカスタマイズをするためのPHP学習備忘録

に公開
PHP
HTML 5
tech

学習の目的

WordPressでカスタムテンプレートを作成するときなど、より深く・自由に機能や表示ロジックを制御したい場合においてPHPの知識が必要になる。

PHPを学習しショートコードやカスタム投稿タイプの詳細ページを作れるようになることがゴール。

PHPの開発環境の準備

MAMPを使ってPHPを実行できる環境を準備。
https://www.mamp.info/en/mamp/mac/
（※PHPでの文字列の表示方法や変数の定義、連想配列など学習はしたが、まとめるまではいいかなと思ったので、今回は触れません）

簡単なECサイトの作成

簡単なECサイトの作成をしながら、PHPの基本文法、PHPにおけるフォームの扱いを学習する。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./style.css" >
  <title>EC PHP</title>
</head>
<body>
  <div class="container">
    <div class="app-container">
      <h1 class="title">EC Shopping</h1>
      <div class="cards-container">
        <div class="card">
          <img class="card-image" src="https://dnbz0c2oupsw6.cloudfront.net/bcekt8ctzrsfdj1gsus49v9tnhqu" alt="">
          <p class="card-title">アボガド</p>
          <div class="flex justify-between">
            <p class="card-price">230円</p>
            <input min="0" class="item-number" type="number" value="0">
          </div>
        </div>
      </div>
      <div class="btn-footer bg-white">
        <input class="cart-btn" type="submit" name="submit" value="カートに追加" />
      </div>
    </div>
  </div>
</body>
</html>

静的ファイルをPHPで書き直す

商品名、商品価格、商品画像を連想配列にしてPHPで呼び出します。

product.php

<?php
$products = [
    [
        "id" => "avocado",
        "name" => "アボカド",
        "price" => 230,
        "image" => "./images/image_1.jpg"
    ],
    [
        "id" => "orange",
        "name" => "オレンジ",
        "price" => 1000,
        "image" => "./images/image_2.jpg"
    ],
    [
        "id" => "lemon",
        "name" => "桃",
        "price" => 220,
        "image" => "./images/image_3.jpg"
    ],
    [
        "id" => "pineapple",
        "name" => "パイナップル",
        "price" => 230,
        "image" => "./images/image_4.jpg"
    ]
]
?>

分割したファイルの呼び出し

先ほどのproduct.phpの内容をindex.phpで使いたい場合、そのファイルの呼び出しをindex.phpファイルの上部で行う。

<?php require_once'products.php'; ?>

index.php内の書き直し

商品名、商品価格、商品画像をPHPで書き直します。
echoで表示。

<div class="card">
    <img class="card-image" src="<?php echo$product["image"] ?>" alt="">
        <p class="card-title"><?php echo $product["name"] ?></p>
            <div class="flex justify-between">
              <p class="card-price"><?php echo displayPrice($product["price"]) ?></p>
              <input form="cart" min="0" name="<?php echo $product["id"]; ?>" class="item-number" type="number" value="0">
            </div>
</div>

同じ形式の商品が複数ある場合はforeachを使って取り出す

.cords-containerの中の.cardをforeachを使って繰り返し表示する。今回は商品が4つあるので、それぞれの値を連想配列から取ってくる。

<div class="cards-container">
   <?php foreach($products as $product): ?>
   <div class="card">
        <img class="card-image" src="<?php echo$product["image"] ?>" alt="">
        <p class="card-title"><?php echo $product["name"] ?></p>
        <div class="flex justify-between">
              <p class="card-price"><?php echo displayPrice($product["price"]) ?></p>
              <input form="cart" min="0" name="<?php echo $product["id"]; ?>" class="item-number" type="number" value="0">
         </div>
   </div>
   <?php endforeach; ?>
</div>

Formからデータを受け取る

商品の個数をcart.phpに渡せるようにコードを追加。
method="post"は受け取った値をcart.phpに渡して保存する意味合いがある。（慣例的なもの）
action="cart.php"はフォームから送信した際のデータをcart.phpに受け渡す。

<form id="cart" action="cart.php" method="post">

</form>

今回inputタグはformタグの外にあるため、formタグ内にはid="cart"、inputタグ内には form="cart"を記述。

cart.phpでフォームに入力された値を受け取る

フォームに入って来た値は_POSTで取得することができる。_POSTにはindex.phpのname
で指定した連想配列が入ってくるイメージ。
今回は$product["id"]を起点として値が入ってくる。

<p><?php echo $_POST[$product["id"]]; ?> × <?php echo $product["price"]; ?>円</p>

カートの個数が0だった場合の表示

0個の商品はカートに表示する必要がないのでif文で条件を追加します。

<?php foreach ($products as $product): ?>
    <?php if ($_POST[$product["id"]] > 0): ?>
     <div class="cart-item">
        <div class="flex">
          <img class="cart-item-img" src="<?php echo $product["image"]; ?>">
          <div class="cart-item-detail">
             <p class="cart-item-title"><?php echo $product["name"]; ?></p>
              <p><?php echo $_POST[$product["id"]]; ?> × <?php echo $product["price"]; ?>円</p>
           </div>
         </div>
      </div>
    <?php endif ?>
<?php endforeach; ?>

フォームの入力内容から決済金額を表示する

$sumで合計金額を取得するにあたり、商品の価格と個数を計算する変数を定義する。
sum(合計金額)にprice(それぞれの金額)が加算されることで合計金額を求めることができる。

<?php 
    $sum = 0;
    foreach($products as $product) {
        $price = $product["price"] * $_POST[$product["id"]];
        $sum = $sum + $price;
    }
?>

合計金額の表示をPHPで書き直す

<input class="checkout-btn" type="submit" value="<?php echo $sum. "円を決済する"; ?>">

おまけ

上の決済金額が税別のものになっているので、税込に直したい。
こんな感じで書いてみた↓

cart.php

<?php
require_once 'products.php';
require_once 'functions.php';
$sum = 0;
foreach ($products as $product) {
    // 1. まず税抜きの小計を計算
    $subtotalPrice = $product["price"] * $_POST[$product["id"]];

    // 2. その小計をcalPriceIncludedTax関数で税込にする
    $subtotalPriceIncludedTax = calPriceIncludedTax($subtotalPrice);

    // 3. 税込の小計を合計に追加
    $sum = $sum + $subtotalPriceIncludedTax;
}

// 最終的な合計金額は $totalIncludedTax に格納される
?>

functions.php

<?php 
    function calPriceIncludedTax($price)  {
        $taxRate =  0.1;
        return $price + $price * $taxRate;
    }

    function displayPrice($price) {
        $priceIncludedTax = calPriceIncludedTax($price);
        return $priceIncludedTax."円";
    }
?>

アウトプット


税込にはなってるっぽいけど小数点が入ってきちゃってるし、「円円を決済する」になってるので修正します。

まとめ

連想配列だったり書き方自体が慣れてないのでエラー出まくりですが、エラー出たらGeminiにどこがエラーなのかを聞いてなんとか実装できているのでまずは及第点かと。

関数にまとめると後々の記述が少なくて便利そう（まだなんとなくの理解なので、もう少し仲良くなりたい）。

Discussion