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

2022年10月12日 最終更新日時 : 2022年12月18日 nakanonakano

卒業制作課題　15日目

PC版

スマホ版

苦戦したところ

①記事一覧の表示（+ページネーション）

PHP

<div class="home-news__left">
    <div class="home-news__left-head">カテゴリ</div>
    <?php
    //記事があればentriesブロック以下を表示
    if (have_posts()) :
    ?>
        <div class="home-news__entries">
            <?php
            //記事数ぶんループ
            while (have_posts()) :
                the_post();
            ?>
                <a href="<?php the_permalink(); ?>" class="entry-item">
                    <div class="entry-item-img"><?php the_post_thumbnail('large'); ?></div>
                    <div class="entry-item-body">
                        <div class="entry-item-meta">
                            <?php
                            // カテゴリー１つ目の名前
                            $category = get_the_category();
                            if ($category[0]) {
                                echo '<div class="entry-item-tag">' . $category[0]->cat_name . '</div><!-- /entry-item-tag -->';
                            }
                            ?>
                            <!-- 公開日時 -->
                            <time class="entry-item-published" datetime="<?php the_time('c'); ?>"><?php the_time('Y.n.j'); ?></time><!-- /entry-item-published -->
                        </div>
                        <h2 class="entry-item-title"><?php the_title(); ?></h2>
                    </div>
                </a>
            <?php endwhile; ?>
        </div>
    <?php endif; ?>
    <?php get_template_part('template-parts/pagination'); ?>
</div>

SCSS

.home-news__left {
    width: 69.0909%;
    max-width: 760px;


    @include mq('sp') {
        width: 100%;
    }
}

.home-news__left-head {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 21px;

    @include mq('sp') {
        font-size: 20px;
        margin-bottom: 18px;
    }
}

.entry-item {
    display: flex;

    &:not(:first-child) {
        margin-top: 40px;

        @include mq('sp') {
            margin-top: 22px;
        }
    }
}

.entry-item-img {

    img {
        max-width: 250px;
        width: 19.53125vw;
        max-height: 156px;
        height: 12.1875vw;

        @include mq('sp') {
            max-width: none;
            width: 32vw;
            max-height: none;
            height: 24vw;
        }
    }
}

.entry-item-body {
    margin-top: 9px;
    margin-left: 20px;
    width: 100%;

    @include mq('sp') {
        margin-top: 0;
        margin-left: 12px;
    }
}

.entry-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    @include mq('sp') {
        margin-bottom: 4px;
    }
}

.entry-item-tag {
    color: #E61264;
    padding: 6px 0;
    width: 104px;
    border: 1px solid #E61264;
    text-align: center;

    @include mq('sp') {
        font-size: 12px;
        width: 72px;
        padding: 1px 0;
    }
}

.entry-item-published {
    color: #888888;
}

PHP（template-partsフォルダ > pagination.php）

<?php
$args = array(
    'mid_size' => 3,
    'prev_text' => '',
    'next_text' => '',
    'screen_reader_text' => ' ',
);
the_posts_pagination($args);
?>
<!-- 置きたい場所に↓ -->
<?php get_template_part('template-parts/pagination'); ?>

SCSS

.pagination {
    margin: 60px 0 0;

    @include mq('sp') {
        margin-top: 41px;
    }
}

.nav-links {
    display: flex;
    justify-content: center;
}

.page-numbers {
    text-align: center;
    padding: 13px 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-right: 8px;
    color: #888888;
    background: #F8F8F8;

    @include mq('sp') {
        padding: 7px 0;
        width: 40px;
        height: 40px;
        margin-right: 6px;
    }
}

.current {
    background: $color-main;
    color: #fff;
}

.prev {
    position: relative;
    margin-right: 20px;

    @include mq('sp') {
        margin-right: 6px;
    }

    &::before {
        position: absolute;
        content: "";
        left: 50%;
        top: 50%;
        transform: rotate(-45deg) translateY(-50%);
        width: 10px;
        height: 10px;
        border-left: 2px solid #888888;
        border-top: 2px solid #888888;
    }
}

.next {
    position: relative;
    margin-left: 20px;

    @include mq('sp') {
        margin-left: 6px;
    }

    &::before {
        position: absolute;
        content: "";
        left: 50%;
        top: 50%;
        transform: rotate(-45deg) translateY(-50%);
        width: 10px;
        height: 10px;
        border-right: 2px solid #888888;
        border-bottom: 2px solid #888888;
    }
}

.pagination .dots {
    background: transparent;
    box-shadow: none;
}

②新着記事

PHP

<div class="home-news__new">
    <div class="home-news__sidebar-head">新着記事</div>
    <?php
    $information = get_posts(array(
        'posts_per_page' => 5,
        'order' => 'DESK'
    ));
    if ($information) :
    ?>
        <div class="home-news__new-entries">
            <?php
            foreach ($information as $post) :
                setup_postdata($post);
            ?>
                <a href="<?php the_permalink(); ?>" class="new-entry-item">
                    <div class="new-entry-item-img"><?php the_post_thumbnail('large'); ?></div>
                    <div class="new-entry-item-body">
                        <div class="new-entry-item-meta">
                            <?php
                            $category = get_the_category();
                            if ($category[0]) {
                                echo '<div class="new-entry-item-tag">' . $category[0]->cat_name . '</div>';
                            }
                            ?>
                            <time class="new-entry-item-published" datetime="<?php the_time('c'); ?>"><?php the_time('Y.n.j'); ?></time>
                        </div>
                        <div class="new-entry-item-title"><?php the_title(); ?></div>
                    </div>
                </a>
            <?php
            endforeach;
            wp_reset_postdata();
            ?>
        </div>
    <?php else : ?>
        <p>表示できる情報はありません。</p>
    <?php endif; ?>
