デイトラweb制作上級編　 DAY31~44⑯

2022年10月14日 最終更新日時 : 2022年12月18日 nakanonakano

卒業制作課題　16日目

PC版

スマホ版

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

①「Custom Post Type UI」でカスタム投稿を作成

上級編　DAY25~26を参考に作成

カスタム投稿「case」を追加↓

②カスタムタクソノミーを作成

ここも上級編　DAY25~26を参考に作成

カスタムタクソノミー「プログラム」を追加

③タクソノミーに対してジャンルを登録

「ビジネス英語研修」「異文化コミュニケーション」「ビジネス留学プログラム」の3つのジャンルを登録

④「Advanced Custom Fields」でカスタムフィールドを作成

上級編　DAY27~28を参考に作成

それぞれの対応している箇所↓

フィールドタイプ「画像」の戻り値は「画像URL」に変更しておく

⑤page-case.phpを書き換える

SCSS（共通）

.page-case__boxes {
    margin-top: 65px;
    display: flex;
    flex-wrap: wrap;

    @include mq('sp') {
        margin-top: 25px;
    }
}

.page-case__box {
    align-items: center;
    width: calc(50% - 80px * 1 / 2);
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);

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

        @include mq('tab') {
            margin-left: 0;
        }

        @include mq('sp') {
            margin-left: 0;
        }
    }

    &:nth-child(n + 3) {
        margin-top: 72px;

        @include mq('sp') {
            margin-top: 57px;
        }
    }

    @include mq('tab') {
        width: 100%;
        margin-left: 0;

        &:nth-child(n + 2) {
            margin-top: 70px;
        }
    }

    @include mq('sp') {
        width: 100%;
        margin-left: 0;

        &:nth-child(n + 2) {
            margin-top: 57px;
        }
    }
}


.page-case__box-head {
    padding: 18px 0 18px 40px;
    background: $color-main;
    color: #fff;
    border-radius: 12px 12px 0 0;
    position: relative;

    @include mq('tab') {
        padding-left: 20px;
    }

    @include mq('sp') {
        padding-left: 20px;
    }
}

.page-case__business {
    margin-bottom: 11px;

    @include mq('tab') {
        margin-bottom: 3px;
        font-size: 12px;
    }

    @include mq('sp') {
        margin-bottom: 3px;
        font-size: 12px;
    }
}

.page-case__name {
    font-size: 24px;
    line-height: 1;

    @include mq('tab') {
        font-size: 16px;
    }

    @include mq('sp') {
        font-size: 16px;
    }

    span {
        margin-left: 16px;
        font-size: 14px;

        @include mq('tab') {
            margin-left: 12px;
        }

        @include mq('sp') {
            margin-left: 12px;
        }
    }
}

.page-case__image {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);

    img {
        border-radius: 12px;
        width: 160px;
        height: 112px;

        @include mq('sp') {
            width: 90px;
            height: 68px;
        }
    }
}

.page-case__box-content {
    padding: 40px;

    @include mq('sp') {
        padding: 20px;
    }
}

.page-case__box-course-name {
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 10px;
    display: flex;

    dd {
        margin-left: 10px;
    }
}

.page-case__lists {
    margin-top: 32px;

    @include mq('sp') {
        margin-top: 22px;
    }
}

.page-case__list {

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

    dt {
        font-size: 18px;
        font-weight: 700;
        padding-left: 30px;
        position: relative;

        @include mq('sp') {
            font-size: 16px;
            padding-left: 25px;
        }

        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: url(../img/icon-check.png) no-repeat center center / cover;
            width: 20px;
            height: 20px;

            @include mq('sp') {
                width: 15.52px;
                height: 15.52px;
            }
        }
    }
}

「ビジネス英語研修」に属する記事を表示

PHP

<div class="page-case__boxes">
    <?php
    $args = array(
        'posts_per_page' => -1, //全記事を出力
        'post_type' => 'case-type', //カスタム投稿slag
        'order' => 'ASC', //表示する順番
        'tax_query' => array( // タクソノミーの指定
            array(
                'taxonomy' => 'genre',
                'field' => 'slug',
                'terms' => 'english' // 取得したタームを指定
            )
        )

    );

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

        <?php
        while ($the_query->have_posts()) : $the_query->the_post();
        ?>
            <?php the_field('') ?>
            <div class="page-case__box">
                <div class="page-case__box-head">
                    <div class="page-case__business"><?php the_field('business') ?></div>
                    <div class="page-case__name"><?php the_field('company') ?><span>様</span></div>
                    <div class="page-case__image"><img src="<?php the_field('logo'); ?>" /></div>
                </div>
                <div class="page-case__box-content">
                    <div class="page-case__box-course-name">
                        <dt>研修コース：</dt>
                        <dd><?php the_field('plan') ?></dd>
                    </div>
                    <div class="page-case__lists">
                        <div class="page-case__list">
                            <dt>研修の目的</dt>
                            <dd><?php the_field('purpose') ?></dd>
                        </div>
                        <div class="page-case__list">
                            <dt>選んだ理由</dt>
                            <dd><?php the_field('reason') ?></dd>
                        </div>
                        <div class="page-case__list">
                            <dt>導入後の成果・効果</dt>
                            <dd><?php the_field('result') ?></dd>
                        </div>
                    </div>
                </div>
            </div>
        <?php
        endwhile; ?>

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

