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

HTML
スポンサーリンク

こんにちは朱夏です。

今回もWordPressテーマ作成やっていきます。
前回までで、トップページのデザインはほぼ完成しました。
今回は、投稿ページなどのリンク先が表示できるようにしてくところから始めます。

勉強させていただく動画はこちら。

それではやっていきます。

ファイル分割

ヘッダー、フッターサイドバーの3つの部分を、他のページでも使いまわせるように別ファイルに分割します。

分割する時のファイル名などをまとめておきます。

場所 ファイル名 テンプレートタグ
ヘッダー header.php <?php get_header(); ?>
フッター footer.php <?php get_footer(); ?>
サイドバー sidebar.php <?php get_sidebar(); ?>

 

ヘッダー部分をindex.phpから切り取って、header.phpへ張り付け、index.phpへは代わりにヘッダーのテンプレートタグを書きます。
フッター、サイドバーも同様に分割していきます。

1ファイルごとに確認しながら分割していくと、失敗した時修正が楽です。
プレビューで表示がおかしくなってなければ成功です。

 

投稿記事ページ

投稿記事を表示するためのsingle.phpの中身を書いていきます。
コードはこんな感じになりました。

      <!-- ヘッダー呼び出し -->
      <?php get_header(); ?>
      <!-- ヘッダー呼び出し END -->

      </header>
      <!----- ヘッダー END ----->

      <!----- メインコンテンツ ----->
      <main class="" style="background-color: beige;">
         <div class="container">
            <div class="row py-3 m-0">

               <div class="col-md-8 col-12 p-3">
                  
                  <!-- 投稿記事 -->

                     <!-- ループ -->
                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                        <div class="col-12 px-0">
                           <div class="p-3 bg-light shadow">
                              <!-- 記事タイトル -->
                              <h1 class="h2 text-center"><?php the_title(); ?></h1>
                              <!-- カテゴリー -->
                              <p class="text-center mb-0"><?php the_category( ' ' ); ?></p>
                              <!-- 日付 -->
                              <p class="text-center mb-0"><small class="text-muted"><?php the_time('Y/n/j'); ?> <?php the_time('G:i'); ?></small></p>
                           </div>
                        </div>
                        <div class="col-12 py-3 px-0">
                           <div class="bg-light shadow">
                              <div>
                                 <?php if ( has_post_thumbnail() ) : ?>
                                    <?php the_post_thumbnail( '', array( 'class' => 'img-fluid' ) ); ?>
                                 <?php else : ?>
                                    <img src="<?php echo get_template_directory_uri(); ?>/img/bg_digital_pattern_blue.jpg" class="card-img" alt="...">
                                 <?php endif; ?>
                                 <div class="text-left p-3"><?php the_content(); ?></div>
                              </div>
                           </div>
                        </div>
                     <?php endwhile; else : ?>
                        <p>記事がありません。</p>
                     <?php endif; ?>
                     <!-- ループ -->

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

               </div>
               
               <!-- サイドバー呼び出し -->
               <?php get_sidebar(); ?>
               <!-- サイドバー呼び出し -->
                  
            </div>
         </div>
      </main>
      <!----- メインコンテンツ END ----->

      <!-- フッター呼び出し -->
      <?php get_footer(); ?>
      <!-- フッター呼び出し END -->

 

投稿記事を1ページ表示にして、ピックアップの項目を削っています。
表示するとこんな感じになります。

 

これを1つ作っておくだけで、投稿ページ毎に記事の内容を切り替えてくれます。
これで管理画面から投稿できるようになりました。

 

固定ページ

固定ページの表示はpage.phpを書き換えます。
コードはこちらです。

      <!-- ヘッダー呼び出し -->
      <?php get_header(); ?>
      <!-- ヘッダー呼び出し END -->

      </header>
      <!----- ヘッダー END ----->

      <!----- メインコンテンツ ----->
      <main class="" style="background-color: beige;">
         <div class="container">
            <div class="row py-3 m-0">

               <div class="col-12 p-3">
                  
                  <!-- 投稿記事 -->

                     <!-- ループ -->
                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                        <div class="col-12 px-0">
                           <div class="p-3 bg-light shadow">
                              <!-- 記事タイトル -->
                              <h1 class="h2 text-center"><?php the_title(); ?></h1>
                              <!-- カテゴリー -->
                              <p class="text-center mb-0"><?php the_category( ' ' ); ?></p>
                              <!-- 日付 -->
                              <p class="text-center mb-0"><small class="text-muted"><?php the_time('Y/n/j'); ?> <?php the_time('G:i'); ?></small></p>
                           </div>
                        </div>
                        <div class="col-12 py-3 px-0">
                           <div class="bg-light shadow">
                              <div>
                                 <?php if ( has_post_thumbnail() ) : ?>
                                    <?php the_post_thumbnail( '', array( 'class' => 'img-fluid' ) ); ?>
                                 <?php else : ?>
                                    <img src="<?php echo get_template_directory_uri(); ?>/img/bg_digital_pattern_blue.jpg" class="card-img" alt="...">
                                 <?php endif; ?>
                                 <div class="text-left p-3"><?php the_content(); ?></div>
                              </div>
                           </div>
                        </div>
                     <?php endwhile; else : ?>
                        <p>記事がありません。</p>
                     <?php endif; ?>
                     <!-- ループ -->

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

               </div>
                  
            </div>
         </div>
      </main>
      <!----- メインコンテンツ END ----->

      <!-- フッター呼び出し -->
      <?php get_footer(); ?>
      <!-- フッター呼び出し END -->


 

こちらは投稿ページと同じですが、サイドバーを削って、記事の部分の横幅を広げています。
実行結果はこんな感じです。

 

かなりシンプルなデザインになりました。

あとがき

投稿ページと固定ページを作成しました。
これで、だいぶ完成に近づいてきました。
あと残っている作業は、細かい部分の作り込みや、検索結果の表示ページ、404ページを準備したりといったところでしょうか。

今回はここまでです。
次回もよろしくお願いします。

タイトルとURLをコピーしました