</div>

SCSS

.home-news__sidebar-head {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.new-entry-item {
    display: flex;

    &:not(:first-child) {
        margin-top: 16px;

        @include mq('sp') {
            margin-top: 21px;
        }
    }
}

.new-entry-item-img {

    img {
        max-width: 100px;
        width: 7.8125vw;
        max-height: 100px;
        height: 7.8125vw;

        @include mq('sp') {
            max-width: none;
            width: 32vw;
            max-height: none;
            height: 24vw;
        }
    }
}

.new-entry-item-body {
    width: 15.625vw;
    max-width: 200px;
    padding-left: 10px;

    @include mq('sp') {
        width: 100%;
        max-width: none;
    }
}

.new-entry-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    margin-bottom: 11px;

    @include mq('sp') {
        margin-top: 0;
        margin-bottom: 6px;
    }
}

.new-entry-item-tag {
    color: #E61264;
    padding: 1px 12px;
    width: 72px;
    border: 1px solid #E61264;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
}

.new-entry-item-published {
    color: #888888;
    margin-left: 8px;
}

.new-entry-item-title {
    line-height: (20 / 14);
}

③カテゴリ

PHP

<div class="home-news__category">
    <div class="home-news__sidebar-head">カテゴリ</div>
    <div class="home-news__category-entries">
        <?php
        $categories = get_categories();
        foreach ($categories as $category) {
            echo '<div class="category-entry-item"><div class="category-entry-item-name"><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></div></div>';
        }
        ?>
    </div>
</div>
.home-news__category {
    margin-top: 76px;

    @include mq('sp') {
        margin-top: 59px;
    }
}

.home-news__sidebar-head {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.category-entry-item {
    padding: 14px 0 14px 39px;
    border-bottom: 1px solid #DDDDDD;

    &:first-child {
        border-top: 1px solid #DDDDDD;
    }
}

.category-entry-item-name {
    font-size: 16px;
    font-weight: 700;
    position: relative;

    &::before {
        position: absolute;
        content: "";
        width: 11px;
        height: 11px;
        border-right: 3px solid #023E78;
        border-bottom: 3px solid #023E78;
        left: -19px;
        top: 50%;
        transform: rotate(-45deg) translateY(-50%);
    }
}

カテゴリのリンク先

新しくcategory.phpを作成する
→　home.phpをコピペ、タイトルだけ変更

<!-- タイトルを動的にする -->
<div class="home-news__left-head"><?php the_archive_title(); ?></div>

「カテゴリー：」を消す場合はfunctions.phpに追記

function my_archive_title($title)
{
  if (is_category()) { // カテゴリーアーカイブの場合
    $title = single_cat_title('', false);
  } elseif (is_tag()) { // タグアーカイブの場合
    $title = single_tag_title('', false);
  } elseif (is_post_type_archive()) { // 投稿タイプのアーカイブの場合
    $title = post_type_archive_title('', false);
  } elseif (is_tax()) { // タームアーカイブの場合
    $title = single_term_title('', false);
  } elseif (is_author()) { // 作者アーカイブの場合
    $title = get_the_author();
  } elseif (is_date()) { // 日付アーカイブの場合
    $title = '';
    if (get_query_var('year')) {
      $title .= get_query_var('year') . '年';
    }
    if (get_query_var('monthnum')) {
      $title .= get_query_var('monthnum') . '月';
    }
    if (get_query_var('day')) {
      $title .= get_query_var('day') . '日';
    }
  }
  return $title;
};
add_filter('get_the_archive_title', 'my_archive_title');

④パンくずリスト

設定 > Breadcrumb NavXT から「＞」にクラスを付与

PHP（template-partsフォルダ > breadcrumb.php）

<?php if (function_exists('bcn_display')) : ?>
    <!-- breadcrumb -->
    <div class="breadcrumb">
        <div class="breadcrumb-inner">
            <?php bcn_display(); //BreadcrumbNavXTのパンくずを表示するための記述 
            ?>
        </div>
    </div><!-- /breadcrumb -->
<?php endif; ?>

SCSS

.breadcrumb {
    margin: 13px auto 0;
    max-width: 1200px;

    @include mq('sp') {
        margin-top: 8px;
    }
}

.breadcrumb-inner {
    padding: 0 50px;
    font-size: 12px;

    @include mq('sp') {
        padding: 0 20px;
    }
}

.breadcrumb-home {

    span {
        color: #888888;
    }
}

.breadcrumb-icon {
    margin: 0 8px;
}

.post-root {

    span {
        color: #888888;
    }
}
<!-- パンくずリストを表示したいところに貼り付け -->
<?php get_template_part('template-parts/breadcrumb'); ?>

パンくずリストの文字列「ホーム」

Breadcrumb NavXT 設定 > 一般設定　から変更
→　デフォルトのままだとサイト名になる

パンくずリストの文字列「ニュース」

メニューの名前とパンくずリストで表示したい名前が違う場合
→　固定ページからタイトルを修正

メニューでの名前を変えずに、パンくずリストの名前だけ変更できる

まとめ

今回も卒業制作課題を進めました。

記事一覧ページの作り方がいまいちわからず今になって最初から作成しました。

結局のところ静的に作成してから動的に作り直したので、他のページとしていることはあまり変わらなかったです。

よくわからないといって放置していたのは良くはなかったかもしれません。

カテゴリー
上級編、卒業制作課題1

コメントを残す

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

前の記事
デイトラweb制作上級編　 DAY31~44⑭
2022年10月10日
次の記事
デイトラweb制作上級編　 DAY31~44⑯
2022年10月14日