WordPressでオリジナルテーマを作ろう #8: 投稿ページと固定ページの作成

前回の続きです。

####single.phpの編集

single.phpにコードを追加します。

single.php

<?php get_header(); ?>
<div class="container">
    <div class="contents">
        //ここから
        <?php if(have_posts()): the_post(); ?>
            <article <?php post_class( 'article-content' ); ?>>
                <div class="article-info">
                    <!--カテゴリ-->
                    <?php if(has_category() ): ?>
                        <span class="cat-data">
                            <?php echo get_the_category_list( ' ' ); ?>
                        </span>
                    <?php endif; ?>
                    <!--投稿日-->
                    <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>
                </div>
                <!--タイトル-->
                <h1><?php the_title(); ?></h1>
                <!--アイキャッチ-->
                <div class="article-img">
                    <?php if( has_post_thumbnail() ): ?>
                        <?php the_post_thumbnail( 'large' ); ?>
                    <?php endif; ?>
                </div>
                <!--本文-->
                <?php the_content(); ?>
                <!--タグ-->
                <div class="article-tag">
                    <?php the_tags('<ul><li>タグ： </li><li>','</li><li>','</li></ul>'); ?>
                </div>
            </article>
        <?php endif; ?>
        //ここまで
    </div>
    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

ブラウザを確認します。

次にPC用のデザインを整えていきます。

style.css

.article-content {
  margin-bottom: 2rem;
}

.article-content .article-info {
  margin-bottom: .5rem;
}

.article-content .cat-data a {
  font-size: .8rem;
  margin-right: .5rem;
  padding: .1rem .5rem;
  text-decoration: none;
  color: #fff;
  background-color: #03162f;
}

.article-content .article-info .article-date,
.article-content .article-info .article-author {
  font-size: .8rem;
  display: inline-block;
  margin-right: .5rem;
  color: #888;
}

.article-content .article-info .article-author i {
  margin-right: .3rem;
}

.article-content p,
.article-content b,
.article-content table,
.article-content ul,
.article-content ol {
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 1px;
}

.article-content p,
.article-content img,
.article-content table,
.article-content ul,
.article-content ol {
  margin-bottom: 2rem;
}

.article-content h1 {
  font-size: 1.9rem;
  margin: 0 0 2rem;
  letter-spacing: 1px;
}

.article-content h2 {
  font-size: 1.7rem;
  margin: 3rem 0 2rem;
  padding: .4rem 0;
  letter-spacing: 1px;
  border-bottom: solid 5px #03162f;
}

.article-content h3 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1.8rem;
  padding: 0 1rem;
  letter-spacing: 1px;
  border-left: solid 7px #415671;
  background: transparent;
}

.article-content h4 {
  font-size: 1.3rem;
  margin: 2rem 0 1rem;
  letter-spacing: 1px;
}

.article-content h5 {
  font-size: 1.1rem;
  margin: 0 0 .3rem;
  letter-spacing: 1px;
}

.article-content .article-img {
  margin-bottom: 2rem;
}

.article-content .article-img img {
  display: block;
  margin: 0 auto;
}

.article-content ul {
  margin-left: 2rem;
  list-style: disc;
}

.article-content ol {
  margin-left: 2rem;
  list-style: decimal;
}

.article-content table {
  border-collapse: collapse;
}

.article-content th,
.article-content td {
  padding: .6rem;
  vertical-align: middle;
  border: 1px solid #ddd;
}
 
.article-content figure {
  max-width: 100%;
}

.article-tag {
  text-align: right;
}

.article-tag ul {
  font-size: 0;
  margin-bottom: 0;
}

.article-tag ul li {
  font-size: .9rem;
  display: inline-block;
  margin-right: .5rem;
  vertical-align: middle;
}

.article-tag ul li:last-child {
  margin-right: 0;
}

.article-tag ul li a {
  padding: .2rem .5rem;
  text-decoration: none;
  color: #000;
  border: 1px solid #000;
}

.article-tag ul li a:hover {
  opacity: .6;
}

ブラウザを更新します。（更新しても変化がない場合は、デベロッパーツールを開いた状態でリロードボタンを右クリックし、「キャッシュの消去とハード再読み込み」をクリックしてください）

次にスマートフォン用のデザインを記述します。

style.css

//@media(max-width: 600px)内に追記
.article-content h1 {
  font-size: 1.6rem;
}

.article-content h2 {
  font-size: 1.4rem;
}

.article-content h3 {
  font-size: 1.3rem;
}

.article-content h4 {
  font-size: 1.2rem;
}

ブラウザの幅を調節してレスポンシブ対応になっているかどうか確認してみてください。

####固定ページの作成

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

作成したらpage.phpを編集します。

page.php

<?php get_header(); ?>
<div class="container">
    <div class="contents">
        <?php if(have_posts()): the_post(); ?>
            <article <?php post_class( 'article-content' ); ?>>
                <!--タイトル-->
                <h1><?php the_title(); ?></h1>
                <!--本文-->
                <?php the_content(); ?>
                <!--タグ-->
                <div class="article-tag">
                    <?php the_tags('<ul><li>タグ： </li><li>','</li><li>','</li></ul>'); ?>
                </div>
            </article>
        <?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

固定ページは、お問い合わせやプロフィールなどを載せる際に利用することが多いので、必要に応じてカスタマイズしてください。

以上でsingle.phpとpage.phpの作成は完了です。

次回はSEO対策としてheader.phpにメタデータを記述していきます。

WordPressでオリジナルテーマを作ろう #8: SEO対策