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

卒業制作課題 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週間以内の完成が目標でしたがまだまだ終わりません。。。
先は長いですがあせってもしょうがないので自分のペースでちゃんと最後まで作れるように頑張りたいです!