デイトラweb制作上級編パターン2 DAY31~44⑬
nakano
卒業制作課題パターン2 13日目
共通のサイドバー
投稿
・home.php（お知らせ一覧）
・category.php（カテゴリー別）
・single.php（投稿ページ）
カスタム投稿
・archive.php（スタッフブログ）
・taxonomy-genre.php（ターム別）
・single.php（投稿ページ）
投稿ページのサイドバー
①新着記事
PHP
<div class="p-archive__new">
<h2 class="p-archive__new-head">
<img src="<?php echo esc_url(get_template_directory_uri() . '/img/archive/sidebar-icon_2.png'); ?>" alt="">
新着記事
</h2>
<div class="p-archive__new-items">
<!-- 投稿タイプが「投稿」の場合 -->
<?php if ((get_post_type() == 'post')) : ?>
<?php
$information = get_posts(array(
'posts_per_page' => 5,
'order' => 'DESK'
));
?>
<?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();
?>
<!-- 投稿タイプが「投稿」以外の場合 -->
<?php else : ?>
<?php
$args = array(
'post_type' => 'blog',
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC',
);
$new_posts = get_posts($args);
foreach ($new_posts 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">
<span><?php echo esc_html(get_the_terms(get_the_ID(), 'genre')[0]->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(); ?>
<?php endif; ?>
</div>
</div>SCSS
.p-archive__new {
margin-top: 54px;
}
.p-archive__new-head {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 1px solid #888888;
font-size: 16px;
font-weight: 700;
img {
width: 24px;
height: 24px;
margin-right: 10px;
}
}
.p-archive__new-items {}
.p-archive__new-item {
width: 100%;
display: flex;
&:not(:first-child) {
margin-top: 22px;
@include mq('sp') {
margin-top: 20px;
}
}
&:hover .p-archive__new-item-image {
transform: scale(1.1, 1.1);
}
&:hover .p-archive__new-item-title {
color: #1391E6;
}
}
.p-archive__new-image-wrapper {
width: 40%;
overflow: hidden;
}
.p-archive__new-item-image {
overflow: hidden;
padding-top: 75%;
position: relative;
transition: all 0.3s ease 0s;
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
width: 100%;
height: 100%;
}
}
.p-archive__new-item-body {
padding-left: 10px;
width: 100% - 40%;
@include mq('sp') {
padding-top: 8px;
}
span {
padding: 2px 8px;
border-radius: 12px;
background: #1391E6;
color: #fff;
font-size: 10px;
vertical-align: top;
}
}
.p-archive__new-item-title {
font-size: 14px;
transition: all 0.3s ease 0s;
line-height: (20 / 14);
}
.p-archive__new-item-published {
color: #888888;
font-size: 10px;
margin-top: 8px;
@include mq('sp') {
margin-top: 6px;
}
}②カテゴリー
PHP
<div class="p-archive__category">
<h2 class="p-archive__category-head">
<img src="<?php echo esc_url(get_template_directory_uri() . '/img/archive/sidebar-icon_3.png'); ?>" alt="">
カテゴリー
</h2>
<ul class="p-archive__category-list">
<!-- 投稿タイプが「投稿」の場合 -->
<?php if ((get_post_type() == 'post')) : ?>
<?php
$categories = get_categories();
foreach ($categories as $category) {
echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}
?>
<!-- 投稿タイプが「投稿」以外の場合 -->
<?php else : ?>
<?php
$genre_terms = get_terms('genre', array('hide_empty' => false));
foreach ($genre_terms as $genre_term) :
?>
<li><a href="<?php echo esc_url(get_term_link($genre_term, 'genre')); ?>"><?php echo esc_html($genre_term->name); ?></a></li>
<?php
endforeach;
?>
<?php endif; ?>
</ul>
</div>SCSS
.p-archive__category {
margin-top: 55px;
@include mq('sp') {
margin-top: 58px;
}
}
.p-archive__category-head {
display: flex;
align-items: center;
margin-bottom: 13px;
padding-bottom: 8px;
border-bottom: 1px solid #888888;
font-size: 16px;
font-weight: 700;
img {
width: 24px;
height: 24px;
margin-right: 10px;
}
}
.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;
&::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;
}
}
}
}まとめ
今回も卒業制作課題を進めました。
目標の2週間以内の完成まであと1日です。
見直しも含めるとあと2日は欲しいところですが、そのあたりもがんばって1日で終わらせたいと思います！
