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

卒業制作課題パターン3 11日目

home.php

category.php

「投稿一覧ページ」のテンプレートファイル↓

(引用元:https://wpdocs.osdn.jp/ )

「カテゴリーページ」のテンプレートファイル↓

投稿一覧ページの作成(home.php)

固定ページ でタイトル → お知らせ、スラッグ → news の固定ページを作る

設定 > 表示設定 から投稿ページを作成した固定ページに変更

home.php↓

PHP(メイン)

<!-- メイン -->
<div class="p-home-main">
    <?php
    if (have_posts()) :
    ?>
        <ul class="p-home-main__items">
            <?php
            while (have_posts()) :
                the_post();
            ?>
                <li class="p-home-main__item">
                    <a href="<?php the_permalink(); ?>">
                        <?php
                        $category = get_the_category();
                        if ($category[0]) {
                            echo '<span class="p-home-main__item-cat">' . $category[0]->cat_name . '</span>';
                        }
                        ?>
                        <div class="p-home-main__item-image-wrapper">
                            <div class="p-home-main__item-image"><?php the_post_thumbnail('large'); ?></div>
                        </div>
                        <div class="p-home-main__item-body">
                            <p class="p-home-main__item-title"><?php the_title(); ?></p>
                            <time class="p-home-main__item-publish" datetime="<?php the_time('c'); ?>"><?php the_time('Y.n.j'); ?></time>
                        </div>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>
    <?php endif; ?>
    <!-- ページネーション -->
    <?php
    $args = array(
        'mid_size' => 4,
        'prev_text' => ' ',
        'next_text' => ' ',
        'screen_reader_text' => ' ',
    );
    the_posts_pagination($args);
    ?>
</div>

PHP(サイドバー)

<!-- サイドバー -->
<aside class="p-home-sidebar">
    <div class="p-home-sidebar__new">
        <div class="p-home-sidebar__new-inner">
            <div class="p-home-sidebar__new-title">最近の記事</div>
            <ul class="p-home-sidebar__new-items">
                <?php
                $information = get_posts(array(
                    'posts_per_page' => 5,
                    'order' => 'DESK'
                ));
                ?>
                <?php
                foreach ($information as $post) :
                    setup_postdata($post);
                ?>
                    <li class="p-home-sidebar__new-item">
                        <a href="#">
                            <div class="p-home-sidebar__new-item-image-wrapper">
                                <div class="p-home-sidebar__new-item-image"><?php the_post_thumbnail('large'); ?></div>
                            </div>
                            <div class="p-home-sidebar__new-item-body">
                                <p class="p-home-sidebar__new-item-title">
                                    <!-- 文字数制限 -->
                                    <?php
                                    $text = get_the_title();
                                    $limit = 29;
                                    if (mb_strlen($text) > $limit) {
                                        $title = mb_substr($text, 0, $limit);
                                        echo $title . '...';
                                    } else {
                                        echo $text;
                                    }
                                    ?>
                                </p>
                                <time class="p-home-sidebar__new-item-publish" datetime="<?php the_time('c'); ?>"><?php the_time('Y.n.j'); ?></time>
                            </div>
                        </a>
                    </li>
                <?php
                endforeach;
                wp_reset_postdata();
                ?>
            </ul>
        </div>
    </div>
    <div class="p-home-sidebar__category">
        <div class="p-home-sidebar__category-inner">
            <div class="p-home-sidebar__category-title">カテゴリ</div>
            <ul class="p-home-sidebar__category-items">
                <?php
                $categories = get_categories();
                foreach ($categories as $category) {
                    echo '<li class="p-home-sidebar__category-item"><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
                }
                ?>
            </ul>
        </div>
    </div>
</aside>

カテゴリーページの作成(category.php)

PHP

<!-- アーカイブタイトル -->
<div class="p-home-main__head"><?php the_archive_title(); ?></div>

<!-- メインとサイドバーは同じ -->

PHP(functions.php)

/**
 * アーカイブタイトル書き換え
 */
function my_archive_title($title)
{
  if (is_category()) { // カテゴリーアーカイブの場合
    $title = single_cat_title('', false);
  }
  return $title;
};
add_filter('get_the_archive_title', 'my_archive_title');

まとめ

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

この辺りは他の卒業制作課題でも作成したことがあるのでスムーズに作れました。

たまにテンプレートファイルの問題でカスタム投稿とごちゃごちゃになりますが。。。

コメントを残す

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