ポートフォリオサイト公開中

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

wp自作テーマの最低限

前回まで

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

個別投稿ページを作る

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

  • 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(); ?>

 page.php

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

style.css

/*コメントデザイン*/
.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/

自作ワードプレステーマの最低限を作るシリーズ一覧

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る① wp自作テーマの最低限 【index.phpを分割する】自作ワードプレステーマの最低限を作る② wp自作テーマの最低限 【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③ wp自作テーマの最低限 【記事ページの作成】自作ワードプレステーマの最低限を作る④ wp自作テーマの最低限 【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤ wp自作テーマの最低限 【検索ページ, カテゴリページの作成】自作ワードプレステーマの最低限を作る⑥ wp自作テーマの最低限 【まとめ】自作ワードプレステーマの最低限を作る⑦

コメントを残す

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