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

卒業制作課題パターン2 12日目
page-staff.php

wordpress環境前
→ 上級編パターン2 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>
まとめ
今回も卒業制作課題を進めました。
カスタムフィールドを使ったページの作成はようやく慣れてきました。
診療案内のページでもカスタムフィールドを使うみたいなので、今度はもっとスピードを意識しながら作りたいです!