WordPressでオリジナルテーマを作ろう #10: トップページとアーカイブページの作成

前回の続きです。

####トップページの表示

index.phpをコピーし、新たにhome.phpを作成します。

home.php

//<div class="container">内に追記
<?php if ( !is_paged()): ?>
    <div class="home-top">
        <?php if(have_posts()): the_post(); ?>
            <article <?php post_class( 'article-list article-top' ); ?>>
                <a href="<?php the_permalink(); ?>">
                    <div class="img-wrap">
                        <!--画像-->
                        <?php if( has_post_thumbnail() ): ?>
                            <?php the_post_thumbnail('full'); ?>
                        <?php else: ?>
                            <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
                        <?php endif; ?>
                        <!--カテゴリ-->
                        <?php if (!is_category() && has_category()): ?>
                            <span class="cat-data">
                                <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
                            </span>
                        <?php endif; ?>
                    </div>
                    <div class="text">
                        <span class="new-post"><i class="fas fa-star"></i> NEW <i class="fas fa-star"></i></span>
                        <!--タイトル-->
                        <h2><?php the_title(); ?></h2>
                        <!--投稿日-->
                        <span class="article-date">
                            <i class="far fa-clock"></i>
                            <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
                                <?php echo get_the_date(); ?>
                            </time>
                        </span>
                        <span class="article-author">
                            <i class="fas fa-user"></i><?php the_author(); ?>
                        </span>
                        <!--抜粋-->
                        <?php the_excerpt(); ?>
                    </div>
                </a>
            </article>
        <?php endif; ?>
    </div>
<?php endif;?>

次にトップページ用のCSSを記述します。

style.css

	
.home-top .article-top .img-wrap img {
  width: 600px;
  height: 400px;
}
 
.home-top .article-top .text {
  margin-left: 630px;
}
 
.home-top .article-top .new-post {
  font-weight: bold;
  display: block;
  margin-bottom: .5rem;
  color: #f00;
}
 
.home-top .article-top .text h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
 
.home-top .article-top .text .article-date,
.home-top .article-top .text .cat-data {
  margin-bottom: 1rem;
}
 
@media(max-width: 1024px) {
  .home-top .article-top .img-wrap img {
    width: 420px;
    height: 280px;
  }
 
  .home-top .article-top .text {
    margin-left: 440px;
  }
}
 
@media(max-width: 800px) {
  .home-top .article-top .img-wrap {
    float: none;
  }
 
  .home-top .article-top .img-wrap img {
    width: 100%;
    height: 60vw;
  }
 
  .home-top .article-top .text {
    margin-left: 0;
  }
 
  .home-top .article-top .new-post,
  .home-top .article-top .text h2,
  .home-top .article-top .text .article-date,
  .home-top .article-top .text .cat-data {
    margin-bottom: 0;
  }
}

サイトを確認します。

上の画面のように表示されれば、トップページは完成です。

####アーカイブページの表示

index.phpをコピーし、新たにarchive.phpを作成します。

archive.php

//<div class="contents">内に追記
<div class="archive-top">
  <?php
  if(is_category()):
    $archive_title = single_cat_title('', false).'の記事';
    $archive_description = category_description();
  elseif(is_tag()):
    $archive_title = single_cat_title('', false).'の記事';
    $archive_description = tag_description();
  elseif(is_year()):
    $archive_title = get_the_time("Y年").'の記事';
  elseif(is_month()):
    $archive_title = get_the_time("Y年m月").'の記事';
  elseif(is_day()):
    $archive_title = get_the_time("Y年m月d日").'の記事';
  elseif(is_author()):
    $author_id = get_query_var('author');
    $author_name = get_the_author_meta( 'display_name', $author_id );
    $archive_title = $author_name.'が投稿した記事一覧';
  endif;
 
  if(!empty($archive_title)):
    echo '<h1>'.$archive_title.'</h1>';
  endif;
 
  if(!empty($archive_description)):
    echo '<p>'.$archive_description.'</p>';
  endif;
  ?>
</div>

次にアーカイブページ用のCSSを記述します。

style.css

.archive-top h1 {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}
 
.archive-top p {
  font-size: .875rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
 
@media(max-width: 600px) {
  .archive-top h1 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
 
  .archive-top p {
    font-size: .8125rem;
    margin-bottom: 1rem;
  }
}

サイトを確認します。好きなカテゴリやタグを選択してみてください。

上の画面のように表示されれば、アーカイブページは完成です。

以上で、WordPressオリジナルテーマは完成です。

作成したテーマをもとに自分好みに機能やデザインをカスタマイズしてみてください。

ソースコードはこちらで確認できます。