【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤

前回まで

2019.05.20【記事ページの作成】自作ワードプレステーマの最低限を作る④

個別投稿ページを作る

今回変更するファイル,フォルダ

single.php
page.php
style.css

single.php

line5-24が新規追加部分です。

タイトル、サムネイル、本文の表示と

カテゴリリンク、前後記事への移動リンク、コメントを表示しています。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content">
      <?php
      if(have_posts()):
        while(have_posts()): the_post();
      ?>
          <h1><?php the_title(); ?></h1>
          <?php the_post_thumbnail( 'full' ); ?>
          <div class="blog-card-update-date"><?php the_time( 'Y.m.d' ); ?></div>
          <div class="entry_main">
            <?php the_content(); ?>
          </div>
          <div class="entry-categories-tags">
            <?php the_category(' '); ?>
          </div>
          <div class="page-transition">
            <?php next_post_link('%link', '&lt;&lt; 次の記事'); ?>
            <a href="<?php echo esc_url( home_url() ); ?>">トップ</a>
            <?php previous_post_link('%link', '前の記事 &gt;&gt;'); ?>
          </div>
          <?php comments_template(); ?>
      <?php endwhile; endif; ?>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

<?php

if(have_posts()):

while(have_posts()): the_post();

<?php the_post_thumbnail( 'full' ); ?>

<?php the_content(); ?>

</div>

<?php the_category(' '); ?>

</div>

<?php next_post_link('%link', '<< 次の記事'); ?>

<?php previous_post_link('%link', '前の記事 >>'); ?>

</div>

<?php comments_template(); ?>

<?php endwhile; endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

page.php

固定投稿ページは個別投稿ページとデザインを変えなようにするので、page.phpにはsingle.phpをコピペしてあげましょう。

style.css

/*コメントデザイン*/
.comment-author img {
  width: 30px;
}

/*コメントデザイン*/

.comment-author img {

width: 30px;

}

こんな感じのデザインが出来上がります。

現在のファイル構造

bone/
├ index.php/
├ style.css/
├ functions.php/
├ header.php/
├ sidebar.php/
├ footer.php/
├ single.php/
├ page.php/
├ 404.php/
├ search.php/
├ loop-main.php/
└ assets/
・・├ js/
・・├ css/
・・└ img/
・・・・└ default.jpg/