「異文化コミュニケーション」に属する記事を表示

PHP

<div class="page-case__boxes">
    <?php
    $args = array(
        'posts_per_page' => -1, //全記事を出力
        'post_type' => 'case-type', //カスタム投稿slag
        'order' => 'ASC', //表示する順番
        'tax_query' => array( // タクソノミーの指定
            array(
                'taxonomy' => 'genre',
                'field' => 'slug',
                'terms' => 'communication' // 取得したタームを指定
            )
        )

    );

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

        <?php
        while ($the_query->have_posts()) : $the_query->the_post();
        ?>
            <?php the_field('') ?>
            <div class="page-case__box">
                <div class="page-case__box-head">
                    <div class="page-case__business"><?php the_field('business') ?></div>
                    <div class="page-case__name"><?php the_field('company') ?><span>様</span></div>
                    <div class="page-case__image"><img src="<?php the_field('logo'); ?>" /></div>
                </div>
                <div class="page-case__box-content">
                    <div class="page-case__box-course-name">
                        <dt>研修コース：</dt>
                        <dd><?php the_field('plan') ?></dd>
                    </div>
                    <div class="page-case__lists">
                        <div class="page-case__list">
                            <dt>研修の目的</dt>
                            <dd><?php the_field('purpose') ?></dd>
                        </div>
                        <div class="page-case__list">
                            <dt>選んだ理由</dt>
                            <dd><?php the_field('reason') ?></dd>
                        </div>
                        <div class="page-case__list">
                            <dt>導入後の成果・効果</dt>
                            <dd><?php the_field('result') ?></dd>
                        </div>
                    </div>
                </div>
            </div>
        <?php
        endwhile; ?>

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

「ビジネス留学プログラム」に属する記事を表示

<div class="page-case__boxes">
    <?php
    $args = array(
        'posts_per_page' => -1, //全記事を出力
        'post_type' => 'case-type', //カスタム投稿slag
        'order' => 'ASC', //表示する順番
        'tax_query' => array( // タクソノミーの指定
            array(
                'taxonomy' => 'genre',
                'field' => 'slug',
                'terms' => 'communication' // 取得したタームを指定
            )
        )

    );

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

        <?php
        while ($the_query->have_posts()) : $the_query->the_post();
        ?>
            <?php the_field('') ?>
            <div class="page-case__box">
                <div class="page-case__box-head">
                    <div class="page-case__business"><?php the_field('business') ?></div>
                    <div class="page-case__name"><?php the_field('company') ?><span>様</span></div>
                    <div class="page-case__image"><img src="<?php the_field('logo'); ?>" /></div>
                </div>
                <div class="page-case__box-content">
                    <div class="page-case__box-course-name">
                        <dt>研修コース：</dt>
                        <dd><?php the_field('plan') ?></dd>
                    </div>
                    <div class="page-case__lists">
                        <div class="page-case__list">
                            <dt>研修の目的</dt>
                            <dd><?php the_field('purpose') ?></dd>
                        </div>
                        <div class="page-case__list">
                            <dt>選んだ理由</dt>
                            <dd><?php the_field('reason') ?></dd>
                        </div>
                        <div class="page-case__list">
                            <dt>導入後の成果・効果</dt>
                            <dd><?php the_field('result') ?></dd>
                        </div>
                    </div>
                </div>
            </div>
        <?php
        endwhile; ?>

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

まとめ

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

もう16日目ですね。

2週間以内の完成が目標でしたがまだまだ終わりません。。。

先は長いですがあせってもしょうがないので自分のペースでちゃんと最後まで作れるように頑張りたいです！

カテゴリー
上級編、卒業制作課題1

コメントを残す

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

前の記事
デイトラweb制作上級編　 DAY31~44⑮
2022年10月12日
次の記事
デイトラweb制作上級編　 DAY31~44⑰
2022年10月16日