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

卒業制作課題パターン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日で終わらせたいと思います!

コメントを残す

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