デイトラweb制作上級編パターン2  DAY31~44⑫

卒業制作課題パターン2 12日目

page-staff.php

wordpress環境前

→ 上級編パターン2  DAY31~44⑦(主にスライド)


カスタム投稿の内容を表示

カスタム投稿、カスタムタクソノミー、カスタムフィールドの作成方法

→ 上級編  DAY31~44⑯

それぞれのスラッグ

・カスタム投稿「staffs

・カスタムタクソノミー「occupation

・ターム1つ目「hygienist」、ターム2つ目「assistant



カスタムフィールド

カスタム投稿「staffs」の全体↓

変更前

ターム1つ目「hygienist」の場合

HTML

<div class="p-staff__intro-items">
    <!-- アイテム1個目 -->
    <div class="p-staff__intro-item">
        <div class="p-staff__intro-image"><img src="./img/staff/staff1.png" alt=""></div>
        <div class="p-staff__intro-name">
            <p>歯科衛生士</p>
            <p>鈴木 太郎</p>
        </div>
        <table class="p-staff__intro-table">
            <tbody>
                <tr>
                    <th>出身地</th>
                    <td>北海道</td>
                </tr>
                <tr>
                    <th>趣味</th>
                    <td>スキー、料理</td>
                </tr>
                <tr>
                    <th>好きな食べ物</th>
                    <td>お寿司、うなぎ</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- アイテム2個目 -->
    ・
    ・
    ・
</div>

SCSS(変更前・後共通)

.p-staff__intro-items {
    display: flex;
    flex-wrap: wrap;
}

.p-staff__intro-item {
    width: calc(33.3% - 80px * 2 / 3);

    @include mq('pc') {

        &:not(:nth-child(3n + 1)) {
            margin-left: 80px;
        }

        &:nth-child(n + 4) {
            margin-top: 60px;
        }
    }

    @include mq('tab') {
        width: calc(33.3% - 20px * 2 / 3);

        &:not(:nth-child(3n + 1)) {
            margin-left: 20px;
        }

        &:nth-child(n + 4) {
            margin-top: 30px;
        }
    }

    @include mq('sp') {
        width: 100%;

        &:not(:nth-child(2n + 1)) {
            margin-left: 0;
        }

        &:not(:nth-child(3n + 1)) {
            margin-left: 0;
        }

        &:not(:first-child) {
            margin-top: 50px;
        }
    }
}

.p-staff__intro-image {
    margin-bottom: 14px;
    padding-top: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        width: 100%;
    }
}

.p-staff__intro-name {
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1.44px;

        &:first-child {
            margin-right: 12px;
            font-size: 12px;
            letter-spacing: 0.96px;
        }
    }
}

.p-staff__intro-table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;

    th,
    td {
        padding: 15px 20px;
        border: 1px solid #fff;
    }

    th {
        width: 50%;
        text-align-last: left;
        background: #DFF1FD;

        @include mq('sp') {
            width: 41.791%;
        }
    }

    td {
        width: 50%;

        @include mq('sp') {
            width: 100% - 41.791%;
        }
    }
}

変更後(wordpress環境)

PHP

<div class="p-staff__intro-items">
    <?php
    $args = array(
        'posts_per_page' => -1, //全記事を出力
        'post_type' => 'staffs', //カスタム投稿のslag
        'order' => 'ASC', //表示する順番
        'tax_query' => array(
            array(
                'taxonomy' => 'occupation', // タクソノミーの指定
                'field' => 'slug',
                'terms' => 'hygienist' // タームを指定
            )
        )

    );

    $the_query = new WP_Query($args);
    if ($the_query->have_posts()) :
    ?>

        <?php
        while ($the_query->have_posts()) : $the_query->the_post();
        ?>

            <div class="p-staff__intro-item">
                <div class="p-staff__intro-image"><?php the_post_thumbnail('large'); ?></div>
                <div class="p-staff__intro-name">
                    <p>歯科衛生士</p>
                    <p><?php the_title(); ?></p>
                </div>
                <table class="p-staff__intro-table">
                    <tbody>
                        <tr>
                            <th>出身地</th>
                            <td><?php the_field('birthplace') ?></td>
                        </tr>
                        <tr>
                            <th>趣味</th>
                            <td><?php the_field('hobby') ?></td>
                        </tr>
                        <tr>
                            <th>好きな食べ物</th>
                            <td><?php the_field('food') ?></td>
                        </tr>
                    </tbody>
                </table>
            </div>

        <?php
        endwhile; ?>

    <?php
        wp_reset_postdata();
    endif; ?>
</div>

まとめ

今回も卒業制作課題を進めました。

カスタムフィールドを使ったページの作成はようやく慣れてきました。

診療案内のページでもカスタムフィールドを使うみたいなので、今度はもっとスピードを意識しながら作りたいです!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です