# WordPress講義3回目
## 環境構築
先週作成したテーマを利用します。
先週の資料は[こちら](https://hackmd.io/@gY8gdngQSbmAZ9WDXUEF6g/B12bMWoT3)

**先週時の授業を受けれていない方は[ここから](https://drive.google.com/drive/folders/1KPGe4vudpCcdemfPS1Dr07jlz1EujCfX?usp=sharing)先週作成したWPテーマをダウンロードして続きから作業をしてください。
Local Sites\sample\app\public\wp-content\themes
の階層にダウンロードしたmyblogというフォルダを配置してVsCodeで開いてください。**

## カスタム投稿タイプを作ってみる
WordPressではデフォルトで２つの投稿タイプが使えます。
１つ目は「投稿」ブログや記事といったものの投稿が可能です。
２つ目は「固定ページ」こちらも投稿タイプの一つの扱いです。

ですが、多くのサイトではこの２つだけでは管理しきれないので更に投稿タイプを増やしたい場合があります。
その際に利用するのがカスタム投稿タイプです。

以下はその導入手順です。

### カスタム投稿タイプの登録【商品】
テンプレートサイトから画面を２つダウンロード
https://startbootstrap.com/template/shop-homepage
https://startbootstrap.com/template/shop-item

#### 1. functions.phpにregister_post_typeを記述

add_action('init', function(){

    //カスタム投稿タイプの登録
    register_post_type('item', [
        'label' => '商品',
        'public' => true,
        'menu_position' => 5,
        'supports' => ['thumbnail','title','editor']
    ]);

});

＊これだけで管理画面上に投稿タイプが登録できました。
自由に記事を記述できます。
　https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_post_type

### 2. テスト商品を投稿してみてページを確認してみる

### カスタム投稿専用のテンプレートページの作成
#### 1. single-item.phpというファイルを作成して以下をコピペ

<?php get_header(); ?>
    <?php while( have_posts() ):  the_post()?>
    <!-- Page Header-->
    <?php
    $id = get_post_thumbnail_id();
    $img = wp_get_attachment_image_src($id,'large');
    ?>
    <!-- Product section-->
    <section class="py-5">
            <div class="container px-4 px-lg-5 my-5">
                <div class="row gx-4 gx-lg-5 align-items-center">
                    <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="<?php echo $img[0]; ?>" alt="..." /></div>
                    <div class="col-md-6">
                        <div class="small mb-1">SKU: BST-498</div>
                        <h1 class="display-5 fw-bolder"><?php the_title(); ?></h1>
                        <div class="fs-5 mb-5">
                            <span class="text-decoration-line-through">$45.00</span>
                            <span>$40.00</span>
                        </div>
                        <p class="lead"><?php the_content(); ?></p>
                        <div class="d-flex">
                            <input class="form-control text-center me-3" id="inputQuantity" type="num" value="1" style="max-width: 3rem" />
                            <button class="btn btn-outline-dark flex-shrink-0" type="button">
                                <i class="bi-cart-fill me-1"></i>
                                Add to cart
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
    <?php endwhile; ?>
<?php get_footer(); ?>

＊single-カスタム投稿タイプ名.phpでカスタム投稿用の記事ページが作成できます。

#### 2. archive-item.phpを作成して以下の内容をコピペ

<?php get_header(); ?>
<!-- Section-->
<section class="py-5">
    <div class="container px-4 px-lg-5 mt-5">
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
            <?php if( have_posts()):?>
                <?php while( have_posts() ):  the_post()?>
                    <?php
                    $id = get_post_thumbnail_id();
                    $img = wp_get_attachment_image_src($id,'large');
                    ?>
                    <div class="col mb-5">
                        <div class="card h-100">
                            <!-- Product image-->
                            <img class="card-img-top" src="<?php echo $img[0]; ?>" alt="..." />
                            <!-- Product details-->
                            <div class="card-body p-4">
                                <div class="text-center">
                                    <!-- Product name-->
                                    <h5 class="fw-bolder"><?php the_title(); ?></h5>
                                    <!-- Product price-->
                                    $40.00 - $80.00
                                </div>
                            </div>
                            <!-- Product actions-->
                            <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="<?php the_permalink(); ?>">View options</a></div>
                            </div>
                        </div>
                    </div>
                <?php endwhile; ?>
            <?php else:?>
            投稿がみつかりませんでした。
            <?php endif;?>

        </div>
    </div>
</section>
<?php get_footer(); ?> 

### カスタムフィールドで入力欄を増やす
#### 1. functions.phpの登録処理の中身を以下に変更

//カスタム投稿タイプの登録
register_post_type('item', [
    'label' => '商品',
    'public' => true,
    'menu_position' => 5,
    'supports' => ['thumbnail','title','editor','custom-fields'],
    'has_archive'=>true,
    'show_in_rest'=>true,

]);

#### 2. 商品の登録画面右上の詳細ボタン（三つの縦丸）から有効化
設定＞パネル＞追加＞カスタムフィールド
から有効化して更新

#### 3. 管理画面からカスタムフィールドを追加してみる
今回は価格とSKUの２つのデータを登録

#### 4. カスタムフィールドの情報はget_post_meta()で取得可能
single-item.phpの場所でこのようにしてデータを取得

<?php
$price = get_post_meta(get_the_ID(),'価格',true);
$sku = get_post_meta(get_the_ID(),'SKU',true);
?>

#### 5. 表示したい場所で表示処理(single-item.phpのループの中で)

SKU
<div class="small mb-1">SKU: <?php echo esc_html($sku) ?></div>

価格
<span><?php echo esc_html(number_format($price)) ?>円</span>

#### 6. archive-item.phpでも同様の方法でデータ取得表示ができます。