【WordPressテーマ】自作テーマ作成の記録　その６【2つ目】

PHP

2020.03.082020.01.12

こんにちは朱夏です。

WordPressテーマ自作やっていきます。
今回は、投稿ページ読み込みや固定ページ読み込みなどの対応をしていきたいと思います。

今回も勉強させていただきます。

それではやっていきましょう。

コード

先にコードを貼っておきます。

                  <!-- 投稿記事 -->
                  <div class="row">
                     <!-- ループ -->
                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                     <div class="col-lg-6 col-12 p-3">
                        <div class="card mb-3 shadow" style="max-width: 540px;">
                           <a href="<?php the_permalink(); ?>" class="stretched-link"></a>
                           <!-- <div class="row no-gutters"> -->
                              <div class="">
                                 <?php if ( has_post_thumbnail() ) : ?>
                                    <?php the_post_thumbnail( '', array( 'class' => 'img-fluid' ) ); ?>
                                 <?php else : ?>
                                    <img src="<?php echo get_template_directory_uri(); ?>/img/S__26001416.jpg" class="card-img" alt="...">
                                 <?php endif; ?>
                              </div>
                              <div class="">
                                 <div class="card-body">
                                    <h1 class="h5 card-title"><?php the_title(); ?></h1>
                                    <p><?php the_category( ' ' ); ?></p>
                                    <p class="card-text"><?php the_excerpt(); ?></p>
                                    <p class="card-text"><small class="text-muted"><?php the_time('Y/n/j'); ?> <?php the_time('G:i'); ?></small></p>
                                 </div>
                              </div>
                           <!-- </div> -->
                        </div>
                     </div>
                     <?php endwhile; else : ?>
                        <p>記事がありません。</p>
                     <?php endif; ?>
                     <!-- ループ -->

                  </div>
                  <!-- 投稿記事 END -->

投稿記事を書くと自動で一覧に表示されるようになりました。
やっていることは以下のような感じです。