デイトラweb制作上級編パターン2 DAY31~44⑩
nakano
卒業制作課題パターン2 10日目
ローカル環境（local by flywheel で作成）
・home.php
・single.php
投稿の種類
デフォルトの投稿
・お知らせ一覧（home.php）
→ 投稿ページはsingle.php
カスタム投稿
・スタッフブログ一覧（archive.php）
→ 投稿ページはsingle.php
・診療案内（page-medical.php）
→ カスタムフィールドを出力
・スタッフ（page-staff.php）
→ カスタムフィールドを出力
スタッフブログ一覧（archive.php）の時とほぼ同じ
→ 上級編パターン2 DAY31~44⑧
パンくずリストについては
→ 上級編 DAY31~44⑮
トップページ（front-page.php）ですること
リンク先はトップページの「お知らせ」部分のみ↓
PHP
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 1,
);
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="top-news__info">
<div class="top-news__head">
<h2 class="top-news__title">お知らせ<span>NEWS</span></h2>
<!-- お知らせ一覧へのリンク -->
<div class="top-news__detail">
<a href="<?php $page = get_page_by_path('news');
echo esc_url(get_permalink($page->ID)); ?>">
過去のお知らせはこちら
</a>
</div>
</div>
<!-- 最新記事へのリンク -->
<div class="top-news-article">
<a href="<?php the_permalink(); ?>">
<time class="top-news__published" datetime="<?php the_time('c'); ?>"><?php the_time('Y.n.j'); ?></time>
<div class="top-news__text"><?php the_title(); ?></div>
</a>
</div>
</div>
<?php endwhile; ?>
<?php endif;
wp_reset_postdata(); ?>お知らせ一覧（home.php）
①投稿一覧
上級編パターン2 DAY31~44⑧ の時に書いたHTMLを動的にする
PHP
<?php
//記事があれば表示
if (have_posts()) :
?>
<div class="p-archive__items">
<?php
//記事数ぶんループ
while (have_posts()) :
the_post();
?>
<a href="<?php the_permalink(); ?>" class="p-archive__item">
<?php
$days = 3; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U', ($today - $entry)) / 86400;
if ($days > $kiji) {
echo '<span class="p-archive__item-new">New</span>';
}
?>
<div class="p-archive__image-wrapper">
<div class="p-archive__item-image"><?php the_post_thumbnail('large'); ?></div>
</div>
<div class="p-archive__item-body">
<?php
// カテゴリー１つ目の名前
$category = get_the_category();
if ($category[0]) {
echo '<span>' . $category[0]->cat_name . '</span>';
}
?>
<div class="p-archive__item-title"><?php the_title(); ?></div>
<time class="p-archive__item-published" datetime="<?php the_time('c'); ?>"><?php the_time('Y.n.j'); ?></time>
</div>
</a>
<?php endwhile; ?>
</div>
<?php endif; ?>②最新記事
PHP
<?php
$information = get_posts(array(
'posts_per_page' => 5,
'order' => 'DESK'
));
if ($information) :
?>
<div class="p-archive__new-items">
<?php
foreach ($information as $post) :
setup_postdata($post);
?>
<a href="<?php the_permalink(); ?>" class="p-archive__new-item">
<div class="p-archive__new-image-wrapper">
<div class="p-archive__new-item-image"><?php the_post_thumbnail('large'); ?></div>
</div>
<div class="p-archive__new-item-body">
<?php
// カテゴリー１つ目の名前
$category = get_the_category();
if ($category[0]) {
echo '<span>' . $category[0]->cat_name . '</span>';
}
?>
<div class="p-archive__new-item-title">
<?php
// 文字数制限
$text = get_the_title();
$limit = 20;
if (mb_strlen($text) > $limit) {
$title = mb_substr($text, 0, $limit);
echo $title . '...';
} else {
echo $text;
}
?>
</div>
<time class="p-archive__new-item-published" datetime="<?php the_time('c'); ?>"><?php the_time('Y.n.j'); ?></time>
</div>
</a>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
<?php endif; ?>SCSSは投稿一覧とほぼ同じ
③カテゴリ
PHP
<ul class="p-archive__category-list">
<?php
$categories = get_categories();
foreach ($categories as $category) {
echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}
?>
</ul>SCSS
.p-archive__category-list {
padding-left: 20px;
li {
font-size: 16px;
&:not(:first-child) {
margin-top: 10px;
@include mq('sp') {
margin-top: 9px;
}
}
a {
display: block;
padding-left: 12px;
position: relative;
// CSS三角形作成ツール
&::before {
position: absolute;
content: "";
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent #007bff;
}
}
}
}④ページネーション
作成方法は 上級編 DAY31~44⑮
<?php get_template_part('template-parts/pagination'); ?>上のコードを貼り付けるとHTMLが生成されるのでそれを装飾する
SCSS
.pagination {
margin-top: 100px;
@include mq('sp') {
margin-top: 41px;
}
}
.nav-links {
display: flex;
justify-content: center;
}
.page-numbers {
text-align: center;
padding: 5px 0;
width: 34px;
height: 36px;
display: inline-block;
margin-right: 8px;
color: #1391E6;
background: #fff;
border-radius: 4px;
border: 1px solid #1391E6;
transition: all 0.3s ease 0s;
@include mq('sp') {
padding: 7px 0;
width: 40px;
height: 40px;
margin-right: 6px;
}
&:hover {
background: #1391E6;
color: #fff;
}
}
.current {
background: #1391E6;
color: #fff;
}
.prev {
position: relative;
width: 82px;
background: #1391E6;
color: #fff;
&::before {
position: absolute;
content: "前へ";
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #fff;
}
&::after {
position: absolute;
content: "";
left: 17px;
top: 50%;
transform: translateY(-50%);
background: url(../img/archive/arrow-circle-left.png) no-repeat center center / contain;
width: 16px;
height: 16px;
transition: all 0.3s ease 0s;
}
&:hover {
&::after {
left: 10px;
}
}
}
.next {
position: relative;
width: 82px;
background: #1391E6;
color: #fff;
&::before {
position: absolute;
content: "次へ";
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #fff;
}
&::after {
position: absolute;
content: "";
right: 17px;
top: 50%;
transform: translateY(-50%);
background: url(../img/archive/arrow-circle-right.png) no-repeat center center / contain;
width: 16px;
height: 16px;
transition: all 0.3s ease 0s;
}
&:hover {
&::after {
right: 10px;
}
}
}
.pagination .dots {
background: transparent;
box-shadow: none;
}まとめ
今回も卒業制作課題を進めました。
今日からローカル環境です。
前回の卒業課題はここでかなり躓いたので反省を活かして頑張ります！
